今天给大家找到了一篇非常经典和实用的动效设计原则，作者曾为四十多个国家和上百个顶尖机构提供咨询服务，用十五年的UX和UI经验总结出了这十二条动效UX原则，它们可以通过多种创新方式协同堆叠和组合，提升你产品的体验与可用性。

本篇虽然是2017年的内容，但对于新入行的设计师们来说仍然是非常实用且必备的指导原则，而老设计师们也不妨重新温习一遍，看看是否比原先多了更深的理解呢？

作者将本篇内容分成了五个部分：

解决UI动效的主题 - 不是你想的那样

即时与非即时交互

动效提升可用性的四种方式

原则，技术，属性和值

动效UX的12条原则

前四部分是概念部分，大家可以选择跳过直接阅读最后的原则部分（不过不建议，理清概念对我们理解这十二条动效原则非常重要）

这与UI动画无关

用户界面中的动效主题通常被设计师理解为“UI动画”，其实则不然——我觉得在我们进入这12条原则之前，应该要先了解一下它的概念。

“UI动画”通常被设计师认为是一种能提升用户体验的工具，因此，UI动画经常被当作UX的附属品，如果有的话，通常也是被放在最后考虑。

此外，可以理解的是，UI动画一直被认为是属于迪士尼动画12条原则的范畴，我在自己的文章《UI动画原则——迪士尼死了》(UI Animation Principles - Disney is Dead)中反对这一点。

在这篇文章中，我将会证明“UI动画”之于“十二条动效UX原则”，就好比“施工”之于“建筑”。我的意思是，虽然一个建筑需要物理构建才能存在(需要构建)，但决定建造内容的还是基础理论。

动画是关于工具的，但原则指导了我们为何要使用工具以及工具的实际应用。因此，原则为设计人员提供了一种更深层次的帮助和机会。

而大多数设计师认为的“UI动画”，实际上只是执行了一种更高层次的设计模式——界面对象即时和非即时事件中的时间行为。

即时与非即时交互

首先，区分“状态”和“行为”是很重要的。在用户体验中，状态是静态的，而行为则是基于时间和动态的。就比如，一个元素可以处于半透明的状态，也可以处于半透明的行为中。如果是后一种情况，那么我们就知道这其中涉及到运动，并且在某种程度上可以提升可用性。

此外，交互的所有时效行为都可以被认为是即时发生或非即时发生的。即时意味着用户直接与界面中的对象进行交互。非即时意味着对象行为是后交互式的:即它发生在用户操作之后，并且是过渡性的。

这是一个重要的区别。

即时交互也可以被认为是“直接操作”，因为用户直接且立即地与界面对象进行交互。界面的行为是用户使用它时发生的。非即时交互只有在用户操作之后才会发生，并且在过渡完成之前，都不允许用户进行其他交互。

上述概念将为我们理解《12条动效UX原则》的过程中带来优势。

动效提升可用性的四种方式

期望

期望分为两个方面——用户如何感知对象，以及对象的行为。换种说法就是，作为设计师，我们应该尽量缩小用户期望和体验之间的差距。

连续性

连续性体现了用户流程和用户体验的“一致性”，既可以从页面内元素的连续性来考虑，也可以从页面与页面之间的连续性来考虑。

叙述性

叙述性是用户体验中事件的线性发展，是一个时间/空间框架。可以理解为相互连接并贯穿整个用户体验的一系列关键时间与事件。

关联性

关联性是指界面对象之间的空间、时间和层次表示，它可以帮助用户进行理解和决策。

原则、技术、属性和值

泰勒·韦(Tyler Waye)在书中写道:“原则是各种功能的基本前提和规则。无论发生什么，这些要素都应保持一致。所以我需要反复强调的是，原则与设计无关。

我们可以想象一种层次结构，最顶端是原则，其次是技术，再下面是属性，最后是值。

技术可以被理解为原则或原则组合的执行，类似于“风格”。

属性是创建该技术的各种特定参数。这些参数包括(但不限于)位置、不透明度、比例、旋转、锚点、颜色、描边宽度、形状等。

值是实际的属性数值，随着时间的推移而变化，以创建我们所说的“动画”。

为了加深理解，我们举这样一个例子：一个UI动画为了实现“毛玻璃”风格效果（技术），引用了模糊（Obscuration）的理论（原则），改变其模糊和透明度（属性）分别是25px和70%（值）。

十二条动效UX原则

缓动、偏移和延迟与时间有关；继承关系与关联性相关；过渡、值变、遮罩、覆盖、复制都与连续性相关；视差与时间层次有关；虚化、折叠和滑动&变焦都与空间连续性有关。

1

缓动

当时间事件发生时，对象行为与用户期望一致。

所有动效元素都需要一定程度上的缓动行为(不管是即时的还是非即时的)，缓动可以创造并强化用户体验中的自然感，并在元素按照用户期望的方式运行时创造出一种连续性。顺便说一句，这种方式在迪士尼动画原则中被称为“慢进慢出”。

左边的例子是线性运动，看起来非常不友好。第一个缓动动画则看起来很自然。上面三个例子的帧数都是一样的，发生的时间也是一样的，唯一不同的就是它们的缓动程度。

作为关注可用性的设计师，除了美学之外，我们还需要自己严谨和思考，哪个例子更能支持可用性？

你可以想象一种完全不符合用户预期的缓动方式，让可用性大大下降。在适当缓动的情况下，用户体验到的运动本身是无缝的，在很大程度上是无形的——这是一件好事，因为它不会分散注意力。而线性运动则明显是有点偏离、破碎、不协调和让人分心的。

但这种运动其实并非天衣无缝。事实上，它有一种“设计感”。我们注意到物体是如何着陆的。它感觉不同，但它仍然感觉比线性运动的例子更“正确”。

缓动可能对可用性产生负面影响吗？答案是肯定的，原因有很多。一种是计时，如果你的计时太慢或太快，那么可能会超出预期并分散用户的注意力。同样，如果你的缓动与品牌或整体体验不一致，也会对用户体验产生负面影响。

我想要告诉你的是，作为设计师的你，可以使用的缓动种类无穷无尽。当用户触发时，不用的缓动所带来的预期响应都不一样。

总结：什么时候使用缓动？任何时候！

2

偏移与延迟

在引入新元素和场景时定义对象关系和层次结构。

偏移和延迟是受迪士尼动画原则影响的仅有的两个动效原则之二（第一个是缓动）。

值得注意的是，虽然两者在实现上类似，但在目的和结果上却是不同的。虽然迪士尼的原则带来了“更具吸引力的动画”，但UI动画却带来了更多可用性体验。

这一原则的实用性在于，它通过“告诉”用户界面中元素的一些性质，预先为用户行为做好了准备。甚至在用户与这些元素交互之前，设计人员就已经通过运动告诉她这些对象是“独立的”。这是非常强大的。

图片来源：InVision

在上面的示例中，浮动操作按钮(FAB)转换为由三个按钮组成的标题导航元素。由于按钮之间有时间上的“偏移”，它们最终通过“分离”来提升可用性。换句话说，用户在看清楚这些导航元素之前，设计师就已经用户时间差说明了元素之间的分离关系。这便有了一种与视觉设计不同的方式，来向用户介绍界面元素。

为了更好地向您展示这是如何工作的，我将向您展示一个打破偏移和延迟原则的示例。

图片来源：Jordi Verdu

在上面的例子中，静态视觉设计告诉我们背景上有图标，并且这些图标需要彼此分开并做不同的事情。但在动效设计中，统一的视觉效果却与此相矛盾。

运动时，图标被分组成行，表现得像单个对象。它们的标题同样被分组成行，也表现得像单个对象。这个动作与用户看到的东西感受完全不同，在这种情况下，我们可以说界面上的对象的时间行为是不具有可用性的。

3

继承关系

在与多个对象交互时创建空间和时间层次的关系。

继承关系是将界面元素关联起来的重要原则。上图中，顶部子元素的尺寸和位置都与底部父元素相对应。继承关系将不同元素的属性关联起来，以增强可用性。这需要设计师更好地协调事件的发生时间，以此向用户传达元素之间的关系。

很多元素属性都可以创造用户体验的协同感，暗示元素之间的继承关系，例如尺寸、透明度、位置、旋转角度、形状、颜色等。

图片来源：Andrew J Lee，Frank Rapacciuolo

在上面的第一个示例中，笑脸元素的y轴属性继承自圆形指针的X轴坐标，当父元素圆形指针横向移动时，子元素气泡表情同时进行横向和纵向移动（同时被遮罩——另一条原则）。

其结果是同时出现了一个分层的时间叙事框架。值得注意的是，笑脸元素起到一系列的“锁定”作用，在每个数字上，笑脸元素的转变都是完全可见的，用户可以无缝地体验到这一点，这是例子中一个微妙的“可用性欺骗”。

继承关系原则最好是一种“即时”互动。因为这样用户才能感受到对界面元素的直接掌控，设计师可以即时通过动效告诉用户元素之间的关联。

继承关系的动效分为3种形式，上面两种属于“直接继承”，除此之外还有“延迟继承”（下图一）和“逆向继承”（下图二）。

4

过渡

用连贯的状态描绘表达元素功能的改变。

关于动效UX的过渡原则，在某些方面，这可能算得上最明显透彻的动画理论了。

过渡是最明显的，主要是因为它引人注目。在下面的例子中，我们注意到“提交”按钮改变形状成为径向进度条，最后再次改变形状成为确认复选标记。它吸引了我们的注意力，讲述了一个故事，并且完成了。

来源： Colin Garven

过渡所做的就是无缝地将用户转换到不同的UX状态，这最终会产生一个期望的结果，用户通过这些功能空间到达最终目的地。

过渡的效果就是将用户体验中的关键时刻在认知上“分块”成一系列无缝连续的事件。这种无缝性会更好的被用户感知、记忆和跟踪。

5

变量

当元素的值发生变化时，可以创造一种动态的、连续的叙事关系。

文本、数字的更改是如此常见，以至于我们忽略了它们，而没有对它们进行严格的区分和评估，检测它们在支持可用性方面的作用。

那么，当值发生变化时，用户会体验到什么呢?

如果说这十二条动效UX原则背后的核心是提升可用性，那么此处有3个方法：1.向用户表达数字背后的现实含义、2.沟通介质、3.值的动态变化。

让我们看一下用户仪表板的示例。

当界面元素加载没有变量时，这向用户传递的数字信息是静态对象。它们就像路标，显示的是限速55英里每小时。

但很多界面数字是反应现实数据情况的，例如收入、游戏得分、商业指标、健身记录等。如果使用动态的方式来表示它们，我们就能感到它们反映的是动态变化的数据。但如果使用静态的展示方式，则不仅丢失了这种关联感，还丢失了另一个更深层次的感受。

当我们用基于运动的值来表示动态系统时，它会激活一种“神经反馈”。用户感受到数据的动态特征后，能够感受到其意义，并联想到与之相关的对象。这就让数值就成为了沟通用户与关联对象（数据背后含义）的桥梁。相对的，如果这些数值看起来是静态的，就无法连接用户与关联对象，桥梁的作用自然也没有了。

变量原则既可以在即时交互中发生，也可以在非即时交互中发生。在即时交互中，用户与对象交互以更改变量。在非即时交互(如加载器和转换)中，值在没有用户交互的情况下发生变化，以反映动态描述。

6

遮罩

当元素或元素组的一部分被显示或隐藏时，可以使界面更具连续性。

遮罩行为可以理解为元素形状与功能之间的关系。

因为设计师们通常只熟悉静态设计中的“遮罩”，所以我们有必要重新理解一下用户体验中的运动“遮罩”，它发生在运动中，是一种行为，而不是一种状态。

通过在运动中使用元素的显示和隐藏，可以连续且无缝的转换页面，也可以使整个流程更加的顺畅。

在上面的例子中，标题图像改变了边框的形状和位置，但没有改变内容，变成了一个专辑。这可以改变元素的性质，同时在遮罩中保留内容——这是一个相当巧妙的技巧。这个例子属于非即时事件，在用户操作之后才发生。

记住，UI动画的原理与时间紧密相关，通过持续性、描述性、关联性与可预期这四种方式来提升可用性。上述的例子中，尽管元素的内容前后保持不变，但是轮廓和位置决定了它是什么。

7

叠加

当分层对象依赖于位置时，可以在视觉平面上创建空间层次关系。

叠加通过堆叠排序来弥补平面空间缺乏层次的问题，以此提高体验可用性。

为了让平面层次丰富一点，设计师们可以通过使用叠加运动来传达位置相关的物体，这些物体存在于非3D空间的其他物体的后面或前面。

在左边的例子中，前景元素向右滑动来显示其他背景元素的位置。在右边的例子中，整个场景向下滑动以显示额外的内容和选项(同时使用偏移和延迟原则来传达照片对象的个性)。

对于设计师来说，“层”的概念是非常明确的，因为我们做的设计本身就是有层级的。但对于用户来说，隐藏的元素必须被定义出来，或者经过尝试，才能够看到并了解。所以，我们必须小心区分"创造"和"使用"的过程。

叠加原理允许设计师在“z轴”定位层之间进行交流，从而向用户传达空间感。

8

复制

当物体被复制并互相分离时，可以帮助我们创建连续、流畅的流程框架。

在当前页面中(以及从当前元素中)创建新元素时，从叙述性角度考虑它们的外观是非常重要的。在本篇文章中，我一再强调为元素的出现和隐藏建立一个流程框架的重要性。简单的不透明度淡化往往达不到这个效果，遮罩、复制和叠加是三种基于可用性的方法，可以产生强有力的视觉效果。

在以上三个例子中，新元素都是从主视觉元素中创建的。这种双重方法具有强烈的视觉效果，可以传递一个清晰、明确的事件链:由“X”动作引发创造新元素的“Y”动作。

9

虚化

虚化允许设计师在非主视觉层次的空间上定位自己与元素或页面的关系。

与动效遮罩的UX原则相似，虚化既是静态现象，也是时间行为。我们可以把虚化想成是被虚化的过程而非虚化状态。静态设计表示了被虚化的状态，而时间的引入可以带给我们一种物体被遮蔽的感觉。

从上面的两个例子中，我们可以看到虚化原则，这看起来像透明或覆盖的效果，也可以用作多个元素的即时交互。这个原则的很多都涉及到了模糊和透明覆盖效果，以告知用户除了操作层之外，还有另外一个世界。

设计师们可以利用虚化原则在用户体验中提供一个全局或客观的视图。

10

视差

当用户进行页面滚动时，可利用视差在可视平面中创建出空间层次感。

“视差”是指不同界面元素以不同的速度移动。

视差可以帮助我们保持在设计完整性的同时，让用户聚焦于主要操作和内容。视差事件中，用户对背景元素的感知会被弱化。设计师可以利用视差原则将即时内容与背景内容区分开来。

这一原则可以帮助用户在交互的过程中，明确定义各种元素关系。前景元素或移动“更快”的元素在用户看来是“更近”的。同样，背景元素或移动“较慢”的物体也会被视为“距离较远”。

设计人员可以利用时间差来创建这些关系，告诉用户界面中有哪些对象具有更高的优先级。因此，让背景或非交互式元素“后退一步”是有意义的。这样做不但能够让用户感受到超越平面设计的层次感，还可以使页面变得更加自然和流畅。

11

翻转

通过具有空间架构的描述方式来表现新元素的产生与离场。

对于用户体验来说，连续性和位置感是至关重要的。翻转原则可以良好的弥补用户体验中过于平面化以及逻辑不清的缺点。

人类非常擅长通过空间框架来引导虚拟和现实世界中的体验。提供具有空间感的出现和离开方式可以增强用户在体验中的方位感。

此外，翻转原则还克服了视觉平面上的分层悖论，即处在同一平面上的物体具有不同的视觉层次。

翻转原则表现为折叠翻转、浮动翻转和对象翻转三种形式。

折叠翻转可以理解为界面元素的“折叠”或“分页”

由于多个元素被组合成“折叠”结构，隐藏的对象仍然可以说是“存在”，即使它们在空间上是不可见的。这将有效地为用户呈现一个连续的空间事件，用户可以在交互模型和界面元素中导航。

浮动翻转为界面元素提供了空间上的起点和终点，使得交互模型更加直观、流程感更强。

引用:Virgil Pana

在上面的例子中，浮动翻转为视觉设计提供了强有力的流程框架。通过“翻转”卡片来获取更多的内容和交互性，叙事性也得以扩展。翻转原则是降低因引入新元素而带来突发感非常好的方式。

对象翻转能够给元素带来真实的深度和形状。

在这里，多个二维元素被安排在三维空间中，它们的空间感在即时或非即时过渡时显现。对象翻转可以使用户对隐藏元素有较强的感知。

12

滑动和变焦

在界面导航元素和页面中保持连续性和空间叙述性。

滑动和变焦是电影中的概念，滑动指的是影片中物体的移动，以及画面平滑切换远近景的过程。

有时候，你无法判断元素是在变大，还是元素在3D空间中向前移动，或是在3D空间中摄像头在向前移动（如下面的例子）。

因此，可以适当地用“缩放”来替代“滑动”效果，因为它们不但具有相同的连续性和视觉效果，还满足了用户体验中的可用性。

左边的两个图像是滑动，而右边的图像是缩放

变焦则适用于朝向或远离主体的相机移动（它也适用于水平“跟踪”运动，但在可用性环境中作用微小）。

在UX中，这种运动即可以表示观察者视角的变化，也可以表示元素位置的改变。变焦还可以结合翻转原则，从而向用户传达更深入的空间体验感和层次感。

这种方式可以通过无缝的过渡（无论即时或非即时）来提升可用性。用无缝的方式表现滑动变焦原则，能够创造出很棒的空间感。

用设计的角度看世界，用学习的方式来成长

BigDcc