@野子Joey ：动效如今被广泛的使用在界面设计中。但如何合理使用实效，而不是让动效干扰用户，却少有总结的经验。因此本文旨在结合现有的动效资源和案例，总结一下动效的使用目的，使用场景以及实现技术。
注：由于动图过大，压缩有损细节，不过对了解动效的原理没有影响，见谅。
文章结构：
- 现状介绍
- 动效使用历史
- 动效的使用目的
- 动效使用场景
- 使用动效的注意事项
- 如何制作流畅的动效
现状
动画作为一种娱乐方式，被好莱坞的大神们已经运用到了出神入化的地步。作为一个设计新人，我主要关注如何运用动效在 UI 设计上，希望它也能够给界面提升一些趣味性。
如今你可以在各种网站和 APP 上看到动效的身影。设计师想通过运动的物体来吸引用户的注意力，从而实现其目的。然而，有些动效仅仅是为了好看而做，并没有和界面的实际功能联系起来，因此造成用户的认知障碍。如何将动效运用在合适的场景，以及如何制作流畅的动效成为了很多设计师思考的问题。
动效使用历史
Haziwani 和 Berrand(2016) 总结到，在1970年左右，用户界面还只是一系列头尾相连的 PDF，没有任何的动效。直到乔帮主发布了发布了 Macintash(1984)，情况得到了一些改善。但是由于电脑画面处理能力的限制，动效使用的十分有限。随着电脑性能的提升，越来越多的动效被使用到电脑和手机当中。
到了2007年，改变人类的产品 IPhone 问世了。它极大了颠覆了人们对电子设备体验的感受。动效真正开始进入了每个人的日常生活。为什么大家都爱使用动效呢？Cooper(2014) 解释到，动效是一种强大的机制，可以解释和说明物体间的关系。这个机制在手持设备上尤其有用，因为手持设备的屏幕大小有限，人们可以利用动效充分使用隐藏内容的功效。转场动效帮助用户构建了清晰的思维模式 —— 新的内容从哪来，新内容和旧内容之间的关系是什么。动效在网站上的效果也非常好，它可以有效的引导用户浏览界面。
动效的使用目的
因为动效存在负面作用，合理的使用它变尤为重要。Cooper (2014) 提出动效需要谨慎的使用。过度的使用动效不仅让人困惑和反感，而且让人生理上不舒服。比如苹果的 IOS7，它过分强烈的视差效果让很多用户感到不舒服。
交互动效的首要目标应是支持和增强用户在状态间的转化。Saffer(2013) 提出使用动效存在下列目的：
- 吸引用户注意力在指定区域
- 表现对象和用户操作间的关系
- 维持多窗口或多状态的上下文关系
- 提供持续性事件的认知感
- 创造虚拟空间引导用户在状态和功能间转化
- 创造沉浸感和趣味性 （每一个举一个动图例子）
Yalanska(2016) 也定义了 UI 动效的四项作用：
- 支持微交互
- 显示运动过程
- 解释
- 装饰
Google 的 Material Design(2017), 提出在 MD 中，动效用来描述空间关系，功能，富有美感和流动性的目标。 动效显示 APP 是如何组织的以及它能够做什么，具体如下：
- 引导窗口切换
- 提示用户接下来发生的事
- 对象间的层级感和空间感
- 减缓用户对等待事件的认知
- 美感和个性化
综上，笔者总结了交互动效的使用目的, SAFRI，游猎法则（少了第二个A，原词 SAFARI）
1.State
告诉用户对象和窗口的状态是如何变化的
当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知到该变化。相应的，当窗口发生变化时，可以用动效更清楚展示窗口是如何从一个状态转变到另一个状态的。
2. Attention
吸引用户注意力，告诉用户做什么
当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力。当用户需要执行操作时，注意 UI 和动效的结合要能告知用户需要进行的操作。
3. Feedback
告诉用户操作和对象间的关系
当用户执行了某一操作后，动效是一个非常好用的反馈机制。通过动效的适当运用，用户可以清晰感知到自己操作的反馈，让用户知道自己做了什么。
4. Relief
缓解用户对应用处理速度的感知
当应用执行一个长时间操作时，可以用动效缓解用户对时间的感知，甚至创建一个假的动效效果（其实应用并不用处理这么长时间）。当下许多 APP 下拉时的加载动效运用的便是该原理。对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。
5. Individuation
让产品更有趣和个性
为了让产品更有趣味性，可以在某些场合适当运用动效创造一些让人愉悦的动画效果。两点是笔者觉得需要注意的，一是动效时间要足够短，二是动效要足够流畅。
需要说明的是，这些目的不是独立存在的。设计师可以运用其中任意几条去设计一个动效。比如，两个窗口间的切换动效不仅吸引了用户的注意力，告诉用户面板在切换了。而且还告诉用户两个面板的位置和空间关系，上下，左右还是前后。
△ State + Attention + Feedback
△ State + Attention + Feedback + Individuation
乔帮主说过：“设计并不仅仅是它看到或感受到的样子。设计应该表现它怎么工作的。“笔者认为动效也是一样的道理，动效应该它怎么工作的。设计动效时问自己1个问题，这个动效的目的是什么？
动效使用场景
如果我们拆分动效到具体的使用场景，Cao(2015) 帮我们罗列了当今网页设计中的10大使用场景，大部分场景也适用于手机应用中：
1. 滚动 Banner
2. 表单
3. 视觉中心
4. 导航栏和菜单
5. 转场动效
6.背景动效
7. 加载动效
8. 滚动事件触发的动效
9. 鼠标 Hover 动效
10. 图片动效
使用动效的注意事项
当我们制作交互动效的时候，有哪些事情是我们可以提前注意，或者有哪些标准可以用来评判是不是一个好动效。Saffer(2013) 说到如果你做一件事可以不用动效，那尽量避免。从微信和 Facebook 这种全民 APP 在动效使用上自制不难看出。
其次，动效本身需要符合其传达的意义。比如用户上下滑动屏幕，窗口内容就该上下变换，而不是左右变换。仅仅为了动效而作动效是不可取的，交互动效需要尽可能解释其本身含义。
2016年，Hazwani 和 Bernard(2016) 列出了4个让动效具有意思的注意事项：
- 概念转换：不要独立的设计界面布局和动效。设计它们的时候思考它们之间的联系