视频课程地址
一、产品动效存在的价值
01. 我们为什么要做动效设计
1.增加体验舒适度：让用户认知过程更自然。
2.增加界面活力：第一时间吸引注意力，突出重点。
3.描述层级关系：体现元素之间的层级与空间关系。
4.提供反馈、明确意向：助力交互体验。
5.加深品牌感：加深品牌图形的印象，与用户互动产生共鸣。
02. 常见动效的分类与解析
转场类
转场类动效用于层级跳转或场景切换，除入场和离场动效外经常辅以缩放、透度旋转等平滑的效果，帮助用户理解界面间的变化和层级关系，也让界面更加真实动。避免场景的瞬间切换导致用户产生变化盲视(视觉刺激的突兀变化会阻止用户注意到新的信息)。
展示类
展示类动效用于突出产品核心功能和品牌调性，界面信息按照一定的规律呈现引导用户的视觉流向，帮助用户更好的理解产品,能够在第一眼吸引住用户。常见的如企业或产品的官网首页,app闪屏等能够对产品起到很好的宣传作用。
引导类
引导类动效通过界面中某些元素的变化，引起用户注意或引导用户进行操作，避免用户困惑,能够自然而然的聚焦用户视线，降低其他视觉元素的干扰。
反馈类
反馈类动效用于对用户的操作及时给出相应的反馈，如：悬浮、点击、拖拽等，以视觉的形式展现给用户，告知用户系统正在与用户发生交互，让用户产生一定的心理预期。
二、优秀动效重要要素
01. 设计动效的准确切入点
此时交互和视觉均已定稿，动效形式会因定稿的内容受到限制，设计上就会出现牵强，动效失去了功能性，为了动效而动效。
02. 根据产品特性定义动效风格（情感化动效）
现如今市场上的产品种类众多，常见如安全、社交、游戏、新闻、财经、效率、体育、工具、商务等等，都有自身特有的用户群体。
因此在设计动效时，除了要考虑动效的基本设计原则外，还要考虑产品本身的特性和动效带给用户的心理感受。
03. 遵循物理运动法则
说到物理运动法则，不得不提到牛顿三大定律。但现实世界中存在着摩擦力、空气阻力等外力因素，物体会做加速或减速运动，人类也养成了这样的认知。因此在动效设计时，物体的运动要符合现实世界的运动规律，符合物理运动法则的动效才符合用户的感知。
最常用的缓动曲线包括缓入、缓出两种形式，缓入为加速曲线，缓出为减速曲线。考虑到速度变化对用户心理和注意力的影响，(不断减速的物体会吸引用户的注意力,不断加速的物体会失去用户的注意力)因此入场动效要先快后慢，持续吸引用户视线，出场动效要先慢后快。
04. 动效的响应时长和持续时长
响应时长：指从用户执行操作到反馈出现的间隔时长。
- 对于由用户操作直接触发的反馈，理想的响应时间应该控制在100ms(0.1s)内;
- 对于由用户操作间接触发的反馈，响应时长可允许达到1秒左右，不可超过2秒无反馈;
- 当反馈时间为2-9秒时，可使用循环的加载样式(如:常见的菊花转) ;
- 当反馈时间超过10秒时，须使用带有进度指示的加载样式(如已加载了60%,还剩30秒)。
持续时间：从动效开始到结束的时长。
- 交互微动效的持续时间不宜过长，以避免浪费用户时间，影响用户的阅读和操作效率，其持续时间一般不超过0.5秒(加载动效除外);
- 较快的动效更容 易吸引用户注意力，也更节省时间;
- 较慢的动效较少分散用户注意力，更适用于非用户直接触发的场景;
- 出场动效一般比进场动效更快。
05. 克制过分的动效设计
尽量避免夸张的动效,做有意义的事，不去做太多的修饰而干扰用户。
如右图例子在展开时，更注重的是菜单的内容，而右侧的图标切换并不是主要的元素，不需要过度强调去分散用户的注意。只需在不经意间切换,明确指示变化即可。
06. 动效需要反应产品品牌调性
每个产品都有自己的品牌调性，动效设计要符合产品的品牌调性。对产品来说，符合品牌调性的动效能够保持与其他产品的差异化，提升产品的B格，也能够在用户心中形成品牌效应。
三、怎样能让开发很好还原动效效果
PNG序列或者是GIF动图存在的问题
- 文件资源过大
- 不同机型适配不便
- GIF格式色彩位深度限制
01. LOTTIE介绍
Lottie是一个iOS、Android和React Native库，可实时渲染After Effects动画， 从而使应用程序可以像使用静态图像一样轻松地使用动画。使用After Effect的扩展插件Bodymovie导出json格式的文件
02. 动效设计文档的输出方法
Inspector Spacetime
强烈推荐Google设计团队开发的动效标注导出插件，能够快速根据关键帧，快速列出缓动的贝塞尔曲线、位移坐标等。
英文速查
| Sharable Data | 共享数据 |
|---|---|
| Layer name | 图层名称 |
| Property name | 物业名称 |
| Delay time (live value) | 延迟时间(实时值) |
| Duration of keyframe pair | 关键帧对的持续时间 |
| Value change | 价值变化 |
| Cubic Bezier interpolation curve | 三次贝塞尔曲线插值曲线 |
四、总结&思考
5G时代的来临，网络变得更加顺畅，用户对于产品的性能或是体验，都有着更高的期望，动效是一个很好提升产品体验的模块，希望上述内容能够让大家对动效的了解更加全面。
