动效设计越来越热门，设计师要如何抓住这个风口？

产品设计中的动效，简单一句话就是让用户更好的体验产品。如果非要细分来说，可以讲很多，比如减缓焦虑、引导操作、增加趣味等等吧！

优秀的设计是无形的，一个优秀的动效能使你的App变得友好而且抓人眼球，但是绝不会让用户分心。

为了充分利用动效，你必须了解动效在App中的定位和职责，今天分享App 动效的设计技巧以及设计原则，让我们一起看动效的神奇效果吧！

设计的主要原则

为了设计出真正成功的动效，请时刻牢记Walt Disney最初提出来的动画的9条原则，这些原则可以非常有效地应用在UI设计中。

1. 材质

给用户展示界面元素是由什么构成的：轻盈的还是笨重的？死板的还是灵活的？平面的还是多维度的？你需要让用户对界面元素的交互模式有个基本的感觉。

2. 运动轨迹

你需要阐明运动的自然属性。一般原则显示没有生命的机械物体的运动轨迹通常都是直线，而有生命的物体拥有更为复杂和非直线性的运动轨迹。您要决定您的UI要给用户呈现的什么样的印象，并且将这种属性赋予它。

3. 时间

在设计动效时，时间是最有争议的和最重要的考虑之一。在现实世界中，物体并不遵守直线运动规则因为它们需要时间来加速或者减速，使用曲线运动规则会让元素的移动变得更加自然。

4. 聚焦动效

要集中注意力于屏幕的某一特定区域。例如，闪烁的图标就会吸引用户的注意，用户会知道那有个提醒并去点击。这种动效常用于有太多细节和元素从而无法将特殊元素区别化的界面中。

5. 跟随和重叠

跟随是一个动作的终止部分。物体不会迅速地停止或者开始移动，每个运动都可以被拆解为每个部分按照各自速率移动的细小动作。例如，当您扔个球，在球出手后，您的手也依然在移动。

6. 次要动效

次要动效原则类似于跟随和重叠原则。简要地讲，主要动效可被次要动效伴随。次要动效使画面更加生动，但如果一不小心就会引起用户不必要的分神。

7. 缓入和缓出

缓入/缓出是设计的基础原则，尤其是在移动开发UI动效，和普通的动画制作中同等重要。虽然易于理解，但此原则却常常容易被忽略。

8.预期

预期原则适用于提示性视觉元素。在动效展现之前，我们给用户点时间让他们预测一些要发生的事情。完成预期其中一种方法就是使用我们上述的缓入原则。

9. 韵律

动效中的韵律和音乐与舞蹈中的韵律有着同样的功能；它使动效结构化。使用韵律可以使动效更加自然。

10.夸张

夸张的表现方法常常会被用到，但它并不是那么容易被阐释，因为它是基于被夸张化的预期动作或效果。它可以帮助吸引额外的注意力到特殊元素上。

看过了动效设计的原则，再来了解下动效的优势！

动效的优势

动效设计并不是可有可无的视觉修饰，也不是设计师炫技的手段，而是解决问题，提升体验的有效工具，其存在明确的目的性，同时，相比静态页面动效设计有以下几点明显的优势：

（1）阐述：更好的告知界面发生的变化

当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知，阐述层级关系和界面变化。

（2）吸引：更有效的吸引用户注意力，营造视觉焦点

当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力，有效传达信息。

（3）及时反馈：让用户更有掌控感

当用户执行了某一操作后，动效是一个非常好用的反馈机制。通过动效的适当运用，用户可以清晰感知到自己操作的反馈，让用户知道自己做了什么。但反馈动画不可滥用，会使用户界面变得凌乱。

（4）提升：趣味性的内容缓解用户焦虑，提升用户体验

例如加载动画，可以有效降低用户对时间的感知，对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。

动效的主要类型

（1）衔接动效

在我们平常看到影视节目中，大部分镜头采用跳切的形式（画面直接切换没有任何衔接形式），这是因为影视作品的内容直观，主线明确，且观众与用户的之间存在巨大差别，前者大部分处于被动，而用户则会带着目标和任务进行操作，此时应用只要跟用户有互动，就会有状态的变化，而绝大多数的变化都是由界面视觉展示的。这时，界面上的状态变化，是否有过渡，过渡的是否流畅，动效本身承载的信息是否清晰，就直接的影响着用户的感受。在内容优先的设计趋势下，用户界面变得更加简洁。这将给用户带来操作上的认知障碍，动效则可以在不打破界面美感的前提下，弥补认知的损失。

（2）响应动效

无论是点击、长按、拖拽、滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。

（3）演示动效

多用于动态引导页，旨在吸引用户注意力，帮助用户理解产品功能或展示作者想法。

（4）加载动效

众所周知，app服务器在加载数据的时候需要用户等待一段时间，为了缓解用户等待过程中的焦虑情绪，设计者可以采用加载动画的方式来缓解用户的等待时间，使整个等待过程变得更加友好、流畅。

（5）logo动效

一个设计足够优秀突出的LOGO，能够和用户建立联系，能够帮助企业建立起品牌形象。而动态LOGO 是一种更为现代、更为动态的品牌呈现方式。能够更好的吸引用户注意力，提升品牌认知，让logo利用方式更加多元化。