APP设计之十动效设计（干货）

path

最近在研究动效设计，一边试着把所得整理成这篇文章。
上图是大家津津乐道的path动效。这个动效为什么大家觉得好，好在什么地方？大家在读这篇文章之前，可以先试着思考这个问题。希望看完之后，大家有了自己的想法。

一、描述##

在 Material design 的设计规范里，动效这个章节的命名是 "Animation"（动画），动词 animate 是“赋予生命”的意思，引申为使某物活起来的意思。动效可以定义为使用类似动画的手法，赋予界面生命和活力。

二、作用##

越来越多的app中采用动效，其作用被设计人员所重视，在网上搜索动效相关的文章的时候，随便一搜就能找到一堆。其作用原因主要有两个：

吸引注意力：人眼在查看界面时，运动的界面元素会被优先注意到。这相当于在界面原有的层级上添加了一个暂时的最高层级，在流程中插入一个最优先流程（例如在出现错误提示时）。这样在设计时的腾挪空间就大了不少。

传递信息：运动的界面元素如果符合现实世界的真实物体运动效果相符合，会非常容易被理解，在界面越来越扁平化的趋势下，"拟物"的动效起到了更多的传达操作信息的作用。

具体到app中，动效起到的作用有：

1传递层级信息

通过一定的动效暗示，可以让用户更好的理解整个app的信息结构。

2传递状态信息

赋予app生命感，让用户知道app正在积极的为用户执行操作。

3提示隐藏信息功能

限于app界面的限制，或者说即使屏幕有pc那么大，也不适合把所有的功能都摆在用户面前。有些功能需要做一定隐藏，需要用户进一步的探索，或者在合适的场景才会出现。如微信信息列表左滑显示删除等操作。还有如iOS的appstore中下载按钮几个状态，当场景变化时，按钮形态变化对应的功能变化，同时用一些动效来衔接，减少这之间的突兀并唤起用户的注意。

4传递情感化信息

当用户看到一个有趣、恰当的动效时，会感受到app的活力和趣味。
通过动效还能传达公司品牌价值，很多动效都会与公司的品牌做直接或间接的联系，以更好的竖立公司的品牌价值。

三、上下文##

上面讲了不少动效的作用，其作用是和具体的app上下文紧密相关。接下来会结合各个具体的场景来讲动效是如何发挥作用的。

1转场动效

转场动效是指在不同页面切换间出现的过渡动效。通过app内一致的，符合逻辑的动效暗示，结合良好的导航，可以让用户更好的理解app的信息结构。用户在每个页面时知道自己怎么来到这个页面，从哪个页面过来的，怎么回到原来的页面，两个页面之间的关系是怎么样的。比较常见的界面关系有：

1.1“父子”关系
这类关系一般用来形容界面元素存在一定的包含，递进关系。最常见的例子是列表页面-详情页面，如iOS系统消息从信息列表进入到信息详情页面。结合下图可以看到，注意有几个细节，详情页面从右侧进入，先快速进入，然后再减速到位（ease-out），原有导航信息渐淡（fade），同时新导航从右进入，慢慢明显。

iOS消息.jpg

从子界面返回到父界面，也是按照这个流程，只是方向相反，加强列表页面和详情页面的逻辑关系。

iOS消息-返回.jpg

此外，从首页进入到列表页/详情页，图标进入详情页等上下文，具体逻辑与动效一般也不会有太大差异。并且设计的时候也应有意识的保持相同逻辑动效的一致性（包括app内和app间）。

特殊点还有如抽屉导航类的动效会有一定的差异。如下图最美应用的点击抽屉导航按钮，原有界面匀速右移，导航信息逐渐明显。因为侧导航的位置所限，运动速度的先快后慢可能不太合适，在这里匀速可能也能接受。

最美应用

而在一些特殊的上下文中，结合界面元素增加一些特殊的动效，会让人感觉到产品背后的趣味和情感。在一些上下文中，界面间有一些是共享元素，这样可以保留这些元素，减少界面的变化，界面的变化会变得更加流畅。在碰到这些有趣的动效时，总会会心一笑。

微信读书

如iOS中分组打开的动效。这组动效中，包含三个元素，原有分组框伴随文字快速放大，并向中间位移（目标位置），然后变大速度减缓（ease-out），同时下方文字在变大的同时变淡，消失后，上方文字逐渐明显。

iOS界面分组

还有如微信读书，大家可以揣摩下这之间的元素，哪些是进入元素，离开元素，共享元素，这几个是如何变化的，变化的轨迹速度又是如何。

微信读书

1.2“临时”关系
“模态视图（modal view）是一个以模态形式展现的视图，它为当前任务或情境提供自包含（self-contained）的功能。”——iOS 人机界面准则

当使用原有界面自包含的功能时，即功能使用完成的结果是直接体现在原有界面上的，而且这个功能一般流程比较简单，如iOS消息的新建，微信朋友圈的发照片。

iOS-消息

当点击新建后，新建消息从下方快速进入，覆盖原有界面，就像在原有界面上盖了一层暂时的界面，上升的速度慢慢降低。

微信朋友圈-发照片
可以看到，微信朋友圈在发一个新的朋友圈信息时，空白loading界面先快速从下方进入，然后再缓慢减速，到最终位置，在这过程中加载好备选的照片。在照片点击发送后后，这里有一个很动人的动效，背景变深消失进入朋友圈的界面，照片缓慢变大到最后大小。这样一个动效使得照片的发送变得非常流畅，让人没有感觉到任何的等待。

1.3“并列”关系
这种关系类型主要见于tab导航中，但考虑到iOS（一般在底部）和安卓（建议在顶部）的差异性，置于底部app一般不采用动效，伴随对不同tab导航按钮的点击，出现对应界面。而在顶部的app一般采取点击和手势切换，点击伴随动效。

如下图的网易音乐，点击伴随的动效导航文字下方的横杠；而手势切换的动效就伴随着界面的切换。这也体现了动效的一个重要作用，对用户操作及时，可见的响应会让用户产生自己在直接操作界面元素，打破用户与界面间那层玻璃。

网易云音乐

2反馈动效

反馈动效，意指用户操作后，app给予的以动效形式展现的反馈。反馈可以说是app对用户最基本的礼貌。根据人与app之间的交互过程，可以把反馈动效分成三种：

2.1即时动效
在现实中，按一个按钮会立即有按下状态。与之类似，app在接受到输入后，在执行操作前需要即时给予用户反馈。这个例子很多，在上面的动效图中都可以见到，在iOS系统自带app中，点击的效果一般为按钮/文字的颜色和透明度有一定变化。

389.tm.jpg

而在安卓新推出的Material design 推荐使用涟漪效果。

涟漪效果

对于点击的即时动效，主要由两个方面来组成，一个响应效果（颜色，形变，涟漪，或上浮等等），一个是响应元素（按钮，照片，列表等）。这两者结合告诉用户你刚才是否进行了操作，操作了什么。

除了最基础的点击操作，触屏手机的操作手势还有很多（如拖拽，滑动，轻扫，双击，捏合，长按，摇晃）。这些手势操作与现实中对物体的操作也有一定的相似性，因为这个相似性，许多刚接触触屏手机的用户也能自然而然的把现实中的经验迁移过来。也正因为如此，即时动效需要表达出与现实比较相近的操作结果（动效拟物）。而符合用户现实操作体验的动效也会给用户带来自然和谐的体验，让app更具有易学性。

2.2执行中动效
app正在执行操作时，让用户知道，app正在吭哧吭哧的干活呢。常出现在加载、刷新、发送等界面，通过动效可以让等待变得不那么无聊。

在《移动设计》一书中，提到：
对于等待时间，有0.1s、1s、10s和3个关键时间点。如果在0.1s内，用户在进行某个操作后能在0.1s内知道自己的操作结果，那么他不会感觉到任何的滞后。而当操作后响应时间超过1s，就会打断用户原来的思路，从而降低操作效率。而当响应时间超过10s，就会有大量用户失去耐心转而去做其他事情。

所以，如果时间在0.1s内，不做任何处理；0.1-1s可以使用动效为用户提供等待提示，但此时的动效应尽量简单，否则还未播放完毕就已经到达可操作结果。一种是将自己品牌的颜色质感等附加在抽象的形状中，然后让这些抽象的形状进行变化；另一种是直接利用自己的品牌的logo进行动作或形状的变化。

这种把时间作为动效设计的参考指标值得提倡。
表示执行中的动效比较常见，网上的范例也很多，也有许多出彩的。如下图的进度条，把进度的变化与现实中的运动结合在一起，让人不禁莞尔一笑。这种的例子还有很多，就不再多费笔墨了。

进度条

2.3结果动效
根据执行结果，并根据用户需求决定是否告知用户执行结果。这个的反馈方式不仅限于动效，但在一些需要激励和缓解负面情绪的场景下，比较适合使用动效。正面场景如，游戏中用户完成一些成就，击败对手；负面场景如刷新失败、页面错误、未联网提示这些，就算失败了还是感觉萌萌哒~

下图中的是最近很火的卡牌游戏，皇室战争，其胜利动效十分生动，虽然元素不少，但却在三秒依次呈现，VS字样（放大缩小）—PKer（左右进入）—胜负点数（放大缩小，亮度高亮变淡）—奖励宝箱（下方进入，透明度变弱）。所有元素都以不同的方式进入，给予用户极大的成就感。

皇室战争-胜利动画
下图是UC的页面加载失败页面，带点略微的动效的页面，一定程度上缓解了用户的负面情绪。
![UC失败页面]XD1]0PGFRH.png](http:https://img.haomeiwen.com/i187543/f84b2b3b4db4abbc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3引导动效

对于隐藏的、需要注意的信息、功能，或元素代表的功能变化，需要做一定的引导。对于引导的设计也是可以单独写一个设计框架，在这就不过多的阐述了。提示有几个注意点：

·用户看的时间极短，所以需要简单易懂，重点突出
·适时地出现和适时地离开，符合用户使用的场景，在可能触发或需要隐藏信息的时候才进行提醒。

而对于引导动效，不要做的太复杂，突出主要内容和操作。

如下图的百度地图的语音搜索，在开启语音搜索后，同时以简短的文字动效和语音图标不断扩大的圆环来引导用户说出需要搜索的地址。简单清晰又不影响用户操作。

百度地图语音搜索

四、分解动效##

说了这么多动效的作用，形式，再回到实际的工作流程中。动效应该怎么传达给开发人员呢？这时候就需要对动效进行分解。

1界面元素

进入元素：新产生的或变化的元素被引入或重新生成。
离开元素：元素不再与当前场景相关，会被移除。
共享元素：元素在转换过程中一直存在，可以很微小（如一个图标），或占据主要地位（翻译自Material design - Animation ）

在明确各个独立的元素后，针对各个元素阐述其变化，但注意各个元素间的和谐有序，明确相互之间的联动关系。可以参考皇室战争动效。

2运动（速度，轨迹）

如上文所述，动效的拟物化能起到更好的传达信息的作用。在物理世界里，存在着牛顿第一运动定律，又称惯性定律：任何物体都要保持匀速直线运动或静止状态，直到外力迫使它改变运动状态为止。所以物体的开始，停止，变向都需要有一个变化的过程（加速度）。“即使最不和谐的停止和启动也不是即时的”（翻译自Material design - Animation ）。如果违反了这一定律，动效看起来就会很不自然，有些app中的动效看起来很别扭就是因为这个原因。

自然的加速和减速

除此之外，ios中的一些动效会在结束加一定的弹动/伸缩效果，使得动效更加灵动和自然。

除了速度方面的变化，还需要考虑运动轨迹，考虑各个元素的起始和结束位置，考虑这之间的运动路径需要有意义且有序。随意的运动会导致用户分心，通过协调有序的动效来引导用户的注意。

注意，最好同时运动的元素方向要一致，避免冲突的移动和重叠的路径。
在material design设计中，还要考虑元素之间的层级关系。

这方面的内容大家可以看下这篇文章《动效设计的物理法则》和《Material design》。尤其后者官网上提供了大量生动的动效，很有参考意义。

3形变（大小，形状）

形变主要包括大小和形状，但元素的形变最好有明确的目的，如下图appstore下载的图标变化。

appstore下载

4色变（颜色，透明度）

色变主要包括颜色和透明度的变化，注意配合界面元素的强调和弱化，一般在动效中起辅助作用，缓和元素过于剧烈的变化，如下图。

appstore

或者起到暗示点击的作用

appstore

动效拆解起来是形变（大小，形状）、色变（颜色，透明度，饱和度）、运动（速度，轨迹）的结合。每个动效不一定都包含这三者，但通过把每个动效按照这三个维度拆解可以更好的描述和传达。

五、注意##

这里只强调一句，动效的设计要有意义。

最后：
终于写到了最后，写这篇文章战线拉的有点久。从资料的收集，整理；案例的录制、逐帧截图；自己思路的思考总结都花费了不少时间。但每完成一个框架，都是对自己的一个提升。在这样一个碎片化阅读的时代，还是需要不停的收集，整理和产出。

诸君共勉！

ps.大家可以在回复里说下那些动效设计动人的app，让大家一起欣赏下~

参考资料：
《Material design》-Animation
(翻译http://www.uisdc.com/material-motion-design-guideline）
《移动设计》-动效
《ios 9 人机界面指南》-动效
《设计之下》-锦上添花的UI动画
我们为什么需要动效设计
用户体验设计中的功能性动效
流动之美！探讨一下移动动效设计
如何合理的在移动应用中使用动效
动效设计的物理法则