十分钟学会制作动态Demo

时间:2021-10-28 来源:未知网络 作者:996建站网

一、设计师为什么要会做动态Demo?1、提高沟通协作效率

日常工作中,如果只是用文字和图片来表达Demo的动态逻辑,简单一些的效果,比较容易表达。但一些相对较为复杂的效果,就比较困难了。如下图,是在某项目中的模块动态交互说明,不知道这样表达,是否你和我也会一样,觉得不够直观,而且也很难想象到具体会是什么样的。

十分钟学会制作动态Demo插图

同时在理解图片和文字的表述上,每个人可能都会有自己的理解方式,很容易造成双方理解不一致的情况,有时可能沟通很久,都没办法让对方清晰的理解。

因此为避免问题,快速的将动态的Demo真实的表达出来,会更直观的说明。同时一些流程的交互逻辑,还可上手体验,也是介绍方案最佳的有效解决办法,间接提高双方工作的协同效率。

2、帮助思考细节、明确逻辑

如果你有过制作Demo的经历,那么你一定会遇到过,在实际制作的过程中,暴露出没有考虑到的问题。比如弹窗的弹出,是从页面正中心位置弹出?还是从点击位弹出?弹出的效果是从小到大,还是会有一些弹性值?先放大再缩小?再比如,具体的动效逻辑,什么时候开始动,什么时候不动,触发的逻辑是什么,动画出现单次还是始终循环?这些只有在制作实际效果的时候,才会容易让人静下心来仔细思考,同时也会避免在上线前走查时发现问题,却来不急修改和调整。

3、告别“天马行空”

你是否曾经介绍一些动态效果方案,被开发小哥吐槽过于“异想天开”?或者被对方指责方案想的不够透彻,结果碰一鼻子灰,最终以实现不了而告终。因此与其“天马行空”的阔谈,不如直接做出来,给他看。

4、扩充技能

这一点就不用细说了,“十八般武艺”,样样精通,一定是你做设计师道路上的加分项。

以上几点,充分能说明设计师掌握动态Demo制作技能的必要性,具体我们应该用什么样的工具呢?

二、用什么工具?1、依据使用场景选用

关于制作软件,如今应用市场有太多太多,个人认为,对于交互设计师来说,能够兼容动效和可交互原型两种使用场景的软件,是最佳选项。而对于视觉同学来说,动效的需求会更大,需要能够制作出更细腻的效果。因此不同的应用场景,不同的岗位,适合的软件也不同。网上有很多相关资料,大家可以自行根据需求搜索。我个人推荐,其实不用各个软件都要学会,掌握1~2个即可,下面根据不同的使用场景推荐三个软件给大家。

1)复杂动效推荐(可导出代码)

个人推荐大家用强大的AE,交互设计师也可以探索学习,但AE不能够制作可交互Demo,视觉同学属于必备技能。视频特效,MG动画、UI动效等等,都是可以使用AE制作,网上有很多教程,这里就不细说了,总之,掌握AE,所有需要动的“东西”都能做。而且针对UI动效,AE里设计的动画导出svg / canvas / html + js,开发可以直接复制粘贴使用。

十分钟学会制作动态Demo插图12)简单动效&可交互原型推荐(不能导出代码)

Principle是被大家公认的轻量化、快速化制作动态Demo的最佳工具,它能够轻易实现原型制作和简单的动效,也是sketch的最佳伴侣,如果大家日常用sketch输出的话,快速输出动态Demo,用它是最好不过了,可以直接在sketch将图层复制过来,无需切图导出。

当前的缺点是无法将制作完成的Demo、动态效果直接转成代码,尤其是弹性曲线,具体参数,还要前端同学细致调整,更多偏设计思维。如果后续能够直接导成代码就更加方便了,当然非开发者思维,无需代码基础,让设计师高效快速的表达自己的想法,也是这款软件的优点。

十分钟学会制作动态Demo插图23)全能“选手”Origami(可导出代码)

十分钟学会制作动态Demo插图3

Origami可以完成超强难度、复杂、完整的任何动态Demo,这款软件需要一些代码基础,整体制作的逻辑也是偏开发者思维,大家可以尝试一下,好处就是可以直接看到代码,方便开发同学还原。

以上三款软件如果全能掌握的话,所有动态Demo的需求就都不在话下了,当然还有更多软件,但个人使用经验来看,更推荐上面讲述的三款,而且更强烈优先推荐Principle,非常易上手、也是设计者思维,无需插件,很多转场效果,都能够快速调用,会让你在日常工作更加高效的制作动态的Demo。

交互原型制作完成后,不仅可以上手操作,还可以录屏,生成操作视频,几乎能够囊括我们日常工作中的大部分需求。无论对交互设计师还是视觉设计师,都应该是一款必会软件。为了能让大家快速上手动态Demo的制作,下面我们就一起看看Principle具体都能实现哪些效果,以及如何操作。

2、Principle能够实现的效果
1)单个模块的动态效果

比如文字/图片轮播、图形变换、出入场效果等单个模块的动态效果,principle都可以完全胜任,如下图所示案例,都是用principle一分钟搞定的。

十分钟学会制作动态Demo插图4

2)流程逻辑演示

页面与页面之间的点击跳转关系,或者点击操作之后的反馈,同样也可使用,如下图案例。

十分钟学会制作动态Demo插图4

3)交互事件行为反馈

我们都知道除了常见的交互行为事件点击之外,还有滑动、拖拽、长按等等等,这些操作引申出的页面反馈,如下图,页面滑动时,锚点导航的出现,侧边悬浮和底部导航随着页面向下浏览隐藏,主会场icon的变化成返回顶部的按钮等。

十分钟学会制作动态Demo插图4

上述三个案例都是通过principle实现的,不知道是否能够满足大家的日常工作需要呢?我们就用上述案例,来教大家如何使用。

三、如何使用Principle?
1、关于界面

如下图。软件界面除了最右侧的预览区,剩下其他区域都是编辑区域。工具栏、属性栏是调整相关参数的,与sketch基本相同。

十分钟学会制作动态Demo插图3

1)画板

画板在Principle是尤为重要的,两个画板通过“交互事件”相互之间联系起来,就会让其中命名相同的元素发生变化。如果不在画板里编辑或者画板没有联系起来,是没办法实现动态效果的。

2)交互行为选择区

交互行为选择区是连接两个画板之间的关键“桥梁”,制作动效或者跳转关系都会用到它,如下图。

十分钟学会制作动态Demo插图3

通过“交互事件”的选择,来决定画板之间的关系。比如,如果是做动效,那么就是选择“自动Auto”选项,将两个画板连接起来,然后鼠标悬停在预览区,就能够发现变化。如果是点击跳转,那么就选择“点击Tap”选项连接画板。在预览区就可以实际的操作了。连接的的起点,可以是第一个画板的元素,也可是第一个整个画板,但是终点都是另一个画板。

3)效果工具

效果工具是重中之重,如下图,它是你动态Demo制作的核心工具,关于效果工具的使用,后文两个关键点会详细讲述。

十分钟学会制作动态Demo插图3

4)预览区

预览区上方摄像头按钮,就是录制Demo的地方,点击之后,直接录制。动效可以直接显示在鼠标悬停在下方的页面区域。交互原型,操作的过程就会录制下来,最后保存选择需要的格式。

十分钟学会制作动态Demo插图3

2、两个关键点

使用principle,要记住如下两个关键点,掌握这两个关键点,也就掌握了principle制作动态Demo的原理。

1)关键点1 :明确变量

在制作之前,我们要明确,是要做单个模块的动态变化,还是某个元素达到什么样的状态,联动其他模块发生相应的变化。如果是单个模块的动态变化,比如正方形变成圆形,或者元素放大缩小一类,我们用到效果工具里的“动效”,交互事件用到的“自动”,然后将两个画板连接起来,来实现想要的效果。最后点击“动效”,调整元素变化的曲线,以及中间过度持续的时间,如下图。(后文有视频的详细演示)

十分钟学会制作动态Demo插图5

如果是某个元素达到什么样的状态,联动其他模块发生相应的变化,那么此时就需要用到“联动”,比如,前面案例讲到的页面滑动时,锚点导航的出现。然后在上方的图层列表里,调整对应图层相应的变化,轨道关系类似AE中的轨道,就可以实现了。(后文有视频的详细演示)

十分钟学会制作动态Demo插图3

如果这两个都不是,只是做简单的跳转关系,那么就不需要用到效果工具,只需用到交互事件将画板或者元素连接起来即可,明确这一点,首先你就不会使用错工具。

2)关键点2:命好命名

命名在Principle是非常重要的一个环节。如果要从元素1变换到元素2,二者在两个不同画板的命名要保持相同,这样Principle才会理解成,二者是同一内容,在画板的跳转过程,就会发生变化。

如果画板跳转的过程中,不希望元素变化,那么需要保证该元素在两个画板的位置相同,内容相同,以及命名也要相同,否则当跳转到新的画板,“元素”找不到相同的“同学”,就会消失。

掌握以上两个关键点,大家就可以制作动态demo了。下面我们结合前面讲到的案例,示范两个给大家,情请看视频。

四、案例实操案例1:单个模块的动态变化十分钟学会制作动态Demo插图6https://www.zhihu.com/video/1174323984908193792案例2:操作联动十分钟学会制作动态Demo插图6https://www.zhihu.com/video/1174324065081974784五、总结1、做有意义的动态Demo

会做动态的Demo虽好,但并不是所有的项目都需要做,设计师也不能盲目的为了展示自己的技能。简单跳转逻辑也要输出可交互的Demo,在我看来,是完全没意义的。做Demo是为了更好的让对方理解我们的方案,并不是炫技。当然对于一些动效的表达,可以尝试。但一些约定俗称的效果,比如上下滚动,完全是没必要做出来,浪费时间。

2、学会取舍

一个页面有用酷炫流畅的动效自然是最好的结果,但有时面临开发资源有限,兼容页面性能等问题,我们不得不要在某些程度上做取舍,此时就要我们设计师来评估具体的优先级。

重点要看所要表达的内容是否有真实内容的传递,如果仅是锦上添花的作用,那么优先级相对可以滞后,如果有明确的关系传递,或者空间上的扩充,有真实明确的信息传达,那么就要保留。

如果遇到兼容性问题,一些动态效果影响到了页面卡顿,针对低配机型,我们可以考虑多版本方案,定向投放。

3、输出动态DEMO需要注意什么?

文档与动态演示配合输出,动态demo是展示逻辑、效果最佳的呈现形式,但并不是展示方案多种状态、需要输出哪些页面的最佳选择。因此输出动态的Demo的同时,静态的稿件也需要一并配合输出,避免到了开发阶段,要不断的补图。

好了,以上就是关于如何快速制作动态demo的全部内容,内容有待完善,如有不足,欢迎大家指正,交流。关于软件Principle自身也很强大,今日分享的也只是其中的皮毛,帮助大家快速入门,理解其中的原理,如果有感兴趣的同学,后续可以探索更多功能。

十分钟学会制作动态Demo插图7

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序