研究主题：提升动效可用性

研究对象：12条UX动效应用法则

“作为UX/UI设计师，我该如何适当在UX设计中加入动效？”，我总结了一些经验法则，可以很好地回答这个问题。在过去5年里，我的UI动画工作室发表的教程，非常幸运可以在40多个国家/地区，以及数百个顶级品牌设计咨询公司中指导UX/UI设计师们。

研究UX/UI动效超过15年后，我得出了一个结论——其实有12个规律方法来帮助提升UX动效设计。我将这些机会称为“ 12条UX动效应用法则”，它们可以通过多种创新方式进行叠加和组合使用。

我将宣言分成5部分：

-强调动效的主题；

-实时与非实时交互；

-提升动效可用性的4种方法；

-原理，技术，特性和价值；

-12条UX动效应用法则。

动效并不是UI动画！

设计人员通常将用户界面中的运动主题理解为“ UI动画”（实际上不是），所以我觉得在开始说12条原则前，有必要为大家普及下基础。

 

设计人员通常将“ UI动画”视为是让用户体验更愉悦的东西，实际上并没有增加太多价值。因此，UI动画通常被视为UX的后儿子。另外，用户界面动效，它被认为属于迪士尼的12条动画原理范畴，我在自己的《UI Animation Principles — Disney is Dead》一文中进行了反驳。

 

在我的宣言中，我将证明UI动画原则与“ 12 UX in Motion Principles”的关系，就像是建筑构造和建筑风格一样，是各自独立的。或者这样理解，一个建筑结构被物理建造后才会实际存在（施工后），但是原则理论却能指导物理建造。

 

动画就是工具，而原则是用来指导工具使用的，因此，原则理论对设计师的影响力更大。实际上，多数设计师经常在UX设计中，将“ UI动画”视为一种更高级的设计形式。

 

实时与非实时交互

区分“状态”和“作用”很重要，UX中的大多元素是静态的，例如设计组件。用户体验中的行为基本上是暂时的，是基于动作的。一个元素是被隐藏的，或正在被隐藏。如果是后者，动效的引入就可以很好地提升可用性。

 

另外，可以将交互的时间都视为实时或非实时发生。实时是指用户直接与用户界面中的对象进行交互。非实时意味着对象行为是事后交互的：它在用户操作之后发生，并且是过渡的。

 

 

这是一个重要的区别。实时交互也可以被认为是“直接操纵”，因为用户正在直接和界面对象进行交互。用户使用界面时，界面行为正在发生。非实时交互仅在来自用户的输入之后发生，并且具有将用户短暂锁定在用户体验之外的作用，直到转换完成。认知这些差异性，会在我们学习12项原则时发挥帮助作用。

 

提升动效应用性的4种方法

这4点代表判断用户体验可用性时的依据：

 

-预期值

分两个方面——设计为用户带来的感受，以及实际呈现效果。换句话说，作为设计师，我们希望最大程度地减少用户期望与他们体验之间的差距。

 

-连续性

既代表用户流程，也代表用户体验的“一致性”。可以从“内部连续性”（场景内的连续性）和“内部连续性”（构成整个用户体验的一系列场景内的连续性）的角度来考虑。

 

-叙述性

是用户体验中事件的线性进展，一系列微妙的变化和动作串联在一起是，就构成了用户体验流程。

 

-关联性

指导用户理解和决策界面中组件之间的关系。

 

原理、技术、特性和量值

泰勒·韦恩（Tyler Waye）写道：“原理……是产生各种技术的基本前提和功能规则。无论发生什么，这些要素都保持一致。”我们可以设想一个层次结构，其中“原则”在顶部，“技术”在第二，接下来是“内容”，“量值”在最底部。可以将技术视为把原则实际执行的一种呈现手法，类似于我们常说的“设计风格”。

 

“属性”是特定对象的参数，这些参数会被动画化以创建该技术。这些包括（但不限于）位置，不透明度，比例，旋转，锚点，颜色，笔划宽度，形状等。“量值”是实际的数字属性值，它们会随时间变化以创建所谓的“动画”。

 

比如，设计一个飞机降落的动效，我们可以使用“模糊原理”，模糊和不透明度调至25px和70％。现在我们有了一些可以使用的工具。更重要的是，这些语言工具与任何特定的原型工具无关。

 

12条UX动效应用法则

缓动，偏移和延迟与定时有关；处理与对象关系有关；变换，数值变化，遮罩，叠加和复制都与对象连续性有关；视差与时间层次有关。模糊度，维度和滑动变焦都与空间连续性有关。

 

原则1：缓动

发生即时事件时，对象行为符合用户期望。

 

 

所有（实时或非实时）的动效都非常缓和。这种设计轻松搭建了一种自然舒适的氛围，也有一种连续感。顺便提一句，迪士尼将其称为“慢进慢出”。

 

 

左侧示例的线性运动，看起来很好像糟糕。第一个示例没有很强的动效，但呈现出来的也很流畅。以上三个示例都有确切的帧数，并且演示的时间相同，唯一的区别是动效的缓和程度。

 

作为关注可用性的设计师，除了美学之外，我们还需要多提出质疑，哪个示例更能提升可用性？我在这里介绍的情况是缓动固有的特点。在适当缓动情况下，用户会感觉动作本身是无缝的并且在很大程度上是不可见的，这是一件好事，因为它不会分散注意力。线性运动明显可见，并且感觉不完整且分散注意力。

 

我们再来看右边的示例，它也不并不是天衣无缝的。实际上，它具有明显的“设计”感，我们会注意到物体是如何着陆的，但与左侧线性运动示例相比，它仍然感觉“更正确”。

 

我想向您开放的是一个轻松的运动世界。作为设计师，您实际上可以在项目中创建和实现无限的“缓动”。所有这些放松都有自己的期望响应，它们会在用户中触发。

 

原理2：偏移和延迟

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

 

 

“偏移与延迟”受迪斯尼动画原理影响，本例中为“跟随并重叠动作”。

但是，重要的是要注意，方法虽然类似，但目的和结果却不同。迪斯尼的《原理》可产生“更具吸引力的动画”，而《UI动画》的原理则可产生更多可用的体验。

 

这一原则的效用在于，它通过“告诉”用户界面中对象的性质，预先为用户设置成功的条件。上面参考中的叙述是顶部的两个对象是一组，而底部则是分开的。顶部的两个对象可以是非交互的图像和文本，而底部的对象可以是按钮。

 

甚至在用户注册这些对象是什么之前，设计人员就已经通过运动告知这些对象是“分离的”。

 

Credit: InVision

 

在上图示例中，悬浮按钮（FAB）转换成了包含三个按钮的标题导航元素。由于按钮在时间上彼此“偏移”，因此最终通过“分离”来提升可用性。换句话说，设计人员是在利用时间本身来说（甚至在用户注册对象之前）对象是分开的。这可以让用户完全独立于视觉设计，了解界面中对象的特性。

 

以下是一个示例：

 

Credit: Jordi Verdu

 

在上面的例子中，静态视觉设计告诉我们在背景上有图标。假设这些图标都是彼此独立的，并且做着不同的事情。

 

图标被分组为行，并且表现得像单个对象。它们的标题同样被分组为行，并且表现得像单个对象。动效告诉用户这些界面元素不是她的眼睛所看到的。在这种情况下，我们可以说界面中对象的时间行为并没有提升可用性。

原则3：创建关联性

与多个对象进行交互时，创建空间和时间层次关系。

 

 

这是一项强大的原理，可“关联”用户界面中的对象。在上面的示例中，顶部或“子级”对象的“ scale”和“ position”属性作为底部或“父级”对象的“ position”属性的父级。

 

处理对象属性与其他对象属性的链接，创建对象关系和层次结构。

还可以使设计人员更好地协调用户界面中的时间，同时与用户交流对象关系的本质。回想一下，对象的“属性”包括以下内容：“比例”，“不透明度”，“位置”，“旋转”，“形状”，“颜色”，“值”等。这些属性中的任何一个都可以链接到其他任何属性，以在用户体验中创造协同作用。

 

Credit: Andrew J Lee, Frank Rapacciuolo

 

在左侧示例中，“表情”元素的“ y轴”是圆形指示器，也是“ x轴”的父级。当圆形指示器元素沿水平轴移动时，其“子级”元素沿水平和垂直方向移动（同时被遮罩）。此功能最好可以“实时”互动，当用户直接操作界面对象时，设计人员通过动效与用户沟通，将其联系起来。

 

创建关联有3种形式：“直接关联”（请参见上面的两个“延迟”示例，“反向”示例，请参见下文）。

 

 

延迟和反向

原则4：变换

对象实用程序更改时，创建连续的叙述流状态。

 

 

关于运动原理“转换”中的UX的文章已经很多。在某些方面，它是动画原理中最明显和最深刻的部分。

 

转换是最容易识别的，主要是因为它效果很突出。我们注意到，“提交”按钮将形状更改为径向进度条，最后再次将形状更改为确认复选标记。它完整的展示了一个功能，并引起了用户注意。

 

Credit: Colin Garven

 

变换所做的是无缝地将用户转换为不同的UX状态或“是”（如这是一个按钮，这是一个放射状的进度条，这是一个复选标记），引导成所需的结果。通过这些功能空间将用户吸引到了最终目的地。

 

转换的作用是将用户体验中的关键时刻从认知上“分块”为一系列无缝且连续的事件。这种无缝性可以提高用户的感知度，留存率和任务成功率。

原则5：量值变化

当量值主体发生变化时，创建动态且连续的叙事关系。

 

 

基于文本的界面对象（即数字和文本）可以更改其值。这是那些“难以捉摸的明显”概念之一。

 

 

文本和数字更改非常常见，以至于它们绕过我们，而我们却没有给他们带来区别和严谨性，以评估它们在提升可用性方面的作用。

 

那么，当值改变时用户会经历什么？在用户体验中，运动中的12个用户体验原则是提升可用性的机会。这里的三个机会是将用户与数据背后的现实，代理的概念以及价值本身的动态性质联系起来。

 

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

 

 

当数字值未进行加载时，用户看到的数字对象是静态的。它们就像涂漆的标志，显示时速限制为55英里/小时。

 

数字和值表示现实中正在发生的事情。现实可能是时间，收入，游戏得分，业务指标，健身跟踪等。我们通过运动来区分的是“量值主体”是动态的，而这些量值反映的是该动态价值集中的某些东西。

 

这种关系不仅会被视觉上包含价值的静态对象所迷失，而且还会失去另一个更深层次的机会。

 

 

Credit: Barthelemy Chalvet, Gal Shir, Unknown

原则6：遮罩

当通过显示或隐藏对象或组的哪一部分确定实用程序时，在接口对象或对象组中创建连续性。

 

 

遮盖对象的行为可以被认为是遮盖对象形状与效果之间的关系。

因为设计师们熟悉静态设计中的遮盖，我们有必要同UX运动原理“屏蔽”做区分，因为它是以一个行为动作发生，而不是作为一个状态。

 

通过暂时使用对象的显示和隐藏区域，效用以连续和无缝的方式转换。这也具有保留叙述流的效果。

 

Credit: Anish Chandran

 

在示例中，页眉变成相册时会更改边界形状和位置，但不会更改内容。既改变了图像的效果，同时将内容保留在蒙版中——这是个相当巧妙的技巧。这是非实时发生的，是一种过渡，在用户执行某个操作后即被激活。

 

请记住，UI动画原理是暂时出现的，并通过连续性、叙述、关系和期望来提升可用性。在上述参考中，对象本身不变，但也具有边界和位置，这两个因素最决定设计的样子。

原则7：覆盖

当分层对象依赖于位置时，在视觉平地中创建与空间的关系。

 

 

叠加层通过允许用户利用平地排序属性，来克服非空间层次结构的缺乏，从而提升可用性。为了使飞机稍微降落，Overlay允许设计人员使用运动来传达与位置有关的对象，这些对象存在于非3D空间中其他对象的后面或前面。

 

Credit: Bady, Javi Pérez

 

在左侧的示例中，前景对象向右滑动以显示其他背景对象的位置。在右侧的示例中，整个场景向下滑动以显示其他内容和选项（同时使用“偏移与延迟原理”传达对象的个性）。在一定程度上，作为设计师，“层次”的概念是如此明显以至于不言而喻。

原则8：克隆

当新对象出现和分开时，创建连续性、关系和叙述。

 

 

在当前场景中（以及从当前对象中）创建新对象时，以叙述方式说明它们的外观非常重要。在此宣言中，我强烈主张为对象的起源和离开创建叙事框架的重要性。

 

简单的不透明褪色往往无法达到此效果。遮罩，克隆和维度是三种基于可用性的方法，可以产生很棒的使用体验。

 

Credit: Jakub Antalík, Jakub Antalík, Unknown

原则9：模糊

允许用户在空间上定位自己与对象或场景的关系，而非在视觉层次。

 

 

与“蒙版运动原理”中的UX相似，“模糊化”既作为静态现象又作为暂时现象存在。这可能会使没有时间思考经验的设计师（即瞬间之间的瞬间）感到困惑。设计人员通常按屏幕设计或按任务设计。认为遮蔽是被遮盖的行为，而不是被遮盖的状态。静态设计表示被遮盖的状态，引入时间可以使我们了解物体被遮挡的行为。

 

Credit: Virgil Pana, Apple

 

从以上两个示例中，我们可以看到，看起来像透明对象或叠加层的遮挡也是一种涉及时间上多个属性的交互。各种常见的技术包括模糊效果和降低整体对象透明度，使用户知道她正在操作的其他非主要内容，即在主要对象层次结构“之后”存在的世界。

原则10：视差

用户滚动时，在视觉平面中创建空间层次结构。

 

 

作为运动原理中的UX，“视差”描述了以不同速率运动的不同界面对象。

使用视差，用户可以在保持设计完整性的同时专注于主要动作和内容。背景元素会为用户在知觉和认知上“消失”。

 

Credit: Austin Neill, Michael Sevilla

 

 

这对用户的影响是，在使用期间清楚地定义各种对象关系。前景对象或移动“快速”的对象在用户面前显示的“更近”。同样，背景物体或“移动较慢”的物体也被视为“离得更远”。

 

设计人员可以使用时间本身来创建这些关系，以告诉用户界面中哪些对象具有更高的优先级。因此，将背景或非交互式元素进一步“推后”是有意义的。

原则11：维度

当新对象出现和离开时，提供空间叙事框架。

 

 

对用户体验至关重要的是连续性现象以及位置感。维度提供了一种强大的逻辑方式来克服用户觉得平庸的体验。人类非常善于使用空间框架在现实世界和数字体验中导航。提供空间维度的出现及消失的参考点，有助于增强用户对于位置的感知。

 

此外，维度原则克服了视觉平面中的分层悖论，出现在其他对象的“前面”或“后面”。维度以三种方式呈现：折纸维度，浮动维度和对象维度。折纸的维数可以用“折叠”或“铰接”式的三维界面对象来考虑。

 

折纸维度示例

 

由于将多个对象组合为“折纸”结构，因此即使看不见隐藏对象，在空间上仍可以说它们“存在”。这有效地将用户体验呈现为连续的空间事件，用户可以在交互模型本身以及界面对象本身完成操作。

 

浮动维度为接口对象提供了空间的起源和偏离，使交互模型直观且具有很强的叙事性。

 

浮动维数示例

 

在上面的示例中，维度是通过使用3D“卡片”来实现的。这提供了支持视觉设计的强大叙事框架。通过“翻转”卡片来扩展叙述，以访问其他内容和交互性。

 

维度是一种强大的引入新元素的方法，可以最小地降低突发性。维度系数会让交互对象具有更模拟真实感。

 

对象维数示例

 

多个2D层在3D空间中排列形成真实尺寸的对象，它们的维度是在实时和非实时过渡时刻显示的。物体维数指使用者在不可见的空间位置上产生对物体效用的敏锐意识。

原则12：Dolly＆Zoom

在导航界面对象和空间时保持连续性和空间叙述。

 

 

移动（Dolly）和变焦（Zoom）是电影概念，指的是与相机有关的对象的运动，并且图像本身在帧中的大小从远摄到近摄平滑地变化（反之亦然）。

 

在某些情况下，无法判断对象是否正在缩放，它是否正在朝3D空间中的相机移动或相机是否朝着3D空间中的对象移动，以下三个示例说明了可能的情况。

 

图层是在摇动，缩放还是在移动相机？

 

将“移动”和“缩放”的实例视为独立的，因为它们涉及连续变换，并且满足运动原理中用户体验的要求：它们通过运动来提升可用性。

 

左边的两个图像是镜头滑动缩放，而右边的图像变焦缩放

 

多莉（Dolly）是一个电影术语，适用于推进或远离对象的相机运动（它也适用于水平“跟踪”运动，但在可用性方面不那么重要）。

 

Credit: Apple

 

在UX中，在空间上，此运动指的是观察者视角的变化，也可能是指在对象更改位置时保持静态的视角。多莉原理通过连续性和叙述性，来无缝过度对象目标。多莉还可以结合“尺寸原则”，从而获得更多空间体验和更多的深度，向用户传达当前视图“前”或“后”的其他区域。

 

缩放指的是既不是透视也不是物体在空间上的移动，而是物体本身在缩放（或者我们的视野正在缩小，从而导致图像放大）。这向用户传达对象所在“内部”区域的信息。