本文微交互动效设计描绘的方向属于功能性动效，适用于UI界面的交互动效设计。具有清晰的逻辑目的，着重帮助用户理解和有效的度过当前所处的状态。动效涵盖范围有入场/出场动效（enter & exit）、过渡动效（transition）、通知动效（notice）和加载动效（loading）。

Web、App中添加动效设计所遵循的12条原则

缓动（Easing）、偏移量和延迟（Offset & Delay）主要与时间相关。父子关系（Parenting）用于阐述元素之间的关系。变形（Transformation）、数值变化（Value Change）、遮罩（Masking）、覆盖（Overlay）、生成（Cloning）多作用于加强元素自身的延续性。视差（Parallax）多作用于表明元素的层级关系。蒙层（Obscuration）、多维化（Dimensionality）、镜头平移与缩放（Dolly & Zoom）作用于表明元素与空间的关系。

1. 缓动（Easing）

当运动发生的时候，元素运动速率的变化符合用户的预期。自然界之中是很少存在完全线性的运动的，没有任何东西能够完美的保持匀速运动，缓动效果能够让运动看起来更加接近自然，符合用户的认知，达到用户的预期。

例子：你手机里面几乎所有动态效果都是缓动的，看起来是不是非常舒服和谐呢？

2. 偏移量和延迟（Offset & Delay）

利用偏移和延迟来错开元素的运动时间，表明元素之间的层级与关系。设计师利用错开运动时间的方法，让信息或界面元素按照有所区别的秩序进退场，利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区别，或利用错序的方法吸引用户的注意。但一般情况设计师不应该使用太多的延时效果，因为譬如说网络的加载本身就已经需要时间，所以延迟效果的使用最好只用于服务于技术。

例子：苹果官网各商品详情页均有大量运用。

3. 父子关系（Parenting）

在用户进行操作时，有父子关系的元素帮助用户更好地理解它们之间的层级关系以及带来更加有理可循的操作反馈。正如上面给出的这张动图，位于下方的方块的左右运动，而位于上方的方块跟随下方方块进行左右运动并同时进行自己的缩放运动，他们之间构成了父子关系。说得简单一点，父子关系就是子元素的某个属性的值随父元素的某个属性参数的值按照一定的比例进行变化。

例子：Google Allo 按住发送按钮向上滑动，发送内容字体变大。

4. 变形（Transformation）

利用变形来告知用户元素的状态或作用发生了改变。人们对于实物的变形是敏感的，合理的变形能够清晰高效地将正确的信息以最高效、最令人愉悦的方式传递给用户。注意，这里所说的变形并不一定要像上面那种动图一样动作那么大才算变形。或许是颜色的变化，也有可能是角度的改变，这些都能达成我们想要的效果。

例子：知乎 Live 选择赞助金额的动画效果。

5. 数值变化（Value Change）

连续性的数值变化动态效果能让用户清晰地看见数值到底是在变多还是变少。关于这一点，我想多用两张动图呈现，大家可以看到，数值变化有连续性动态效果的一张是不是更能让你知道数字是在变多还是变少？想象一下，假如在某款理财 App 里面，这个数值是你的钱的话，那么数量的增加与减少这个信息对于用户来说就非常重要了。

例子：京东金融手机 App，“总资产”，及“白条”页面的数值变化效果。

6. 遮罩（Masking）

遮罩型的动画是在界面元素进场或者退场的时候创造连续性效果的一种选择。这种类型的动效似乎在 Material Design 里面比较常见，所以没有使用过原生安卓系统的伙伴们可能比较陌生。

例子：原生安卓系统（5.0 以上 7.0以下版本可见，7.0取消了菜单按钮，以上划操作代替。）点击菜单按钮呼出菜单的动画效果。美图秀秀手机 App 处于首页的各个功能按钮点击后的转场效果。

7. 覆盖（Overlay）

覆盖用于在扁平化（没有厚度）设计的界面上阐明两个相互独立的元素的位置关系。在实际上没有厚度、没有纵深概念扁平化设计中，覆盖动画的使用能让本来就非常有限的屏幕空间被更好的利用起来。

例子：微信横划删除聊天记录。

8. 蒙层（Obscuration）

蒙层与覆盖非常相似，在没有纵深概念的扁平化设计中表现纵深，它并不完全将处于下方的元素遮盖住，而通常是通过高斯模糊或变暗的手段让下方的元素保留一定的可视性。

例子：在 iOS 里面随处可见的毛玻璃效果。

9. 生成（Cloning）

当元素被生产出来时，表达元素与元素之间的连续性的关系。这种动画能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。

例子：苹果的 Messages 发送信息的效果。

10. 视差（Parallax）

界面元素同时开始运动，但运动的效率不同，构成一种视差的效果。用户在进行滚动操作的时候通过视差效果可以在扁平化的界面里面表现空间中个元素的位置及层级关系。这种效果还非常的美观高端，能让整个页面看起来更加活泼一些。通过视差的特性，我能引导用户去关注应该应该关注的地方，运动效率高的元素通常表达的是距离用户更近，适合承载更加有使用性意义的重要信息，而运动效率较低的元素通常表达的是距离用户较远，而且或许没有承载什么重要的信息。

例子：苹果官网各商品详情页。

11. 多维化（Dimensionality）

将界扁平化的界面元素多维化从而表达空间中个元素的位置及层级关系。其实扁平并不符人类认知逻辑的（而符合人类认知逻辑是几乎可以说是可用性的第一原则），所以人们在扁平化的界面里面下足了功夫来在没有纵深和厚度的界面里表达纵深和厚度，这句话读起来非常拗口，但实际上就是这样的。多维化的使用比较少，因为添加纵深感有很多种手法（覆盖、蒙层、阴影，etc.），而多维化的开发成本是比较高的。

例子：iBooks 的翻页效果和 Flipboard 的翻页效果，滴滴打车退出呼叫状态的 Appbar 动画。

12. 镜头平移与缩放（Dolly & Zoom）

镜头平移与缩放听起来好像是一样的东西，事实上确完全是两码事。镜头平移是拍摄的术语，被拍摄物保持静止而镜头移动或镜头保持静止而被摄物体进行远离或接近镜头的前后移动，缩放是镜头与被摄物体在位置上保持静止而被摄物自身进行缩放。镜头平移与缩放效果表明元素与空间之间的关系，也能表现出一种纵深感。

例子：iOS 的解锁动画是典型的镜头平移效果，而双击放大图片操作的那个动画是典型的缩放效果。

一.优秀的微动效，归纳成三个核心原则

克制有度：控制出现频率和出现时长，不增加额外的操作，不干扰用户和给予用户足够的理解时间。

清晰聚焦：符合逻辑，重点突出，给予用户充足清晰的阅读时间。

自然流畅：保持基本视觉的连续性，缓冲过渡，做到一气呵成。

I Remember — 一个有关回忆的网站，点开后给你耳目一新的浏览体验。

Intro

Home page

二. 响应时间与持续时间

时间是动效核心元素，设计动效时需要考虑两类时间 —— 响应时间与持续时长。

1. 响应时间

响应时间指从用户执行操作到反馈出现的间隔时间。触发机制不同，响应时间的限制也不同：

对于由用户操作 直接触发 的反馈，理想的响应时间应该控制在 100毫秒内。

对于由用户操作 间接触发 的反馈，响应时长可允许达到 1秒左右，不可超过2秒无反馈。

当 超过2秒 才能获取反馈结果时，须设计加载动效（loading）。

当反馈时间为 2-9秒 时，可使用循环的加载样式（如常见的菊花转）。

当反馈时间 超过10秒 时，须使用带有进度指示的加载样式（如已加载了60%，还剩30秒）。

2. 持续时间

交互微动效的持续时间不宜过长，以避免浪费用户时间，影响用户的阅读和操作效率，其持续时间一般不超过500毫秒 ( 加载动效除外 )。

若你希望用户能清晰地捕捉到元素的渐进变化，持续时须大于200毫秒；若你不介意用户认为元素的改变是瞬间的，希望尽量节省用户时间，持续时间也可设计在 200毫秒以内（如hover到按钮上颜色瞬间发生微妙改变）。

具体的持续时间的取值，一方面会受到元素的大小、动效的复杂程度影响；另一方面也会受到动效的目标 和 运行动效的设备的影响：

小元素的轻微变化效果（如渐隐渐现、大小变化等小范围变化），一般在 200~300毫秒以内。

较大元素的复杂变化效果（如包含大范围缓动位移），可长达 400-500毫秒。

较快的动效更容易吸引用户注意力，也更节省时间。若动效元素在用户的视线之外，为了吸引用户注意并采取行动，可使用在短时间内变化较大的动效（如发生位置移动和速率改变）；若动效元素已经在用户的注意范围内，为了保持视觉连续性，完成必要的过渡（如渐隐渐现）后即可结束。

较慢的动效较少分散用户注意力，更适用于非用户直接触发的场景。若动效不是用户直接触发的，不希望用户注意力被转移，可使用在长时间内变化较小的动效（一般不会出现位置移动）。

不同设备的屏幕尺寸和特性不同，理想的持续时间也不一样。一般来说，对于移动设备而言，屏幕越大往往动效的位移也越大，因此持续时间也应该越长（可穿戴设备上的持续时间大约比手机上快30%，平板电脑上的持续时间大约比手机上慢30%）。而台式设备的动效设计往往比移动设备中的动效设计更简单快速（150毫秒~200毫秒间较为常见），这是因为复杂的动效在台式设备场景下容易出现掉帧、卡顿的情况，瞬时响应的动效能避免这一点。

出场动效一般比入场动效更快 ( 如当入场动效设置为230毫秒时，出场动效可设置为200毫秒) 这是因为元素入场时用户一般需要阅读并处理新出现的信息，而元素出场时通常表明用户在此元素上的任务已完成，不需要再关注了，快速出场能够节省用户更多时间。

三. 常用动效类型及应用参考

在浏览器中最常用、最容易实现且能保障性能的是 位置（position）、大小（scale）、旋转（rotation）、透明度（opacity） 这四种属性的变化，当变化这四种属性的任意一种或几种就能达到交互微动效的目的时，无须再加入其它不必要的属性，以免影响动效流畅度。

属性的变化一般又分为 线性（liner）变化 和 曲线（curves）变化两种。

1.  线性变化

线性变化具有 匀速、骤停 这两个特征，一般适用于与物理属性无关的过渡动效（如透明度属性的变化，包含渐隐渐现或颜色间的切换），或有规律的加载动效（如均匀的循环、数值变化或进度变化）。在与物理参数有关的变化中（如位置变化），尽量避免使用线性变化，否则很容易给人带来动效僵硬、不自然的感觉。

2.  曲线变化

曲线包含多种类型，在交互微动效设计中，缓动曲线（easing）的应用范围最广、效果最自然、对用户的干扰也较小，多用于与物理属性相关的属性变化中，常用场景如下：

结语

交互微动效以功能性为主，须遵循克制有度、清晰聚焦、自然流畅这三个核心设计原则。在设计前，思考希望如何影响用户的注意力、动效的目标是什么、动效出现的频率和触发机制是怎样的，在设计时选择合适动效类型和持续时间并关注反馈的响应时间，做到有理有据、令人信服。

自译参考：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc