十二条动效体验原则(2)

用户动态的方式展现变化的值，会给人一种“神经反射”。用户感受到数据的动态特征后，能够感受到其意义，并联想到与之相关的对象。这是的数值就成为了沟通用户与关联对象（数据背后含义）的桥梁。相对的，如果这些数值看起来是静态的，就无法连接用户与关联对象，桥梁的作用自然也没有了。

值变的理论既可以是即时，也可以是非即时发生的。如果是即时事件，用户一边进行操作一边改变数值。如果是非即时事件，像是加载或过渡，数值在没有用户参与的情况下自动变化。

如果一个界面元素的不同的展示方式对于不同的功能，那么让展示方式的变化过程具有连续性。

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

虽然设计师们在做静态设计时就对遮罩有所了解，但需要区分的是动效体验原则中的遮罩是随着时间而发生的行为，而不是禁止的状态。

这种连续无缝地遮住或露出元素区域的方式，也能创造连续的描述性。

上例中，头图通过形状和位置的改变成为了唱片。在不改变元素内容的情况下，通过遮罩来改变元素本身，相当不错的技巧。这个例子属于非即时事件，在用户操作之后才发生。

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

用堆叠元素的相对位置来描述它们的扁平空间关系。

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

再直白一点，就是在一个非三维的平面空间里，通过排列元素之间的上下关系来传递它们的相对位置的动效。

上图一中，前景元素滑到右边露出背景元素。上图二中，整个界面向下滑动露出列表和选项（同时使用移动和延迟原则来描述照片之间的独立性）。

对设计师来说，在一定程度上，“层”的概念是非常明确的，我们做的设计本身就是有层级的。但是必须要明确分清的是，“绘制”与“利用”并不相同。因为我们设计师通过长时间地“绘制”层级，对所设计的一切元素（包括被隐藏的信息）都十分了解。然而对于用户来说，被隐藏的元素必须被定义出来，或者经过尝试，才能够看到并了解。

总的来说，覆盖原则让设计师能够通过层级之间的Z轴位置关系，像用户传达空间方位。

当新的元素从已有元素复制出来时，用连贯的方式描述其关联关系。

当新的元素在当前场景（从存在的元素）被创造出来时，描述其形态十分重要。在这篇文章里，我要强调的是描述元素的产生和分离至关重要。要做到这一点，单纯的透明度渐强渐弱是不够的。像遮罩、复制和翻转这些动效原则都需要根基于强烈的形式感。

上面的三个例子中，当用户集中注意力在主体元素上时，新的元素从主体元素上被创造出来。这双重动作（先引导注意力，然后通过复制将实现导向新元素）能够明确信息地将事件传达出来：由“X”动作引发创造新元素的“Y”动作。

允许用户瞥得到非主要元素或场景。

与前面说过的遮罩原则类似，景深原则既可以是静止的，也可以具有时效性。

如果有些设计师对于时效性难以理解，那么可以把它想象成两种状态之间的过渡。很多人是按照一屏接着一屏或一个任务接着一个任务的方式做设计的。现在你需要做的是把景深想象成一个变化的过程，而不是静止的状态。静态设计只能表现出元素变朦胧的状态，加上时效后就变成了元素变朦胧的行为。

上面两个例子中我们可以看到景深原则（看起来也像是被透明元素覆盖）也可以用作多个元素的即时交互。

这个原则的很多实现手段都涉及到模糊效果和透明覆盖，这让用户了解到不属于操作主体的大环境——主要元素之后的层次结构，那里还有另一个世界。

设计师可以使用景深原则来在用户体验中提供一个全局或客观的视图。

当用户滚动界面时，在平面创造出空间层次。

“视差”在动效体验原则中描述的是界面元素以不同的速度运动。

时差在保持原本设计的完整性的前提下，让用户聚焦于主要操作和内容。时差事件中，用户对背景元素的感知会被弱化。设计师可以通过这一原则将即时性的内容从环境或支撑内容中分离出来。

这种动效让用户在交互操作期间，明确区分出各种元素之间的关系。前景元素，或者说移动得“更快”的元素对用户来说，感觉更近一些。同样，背景元素，后者说移动得“更慢”的元素对用户来说，感觉更远一些。

设计师们能够仅利用时间，就创造出元素之间的关联关系，以此告诉用户界面中的什么东西更加重要。这就是为什么有必要让那些背景类的，或是没有交互属性的元素给人感觉更远一些。

这样做不但能够让用户领略到超越平面设计的层次感，还可以让他们在注意到设计和内容之前，感受就得到自然的体验。

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

用户体验的关键在于连续性与方位感。

翻转原则能够大大改变扁平、缺乏逻辑性用户体验。

人类都很擅长通过空间框架来引导虚拟和现实世界的体验。具有空间感的产生和离场动作可以帮助增强用户在体验中的方位感。

除此之外，翻转原则能够改善扁平界面存在的通病，即元素不是没有深度地相互叠加，而是有上下层次的相互覆盖。

表现翻转有三种方式——折叠翻转、浮动翻转和对象翻转。

折叠翻转可以理解成三维界面元素的折页或旋转。

（编辑：ASP站长网）