作者网址：Issara Willenskomer
原文地址：Creating Usability with Motion: The UX in Motion Manifesto
译者：mantfly
此文由非专业人士翻译自Medium，仍在不断修订中。如有错误，欢迎指正。
下面的文章回答了这个问题——“作为一个视觉或者交互设计师，何时何地能让动效提供可用性。”
过去五年，我十分荣幸可以通过我的UI动画教程训练和指导来自40多个国家数百个顶尖品牌和设计咨询公司的视觉和交互设计师。
在15年用户界面的动效研究中，我总结出在交互设计的项目中用动效提供可用性的12个具体因素。
我把这12个因素叫做“交互动效的12个原理”并且他们可以以各种创新的方式叠加合并。
我把文章分为5个部分：
1、定位 UI 动效的核心——不是通常认为的
2、实时和非实时交互
3、4个让动效提供可用性的方法
4、原理、技巧、属性和值
5、交互动效中的12个原理
（中间引导略）
这与UI动效无关
设计师普遍认为的界面上的动效是UI 动效，然而并不是，我认为需要在介绍12条原理前必须交代一下环境。
设计师认为“UI 动效”的典型之处是让用户体验更愉悦，但总的来说缺少价值。因此，UI动效像是UX的后代。要用的话，通常是最终的一步。
此外，动效在用户界面的背景下自然被列为迪斯尼领域的12个动效原理之下，我在我的这篇“UI Animation Principles — Disney is Dead.”中争论了这一点。
在我的指南中，我认为UI动效对于12个交互动效原理就像是建筑的骨架。
当一个骨架需要实际建造出来（需要构造），决定建造出来的指南来自建域的原理。
动效都是关于工具。原理是指导工具使用想法的实际应用，提供给设计师机会优势。
大多数设计师认为UI动效是一种更高阶的设计形态：界面对象从静态到动态的时间行为。
实时和非实时交互
这里关键是，区分状态和行为非常重要。交互中的状态最基本是静态，比如设计排版。交互中的行为最基本是时间且基于动效。一个对象可以是某种状态或者行为。如果是后者，我们知道动效便起到实用性。
另外，所有的交互在时间上可以是实时也可以是非实时的。实时意味着用户可以在界面直接与对象交互。非实时意味着对象行为是滞后的：发生在用户行为之后再变化。
这是非常重要的区别。
实时交互也可以认为是“直接操作”，用户与界面交互直接而快速。界面行为在用户使用时发生。
非实时交互发生在用户输入之后，即刻锁定用户的用户体验直到转变完成。
在继续认识交互动效12个原理的时候，认识到这些区别是有好处的。
动效的可用性的四种方式
这四个要点表明了用户体验的时间行为提供可用性的四种方式。
预期
预期分为两个部分——用户如何认知对象的存在和行为。换种说法，作为设计师，我们想最小化用户的期待和用户体验之间的差距。
连续
连续表示用户流程和用户体验的一致性。连续可以是在某一个场景内部的连续性，也可以是组成整个用户体验的一系列场景之间的连续性。
流程
流程是在用户体验从时间\空间的框架之下事件的线性流程。这可以将整个用户体验过程中将一系列离散的时刻和事件连接起来。
关系
关系是指界面对象之间的时间、空间和层次表现，引导用户理解和决策。
原理、方法、属性和值
Tyler Waye说“原理是……功能的基本前提和规则，从中产生大量的技巧。无论发生了什么这些原理都保持不变。”他不断重复，原理与设计无关。
从这里，我们可以想出一个层次结构，原理在最顶层，方法下一层，属性再下一层，值在最底层。
方法可以认为是各种无限制的原理的执行或者结合。我认为方法跟风格类似。
属性是可以活用来创造技巧的具体对象的参数。这些包括（不仅仅）位置、透明度、比例、旋转、角度、颜色、描边宽度、形状等等。
值是属性的实际数值，它可以随时间变化来建立我们所说的“动画”。
所以要飞机降落（超前一点），我们可以说一个虚拟的UI动画参考是用遮蔽原理，方法是“模糊玻璃”，属性是模糊度和透明度，数值分别是25px和70%。
目前我们可以使用一些工具。更重要的是，这些语言工具与任何特定的原型工具无关。
交互动效中的12个原理
缓动、偏移和延迟是关于时间。
父级是关于对象关系。
变换、改变值、蒙板、叠加和克隆是关于对象连续性。
视差是关于时间层次。
遮挡、维度、移动和缩放是关于空间的连续性。
原理1：缓动
当时间事件发生时，对象的行为符合用户预期。
所有的界面对象展现了时间行为（无论实时或非实时），缓动。缓动创造且加强了固有的人性化流畅的用户体验，并且创造一种对象与用户所预期的一致时的连续性。顺便说下，迪士尼把这称为“缓入缓出”。
这里第一个例子有线性运动，看起来很糟糕。最上面那个粒子有缓动，看起来很不错。上面三个例子都有确切的帧数且发生在相同的时间内。唯一不同的是他们的缓动效果。
设计师关心的是可用性，我们需要严谨，问自己，除去美学，哪个例子更支持可用性？
我要表明的是某种程度的设计在缓动中是固有的。你可以想象一个缓动梯度，其中超出用户期望的行为可导致交互的可用性减少。适当的缓动动效让用户隐形使用动效本身——不会使用户分心。线性动效在视觉上感受明显、分散、未完成、突兀且分散注意。
现在我将完全推翻自己并讨论一下第二个例子。这个动效并不连续。实际上，有种刻意的感觉。我们注意到对象是如何到达的。这感觉很不同，但这仍然感觉比线性动效更“正确”。
在运用缓动的同时能否让它违背（或者更糟糕的是破坏）可用性？答案是能，有很多种方法。一种是速度。如果速度太慢（借用自Pasquele）或太快，你可以打破用户期望，分散用户注意力。类似的，如果你的缓动效果与品牌或者整个体验不一致的话，这也会对用户期望和流畅性有消极影响。
我想说的是涉及到缓动动效的场景有很多。作为设计师你可以创造无限多的“缓动”并且执行到你的项目中。所有的这些缓动能够在用户那里触发所预期的回应。
总的来说：什么时候用缓动？一直。
在我的缓动假说文章中你可以了解更多：可用性和线性动效的另类说。
原理2：偏移和延迟
介绍新的元素和场景时要定义对象关系和层级。
偏移和延迟是唯二的受迪士尼动效原则影响的第二个交互动效原理，从这里看“跟进和重叠的行为”。
然而，重要的是要注意在实现的时候，虽然过程相似，目的和结果却不同。迪士尼的动画原则是为了更吸引人，UI动效原则是为了更有用的体验。
这个原则的作用是他事前有意识地告诉用户界面中对象的本质。上面的给到的参考图的流程是上面两个对象连接在一起而与下面的对象分开。也许上面两个对象是非交互式的图像和文本而下面的对象是一个按钮。
在用户意识到这些对象是什么之前，设计师已经告诉他们，这个动效表明对象是分开的。这个很强大。
Credit:InVision
在上面的例子中， 浮动按钮（FAB）转变成了顶部导航元素，包含了三个按钮。由于按钮暂时是分离的，他们分开是可用的。换一种说法，设计师用时间告诉用户——在用户注意到对象之前，对象就是分离的。这对用户的影响，完全独立于视觉设计，是界面中对象的本质。
为了更好地展现它如何起作用，我会展现给你打破偏移&延迟原理的例子。
Credit:Jordi Verdu
上面的例子中，静态的视觉设计告诉我们背景上有很多图标。可以知道这些图标互相分离并且表示不同的事物。然而，动效却与之矛盾。
现在是，图标分为几行，每行一个对象。文字也分为几行，每行也像是一个对象。这个动效告诉用户的东西并不是用户看到的。在这个例子中，我们可以说这些对象在界面中的时间行为不提供可用性。
原理3：父级
在处理一繁复的对象时，可以创造空间和时间层级关系。
父级是一个很强力的原理，可以将界面中的对象联系起来。在上面的例子中，上一个对象（或者说子级对象）的缩放和位置属性与下面的对象（或者说父级对象）绑定在一起。
父级是对象与对象的连接。这种创造对象关系和层级的方法提供可用性。
父级也可以让设计师更好调整用户界面中的时间事件，同时给用户传达对象关系的本质。
回想下对象属性包括下面这些——缩放、透明度、位置、旋转、形状、颜色、值等等。任何属性都可以与其他属性连接创造出的界面中的协同时刻。
Credit:Andrew J Lee
Credit：Frank Rapacciuolo
上面第一个例子，人脸的y轴属性是下面的圆形指示标的子级。当圆形指示标在水平轴上移动时，它的子元素跟着它水平且垂直移动（用蒙版——另一个原理）。
结果是一个时间层次上的流程框架同时发生。值得注意的是对象的“脸”像一系列的“锁”，“脸”是完整的但不是部分可见，用户可以流畅体验，即使我们可以在其中发现有一个微妙的可用性骗局。
父级作为实时的交互来用是最好的。当 用户对对象直接操作时，设计师可以通过动效与用户交流——对象如何连接以及他们之间的关系。
父级以三种形式出现：“直接连接”（看上面两个例子），“延迟连接”和“反向连接”（看下面）。
延迟连接 (Credit:AgenceMe)
反向连接 (Credit:AgenceMe)
原理4：转变
当对象作用变化时，创造一个连续状态的流程图。
上面已经写到很多关于动效原则“转变”中的交互。在某些方面，它是最显然和透彻的动效原则。
转变是最易识别最主要的因为它很显眼。一个提交按钮变化形状成为了一个圆形进度条最后又变形成一个对勾，这我们注意到了。它吸引我们注意，讲述一个故事并完成。
Credit:Colin Garven
转变在不同的交互状态中流畅转化用户思维或者是（比如这是一个按钮，这是一个圆形进度条，这是一个对勾），最终导致一个预期的结果。用户通过这些功能空间吸引而到达目的地。
转变将用户体验认知不同的关键时刻转变成流畅的连续的一系列事件。这里的流畅性使用户更好的意识、保留和跟进。
原则5：数值变化
当数值主体变化时创建一个动态的连续流程关系。
文本是界面对象的基础，那就是说数字和文本可以改变他们的值。这是难以捉摸的概念之一。
文本和数字的改变很常见，所以我们常常忽略去评估他们在提供可用性上的角色。
当数值变化的时候用户体验到什么？在用户体验中，12个交互动效原则是提供可用性的因素。这里的三个因素将用户与现实连接：数据、代理概念和数值的自然动态变化。
我们看看一个用户的仪表例子。
当界面对象的数值出现时没有数值变化，那么这个传达给用户的是这个数字是静态对象。他们就像画上的标志显示限速55公里每小时。
数字和值代表了真实正发生的事情。可以是时间、收入、游戏分数、业务指标、健身追踪等等。我们区分动效就是看数值主体是动态的并且数值可以从动态数值中反映一些东西。
不仅仅这个关系流失了静态对象的静态数值 ，另一个更深层次的因素也丢失了。
当我们以基础动态数值的形式采用动态系统，它会触发一种“神经反馈”。用户掌握了动态数据之后便会改变这些值并授权成为管理者。当这些值是静态的，那么这些数值背后与现实联系更少，用户便会失去管理权。
Credit:Barthelemy Chalvet
Gal Shir
Unknown
数值变化原则可以是实时或非实时事件。在实时事件中，用户可以与对象交互改变数值。在非实时事件中，比如说加载和转场，在没有用户输入时数值同样可以变化反映一个动态的流程。
原则6：蒙板
当可用性体现在部分对象、组合显示或者隐藏，界面对象或对象组创建连续性。
蒙版的行为可以体现对象的形状和作用之间关系。
由于设计师在静态设计的环境中对蒙版很熟悉，有必要区分一下交互动效原则中的蒙版，它随时间发生，作为一个动作而不是一个状态。
通过展现和遮蔽对象的区域，以一种连续无缝的方式转变。它也有保留叙事流的效果。
Credit:Anish Chandran
上面的例子中，头部的图像改变了形状和位置但没有改变内容，变成了一个专辑。这改变了对象本身，而蒙版中保留了内容——一个简洁的技巧。这个转变是非实时的，在用户操作之后激活。
记住，UI动效原则在时间上发生并通过连续性、流程、关系和期望提供可用性。在上面的引用中，虽然对象本身保持不变，但它也有边界和位置，这两个因素决定了对象是什么。
原则7：覆盖
当分层对象依赖位置，在可视化平面中创建流程和对象空间关系。
覆盖通过允许用户利用面的顺序来克服空间层次的缺失。
覆盖允许设计师使用动效来传达在对象前后的位置关系。
Credit:Bady
Javi Pérez
第一个例子，上层对象滑到右边展现额外的下层对象。右边的例子，整个场景下滑展现了额外的内容和选项（同时使用了偏移和延迟来区分图片对象）
某种程度上，作为一个设计师，图层的概念如此明确不言而喻。我们根据图层来设计，图层的概念已经根深蒂固。然而，我们必须区分“做”和“用”的过程。
作为设计师不断地“做”设计，我们非常熟悉我们设计的对象的各个部分（包括隐藏的部分）。然而作为用户，这些不可见的部分是定义和实践，隐藏了表面和深层次的理解。
叠加原理允许设计师通过z轴方向的图层位置来建立联系，给用户提供空间。
原理8：克隆
当新对象产生和分离，创建连续性、关系和流程。
在当前场景（从当前对象）创建新对象时，说明他们的外观很重要。在这篇文章中，我认为创建一个对象流程图表示起始和分离非常重要。简单的透明度变化褪色并不能实现。遮盖、克隆和维度这三个基本的方法能产生强大的效果。
Jakub Antalík
Jakub Antalík
Unknown
在上面三个例子中，当用户注意力集中在主对象中，新对象从中产生。这两个部分相交——然后将我们的注意力转移到新的克隆对象——对于传达一系列清晰的事件有很大影响：行为x给结果y一个新的子对象。
原理9：遮蔽
允许用户空间上定位关不在主视觉层次结构中的对象或场景。
和蒙版的原理相似，遮蔽有静态和动态两种存在方式。这让没有经验的设计师很疑惑——时刻之间的时刻。设计师通常做的是从屏幕到屏幕或者从任务到任务的设计。把遮蔽想成是一种行为而不是状态。一个静态设计代表被遮蔽的状态。引入时间概念告诉我们我们一个对象被遮蔽的行为。
Virgil Pana
Apple
从上面两个例子来看，我们发现遮蔽像是虚化对象或者覆盖，也是一个涉及多个属性的时间交互。
各种常见技术涉及模糊效果和减少整体对象的透明度。用户可以意识到他操作的对象，在主要对象下面的。
设计师利用模糊弥补一个简单的统一视角或者对象视角。
原理10：视差
当用户滚动的页面的时候在视觉上创建空间层次。
视差作为交互原理描述了不同的界面对象以不同速率移动。
视差让用户专注主要操作和内容同时保持设计的完整性。在一个视差事件中，背景元素在视觉上和认知上“消退”。设计师可以用视差区分直接内容与外部或支持性内容。
Austin Neill
Michael Sevilla
这对用户的影响是明确定义交互的持续时间和各种对象关系。前景对象或者移动更快的对象对用户来说更近。同样，后景对象或者移动较慢的对象更远。
设计师可以创建这些关系，利用时间告诉用户哪些对象在界面中优先级更高。因此有必要将背景或者无交互元素推地更远。
用户感知到界面对象在视觉设计之上有更高的层级，同时这个层级可以让用户在意识到设计/内容之前掌握到用户体验的性质。
原理11：维度
当新对象产生和分离时，提供一个空间叙事框架。
用户体验的关键是连续的现象以及方位的感知。
维度提供了一个强大的方式来克服平面化的非逻辑的用户体验。
人们非常善于利用空间框架在现实世界和数码世界中通行。提供空间起点和分离参照有助于加强用户在交互中的心理模型。
此外，维度原理解决了在视觉平面上的图层悖论：对象没有厚度而存在在同一个平面上却会出现在其他对象的前后。
维度以三种方式存在——折叠维度、浮层维度和对象维度。
折叠维度可以认为是依靠折叠或者链接三个维度的界面对象。
Examples of Origami Dimensionality (Credit:Eddie Lobanovskiy)
Virgil Pana
由于复杂的对象合并到折叠结构中，隐藏的对象可以说是存在的，在空间上他们是可见的。这个有效地将用户体验呈现为一个连续的空间事件，用户不仅在交互模型中而且在界面对象的时间行为中指引和创建一个操作环境。
浮层维度给界面对象一个空间的起始和分离，使交互模型直观而明了。
Example of Floating Dimensionality (Credit:Virgil Pana)
在上面的例子中，维度实现通过使用3D卡片。这个提供了一个强有力的流程框架来支撑视觉设计。流程通过翻转卡片获得额外的内容和交互得以扩展。维度是一个引入新元素同时减少突兀的很强大的方式。
对象维度使得有真实厚度和形式的对象空间化。
Examples of Object Dimensionality (Credit:Issara Willenskomer)
Examples of Object Dimensionality (Credit:Creativedash)
这里，多个二维图层排列在三维空间中形成真实的空间对象。他们的维度显示在实时和非实时的过渡时刻。对象维度的实用性是用户对对象建立起敏锐的感知基于无形的空间位置。
原理12：推拉和缩放
当操作界面对象和空间时保持连续性和空间叙事。
推拉和缩放是电影术语表示对象和相机之间的相对运动，图像本身在框中的大小从远到进缓慢变化（反之亦然）。
在特定的环境中，很难说一个对象是否缩放，如果它在3D空间里向摄像机移动，或者如果摄像机向物体移动（看下面的例子）。下面三个例子描绘了可能的场景。
这是图层推拉、缩放还是摄像机移动？
因此，推进和缩放虽然相似但有区分，在涉及到连续的元素和场景变换，或者满足交互要求的动效原理：他们通过动效提供可用性。
推拉
推拉
缩放
推进是一个电影术语，用于相机相对或者远离一个物体的运动（也用于水平跟踪运动，但是在实际环境中不太相关）。
Credit:Apple
用户体验中的空间，这种运动既可以指用户视角的改变或者视角没变而是对象改变了位置。推近的原理通过连续性和可用性的叙述提供可用性，界面对象和终点之间无缝过渡。推进可以结合维度原理创建更有空间和厚度的体验，在当前界面的前后给用户传达额外的范围和内容。
缩放指的不是视角或者对象空间移动，而是对象本身的缩放（或者我们的视野变小导致图片变大）。这个告诉用户额外的界面对象在其他对象或场景 内部。
Credit:Apple
这是无缝转变——包括实时和非实时——提供可用性。当创建空间的精神上的模型，无缝性的推进和缩放原理的会相当强大。
如果你读到这里，恭喜你！这是一篇粗暴的指南。我希望所有的gif加载后不会让你的浏览器崩溃。我也希望你们能获得一些价值和一些新的工具并且运用到你的交互项目中。
我鼓励你们学习更多关于如何开始使用动效作为设计工具去提供可用性。
（宣传略）
作者网址：Issara Willenskomer
原文地址：Creating Usability with Motion: The UX in Motion Manifesto
网友评论