动效相关问题

　　一、动效的作用?

　　总结下来就是：友好、有趣、反馈、过渡、引导

　　在可用性良好的前提下，通过细节设计和交互方式创新为产品增加亮点，可以带来更惊喜的体验和表达产品的气质与态度。

　　较少用户在操作等待过程中的焦虑。

　　通过动效的方式来进行现实世界的模拟并且不需要任何提示，迎合用户的意识认知。使产品的交互方式更接近真实世界。增强了用户对应用的操纵感和带入感。

　　引导作用就是通过动效能够帮助用户使用功能，对功能的方向、位置、唤出操作、路径等进行暗示和指导，方便用户在最短的时间内来学会操作APP里的一些功能。

　　我们可以通过动效的设计，来告诉用户当前APP正在处在那种状态，可以通过平移、放大、缩小删除等等动效的方式来给用户做及时的反馈。

　　让过度尽量的流畅，使得界面与界面之间、界面上元素的出现和消失都尽量的流畅，通过大小、位置和透明度的变化，使用户和产品的交互过程更流畅。

　　二、动效的实现工具?

　　常见的动效制作工具：PS 、AE、 principle

　　其他一些动效制作工具： Flinto、 keynote、Hype 3、Origami

　　三、动效做完后怎么和前端配合实现?

　　配合模式取决于动效形式的不同，配合的方式也有所区别。

　　1. 啥也不提供，沟通就行，提供动效展示效果

　　例如一个圆球的缩放动画，或者一个正方形的旋转动画，设计师只需要把自己的思路告诉前端即可，如果他实在不明白也可以提供一个用于预览的动效展示。

　　2. 只需提供一张png素材图，沟通，并提供动效展示效果

　　类似下图的“加载中”效果

　　3. 提供GIF格式

　　做好的动效导出gif格式提供给前端直接使用。

　　4. 提供PNG序列

　　做好的动效导出png序列图片(一帧一张图)，给前端，让其安装一定的速度进行依次播放。

　　5. 提供SVGA格式

　　常见于直播类产品刷礼物动效效果制作。制作工具SVGA-AEConverter-master

　　6. 提供JSON文件格式

　　Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画。 制作工具Bodymovin。

　　使用教程https://www.zcool.com.cn/article/ZOTE3ODM2.html

　　更多关于“UI培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。