动效设计（动效设计输出指南）

随着技术革新，针对动效输出的选择变得越来越多，它们之间有哪些特点和优劣势，而我们该如何在不同的设计场景和设计目标下找到最适合的输出方式？

接下来我们就来深入地了解它们，并一一对比，只要我们足够了解它们，就可以找到适合不同项目的最优解并快速落地。

一、动效分类

在了解动效落地方式的选择之前，我们需要明白的第一件事是互联网产品当中的动效分类，了解哪些动效是需要设计师去直接输出给开发。

1.情感化动效

情感化动效偏向于感性层面，主要目的是增加我们产品的气质和传达情绪，增加产品的魅力值，比较常见的有 app 中的 loading 动画，动态图标等。

这些动效因为一般都是独立的，而且大部分复杂度过高，开发代码实现需要花费大量的时间，所以情感化动效一般都是设计师直接输出成开发可以直接嵌入到代码里的格式。

2.交互动效

不论可操作的交互原型，还是纯做 demo 展示的动效过场都可以算作交互动效设计。

交互动效又可以细分为转「场动效」和「微交互」，分别应用于页面衔接和基础组件的交互反馈。

与情感化动效不同，大部分交互动效都是采取的动效的基础逻辑移动、缩放、透明度等，较为简单，开发是可以直接代码实现的，也能减少占用内存。

二、动效落地原则

1.有效

优秀的动效设计不仅仅赋予了产品本身的调性和趣味，还能充分体现产品的定位和特点。

它的发生并非是让用户去在意动效的本身，而旨在让用户感知到它原本就是你产品的一部分，从而体现品牌的价值。

有效的动效提升操作感受并提供良好的视觉效果，让产品界面更具灵动性和带入感，增强用户对产品的认知和情绪的带入感。

2.克制

随着技术革新，用户对于产品细节的感知度和挑剔程度日益剧增，不少设计师热衷于设计众多的动画效果，但是很多动效由于本身的复杂性和冗长的时间产生的拖沓，使得用户产生不适，并失去产品的焦点。

所以设计师在设计动效时，应该更克制，做到最短最高效、轻快流畅的交互表达。

3.性能优先

一个优秀的动效起的作用应该是基于用户的交互行为作出恰当的反馈，从而让用户更明确感知到发生了什么，并把用户的注意力吸引到正确的位置。

如果你的动效牺牲了产品本身的性能和响应时间，不仅起不了效果反倒影响了用户体验，如果没有找到更加简明轻快的解决方案，那么我们更建议不要轻易加入动画效果。

4.开发效率

开发是真正的动效“设计师”，越复杂的动效，开发难度越大。没有谁能阻止设计师天马行空，但是要推动项目的进行，一定要考虑开发效率。

对于最终实现的效果和完成的时间，这两者要做好权衡，建议设计师着手设计之前，先和开发共同评估一下所需时间及成本。

三、影响输出方式的因素

1.动效尺寸

动画输出的尺寸越大，占用系统空间、性能就越大。但是产品包的容量始终有限，不能允许太大内存的动效存在。

另一方面，越大尺寸就需要耗费越大的设备计算，用户也就需要更多的时间去等待。

2.动效时长

影响原因与上述尺寸类似，当图片堆栈的时间变长，堆栈当中的图片数量也会增加，动画的占用内存相应也将变得更大。

3.动效复杂度

越复杂的动效，能提供我们选择的输出方式就越少，过于复杂的动效可能会导致输出的时候受到压缩或者不支持，从而导致落地效果不理想。

所以我们也要尽可能的减少动画的复杂度，保留重点，去掉冗杂的细节。

四、输出选择

你是不是在输出动图和开发对接的过程中，遇到过这些问题：导出的动图模糊、资源太大、开发不支持动图格式…

以下我总结了几种常用的输出格式，以及该如何选择合适的动图格式。

1.情感化动效输出选择

情感化动效与大部分交互动效不同，需要设计师输出的动图格式，开发嵌入，你所输出的动图质量很大一部分就代表着产品上线的最终成果。

所以选择对的输出格式非常重要，常见的有六种输出格式，位图方式：PNG序列帧、APNG、GIF；矢量方式：Lottie、SVG动画；视频格式：MP4。

·GIF

·MP4

·序列帧

·APNG

·SVGA

·Lottie

(1)GIF

GIF 支持安卓、iOS、网页，可以说也是比较常用的格式之一。

界面设计中的小元素可以使用这个格式，比如按钮动画、图标动画等，资源不会太大。

优点：兼容性好几乎所以浏览器都支持、文件能够快速输出。缺点：颜色仅支持 8 位 256 颜色，支持半透明、颜色有限导出文件体积大而且有锯齿，效果差透明导出会有锯齿。

像我们之前负责的四川航空，开发还没有支持 Lottie，所以页面下拉动画输出 GIF 给开发实现，压缩后资源 300KB。虽然动图放大周围有锯齿，但是在手机上是看不到的。

导出方法有三种：

1）AE 导出 MOV 格式，再用 PS 转换成 GIF。（注意：可能会因为动画时间太长、文件太大等等问题导出经常失败，所以大尺寸或者过于复杂的动效不建议使用此方式)

2）AE安装 Gifgun 插件，直接导出。

3）下载iSparta软件，用AE导出 PNG 序列，将PNG序列图片全选拖进 iSparta，勾选 GIF 点击开始即可。

(2)MP4

MP4 是一种常用的视频格式，也通常运用于直接对接开发。

优点：兼容性好，文件能够快速输出缺点：视频格式项目中过多的话影响产品性能，可能会被压缩，导致最终呈现效果不太好。

MP4的格式已经很少在用，除非开发那边特殊要求，一般都是大屏的背景动效或者示意动效才会用到MP4的格式。

像我们负责的川威集团数据大屏项目，其中场景切换效果是遵循开发的要求输出的MP4格式，整屏的示意动效也是输出的MP4格式方便开发和客户查看。

输出方式采用Adobe的Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 MP4）即可，ae 中菜单-合成-添加到 Adobe Media Encoder 队列，直接可以输出 MP4 文件。

(3)序列帧

PNG序列帧就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。

相对比GIF，PNG序列帧可以更好的输出透明背景的动画，不会像GIF那样产生边缘锯齿。

优点：兼容性非常好、效果还原度高、颜色丰富。缺点：文件比较大，动效比较复杂的话输出 png 序列可能好几百张，会影响浏览器性能。

比如我们去年做过的精典汽车小程序中的加载动画，就有将近200张png，如果稍微复杂一点的动画导出序列帧资源就会很大，所以慎用这种格式。

输出方式可以通过AE等动效软件直接输出。

(4)APNG

APNG 是基于 PNG 格式的位图动画格式图片，文件后缀依然是.png，可以在浏览器中预览动画。

同样，和GIF对比，它的动图边缘光滑，不会有锯齿和颗粒感，和PNG序列帧对比，它占用的资源大小更小，质量也比PNG序列帧更好，相当于PNG序列帧的优化版。

优点：颜色丰富，支持 1600 万种颜色，支持渐变透明，无损压缩。缺点：文件过大，兼容性差受浏览器、系统版本等限制。

在 web 端对于主流的浏览器 Firefox、Safari、Chrome 都能够兼容。

拿川航下拉加载动画做对比，可以很明显的看到GIF的颗粒感和边缘锯齿，而APNG无颗粒感，边缘也很光滑。

（因此对比图被转成了GIF上传上来的，所以APNG可能会看到非常微弱的颗粒感，这是GIF格式的问题）

导出方法是通过 iSparta 软件导出或者使用其它AE插件。继续拿iSparta来举例操作步骤是将 png 序列拽到 iSparta 软件中点击开始即可导出 apng，此软件一共可以导出三种格式，APNG/GIF/WEBP。

(5)Lottie

Lottie 可以说是近两年在动画输出方面不得不提的一个格式，它由 Airbnb 推出，并且迅速在国内外各种大小厂快速推广开来，目前已经是一个非常普遍常用的格式，他在 AE 中的插件叫 Bodymovin。

他的原理是把我们的各种矢量元素、位图图层以及他们的效果关键节点打包的形式行成一个 json 格式的文件，就可以直接运用在 Web 上，无需其他额外操作。

优点：文件小、颜色丰富，开发可以控制大小、速度、循环次数等参数。缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，部分位图文件输出的效果失真，需手动替换。

比如我们做过的五粮液防伪APP中的提示动画，它的主要动态效果就是移动、缩放、透明度，所以使用的 Lottie 方式实现，资源小，动图也很清晰。

输出方式的话，AE 安装 bodymovin 插件，就可以直接导出。（注意：要选择保存路径，导出按钮才能点击。点击设置图标，选择 Standard 和 Demo，才能导出 json 文件和 demo 预览效果）

(6)SVGA

针对 Lottie 对缓动曲线解析差带来的性能问题和稳定性问题，我们会有第二种备选方案是 SVGA。

不管是导出之后的内存占用，还是在各个端的表现稳定性都会好很多，但是它的兼容性也会比 Lottie 少一些。

SVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，常用于较为复杂的动效。

因为效果比较复杂，一般是用 png 序列，一张图一帧地制作动画，输出 SVGA 文件。它只会生成一个 svga 后缀文件，代码和位图元素都被集成在了一起，但是 Lottie 会生成两个文件：json 代码文件 img 文件夹。

优点：便捷 SDK 开发集成步骤轻松简单。支持大部分效果、体积小、动画还原效果好缺点：有损压缩，兼容性不太好有的平台不支持，移动端用的居多，不支持图层渐变和插件特效

输出方法是使用AE的SVGAConverter插件，打开SVGAConverter插件后选择输出路径，然后点击开始转换即可。

2.交互动效输出

前面说过了，大部分交互动效都是需要开发自己代码实现的，那我们该如何让开发知道我们设计的交互动效是怎么动的，需要如何实现呢？怎样才能将自己精心设计的动态效果，准确的传达给工程师，避免实现的偏差呢？

对于动效来说，凭空描述永远是隔靴搔痒，将自己心中的设计最快速的可视化，是实现的第一步。

(1)视频Demo

视频Demo是个不错的开始，一段可以反复播放并在大部分设备上均可观看的视频，是让别人快速理解自己想法的最佳媒介。

一些简单的交互动效，开发可以观看你的视频Demo后根据自己的经验直接代码实现，并且保持较好的一个还原度。

比如一些简单的均速旋转或者移动，直接输出MP4格式即可，开发可以拖动进度条去观察细节。

(2)参数文档

如果是较为复杂或者有缓动效果的动效，我们就不能单单指望开发凭借自己的经验就能代码实现并且拥有很好的一个还原度了，这个时候我们就需要给予开发具体的数值，以保证落地后的一个还原度。

动效参数文档，里面包括了时间、运动距离，缩放、透明度、运动曲线等等，其中的运动曲线就是我们最为重要的数值，这是保障我们动效落地后拥有缓动效果，接近于真实运动轨迹的重要数值。

尽管开发者的编辑器提供了相当多的基本运动曲线，但要想高度还原Demo中的流畅度，最终还是要依靠自定义曲线，也就是由自己赋予参数。

通常的做法是，在AE中设计好动效后，进入贝塞尔曲线编辑器“拉出”差不多的曲线交给开发人员。

然而这其中依然有不可调和的因素，手工“拉出来”的曲线，只能无限接近Demo中的运动曲线。

这个时候就需要用到一款AE插件-Flow，Flow扩展是一款AE自定义动画曲线调节工具，包含25种关键帧曲线效果，可自定义修改编辑，还可自定义保存自己调整的预设，当然，最重要的就是我们可以直接获取到我们的曲线数值，从而交给开发，保障落地的还原性。

解决了最重要的运动曲线的具体数值，剩下的就简单，把开发所需要的数值，整理成表格文档交付给开发即可。

这只是个示例，具体表格文档是以什么样式呈现，具体需要展现哪些数值，可以自己根据需求与开发沟通决定。

当然，如果项目时间充裕的话，视频Demo 参数文档两者结合，肯定是最佳的解决方案，保证落地的还原性。

五、总结

最后，我们来总结一下在实际工作中我们该如何选择输出格式。

Lottie：除了一些特殊效果不支持之外，基本适合所有 UI 动效，质量高，占存小，优先考虑使用

GIF：会有颗粒感和边缘锯齿，但是兼容性高，移动端小元素动效可以使用，小图锯齿不明显

APNG：相比较于GIF，无锯齿和颗粒感，质量更好，但是占存比GIF高，兼容性也比GIF略差

SVGA：适合一些较为复杂的动效，占存小，质量高，但是兼容性略差，不支持一些AE特效

序列帧：资源太大，质量一般，但是输出方式便捷方便，一般不建议使用

MP4：占存比GIF略高一点，质量一般，一般用于交互动效示意展示或是大尺寸的炫酷动画

以上介绍的几种动效落地方案，是目前大家用的比较多的方法， 掌握这几种输出方法，就基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。

,