版权申明：本文出自“Jadon7”原创，感谢“Jadon7”的原创文章分享！

历时两个月断断续续终于整理完了这篇文章，希望能对大家工作中遇到的一些问题有所帮助（多图慎点）
最近求职中，有意向可以联系

概要

随着技术革新，用户对于产品细节的感知度和挑剔程度正在日益剧增，越来越多的产品都在尝试通过不同的手段来打造产品的差异化，而动效设计作为近年来大火的设计趋势之一也被越来越多的产品所青睐。动效对于一个优秀的产品也在日渐从 "锦上添花" 的地位慢慢变成 "必不可少" 的构成元素。但是当我们去观察身边很多的线上产品对于动效落地把控的时候发现现实结果往往并不尽如人意，很多优秀的概念、在想法阶段到最终落地几乎被打磨的体无完肤。我们以往的经验告诉我们可以通过简单的方式输出我们的设计作品并且加以跟进就可以使线上的结果达到很高的完成度，但是当我们面临动效输出的时候会发现，输出的选择在日渐变多，但是输出的结果还是很难达到理想的状态。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

目前市面上针对动效的输出与落地主要还是围绕着基础的几种输出方式，输出方式的选择就困扰着很多的设计师，而作为设计师我们要做的不仅是了解在什么情境下应该选择什么样的输出方式，更应该了解这些流程化的输出方式的原理以及围绕这些原理我们可以在整个产品的设计流程中可以做到的更多的事情。

产品中的动效分类

在了解动效落地方式的选择之前，我们需要明白的第一件事是互联网产品当中的动效分类与一般意义上的动效有很大的区别。广义的我们把 UI 动效分为三类：

一、情感化动效

情感化动效偏向于感性的层面，主要目的是增加我们产品的气质和传达情绪，增加产品的魅力值，在一些小的细节上我们加入一些情感化的元素也可以以彩蛋的形式给用户惊喜。比较常见的有 app 中的 loading 动画，点赞动画等。

二、交互动效

产品流程、交互行为的串联，不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互动效设计，交互动效最基础的的形态就是原型流程图的串联交互稿。交互动效又可以细分为转场动效和微交互，分别应用于页面衔接和基础组件的交互反馈。前者可以传达给用户产品的层次结构和空间关系，后者可以使用户减少操作成本。

三、复合型动效

复合型动效不局限于感性层面的情绪传达，也不局限于交互行为的串联，往往真实场景当中更多的也是这一类动效，在与开发人员对接阶段也更容易存在各种各样的不稳定因素，对于设计师而言也存在更多层面的挑战性。

影响输出方式的因素

影响输出方式的因素

情感化动效一般情况下会受到三个方面的属性影响他的输出选择，分别是尺寸、时间、动画复杂度：

一、动画尺寸

动画尺寸越大 = 占用系统空间越大 = 占用的系统性能也越大，但是这个等式仅仅成立于我们常见的一些所见即所得的格式上，例如 gif / 视频 /webp/apng 等。

类似这样的一些格式，是我们的设备所能接受的最简单最直白的格式。他去产出一个动画的逻辑一般都是不同的静态图像的堆栈通过给定的次序和时间逐个播放。这里边的每一个静态构成图尺寸越大，整个动画的占用内存相应的也就越大。但是我们的产品包的容量始终有限，不能允许太大内存的动效存在。

另一方面，大尺寸的静态图在预览过程中也需要耗费更多的设备计算，举一个很简答的例子，当我们在电脑上预览一张 800*600 的图和一张 2400*1800 的图电脑打开它所需要的时间是不同的，相应的，动画格式多个大尺寸静态图做预览时耗费的系统性能是成倍数增长的。

二、动画时长

影响原因与尺寸的影响原因类似，当图片堆栈的时间变长时，堆栈当中的图片数量也会增加，动画的占用内存相应的也就变得更大。所以，当我们的动画时间过长时也不适合使用这些所见即所得的格式类型。

需要注意的一点是，动画的时长对性能的影响会相对的小很多


三、动画复杂度

动画复杂度对在以上提到的输出格式当中不存在任何问题，更多的是在一些近几年比较时髦的输出工具上出现问题。对于复杂动画，我们要尽可能选择去输出所见即所得的格式。当选择了其他的格式时也要尽可能的减少动画的复杂度，保留重点，去掉冗杂的细节

情感化动效输出选择

一般情况下我们会根据动效的类型把输出方式分为两类：

?所所见即所得格式

· 所见非所得格式

所谓「所见即所得」就是输出我们最常见的一些输出之后即可预览的格式，比如 GI 比 图 / 视频这种的格或，也是我们很多的动效输出最基础的格式：

GIF 图格式

GIF 图格式可谓是作为设计师接触过的最多的动态格式了，GIF 格式自 1987 年由 CompuServe 公司引入后，因其体积小而成像相对清晰，特别适合于初期慢速的互联网，而从此大受欢迎。因为时代背景使得他有非常强的兼容性，基本上可以再目前大多数的智能设备上直接预览。不论动效落地还是在各个平台上的兼容性也都是非常优秀的的，尤其在一些设计平台上，也是大家最多的选择用来做一些概念展示的格式之一。也因为他在不同平台设备之间的兼之间，他的传播性也是非常强的。

当然除了他自身所带的这么多优点之外，GIF 格式也因为他的应用年代技术限制的原因会有很多其他的缺陷，前面提到的很多优点往往也是因为诞生早给他自身带来的福利，他会有很多不可逆的问题，首先第一点是对电脑的内存和性能占用非常大（根据 GIF 的时间尺寸的等情况会有不同的程度的影响），作为设计师常有的一个经验是在网页上多开几个 GIF 之后电脑风扇就开始飚起来了。第二点是他是一个有损的文件格式，不论是色彩还是画面质感都会有一定程度的压缩。第三点是对透明通道的支持非常有限，输出结果会非常差，时常会有锯齿或白边的情况。以上是我们在输出 GIF 格式的之前需要提前思考是否可以接受以上的问题。

另外输出 GIF 图的过程也经常困扰着很多的设计师，我也为此录制了一篇关于 GIF 输出的经验分享