版权归作者所有，转载请注明出处
用动效创造可用性
前言：最近搬运了一期Issara大佬讲产品内动效与可用性的视频，里面干货特别多，就想把这篇文章也一起转译一下。首先 Issara Willenskomer是谁，他曾任职Amazon高管，现在是ux in motion的创办人，专注在UX动效这方面输出了很多精品内容。这篇文章是比较老的了，但把动效的设计原则讲的很通透，既适合初学者也适合有经验的设计师温故知新。
同时Issara也根据他多年的经验分享了一份关于怎么说服决策相关者们接受动效设计提案的pdf。如果你在工作中刚好遇到这样的问题，这份文档应该能帮助到你。
链接：度盘 密码: k77u
下面进入正文。
以下规范回答了这个问题——"身为UX或UI设计师，我要如何知道该什么时候在什么地方，使用动效来强化可用性？"
在过去的5年里，我很荣幸可以为来自超过40个国家的UI和UX设计师，还有数百间顶尖品牌和设计顾问公司进行指导和咨询。
经过15年对用户界面动效的研究经历，我整理出了12个可以用动效增进UX可用性（usability）的方式。
我把这些方法称为 "动效的12个UX原理"，它们是可以以无数创新的方式叠加和协同组合发挥功效的。
这些原理规范可以分为五个部分：
理清UI动画的相关议题——“它们与传统动画并不相同”
实时vs非实时交互
让动效增进可用性的4种方法
原理、技巧、属性和数值
动效的12个UX原理
这不是在讨论UI动画
因为对大多数设计师来说，用户界面动画这样的主题，通常就称之为UI动画（其实不然），在开始谈12个原理之前，我感觉有必要要先设定好一些情景。
UI动画通常被设计师当作是某种让用户体验更为愉悦的某种手段，但是整体而言并未增加多少价值。因此UI动画通常让人感觉可有可无。即使真的做了，也只是像最后才补上的口红修饰。
此外，用户界面中的动效大多被理解为属于迪斯尼动画12原则的范畴，我曾在《UI animation principles-Disney is dead》一文中对此表示反对。
在这篇规范里，UI动效与动效的12个UX原理相比，就像建筑物与建筑学。
我的意思是，建筑物是经过实体建造才存在，而决定要盖什么的指导原则就是来自原理所属的领域知识。
动画关于工具，而原理想法的实际应用，引导工具如何使用。因此，对设计师来说，原理能够有机会发挥更多影响力。
大多数设计师将 "UI动画"视为执行更厉害的设计行为：而事实上是在实时与非实时的情景下，界面元素当下的反应动作。
实时vs非实时交互
在此区分 "state（状态 ）"和 "act（动作） "就很重要。UX中的state基本上是静态的，例如一个设计元件。而act从根本上是有时间属性的，是基于动态的。一个对象可以是有遮罩效果的state，也可以是正在进行打上遮罩的act。如果是后者，我们就知道是掺了动态，而且能够增进可用性。
此外，所有暂时的交互都可以分为实时 (realtime) 和非实时 (non-realtime)发生的。实时的意思是使用者直接与界面上的对象交互，而非实时是 post-interactive：在用户进行动作之后发生，而且是有转场效果 (transitional) 的。
这是很重要的区别。
实时交互也可以被当作是 "直接操作"，也就是用户直接立即与界面进行交互。界面的行为就在用户使用的时候发生。
非实时交互发生在用户输入之后，有短暂固定用户体验的效果，直到转场效果结束。
接下来继续探讨12个原理的旅程时，这些区别会让我们更容易理解。
动效以4种方式增进可用性
这4个中心思想代表用户体验的暂时行为，可以增加可用性的方式。
预期动作
预期动作 (Expectations) 可以分为两种：用户觉得它是什么，还有它如何运动。用另一种方式来说：我们身为设计师，目标就是把使用者所预期的，和他们实际经历之间的差距缩小。
连续性
连续性 (Continuity) 可以是指用户流程，也能是用户体验的一致性 (consistency)。连续性还有「内部连续性」和「外部连续性」的不同，前者是由单一场景构成的 ，后者是由一系列连续场景构成的整体用户体验。
叙事
叙事 (Narrative) 是用户体验里，因为事件的线性进展，因此产生时间/空间的架构。这可以当作是一系列经过深思熟虑安排的时间点和事件，在用户体验的过程，前后连结在一起。
关联性
关联性 (Relationship) 是界面物体之间有关空间、时间和层级结构 (hierarchal) 的描述，引导使用者理解、进行决定。
原理、技法、属性和数值
Tyler Way 的书写得好，话也很中肯：「原理就是功能(function) 的根本前提(premise) 和规则，它造就所有技法。这些元素不管发生什么事情，都是前后一致的。」毫无疑问， 原理与设计是密不可分的。
因此，我们可以想像一种层级结构，原理在最上方；技巧在下方一点；属性又在技巧之下，而数值在最底层。
技法 (Techniques) 可以当成各式各样、不计其数的原理执行方式（也包含各种原理的搭配组合）。我把技法当做类似「风格」的东西。
属性 (Properties) 是物体的某些参数 (parameter)，以动态呈现属性，就会产生技法。属性包含（但是不限于）：位置、不透明度、缩放、旋转、 中心点、颜色、外框宽度和形状⋯等。
数值 (Values) 就是属性的实际数字，它随着时间而变时，就会产生我们称为「动画」的东西。
好了，这里不多赘言（不过稍微超出范围），我们可以说：某范例UI 动画使用的毛玻璃技法是Obscuration（朦胧化）原理，它控制模糊(Blur) 和不透明度(Opacity) 属性，而数值分别是25px 和70%。
现在我们知道一些基本概念了。特别注意的是，上述的案例适用于所有制作Prototype（原型） 的工具。
动效的12个UX原理
Easing（缓动效果）和 Offset & Delay（位移和延迟）跟节奏 (Timing) 有关；Parenting（从属关系）是物体的关联性 (Object Relationship)。 Transformation（变形）、Value Change（数值变化）、Masking（遮罩）、Overlay（覆盖）和 Cloning（复制）都是物体的连续性 (Object Continuity)。 Parallax（视差）跟时间层级 (Temporal Hierarchy)有关。 Obscuration（朦胧化）、Dimensionality（空间维度）、Dolly & Zoom（ 镜头前后移动和镜头远近缩放）跟空间连续性 (Spatial Continuity) 有关。
第一道原理：Easing（缓动效果）
当暂时事件发生时，对象行为符合用户的预期动作。
所有暂时动作（不论实时或非实时）的界面对象都要有 Easing（缓动效果）。 Easing 可以无缝地创造、加强用户体验的「自然感觉」，当物体如用户所预期的移动，就会营造出连续感。很巧的是，迪士尼称之为「Slow In 和 Slow Out。」
上面的动画是 Linear（固定速度）的，看起来很「差」，而上方第一个有 Easing 的范例就看起来很「好」。以上三个范例都有相同数量的帧数 (frame)，花费的时间完全一样，唯一的差别在 Easing。
说到跟设计师有关的可用性，我们得要求自己是精确的，然后进行意见征询：除了很漂亮之外，哪一个范例更能够加强可用性？
我在这里展示的 Easing 范例，在某种程度上继承了仿真风格 (skeuomorphism)。你可以想像一组超出用户期待的「Easing 渐层」导致不良交互，而正确的Easing动画应该是用户在体验时一点都不觉得突兀，甚至没有察觉(invisible)，因为它不会让人分心(non-distracting)，所以觉得舒服。固定速度的动画在视觉上很明显，而且总觉得是没进入状况、是不完整的、感到不舒服的，还有让人分心的。
在我要重重地自打嘴巴一下，来讨论下面的范例。这支动态并不流畅，甚至有「刻意」的感觉。我们明显察觉物体是怎么停止的，而且它让人觉得不太一样，但是，仍然比线型动画感觉更「正确」。
那么，有可能使用 Easing，但是对用户体验毫无帮助吗（甚至更糟的是还扣分）？答案是肯定的，有很多种方式可以破坏可用性。其中一个方法是节奏 (timing)：如果节奏太快或太慢，就会不符合用户的期待，让他们的注意力分散。同样地，如果Easing效果不符合品牌或是整体体验，也会对期望和无缝的感觉造成负面影响。
我在这里介绍的缓动效果动画，是个仍充满可能性的方法。理论上，有无限种 Easing 可以让设计师在方案里创造以及实际使用。所有 Easing 都有各自让用户产生的期望反应。
总结一下：什么时候要使用缓动效果？每次都要。
你还可以在我的这篇文章「The irony of usability and linear motion」知道更多我的 Easing 效果假设。
第二道原理：Offset & Delay（位移和延迟）
在新的元素和场景出现时，定义物体之间的关联和层级。
Offset & Delay 是另外一个被迪士尼影响的动画理论，仅此两个，请看 Follow Through and Overlapping Action。
不过，这里要特别注意的是：采用 (implementation) 虽然跟执行 (execution) 很像，目的和结果却都不同。迪士尼的原理会产生「更讨人喜欢的动画」，而本篇的 UI 动画原理会有更容易使用的体验。
此原理好用的点是：在潜意识就成功地「告诉」使用者，界面上该对象的某些特性，让他们做好准备。本篇文章前面提到的叙事，在这里就是上方两个物体的外观一样，而下方的不一样。前面两个物体可能是没有互动功能的图片和文字，而最下方的物体是个按钮。
即便用户还没辨别出这些对象是什么，设计师已经（利用动画）传达它们会以某种形式「有所不同」，效果非常明显。
在上方的范例里，浮出的动作按钮 (FAB, floating action button) 转变成为三个按钮组成的主导览列，它们暂时互相隔开，这种清楚分明的感觉就可以加强可用性。换一种说法就是：设计师利用时间来表达：在使用者理解那些对象是什么之前，就知道这些对象是不同的。这有告诉用户界面上物体的本质为何的效果，跟视觉设计完全不同。
为了让你更了解它的运作方式，这里有个违反 Offset & Delay 原理的范例。
上方的范例里，静态的视觉设计告诉我们背景前方有图示。有这样的推测，是因为所有图示都是各自独立的，做不同的事情。只不过，动画却违背了。
这几个图示暂时以行 (row) 为一组，动作就像同一个对象。它们的名称也同样是一行一组，如同一个对象进行动作。此动画传达的讯息超出使用者眼睛所见的事情。在此范例，我们可以说介面上物体的暂时行为没有增进可用性。
第三道原理：Parenting（从属关系）
与多个对象互动时，创造空间和时间上的层级关系。
Parenting 让界面上的物体产生关联，是非常实用的原理。在上面的范例里，顶端的对象，或称呼为子对象，在「大小」和「位置」属性从属于底端「主要」对象的「位置」属性。
Parenting 是对象与其他对象属性的连接，以会增加可用性的方式产生对象关联和结构。
Parenting 也可以让设计师在大部分情况下更好安排界面事件，与用户沟通时更自然描述对象的关联。
请回想对象的属性，包含：缩放、不透明度、位置、旋转、形状、颜色、数值⋯等。这些属性都可以连接到其他属性，可以在用户体验创造综效的瞬间。
在左上方的范例里，表情符号的 y 轴属性，「从属于」圆形标示的 x 轴属性。当圆形标示元素沿着水平轴线移动时，它的「子」元素跟着水平且垂直移动（其中的遮罩又是另外一道原理。）
这些加起来就是同时发生、具有层级的暂时叙事架构。可以注意的是表情符号对象就有一连串的「固定」效果：每个数字上的符号都看得到全部，而不是只有部分。用户很顺地体验到这点，而我们可以看出这个范例里是很精巧的「易用性取巧」。
能让 Parenting 发挥最好效果的是「实时」交互。当用户直接操作界面对象时，设计师透过动画传达物体如何连接，还有它们之间的关联。
Parenting 以三种形式发生：直接从属关系（请看上方两个范例）、延迟的和相反的（请看下方）从属关系。
第四道原理：Transformation（变形）
当对象的用途改变时，产生叙事流程的连续状态。
其实已经有很多关于 Transformation 的 UX 动画原理文章。某种程度上来说，这是最显眼也最广泛运用的动画原理。
Transformation 之所以最具有代表性，大多是因为它特别吸引目光。我们可以看到：「送出」按钮改变形状成为圆形的进度指示条，最后再次改变为代表确认的打勾。它抓住我们的目光，传达故事，然后完成。
Transformation 做的事情是让用户在几个UX状态，或「是什么」之间无缝转换（因为它是按钮、是圆形进度条，也是完成时的打勾标志），最后获得理想的成果。用户被这些具有功用的区块吸引，带到最终目的地。
Transformation 有将用户体验里，不同关键时刻清楚分开的效果，成为流畅且连续的事件系列。在引起用户注意、再访和走完全程都会有更好的成果。
第五道原理：Value Change（数值变化）
当数值所属的项目变化时，创造动态且连续的叙事关系。
文字为主的界面对象，也就是数字和文字，可以改变它们的数值。这是浅显易懂的概念之一。
文字和数字的改变其实太常见了，以至于我们看到它们，也没有感觉它们扮演好角色，也就是：增进用户体验的亮点和严谨度。
所以，用户在数值变化会体验到什么？在用户经验里，12 道原理可以增进可用性。这里有三个可能，分别是：把用户跟资料背后的现况连结、媒介 (agency) 的概念，还有数值自身的动态本质。
让我们以一个仪表台 (dashboard) 为范例。
如果一个以数值为基础的界面对象没有以「数值变化」显示，这些数字传达给使用者的感觉是静态对象，就像显示为速限 55 英里的路标。
这些数字和数值代表某些事情的现况。现况可以是时间、收入、游戏分数、经营指标、运动追踪⋯等。我们能够透过动画知道「数值的主题」是动态的，也可以从一组动态数值看出在传达某些讯息。
数值看起来是静态对象时，不但让人无感，也未能把握住另外一个更深层的可能。
当我们采用动画的形式来代表动态系统，也启动某种「神经回馈（neurofeedback）」。使用者脑内已经把资料认为是动态的，现在因为数值一直变动，因此获得成为媒介的力量。如果数值是静态的，跟现实连结的感觉就会比较少，使用者因此失去「媒介」。
Value Change 原理能以实时与非实时事件发生。如果是实时事件，用户跟对象互动，而改变了数值；如果是非实时事件，例如读取动画和转场效果，数值变化并不需要用户输入就可以有动态的叙事。
第六道原理：遮罩 (Masking)
让某一个或一组界面对象的部分隐藏/显示，借以创造连续感。
Masking 的 act（行为）可以想成是物体形状还有其用途之间的关联性。
设计师都已经很熟悉静态设计情境的「遮罩」，所以更应该要凸显动画 UX 原理其与众不同之处，因为它们有时间属性，身分是 act，不是 state（状态）。
让对象某些区域暂时显露、隐藏，用途就会以连续且流畅的方式转场，它还有保持沉浸于叙事的效果。
上方的范例里，标题图片的范围图形和位置改变了，但是内容没有，变成一张专辑。这样不仅改变了物体的型态，又同时透过遮罩保留原始的内容，是相当俐落的技巧。它是非实时的转场，也就是用户采取行动后才开始。
请记得，UI 动画原理都是跟时间相关的，藉由连续、叙事、关联和期待来增进可用性。上面的范例里，除了对象本身保持不变，还包含范围和位置，这两个因素定义出此物体是什么。
第七道原理：Overlay（重叠疊）
因为位置而形成的多层 (layered) 物体，在视觉平面空间创造叙事效果。
Overlay 之所以能增进可用性，是让用户可以利用平面视觉上的先后顺序属性，克服缺少足够空间的层级结构。
说得更直白一些 ，Overlay 让设计师在非 3D 空间，利用动画传达物体位置的互相关联，它们存在于其它物体之前或之后。
左边的范例里，前方的物体往右滑动，在该位置的额外背景物体就会显露出来。而右边的范例，整个场景往下滑动，让额外的内容和选项显露出来（还有，利用 Offset & Delay 原理传达那张照片的独特性。）
设计师对「图层」的概念再熟悉不过了，不必多做解释。我们以图层进行设计，所以对图层的认知早就深深地内化。只不过，我们仍要仔细辨别「制作making」和「使用using」流程的差别。
身为设计师对于制作的流程是再熟悉不过了，我们对于所有设计的对象（包含画面上隐藏起来的)都一清二楚，但对于用户来说，那些需要透过指示和学习才会发现的对象，同时遮蔽了视觉和认知。
Overlay 原理让设计师能够传达图层 z 轴位置之间的关联，所以如果要这样做的话，要对使用者强调空间的方向。
第八道原理：Cloning（复制）
在新对象分离或回到原处时，创造连续性、关联性与叙事效果。
在当前的场景（和对象）产生新的对象时，要依循叙事解释它们的出现。在此规范里，我特别强调对象的原始状态与触发后的叙事架构非常重要，简易的不透明度淡化其实无法达到这成果。而 Masking（遮罩）、Cloning（复制）和 Dimensionality（空间维度）这三种根据可用性的手法，就可以产生强大的叙事效果。
上面三个范例里，新对象趁使用者注意力都还集中在主要对象时出现，这样的做法：引导注意力，然后带领视线走过一遍新对象复制出来的过程，有清楚明确又坚强的一连串事件，也就是：x动作有产生新对象的y结果。
第九道原理：Obscuration（朦胧化）
让用户可以自行在空间里，依靠非主要视觉层级的对象或场景找到方向。
和动画 UX 原理的 Masking（遮罩）相似，Obscuration 可以是静止的样子，或用于动态表现。
它让从未以时间状态思考的设计师感到困惑。这里的意思是：两个时间点之间的时间。通常设计师制作一个接着另一个画面，或一个任务接着另一个任务。请把 Obscuration 当做是 act（动作）而不是 state（状态）。静态设计可以呈现朦胧化的状态，如果要呈现时间变化，就让物体有朦胧化的动作来表现。
在以上两个范例，我们看到外观像透明物体或重叠图层 (overlay) 的 Obscuration，它同时也是有多种时间属性的互动。
此项目常见的技法包含模糊 (blur) 效果和让整体透明度渐渐降低。使用者会意识到她正在操作的是另一个、次要的内容，也像是跳到另一个空间中 — 同时在层级关系里，是藏在主要内容的「后面。」
朦胧化让设计师能弥补单一视角的单调，或制造客观视角 (objective view) 变化，加强用户体验 。
第十道原理：Parallax（视差）
当用户滑动画面时，在视觉平面上创造空间层级。
Parallax（视差）在动画的 UX 时，是指界面上的对象以不同速度移动。
视差让用户专注在主要动作和内容，且仍可以保有设计成份。用户在视差的事件里，觉得背景元素在视觉与知觉上往后倒退。设计师可以使用视差，来区分场景中直接显示的内容与辅助的内容。
此效果会带给用户影响的是：可以清楚界定互动进行时间内，不同对象之间的关联。前景的物体，或是移动「比较快」的，对用户来说就是感觉「比较近」的。同理，背景的物体，或是移动「比较慢」的，看起来就会距离「比较远」。
设计师可以用时间本身创造如此的关联，来告诉用户界面上的对象比较重要。因此，把背景或无法互动的物体往后安排，是非常合理的。
不仅使用户可以查觉到界面的物体有层级关系（即使视觉设计上已不再变更），这样的层次还可以在使用者发觉设计/内容之前，紧紧抓住用户体验的本质。
第十一道原理：Dimensionality（空间维度）
新对象进入和离开时，提供空间上的叙事架构。
感觉起来是连续的，和知道所在的位置，对用户体验非常重要。
Dimensionality 克服了视觉平面中，不合逻辑的用户体验。
人类非常擅长适应现实世界和数位体验的空间架构，在其中掌握方位。如果有空间起始点和移动的参考，在 UX 上，有助于强化使用者理解所在位置。
此外，Dimensionality 原理克服视觉平面上，图层会遇到的矛盾，物体在缺乏深度 (depth) 数值的情况下，存在于同一个平面，又要辨认是谁在「前」，谁在「后。」
Dimensionality 本身有三种呈现方式：折叠空间维度 (Origami Dimensionality)、浮动空间维度 (Floating Dimensionality) 和物体空间维度 (Object Dimensionality)。
Origami Dimensionality 可以用「折叠」或「绞链」的 3D 介面物体呈现。
因为多个对象合并为 origami （折纸）的结构，即使它们看不到，隐藏的物体仍可以说是在空间上「存在」的。这让互动模式本身，以及介面物体发生互动行为时，有效的地辅助用户创造及驾驭内容，产生连续空间事件的用户体验。
Floating Dimensionality 让界面物体具有空间上的原点和离开点，让互动模式更直觉和富有叙事性。
上面的范例里，空间为度的概念用「3D 卡片」的方式达成，提供强大的叙事架构，也可以增进视觉设计。 「翻动 (flip)」卡片看到更多内容、互动，就可以让叙事延伸下去。 Dimensionality 就是可以在新内容出现时，尽量不突兀的够力方法。
Object Dimensionality 用真正的深度和物质，让对象在空间维度里存在。
在此，数个 2D 图层在 3D 空间内依序摆放，因此产生真正的空间对象。空间感在即时和非即时的转场时出现。利用物体的空间维度，是让用户根据空间里看不见的位置，快速察觉对象用途。
第十二道原理：Dolly & Zoom（移动镜头和缩放）
移动界面对象和空间时，保持连续感和空间叙事。
Dolly 和 Zoom 是来自电影拍摄的概念，代表移动物体相对于镜头的距离，还有画面内图片本身的大小因为渐渐从远方到近距离而缓缓改变（或是相反）。
在某些情境下，不太可能分辨对象是否正在缩放、或正在 3D 的场景朝镜头移动，又或者镜头正在 3D 的场景朝物体移动（请看下方的范例）。下方三个例子描述可能的场景。
由此可知，应该要把 Dollying 和 Zooming 的例子当做不同，但是类似的。因为它们都有连续的元素和场景变化，所以符合动画的 UX 原理：使用动画加强可用性。
Dolly（移动镜头）是拍摄电影的专有名词，意思是镜头朝对象物体接近或远离（这也适用以水平方式的「轨道」移动，但是跟可用性的情境比较没有关联。）
在 UX 里的空间，这些动画可以是观看者角度的改变，或是观看者保持不动，而物体改变位置。 Dolly 原理透过连续性和叙事，在界面对象和目的地 (destination) 之间无缝转换，因此增加可用性。 Dolly 还可以融合 Dimensionality（空间维度），做出更有空间感的体验、更有深度，还有在目前视线前方或后方，以额外的区域或内容传达给用户。
Zoom（缩放）是指观看者没有在空间移动，对象也没有，而是对象本身在缩放（或是视觉范围缩小，因此让影像变大）。这传达给观看者的是：有额外的界面对象在其他对象或场景「之内」。
因此，这就可以达成能够增进可用性的流畅转场过程，包含实时与非实时。 Dolly & Zoom 要创造具有空间感觉的心智模型时，所带来的无缝感是非常有用的。
全文完。
