优秀的动效是配合功能和界面，给用户讲一段优雅的故事，从故事中让用户获得成就、完成「心愿」。

在写这篇文章之前，我们很像单独谈论动效，但是基于一个完整的调研-设计-开发周期的APP，你很难避开部分单独谈论某个细节。也就是我们所说的，动效是提升用户体验的一个表现形式，而不是创建用户体验的「捷径」。

从2014-2015我刚进入互联网行业从事UI设计开始，动效设计就是绕不开的设计部门茶余饭后的谈资。无论设计PC端还是移动端亦或是数据可视化大屏。动效的作用，作为设计者来说，它的意义表面看起来不言而喻，但是具体能带来哪些可以量化的收益呢，不得知。因为设计者通过添加动效来说服开发、说服产品经理，有时候是一个比较困难的事情，比如他们经常考的原因有开发时间成本、效果还原度、带来的转化率等。

类型

今天暂且不表上述的阻力，单从基于用户体验提升方面提升层面了解动效的意义。在互联网产品设计中，动效大致分类三大类：实时动效和非实时动效、循环动效等。

非实时动效

在部分情况下，实时动效和非实时动效的界限比较模糊，当我们通过操作会后，元素或者界面有过渡性的动效时，我们也可以理解为该动效为非实时动效。比如我们常见的页面旋转效果👇 又或是导航栏+切换菜单效果👇

实时动效

那么什么是实时动效呢。实时动效是可以被我们直接操作，并且页面或元素的状态时随着我们操作在实时变化的，我们可以理解为该动效为实时动效。
最常见的为页面的上下左右的滚动效果。下方视频为手淘聚划算页👇

循环动效

循环动效，即当用户进入页面之后，该元素会无线循环的在运动，并且不受用户操作影响，主要目的为试了丰富页面效果，其实循环动效在实际场景中建议不要经常使用，因为它确实不能给用户带来什么。甚至不好的循环动效会出现晕眩反应。下图中视频中上部分圆环为循环动效👇 以上为三种类型的动效演示，其中非实时动效需要我们注意的是，我们所谈论的实时动效或非实时动效是基于用户感知和视觉的角度考虑的，而不是前后端数据交互的实时性，所以具有前后端数据交互的动效，有的为实时动效，有些则为非实时动效。

作用

我们在为一个产品去添加元素动效或者是界面动效的时，其实我们往抽象的方面讲是为了提升用户体验。具体动效在什么情况下去加加了之后起到什么样的作用？这是需要我们去考虑的一个问题。因此，我在设计中总结了以下动效的作用，一般为创建关联、表述状态、分散/聚焦等。

创建关联

最基础的创建关联动效。我们可以看到市面上主流的app都会采用下tabbar导航。这样的话，我们点击某一个模块时，该模块的一个页面会显示相应的模块。其实这就是一个基础的关联，如果在这个操作上我们加一些淡入淡出或者是其他的动效，我们就可以理解为这是一个基础的关联动效。
亦或是我们在pc网站上经常见到的电梯式导航，这也是一种关联动效，当我们点击某一个导航的时候。页面主体内容会滑动至相应的模块。另外，我们常见的pc端网站右下角或者左下角有一个返回顶部的按钮。其实这也是一种创建关联的一个动效实现方式。 所以关联动效。其实是一个很常见又很基础的用户体验提升的方法。这样做可以有利于减少页面层级的增加和减少用户认知的负担。同时又可以提高整个页面的流畅度「我们这里讲的流畅度是基于当前页面的统一完整性」。

表述状态

我们最常见的表述状态动向是开启和关闭的按钮。另外最常见的是一个流程或一个任务，完成了一个闭环，最终展示的一个结果页面成功装填或者是失败。
我们在为状态添加动效的时候，一定要考虑一个问题。就是在我们产品设计过程中，一定要给用户无时无刻展示出一个积极的态度或情绪，而不是一个消极或负面情绪。这个到时候我会挖一个坑，然后单独讲这个正面或者负面情绪。就比如说，一个用户启动app，app首先要检查网络连接状态。如果网络连接不稳定或者是无网络连接，我们突然给用户来一个非常强烈且直观并且很冰冷的无网络连接提示。这个时候，用户是茫然的，是不知所措的。所以这时候我们需要做的是，告诉用户可能没有网络，并且引导用户怎么去排查和排除这些问题，从而正常的使用。App。 刚才扯的有点远😂，这个下一篇再详细讨论产品设计中的用户情绪引导。说回我们的一个表述状态的动效创建。

表述状态，一般是通过动效优雅的告诉用户当前正在发生的问题和已经结束发生的问题所造成的结果。这是我们需要给用户表示出来的，所以这个动画是一个不那么明显，并且又能够完整的表达当前进行的状态和已经结束的状态。足以。

分散/聚焦

分散和聚焦的动效设计，一般是为了转移某些特殊情况而创建的一些分散或者是暗喻引导用户去关注某些其他元素的设计。
这里面会有一个看似玄学的问题。「分散是为了聚焦，聚焦是为了分散」我们怎么理解这句话呢？你比如我们有一个新版本发布。然后给用户一个弹窗去下载APK，这时候如果一个app的体积比较大，比如一两百兆左右。我们必然会设计一个弹框，展示一个下载进度条来引导用户去关注进度或下载百分比，来分散用户因为等待时间过长二产生焦虑。
如果是一个美食类的app，我们就可以考虑在下载新版本的过程中来给用户展示一些饮食相关的小知识和小常识，这样通过。小知识和小常识来分散用户的注意力，减轻等待时间过长而造成的心理压力；又比如打车app。在下载更新的时候，可以通过文案或者是动效方式来展示给用户一些出行安全常识。让用户感觉在等待的过程中没有消耗时间，反而感觉自己在等待过程中从中获得了一些相应的知识。分散和聚焦的使用场景不仅仅是在这些下载弹框啊之类的。也会出现在比如首页的初始化加载、网络不顺畅的情况下，下拉刷新和分页加载出现的加载时间过长等。

这也就是为什么我将分散和聚焦放在一块儿，因为他们是一个相辅相成，并且又是相互关联，相互依存的关系。

以上所说的三个动效作用，其实在我们日常设计过程中，不一定是单独存在的，它们是相互关联的，你比如表述状态和分散/聚焦，这两个有时会同时存在的。就比如我们刚才所讲的这个案例，在下载的过程中，进度条是表述了当前的状态。而生活小常识或者是安全小常识则是为了不让用户等的时间过久产生焦虑心理，从而进行的分散和聚焦的手法。

动效创建原则

有关动效创建原则，我在简书上看到一篇文章写的还是相当完整的，他通过描述了一些动效的可用性方式以及创建动效的十二大原理。
详细的内容大家可以转至下方的链接去查看具体的详情。我在这里仅仅通过文章里面的内容，提取了一些关键词列成为一个思维导图，大家可以参考一下。 原文链接

动效创建工具

无论是ui设计师、产品设计师、还是交互设计师，我们通常创建的一些动效一般仅仅为给前端开发的一个参考。
大部分具体的实现还要看前端的一些编码。所以这就会给我们一些设计师们提供了一些便利。我们无论用什么样的工具，主要是创造和设计出来我们想要的动效来演示给开发即可。
所以市面上目前有这些主流的动效创建工具。上手难度有的比较简单有的比较复杂，有的还需编程基础。

Adobe After Effects
Principle
Flinto
Hype 4
Framer *
MotionUI *
Origami *
Keynote

……*
可能需要编程基础
以上这些工具呢是一些常见的嗯动效创建工具。当然了，不仅仅是这些。我平时在工作中一般会用到principle、Flinto和AE。

这样结束，总感觉显得虎头蛇尾。所以，来个总结吧。我们在做动效设计的时候，不能为了添加动效而添加动效，因为移动互联网产品设计中每一个元素或界面的添加都应该遵循一定的原则和特性。设计是理性的、是讲究方法和具有理论支撑的。
「为什么要做，为什么要这样做」
**

参考资料
《用户体验动效的12大原则》ylinlin