01  什么是动效？

动效是用来辅助设计的一种形式；精准辅助设计在用户场景恰当使用，让这用户更容易理解产品，也让设计师更好的表达。好的动效可以弥补静态页面的表达不足，赋予产品界面生命力和活力，促进用户与产品之间的交流。

动效的类型主要有：

（一）MG动画

MG动画（Motion Graphics），简单来说就是图文动画的意思。MG动画的整体运用十分广泛，其中包括电影开头、电视开头、栏目包装、产品演示、广告节目等各个领域。

（二）表情包互动

如今的微信表情平台发展成了一个表情包行业，可以让设计师发布自己设计的表情包供微信用户使用，其中一部分表情包是带有动效的，即逐帧动画的产物，以小 gif 的格式呈现。

（三）UI交互动效

在用户体验界面设计中，因交互需求而发生的动效设计，例如：loading、转场、点击反馈等。现在越来越多专业化 UX 交互动效软件助力实现 html 在手机上的实时操作反馈，就仿佛你不用代码做了一个 app 出来。

02  为什么需要设计动效？

（一）更利于品牌建设

如优酷更新的logo，动效能更好的展示品牌logo的效果，更能吸引人注意。

（二）焦点引导

通过动效来引导用户的视觉焦点，缓解等待时间或增加用户关注度。

（三）增加使用感和趣味性

一些好的动态效果在交互上能让使用者有更好的体验，加强用户与产品的情感传递，增加用户对产品的友好度，同时增加了使用时的趣味性。

03  什么时候需要设计动效？

在动效设计的初期阶段，我们需要对项目进行需求分析，从业务方面来讲，动效的作用是为了引导用户，展示页面的层级信息，而对用户而言是为了改善用户体验，减少页面过渡的僵硬感。

（一）告知用户目前状态

为了保证正常的运行，后台总会有许多进程在进行着，需要借助动效让用户明白用户目前系统的状态。或者用户在进行了某一个操作后，需要有反馈，告知用户目前的状态，帮助用户更好地感知页面布局、层级结构和重点内容，同时也能让整个流程更加丰富流畅，增添了界面的活力。

（二）减轻用户不良情绪

对于许多数字产品而言，加载、页面故障等糟糕的用户体验是不可避免的。虽然动效并不能解决相关的问题，但是它会减轻用户的不良情绪。

（三）增加页面功能趣味

在产品设计的过程中，情感化的重要性越来越凸显出来，而添加动效的方式能够添加页面功能趣味，提高用户对页面的关注。

04 动效要怎么设计？

（一）、做动效需要考虑的因素

1、这个动效是否会影响性能？

添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。

2、这个动效是否会提高产品的可用性？

任何动效的出现都必须带有明确的目的性，能够解决用户在使用过程中的困惑，而不是炫技。单纯的炫技只会分散用户的注意力，弱化内容，变得适得其反。

3、这个动效是否会给产品带来独特的气质？

这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花，深化你的主题和功能。

（二）做动效有什么原则？

1、目的明确原则：总的来说也就是明确需求背景，动效的商业价值以及预期目标，防止增加无关动效。

2、一致性原则：动效属于整个产品组件的一部分，应该符合产品的一致性。

3、效果适宜原则：动效涉及多个元素或者界面层级时，除了有效表现元素属性变化以外，还应将这些元素之前的关系传递出来：譬如：主次、联动、并列先后、因果。

4、聚焦用户原则：应顺应用户的操作路径与真实场景。

5、情感传达原则：保持一致性与官方原则的基础上，考虑用户的心理情感，用动效创新体验。

（三）、 动效的创作思路

1、属性转换法

属性包含了位置、大小、旋转、透明度、颜色等，在这些属性上面做动效，若运用恰当，可以做出令人眼前一亮的动效。

现在绝大多数icon动效都离不开属性变化，运动恰当，这个简单而强大的方法大有可为之处。

2、路径重组法

将icon的路径(笔画)进行重组，构成一个新的icon，这期间考验着更多的东西，比如观察两个icon笔画之间的关系，这个思路最近相当流行，同时也具有挑战性。

3、分裂融合法

打个贴切的比方，就是把一把剑融成铁水之后，铸成一把新刀。

分裂融合法尤其适用于其中一个图标是一个整体，另一个图标由多个分离的部分组成的情况。由分裂融合法做出来的动效也相当有趣。

以上图片来源互联网，侵权删