不要随便设计UI动效，请先明白这12项动效原理

前言：有不少动效设计的初学者，他们刚开始做UI的动效设计基本都是很生硬，没有一种自然的感觉。他们做的动效往往以装饰性为主，仅仅如此的话，可能会损害产品的可用性。今天给大家介绍12项动效设计原理，这些都适合用于UX/UI设计项目中，是非常有用的运动原理。

动效对于数字产品的用户体验有着深远的影响，但如果界面元素没有表现出基本的动效设计原理，那么会损害产品的可用性。在用户界面中，动效不仅仅是一种视觉装饰，而是一种强大的力量，它可增强产品参与度并扩展设计交流的范围。

我们的世界是运动着的。即便在静止的瞬间，叶子也会发抖，肺部也会扩张。在数字产品设计领域中，动效似乎是第二自然，是日常工作的扩展，可以毫不费力地加以利用。要是那是真的就好了。

只需问问第一次制作动画UI元素的人。数小时的努力只产出了业余的成果。把一张卡片滑到屏幕上这样简单的事情看起来都很尬。这是为什么？

从理论上讲，让UI元素移动是很容易。在预定路径上定义关键点，然后软件对间隙进行补间。而实际上，它不是那样工作的。工具和技术是必不可少的，但它们的力量来源于基本原理。如果要提高数字产品的可用性，则必须以适用于无数用例的不变行为规则为基础。

一、动效设计的起源

动效设计和UX的结合相对较新，而其根源是迪士尼。弗兰克·托马斯（Frank Thomas）和奥利·约翰斯顿（Ollie Johnston）是迪斯尼（Walt Disney）最受重视的动画师，也是匹诺曹（Pinnochio），小鹿斑比（Bambi）和狂想曲（Fantasia）等经典作品的重要贡献者。他们的12项动画基本原理在电影、电视和数字内容的动态图形中仍然具有影响力。

迪斯尼原理为了生动地讲故事，提炼出了身体物理运动的基本定律。它们赋予了画中的角色移动和情感，但它们不足以满足现代用户界面中的交互动效需求。

当代设计师试图弥补这一缺口。一个更具说服力的例子是由动画专家 Jorge R. Canedo Estrada 改编的迪士尼电影《动画设计的10项原则》（the 10 Principles of Motion Design）。不过如果要将这些整体应用到数字产品设计中，这些要点仍然需要转化。

Jorge R. Canedo Estrada的运动设计10原理

围绕交互UI元素（以及它们对用户体验的重要性）重新定义运动原理，最雄心勃勃的尝试是Issara Willenskomer的《 运动宣言 》中的用户体验。它的深度令人吃惊，但并不能让人轻松阅读。

在建立UX动效的12条原则时，Willenskomer

• 区分了动画设计和UI动效
• 阐明了动效如何提高可用性
• 解开了核心动效行为的内部运作方式

二、动效设计和用户体验：重要区别

在讲解动效设计原理之前，有必要重点说明一下与Willenskomer宣言中的动效的主要区别。

动效不仅仅是装饰

动效设计不是UI动画的代名词。这一点很关键，因为UI动画几乎总是被当作一种经过深思熟虑的装饰，而与UX无关（除了增加魅力）。动效不是装饰，它是行为，而行为只能帮助或阻碍用户体验。

两种互动类型：实时与非实时

动效设计涉及两个基本交互：实时和非实时。

• 实时：当用户在屏幕上操作UI元素时，实时交互可提供即时反馈。换句话说，动效行为会立即响应用户输入。
• 非实时：非实时交互发生在在用户输入之后，这意味着用户必须短暂暂停并观察所产生的运动行为，然后才能继续。

实时交互: 动效行为立即响应用户的输入. (Stan Yakusevich)

非实时交互: 在用户触发交互后，必须短暂暂停并观察运动行为。(Vitaly Rubtsov)

动效支持可用性

动效设计必须以四种不同的方式支持可用性：

• 期望值：当用户与UI元素交互时，他们期望看到哪些运动行为？动效是符合预期还是引起迷惑？
• 连续性：交互是否在整个用户体验中产生一致的运动行为？
• 故事性：交互及其触发的动作行为，是否与满足用户意图的事件的逻辑进程相关联？
• 关联性：UI元素的空间，美学和层次结构属性如何相互关联并影响用户的决策？动效如何影响存在的各种元素关系？

三、数字产品的12项动效原理

1. 缓动

缓动是模拟现实对象随时间加速和减速的方式。它适用于所有的UI动效元素。

缓动的对立面是直线运动。直线运动中的UI元素会立即从静止速度变为全速，从全速直接变为静止。这种行为在现实世界中不存在，对用户来说似乎停止了。

卡片和对应的椅子移动很快，但他们受缓动影响，移动平滑而在受控中停止。 (Saptarshi Prakash)

2.偏移和延迟

当多个UI元素同时并快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素可能具有其自身的功能。

偏移和延迟会在同时移动的UI元素之间创建层次结构，并传达它们相关但又不同的信息。元素的时间、速度和间距不是完全同步，而是交错排列，从而产生微妙的“一个接一个”的效果。

当用户切换页面时，偏移和延迟表明存在多个交互选项。

比特币App一次显示了多个元素。 它们的出现略微有些错开，从而让用户感知这些元素是相关联但又截然不同。(Gapsy Studio)

3. 父级

父级将一个UI元素的属性链接到其他UI元素的属性。当父级元素中的属性更改时，子级元素的链接属性也会更改。所有元素属性可以相互链接。例如，父级元素的位置可以绑定子级元素的大小比例。当父级元素移动时，子级元素的大小会增加或减小。

父级会在UI元素之间创建关系，建立层次结构，并允许多个元素立即显示在用户面前。因此，父级在实时交互中使用时影响最大。

这里，蓝色滑块的位置控制着背景遮罩的不透明度、灯泡周围的辉光效果以及光强度刻度的数值。(Ayoub Kada)

4. 转换

当一个UI元素变成另一个UI元素时，将发生转换。例如，下载按钮转换为进度条，并进一步转变为完成图标。

从用户体验的角度来看，转换是向用户展示其与目标相关的状态的有效方法（系统状态的可见性）。当UI元素显示从开始到结尾的过程时，这就特别有用（例如下载文件）。

转换显示了下载的开始，过程和完成。 (Aaron Iker)

5. 值的变化

在数字界面中，值的表现形式（数字的，基于文本的或图形的表示）很丰富，经常出现在从银行App到个人日历再到网购站点的各个产品中。由于这些表现形式都与实际存在的数据相关，因此它们可能会发生变化。

值的变化传达了数据展示的动态性，并告知用户数据是交互式的，并且可能会受到一定程度的影响。当没有动效的出现数值，用户参与数据的意愿降低。

动态引入值向用户显示他们有能力影响数据。（Taras Migulko）

6.遮罩

遮罩用于UI元素各部分的显示和隐藏。遮罩通过更改元素范围的形状和大小，保持元素本身的辨识度的同时，实现了功能的转变。由此，像照片和插图这样的详细视觉效果是理想选择。

从可用性的角度来看，设计师可以通过遮罩向用户显示他们正在进行一系列的交互。

遮罩可用于从图像捕获，到上传到电商平台的过渡。（SELECTO）

7.叠加

在平面空间中，没有深度，UI元素只能沿X或Y轴移动。叠加会在UI的平面中产生前景/背景区别的错觉。通过模拟深度，叠加可以根据用户需要隐藏和显示元素。

使用叠加时，信息层次结构是重要的考虑因素。例如，用户在做笔记应用程序中应该首先看到的是他们的笔记列表。然后，叠加可用于为每个消息（如Delete或Archive）显示辅助选项。

叠加允许用户快速归档或删除此笔记应用程序中的条目。(Karan Kapoor)

8.克隆

克隆是将UI元素拆分为其他元素的一种动效。这是突出显示重要信息或交互选项的明智方法。

当UI元素在界面中具体化时，它们需要一个清晰的原点来链接到屏幕上已经存在的元素。如果元素只是简单的放大或消失，那么用户会不太清楚页面中间的交互逻辑。

用户可以放心地单击彩色圆圈，它们显然来源于“添加注释”图标。 (Ariuka)

9. 模糊

想象磨砂玻璃门。它需要交互才能打开，但是可以辨别另一端正在等待什么（在某种程度上）。

模糊处理的方式相同。它为用户提供了一个界面，该界面要求进行交互，同时显示要跟随的屏幕提示。常见的示例有：导航菜单，密码屏幕和文件夹/文件窗口。

模糊处理为用户提供了重要的互动方式，同时使他们保持产品叙事的方向。 (Kyle Abarquez)

10. 视差

当两个（或多个）UI元素同时移动但速度不同时，将显示视差。再次强调，其目的是为了建立层次结构。

• 交互式元素移动速度更快，并显示在前景中。
• 非交互式元素移动速度变慢并退回到背景。

视差引导用户使用交互式UI元素，同时允许非交互式元素保留在屏幕上并保持设计统一性。

使用视差时，最重要的交互式元素移动最快，而非交互式元素移动较慢并退回到背景。(Tubik)

11.维度

维度使UI元素似乎具有多个交互方面，就像物理世界中的对象一样。通过使元素看起来像是可折叠的，可翻转的，浮动的或具有逼真的深度属性而实现的。

作为一种叙事手段，维度意味着UI元素的不同侧面被链接在一起，并实现了无缝的屏幕过渡。

维度意味着2D UI元素具有多个交互方面，就像物理世界中的对象一样。(Sang Nguyen)

12.移动式摄像机和缩放

移动式摄像机和缩放允许用户在空间上查看 UI元素，或增加元素比例以显示更多细节。

• 移动式摄像机：发生在用户的角度更接近（或远离）UI元素时。想象一下，一个拿着照相机走到一朵花的人近距离拍摄。
• 缩放：使用缩放时，用户的视角和UI元素保持固定，但是该元素在用户屏幕内的被放大（或缩小）。现在想象该人保持姿势并使用相机的变焦功能使花朵显得更大。

移动式摄像机：用户的视点似乎越来越接近背景图像。(Yanosh)

缩放：用户的视角不会更接近图像。而是图像的比例会增加。(Victor Aldabalde)

四、动效是一种沟通方式

交互体验需要各种轻快和微妙的动效形式。当坚持动效设计原则时，即使最基本的UI元素也成为人类复杂交流的媒介。如果忽略动效原理，动效就体现了自然界所没有的特征。再多的美学光彩也无法克服由此产生的笨拙。

动效设计与数字产品用户体验之间的关系正在迅速成熟。有原则的动效方法可以防止过度依赖趋势，工具和技术的短暂效用。更棒的是，它跨越了2D屏幕上元素的抽象运动与3D世界中对运动感知之间的鸿沟。

原链接：https://uxdesign.cc/a-guide-to-motion-design-principles-7f05f10ccd79
12项动画基本原理：http://frankandollie.com/PhysicalAnimation.html
Creating Usability with Motion: The UX in Motion Manifesto: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
译者：拾柒酱（zcool.com.cn/u/13687583）

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：结交更多有才华的设计师？请加入UI设计QQ群，与50000名设计师交流设计。