我们从五个部分来具体讲述用户体验动效的12大原则：

　　1. UI动效不等于用户体验动效

　　2. 实时与非实时交互的区别

　　2. 4种提升动效可用性的方式

　　4. 原则，技术，属性和价值观

　　5. 用户体验的12大原则

　　UI动效不等于用户体验动效

　　在界面设计中，大部分动效被设计者理解为UI动效， 其实不然。 在正式介绍12大原则之前，我们要先介绍下两者的不同。

　　UI动效通常被设计师认为是让用户体验更加愉悦的东西，但实际并没有增加太多价值。在本文中，我将说明UI动效必须以用户体验12大原则为基础，那才能为可用性加分。

　　就好比，UI动效是建筑的施工，用户体验的12大原则是基础的施工图，施工需要在施工图的引导下才能做到正确无误。12大原则为设计师提供了强有力的理论支持。

　　在设计动效前，区分“状态”和“行为”是很重要的。用户体验中的状态元素基本上是静态的，行为是暂时的，他们基于交互动作。当一些元素处于被掩盖或遮挡的状态未显示出来时，用户需要进行短暂的行为动作与界面进行交互。

　　此外，交互在时间的维度上都可以被认为是实时或非实时发生的。实时意味着用户直接与用户界面中的对象进行交互。非实时意味着对象行为是后交互式的：它发生在用户操作之后，并且是过渡性的。这是一个重要的区别。因此，实时交互也可以被认为是“直接操纵”，用户行为与界面交互是同时进行的。非实时交互仅在用户行为发生后，并且直到状态改变结束后用户才可继续使用。

　　区分二者的差别，将帮助我们更好的领会用户体验动效的十二项原则。

　　以下四种方式，是提升用户体验动效可用性的核心：

　　可预期性分为两个方面 ，用户如何看待对象是什么，以及它是如何体现的。另一种说法是，作为设计师，我们希望最大限度地缩小用户期望与他们实际体验之间的差距。

　　连续性是指用户流程的顺畅与用户体验的流畅要一致。连续性包括场景/页面内、场景/页面之间的连续与流畅。

　　叙述性是用户体验中事件的线性进展，导致时间/空间框架。这可以被认为是在整个用户体验中连接在一起的一系列谨慎的时刻和事件。

　　关系是指界面对象之间的空间、时间的层次表示，指导用户理解和决策。

　　原理，风格，属性和价值观

　　我们可以想象一个层级结构，顶部是原理，中间是风格，下面是属性，底部是值。

　　原理是一切动效的前提和规则，通过原理能产生许多不同的风格。风格可以被认为是原理之间的组合。属性是要创建动效对象的特定参数。包括位置、不透明度、比例、旋转、锚点、颜色、形状等。值是时间轴上的实际数字属性值，用于实现动效的关键因素。

　　时机控制：缓动和偏移与延迟

　　对象关系：驱动关联

　　对象连续性：转型、数值变化、遮罩、叠加、克隆

　　时间轴：视差

　　空间的连续性：景深、空间维度、移动变焦

　　当交互事件发生时，对象行为需与用户期望一致。

　　所有具有时间行为的运动都需要缓动（无论是实时还是非实时的交互）。缓动可以让运动更自然，并且使动效有更强的连续性，更能满足用户的期望。

　　动效运动时接近于匀速运动的，这种动画显的机械且不真实。图二是模拟了橡皮筋、小球落地的运动，这个动效的特点是有弹性，也叫弹性运动。作为设计师，除了美学之外，我们还需要关注可用性，哪个例子更能支持你的动效作品？

　　缓动是存在在自然界中的，假设把缓动的程度想象成一个“阶梯”，那么其中超出用户预期的缓动效果体验较差，是不可用的。将用户体验动效与用户行为无缝连接，这才是一件合理可用的事情，因为它不会影响用户的注意力。线性运动显然是过于明显的，感觉像是不完整的效果，容易分散用户的注意力。在考虑动效的缓动时，要先想想它在现实世界中的运动规律。

　　动效与用户行为完全无缝连接才是最好的效果么？这边举一个相矛盾的例子，它与用户行为也不是无缝的，但它是经过设计过的。用户可以注意到运动对象是弹跳的进入的，这也是超出用户的预期，但比线性动效要好多了。

　　缓动会对可用性造成糟糕的影响吗？答案是肯定的。我们要避免出现以下的情况：时间太慢或太快，会打破用户的预期，造成注意力的分散；同样如果缓动效果与整体的体验不一致，也会产生负面的影响。这里所展示的只是很小一部分，设计师可以在项目中创建无数的“缓动”效果，不同场景的缓动都会带来不同的视觉效果，给用户带来的体验也是不同的。切记，在任何时候，都不要忘记缓动的作用！

　　页面加入新元素或新场景进入时的层级关系

　　这个原理它可以很明确的告诉用户界面中元素的关系。顶部的两个矩形是组合在一起的，与最下面的矩形是分开的。我们可以把上面的组理解成标题和副标题，下面的是正文。这种方式同样也适用于其他的页面。在用户接触这些对象之前，设计师已经用偏移与延迟的设计原则，将信息规类好，便于用户有效的识别。

　　在这个案例中，上面的按钮和文字是一起出现的，相当于一个组合。他们出现的速度比下面两个小图标要快一些。最后一页，文字和按钮是一个整体，出现的速度比图标要慢一些。用这种方式就能拉开了信息层级，让动效更加丰富。

　　多个对象交互运动时的空间关系。

　　驱动关联是非常重要的原则。上图中，顶部元素与底部的元素在“比例”与“位置”的属性上是关联在一起，这种关联与继承关系，可以增强动效的可用性。界面中元素的属性包括：比例、不透明度、位置、旋转、形状、颜色等，这些属性中的任何属性都可以相互关联，为用户提供更好的交互体验。

　　图片向左滑动和向右滑动是不同的效果，同时滑动后背景也是跟着变的。驱动关联原理在做即时交互时能发挥出最好的效果。因为用户通过驱动关联能感受到界面元素的直接变化，设计师可以通过动效即时告诉用户元素之间的关联。

　　驱动关联的动效分为3种形式，上面两种属于“直接继承”，除此之外还有“延迟继承和“逆向继承”

　　当对象发生变化时，创建连续的叙事流程。

　　形态变化是很容易被识别的效果。如下图用户可以轻易的注意到“确认提交”的按钮形态转变成成圆形的进度条，随后在最终状态变换成确认的图标。这种形态变换非常容易吸引到用户到注意力，并且可以描绘出一个完整的流程。

　　这种变换是将用户体验的不同状态（“按钮-进度条-成功”三种状态）无缝的衔接，最终产生用户所期待的结果。用户通过这些变换可直观的看到三种功能状态，并最终达到目的。变换原则可以将用户体验中不同时刻的信息分解成节点，并且在几个变换的形态中无缝连接，完成一个完整的事件流程的传递。这样连贯性的效果更容易被用户的认知所接受。

　　当价值主体发生变化时，创造一种动态和连续的叙事关系。

　　数字及文本这些元素本身的值是可以改变的，这一点概念相对而言没有那么显而易见。因为，数字和文本的值变实在是太普遍了，以至于我们常常意识不到，也很少正确地评估他们对提升用户体验的帮助。

　　那么值变时的体验是怎样的？如果说文本的十二条动效体验原则的核心是体验提升的机会点，那么此处有3个机会点：向用户表达数字背后的现实含义、沟通介质以及值的动态变化。

　　如果在画面加载动效中，数字/文本没有发生变化时，用户会认为整个元素看起来是静止的状态，它们看起来与“限速55km/h”的标识牌的效果是一样的　　

    很多数字/文本要反应现实发生的事件，比如时间、收入、游戏成绩、商业指标、健身数据等。如果我们通过动态方式来表示这些内容，可以更直接感受到这些变化的信息。如果用静态的方式来处理变化的数据，则会失去深层次体验的机会。

　　动态变化的数值/文本，可以给到用户强有力的反馈，让用户更直接的感受到内容的变化。然而当数值/文本是静态的时候，数值变化的关联就会减少，用户也很难感受到内容背后的变量。

　　数值/文本变化原则，在实时与非实时的事件中都适用。在实时事件中，用户可以通过对界面的交互改变数值/文本的内容；在非实事件中，比如加载或转换，这些数值在没有用户参与的情况下发生改变。

         奇酷教育官网上每天都会更新大量UI培训技术资源，目的是为了适合不同的人群来学习。想了解更多或不懂的地方可以在线咨询。