![]()
Part1
为什么要做动效设计？
对于用户而言:
动效设计可以引起用户的注意；便于用户理解，减少认知成本；产品有创新体验，增加代入感；用户的操作能够及时反馈，可以减少用户焦虑感、失落感
对产品而言:
动效设计可以清晰表达产品的层级关系，使界面衔接更加自然；提供运营视觉焦点，引导用户操作；提升产品易用性，增加用户粘性；提升品质和竞争力
![]()
我们日常工作中可能会经常遇到落地难的问题，其实有以下两方面原因：
![]()
了解了原因后，我们该如何高效地推动动效落地？我们可以从情感化动效、交互型动效两方面去思考
![]()
Part 2
情感化动效的落地方法
情感化动效偏向于感性层面，主要为了增加产品的趣味和品牌性。情感化动效大多运用于产品界面视觉部分需要强调的地方、产品活动运营等。例如：引导页、icon标签、banner、下拉刷新特殊的差异化动效，空白页等，这类动效的交付主要需提供切图
![]()
01 PNG序列帧
帧数越多、效果越流畅，生成动画帧数不小于8帧，一般使用帧数为24帧![]()
PNG序列帧优势：
图片可以无损压缩，清晰度高；支持Alpha通道、半透明的微妙过度；支持24位真彩色，承载更丰富的颜色细节
02 GIF
相比较静态的图片更具有表达力，且承载的内容也会更多一些，加上它对PC， Mactiontosh 和Android、iOS等多种平台支持。同时也是设计师接触最多的动效格式
![]()
（图片来源于网络）
GIF 的优势：
兼容性好，能够被所有浏览器和系统支持；浏览器原生支持，直接通过<img>标签即可插入页面
导出 GIF 的 3 种方法
![]()
影响 GIF 大小的 4 个因素
![]()
每秒帧数越多，动作越流畅。捕捉动态视频时，此数值越高越好，同时占用的内存也越大
![]()
动画总时长代表组成动画的静态图片总量，通过改变伸缩的数值，可以调整动画的总时长。需要在AE里将做好的动画设置为预合成，并截取到动画时长，然后改变伸缩数值
![]()
默认为256色，可以通过改变色板颜色数量去调节最终GIF的大小，颜色越少，GIF的质量越低
![]()
![]()
如何控制GIF的白边：
导出带有透明度的GIF可能会出现白边和锯齿，因此如果在一些纯色背景情况下考虑连同纯色背景一起导出默认的扩散透明度仿色改为杂色透明度仿色，这样就可以大大优化白边/锯齿
![]()
![]()
03 APNG/Web
![]()
APNG/WebP 优势：
APNG和WebP图片可无损压缩，精度会更高；支持Alpha通道；支持24位真彩色；iOS8以上原生支持；APNG和WebP文件大小相对GIF分别减少30%和50%
生成APNG/WebP的方法
![]()
04 JSON
在AE里通过bodymovin插件导出JSON文件进行交付
![]()
（图片来源于网络）
Android、iOS、WebP多端支持；适用于扁平、路径的矢量风格；支持24位真彩色；可以设置进度、绑定手势
JSON 导出方法
![]()
因为lottie 很多效果不支持，导出JSON文件后可以通过下面的网站进行预览和测试https://lottiefiles.com/preview
![]()
在做lottie类适量动画时候，我们要清楚知道哪些效果插件是可以实现的https://airbnb.io/lottie/#/supported-features
![]()
05 SVGA
SVGA是YY直播团队开源的一种跨平台的动画格式，同时兼容iOS、Android、Web，它的特点是使用简单，性能卓越，同时让开发和动画分工明确，各自专注在自己的领域，减少沟通成本，提升整体研发效率
![]()
（图片来源于网络）
SVGA 优势
Android、iOS、WebP多端支持；2D位图等风格动画完美实现；可以记录关键帧，过程可复用；支持音频播放
控制SVGA大小的 4 种方法
画布越大，文件就越大，在UI界面中我们一般设置750*1624 画板，但实际上并不会用到全屏动画，这个时候我们需要尽量缩小画板，建议尺寸为690*1209，这个尺寸能够基本满足所有移动设备的分辨率大小SVGA转换器会在输出的时候强制设置为60帧，这里建议将帧数设置成能被60整除的帧数，一般15帧既可以满足常规动画效果。部分为了更流畅的效果，可以设置成30帧
将动画输出成PNG序列，可以针对动画进行错帧导出，这样可以减少SVGA的大小。初始帧和最后一帧最好是同一帧数，或者整一个是循环动画
素材整体大小会影响SVGA的大小，建议在制作动画前，将素材压缩大小。
![]()
Part 3
交互型动效的落地方法
交互型动效主要体现在界面间转换和界面内元素的交互反馈。而效果就表现在触发与结束的过程中，展示清晰的层级关系、自然的引入与结束。交互型动效主要应用于产品界面与界面之间的转场，界面中用户的操作反馈。例：TAB切换、弹框、二级导航切换、下拉刷新，页面加载/刷新等，这类动效的交付主要需要提供动效标注图。部分需提供切图
01 交互型动效标注三要素
![]()
02 变化
变化是位移、旋转、缩放、不透明度、色值等参数值的变化。只要我们准确的描述出动效变化前后的参数，就可以准确的完成开发对接
03 时间
时间是对动效每个元素时间的设置，但是由于我们所设置的时间和开发设置的代码时间有区别。所以，我们就需要理解我们时间和开发时间的换算，在AE中时间是用帧计算，而开发代码设置时间1s=1000ms
![]()
04 差值
差值是在动效设置中的贝塞尔曲线，描述的是物体运动时的变化数值随时间的变化曲线。在动效中，同样的变化，同样的时间。赋予不同变化的曲线，最终所呈现出的动效效果也是不一样的。同样的我们设置好贝塞尔曲线，需要借助于AE中的FLOW插件获取到数值，标注给开发。
![]()
05 动效标注规范
触发条件：交互触发的条件（手势，点击，长按，滑动等规则）属 性：位移、旋转、缩放、透明度、色值等发生变化的具体数值备 注：部分由开发代码控制或者特殊效果的备注信息补充
小结：
关于动效落地我们还是应当根据具体场景具体分析，从而使用最佳的落地方式，用来提升产品的细节和体验。动效一直以来都是一把双刃剑，技能带来创新也能增加产品负荷。作为设计师，我们要规划好我们的创意，保证产品体验流畅的同时，又能给用户带来惊喜。
作者:
PIDO产险设计事务所