动效相关问题
一、动效的作用?
总结下来就是：友好、有趣、反馈、过渡、引导
在可用性良好的前提下，通过细节设计和交互方式创新为产品增加亮点，可以带来更惊喜的体验和表达产品的气质与态度。
较少用户在操作等待过程中的焦虑。
通过动效的方式来进行现实世界的模拟并且不需要任何提示，迎合用户的意识认知。使产品的交互方式更接近真实世界。增强了用户对应用的操纵感和带入感。
引导作用就是通过动效能够帮助用户使用功能，对功能的方向、位置、唤出操作、路径等进行暗示和指导，方便用户在最短的时间内来学会操作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万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。
京公网安备 11010802030320号