|译| 交互动效的可用性

原文链接：medium_Issara Willenskomer

​UI Animation  (UI 动效) ，并非你所想

提到"UI Animation"，大多被误解为使得界面更加炫酷，而并非有实际意义，因此UI 动效总被误解和忽视。

实时和非实时交互动效

实时动效：用户交互反馈是直接且实时的

非实时动效：用户交互后，反馈是延后的

UI动效的可用性

预期

用户预期分为两部分— 用户如何理解产品和产品如何操作，换句话说，作为设计师，我们希望缩小用户预期和用户体验的距离

连续

连续性是指使用流畅度，它可以理解为"内部连续性"—场景内的连续性，"外部连续性"—多个场景间的连续性

叙述

叙述是指用户体验的线性进程，通过用户体验将无数个事件连接组合

关系

关系是指用界面在时间、空间、层级上的关系，能够帮助用户理解和做出决定

UI动效12准则

1缓动

来源：Disney’s Animation Principles, ‘Slow In and Slow Out.’

缓进缓出，体现自然主义，同时创造了用户预期的事件叙述性，无时无刻都应该使用缓动

2偏移&延时

意义：在新元素和场景中，定义物体关系和等级

来源：Disney’s Animation Principles, ‘Follow Through and Overlapping Action.’

这个准则的可用性在于告知用户物体的本质。通过动效偏移和延时，上图告诉我们，上面两个对象和下面一个对象是分离的，也许上面两个对象是没有产生交互行为的文字或图片，而下面一个对象是按钮。

即时用户不知道这些深层次的寓意，设计师已经传达给他们—这些对象出于某种原因被"分离"了，这很重要。

InVision

这个例子，悬浮行为按钮（FAB，floating action button）拆分成3个导航按钮，这三个按钮在时间上偏移延时，告知用户这三个对象是分离的，通过动效而非视觉设计体现界面对象本质。

Jordi Verdu

相反，这个例子中，静态视觉设计告诉我们这些icon是在背景之上的，预期是这些icon都互相分离且功能各异，然而动效的传达却并非如此。时间上看，这些icon同时运动，视觉上被组成一个对象，它们的标题文字也是如此看起来像是一个对象，动效并没有可用性。

3继承性

意义：当和多个对象交互时，创造时间和空间层级的关系

继承性在动效准则中很重要，它关系着对象。在上图中，子对象（上面方块）的"大小"和"位置"属性与主对象（下面方块）"位置"属性相关联。继承性连接两个对象属性，由此创造对象的关系和传承关系。同时，它也传达给用户对象关系的本质。

对象属性包括—大小、透明度、位置、旋转、形状、颜色、值等，这些属性可以任意组成继承关系。

Andrew J Lee

继承性最适用于表达"实时"交互，用户可以感知对象的连接和关系。

Delayed Parenting - AgenceMe

除了表达"实时继承"交互之外，继承性还可以表达"延时继承""反向继承"

4变化

意义：当对象可用性改变时，创造叙述流程的连续状态

​Colin Garven

转变能够抓住我们注意力，告诉用户故事完整性。平滑的转变告知用户UX现在状态，同时将用户引导到最终目的地状态。

5 值的改变

意义：当值改变时，创造一个动态的、持续性的叙述关系

​​Barthelemy Chalvet, Gal Shir

值在这里指数字和文字，它可以在实时和非实时动效中发生。在实时动效中，用户通过与对象交互去改变值。

6遮罩

意义：对象一部分或者组显示时，创造交互对象或组的连续性

Anish Chandran

上图示例，头部图片变化了遮罩形状和位置而不是图片本身，它是一个非实时动效。

UI动效准则通过连续性、叙述性、关系和预期支持时间上的可用性。

7覆盖

意义：当平面视觉上不同图层的对象位置改变时，创造叙述和空间关系

覆盖弥补了平面2d无法表现的3d空间属性，设计师可以在非3d环境中，用覆盖表达不同层级物体的前后关系。

Bady, Javi Pérez

上图左面的例子中，前面的对象货到右侧，显示出后面的覆盖的对象。右面的例子，整个屏幕对象下滑，显示出后面的内容。

设计师很熟悉遮罩（遮罩在静态设计中很常见），但是要明白”做”和”用”的区别，遮罩并不是用户所熟悉的。覆盖准则帮助设计师在z轴上探索更多虚拟物理空间。

8克隆

意义：当新对象从旧对象中分离出来，创造连续性和关系。

Unknown,akub Antalík

Jakub Antalík

在上面的例子中，当用户点击后，注意力集中在该对象上，同时克隆动效发生，新对象从被点击对象中分离中来，引导用户关注被分离的新对象，从而形成明确清晰的时间路径。

9蒙层

当场景不再是主要视觉中心时，让用户在空间关系上感知。

蒙层同时出现在静态和动态设计中，在层级到层级、任务到任务的跳转中运用。

Virgil Pana, Apple

上面例子中，通过模糊、透明度的改变，蒙层让用户感知到他/她正在使用另一个新的非首要的对象。

10平行

当用户滚动时，在2d平面中创造物理空间

平行描述界面中不同量级对象不同的运动速率。它能够让用户关注重要动作和内容，降低对背景层级的元素的感知。设计师可以利用平行原则将用户注意力从原先对象中分离并关注新对象。

平行有效的影响用户清晰了解交互的持续性和不同对象的关系。前面的对象或者运动较快的对象离用户更近，相反，后面的对象或者运动较慢的对象感知起来距离更远。

Michael Sevilla,Austin Neill

设计师可以利用这个原则的时间差，告诉用户交互中什么对象是目前首要的，它能够形成的想要弱化的对象和没有交互动作的元素被推向后的感受。

（译者注：原有想要弱化对象和想要被强化的对象并非从功能层面讲，而是根据用户的交互行为产生的量级区别）

11维度

意义：当新对象产生或被分离时，提供空间叙述框架

折纸维度

当很多对象被合并成”折纸”结构时，被隐藏的对象仍然存在于用户不可见的地方，维度能够描述空间事件的连续性。

Eddie Lobanovskiy, Virgil Pana

浮动维度

能够让交互事件具有维度并分离，让交互模型更加直观且高叙述性。

Virgil Pana

对象维度

让有维度的对象更具深度和组织

Issara Willenskomer, Creativedash

12视角推移和缩放

当导航交互对象时，感知连续性和控件叙述性

视角推移和缩放是电影上的概念，指的是运动物体相对于摄像机的距离，它的大小由近及远而平滑的改变。

视角推移

指对象在x轴上相对于假想摄像机（译者注：可以理解为理想情况下用户眼睛）远近移动。

在UX设计中，视角推移描述连续性和叙述性，流畅的在对象间切换或者转场。它还可以创造更多空间层级的体验，维度更深，并且告知用户更多区域和内容，不仅限于”前”"后”这种层级。

Apple

缩放

指对象本身的缩放，而不是空间维度的变化。它告诉用户在交互界面中，可以操作（看到）更多的对象。

Apple