Motion设计对数字产品的用户体验产生了深远的影响，但如果界面元素没有表现出基本的Motion Design原理，可用性则会受到损害。在用户界面的上下文中，Motion不仅仅是视觉装饰，它是一种强大的力量，可增强产品参与度，并扩展设计交流的范围。
我们的世界是一种动态的方式。即使在静止的瞬间，叶子也会发抖，肺部也会扩张。在数字产品设计领域中，动态似乎是第二自然，它是日常功能的扩展，在做设计的时候我们需要合理地加以利用。 从理论上讲，使UI移动很容易，在预定路径上定义点，然后用软件对间隙进行补间。实际上它不仅那么简单，工具和技术是必不可少的，但是动画设计依然有一套需要遵守的规则，用于提高数字产品的可用性。 Motion Design和UX的结合相对较新，但其根源是迪士尼。Frank Thomas和Ollie Johnston是迪士尼最有价值的动画师，是Pinnochio，Bambi和Fantasia等经典小说的重要贡献者。直到今天他们的12项Motion基本原理在电影，电视和数字内容的动态图形中仍然十分具有影响力。 迪斯尼原理是为了讲故事而提炼出身体动画的基本定律。它们使绘制的角色能够移动和拥有表情，但不能充分满足现代用户界面对交互运动的需求。 下图中是迪士尼动画专家Jorge R. Canedo Estrada改编的Motion Design十项原则，如果应用到数字产品设计中，我们需要根据自己具体的项目进行改进。 Jorge R. Canedo Estrada的Motion设计10原理。 围绕交互式UI元素（及其UX意义）重新定位Motion原理的是Issara Willenskomer的UX in Motion Manifesto，它的深度令人吃惊，UXD接下来将结合他的原则为同学们详细解读一下12条交互动画设计的原则。 1.Easing
缓和模仿现实对象随时间加速和减速的方式，它适用于所有显示motion的UI元素。
Easing的反面是线性motion。显示线性motion的UI元素立即从固定速度变为全速，从全速变为固定。这种行为在现实世界中不存在，对用户而言似乎停滞不前。 UI卡和相应的椅子移动很快，但是由于松动，它们可以平稳且受控地停止。 2.Offset & Delay
当多个UI元素同时并快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素可能具有其自身功能的可能性。 偏移和延迟会在同时移动的UI元素之间创建层次结构，并传达它们相关但又不同的信息。元素的时序，速度和间距不是完全同步，而是交错排列，从而产生微妙的“一个接一个”的效果。 当用户在屏幕之间漫游时，偏移和延迟表明存在多个交互选项。 这个加密货币应用程序一次引入了多个UI元素。它们的到来有点交错，以通知用户元素是相关的，但又是不同的。3.Parenting
Parenting将一个UI元素的属性链接到其他UI元素的属性。当父元素中的属性更改时，子元素的链接属性也会更改。所有元素属性可以相互链接。 例如，父元素的位置可以绑定到子元素的比例。当父元素移动时，子元素的大小会增加或减小。 Parenting会在UI元素之间创建关系，建立层次结构，并允许多个元素立即与用户通信。因此，Parenting在实时交互中使用时影响最大。 蓝色滑块的位置控制背景遮罩的不透明度，灯泡周围的发光效果的散布以及光强度标度的数值。
4.Transformation
当一个UI元素变成另一个UI元素时，将发生转换。例如，下载按钮转换为进度条，转换为完成图标。 从UX的角度来看，转换是一种向用户显示其相对于目标的状态（系统状态的可见性）的有效方法。当UI元素之间的进度链接到带有开头和结尾的过程（例如，下载文件）时，这特别有用。 转换表示下载的开始，中间和完成。 5.Value Change
在数字界面中，价值表示（数字，基于文本或图形的表示）丰富，出现在从银行应用程序到个人日历到电子商务站点的产品中。由于这些表示与实际存在的数据集相关，因此它们可能会发生变化。 价值的变化传达了数据表示的motion性质，并告知用户数据是交互式的，并且可能会受到一定程度的影响。如果不加变动地引入值，用户参与数据的意愿就会降低。 动态引入值以向用户显示他们有能力影响数据。 6.Masking
遮罩是UI元素各部分的战略性揭示和隐藏。通过更改元素外围的形状和比例，遮罩会发出信号，指示效果发生变化，同时允许元素本身保持可识别性。因此，理想的选择是像照片和插图这样的详细视觉效果。 从可用性的角度来看，设计人员可以实施屏蔽以向用户显示他们正在进行一系列的交互。 遮罩用于从图像捕获到上载到在线店面中的过渡。 7.Overlay
在2D空间中，没有深度，UI元素只能沿X或Y轴移动。叠加会在UI的2D空间中产生前景/背景区别的错觉。通过模拟深度，覆盖可以根据用户需要隐藏和显示元素。 使用重叠时，信息层次结构是重要的考虑因素。例如，用户在做笔记应用程序中应该首先看到的是他们的笔记列表。然后，覆盖可用于为每个消息（如Delete或Archive）显示辅助选项。 叠加允许用户快速归档或删除此笔记应用程序中的条目。 8.Cloning克隆是一种Motion行为，其中一个UI元素拆分为其他元素。这是突出显示重要信息或交互选项的明智方法。 当UI元素在界面中实现时，它们需要一个清晰的起点来链接到屏幕上已经存在的元素。如果元素只是无处不在而突然爆发或消失，则用户将缺乏进行自信交互所需的上下文。 用户可以放心地单击彩色圆圈，因为它们显然来自“添加注释”图标。 9.Obscuration
想象一个磨砂玻璃门。它需要交互才能打开，但是可以（在某种程度上）辨别另一端正在等待什么。 模糊处理的方式就和磨砂玻璃相同。它为用户提供了一个界面，该界面要求进行交互，同时显示要跟随的屏幕提示。导航菜单，密码屏幕和文件夹/文件窗口是常见的示例。 模糊处理为用户提供了重要的互动方式，同时让他们保持产品叙事的方向。 10.Parallax
当两个（或多个）UI元素同时移动但速度不同时，将显示视差，目的是建立层次结构。 ·交互式元素移动速度更快，并显示在前景中。 ·非交互式元素移动速度变慢并退回到背景。 视差引导用户使用交互式UI元素，同时允许非交互式元素保留在屏幕上并保持设计统一性。 使用视差时，最重要的交互式元素移动最快，而非交互式元素移动较慢并退回到背景。 11.Dimensionality
维度使UI元素似乎具有多个交互方面，就像物理世界中的对象一样。通过使元素看起来像是可折叠的，可翻转的，浮动的或具有逼真的深度属性而实现的。 作为一种叙事设备，尺寸暗示着UI元素的不同面被链接在一起并实现了无缝的屏幕过渡。 维度意味着2D UI元素具有多个交互方面，就像物理世界中的对象一样。 12.Dolly & Zoom
滚动和缩放允许用户在空间上“遍历” UI元素或增加其比例以显示更多细节。 ·Dolly：Dolly发生在用户的角度更接近（或远离）UI元素时。想象一下，一个拿着照相机走到一朵花的人近距离拍摄。 ·Zoom：使用缩放时，用户的视点和UI元素保持固定，但是该元素在用户屏幕内的大小增加（或减小）。现在，假设该人保持姿势并使用相机的变焦功能使花朵显得更大。 Dolly：用户的视点似乎越来越接近背景图像。 Zoom：用户的视角不会更接近图像。而是图像的比例会增加。
1.Motion不仅仅是装饰
Motion Design不是UI动画的同义词。这一点很关键，因为UI动画几乎总是被当作一种经过深思熟虑的装饰，而与UX无关（除了增加魅力）。Motion不是装饰，而是行为，行为只能帮助或阻碍用户体验。
2.两种互动类型：实时与非实时Motion Design涉及两个基本交互：实时和非实时。 ·当用户在屏幕上操纵UI元素时，实时交互可提供即时反馈。换句话说，motion行为会立即响应用户输入。
实时交互：motion行为会立即响应用户输入。 ·在用户输入之后发生非实时交互，这意味着用户必须短暂暂停并观察所产生的motion行为，然后才能继续。 非实时交互：交互后，用户必须短暂等待并观看motion行为。 3.关注可用性可用性一直是motion design中一直在强调的东西，主要通过下列几个方面来实现。·期望：当用户与UI元素交互时，他们期望看到哪些运动行为？运动是否符合预期或引起混乱？ ·连续性：交互是否在整个用户体验中产生一致的运动行为？
·叙述：交互及其触发的动作行为是否与满足用户意图的事件的逻辑进程相关联？
·关系：UI元素的空间，美学和层次结构属性如何相互关联并影响用户的决策？运动如何影响存在的各种元素关系？ 互动体验需要各种灵巧形式的动作。当坚持Motion Design原则时，即使最基本的UI元素也成为人类交流的复杂媒介。当这些原理被忽略时，Motion就体现了自然界所没有的特征。没有任何美学上的辉煌可以克服由此带来的笨拙。 Motion Design与数字产品UX之间的关系正在迅速成熟。原则上的Motion方法可以防止过度依赖趋势，工具和技术的短暂使用。更好的是，它跨越了2D屏幕上元素的抽象运动与3D世界中运动感知之间的鸿沟。
|
