Motion设计对数字产品的用户体验产生了深远的影响，但如果界面元素没有表现出基本的Motion Design原理，可用性则会受到损害。在用户界面的上下文中，Motion不仅仅是视觉装饰，它是一种强大的力量，可增强产品参与度，并扩展设计交流的范围。

我们的世界是一种动态的方式。即使在静止的瞬间，叶子也会发抖，肺部也会扩张。在数字产品设计领域中，动态似乎是第二自然，它是日常功能的扩展，在做设计的时候我们需要合理地加以利用。

从理论上讲，使UI移动很容易，在预定路径上定义点，然后用软件对间隙进行补间。实际上它不仅那么简单，工具和技术是必不可少的，但是动画设计依然有一套需要遵守的规则，用于提高数字产品的可用性。

01 Motion Design的起源

Motion Design和UX的结合相对较新，但其根源是迪士尼。Frank Thomas和Ollie Johnston是迪士尼最有价值的动画师，是Pinnochio，Bambi和Fantasia等经典小说的重要贡献者。直到今天他们的12项Motion基本原理在电影，电视和数字内容的动态图形中仍然十分具有影响力。

迪斯尼原理是为了讲故事而提炼出身体动画的基本定律。它们使绘制的角色能够移动和拥有表情，但不能充分满足现代用户界面对交互运动的需求。

下图中是迪士尼动画专家Jorge R. Canedo Estrada改编的Motion Design十项原则，如果应用到数字产品设计中，我们需要根据自己具体的项目进行改进。

围绕交互式UI元素（及其UX意义）重新定位Motion原理的是Issara Willenskomer的UX in Motion Manifesto，它的深度令人吃惊，UXD接下来将结合他的原则为同学们详细解读一下12条交互动画设计的原则。

02 12种交互设计原则

1.Easing

缓和模仿现实对象随时间加速和减速的方式，它适用于所有显示motion的UI元素。

Easing的反面是线性motion。显示线性motion的UI元素立即从固定速度变为全速，从全速变为固定。这种行为在现实世界中不存在，对用户而言似乎停滞不前。

2.Offset & Delay

当多个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元素的不同面被链接在一起并实现了无缝的屏幕过渡。

12.Dolly & Zoom

滚动和缩放允许用户在空间上“遍历” UI元素或增加其比例以显示更多细节。

•Dolly：Dolly发生在用户的角度更接近（或远离）UI元素时。想象一下，一个拿着照相机走到一朵花的人近距离拍摄。

•Zoom：使用缩放时，用户的视点和UI元素保持固定，但是该元素在用户屏幕内的大小增加（或减小）。现在，假设该人保持姿势并使用相机的变焦功能使花朵显得更大。

03 Motion Design的重点

1.Motion不仅仅是装饰

Motion Design不是UI动画的同义词。这一点很关键，因为UI动画几乎总是被当作一种经过深思熟虑的装饰，而与UX无关（除了增加魅力）。Motion不是装饰，而是行为，行为只能帮助或阻碍用户体验。

2.两种互动类型：实时与非实时

Motion Design涉及两个基本交互：实时和非实时。

•当用户在屏幕上操纵UI元素时，实时交互可提供即时反馈。换句话说，motion行为会立即响应用户输入。

•在用户输入之后发生非实时交互，这意味着用户必须短暂暂停并观察所产生的motion行为，然后才能继续。

3.关注可用性

可用性一直是motion design中一直在强调的东西，主要通过下列几个方面来实现。

•期望：当用户与UI元素交互时，他们期望看到哪些运动行为？运动是否符合预期或引起混乱？

•连续性：交互是否在整个用户体验中产生一致的运动行为？

•叙述：交互及其触发的动作行为是否与满足用户意图的事件的逻辑进程相关联？

•关系：UI元素的空间，美学和层次结构属性如何相互关联并影响用户的决策？运动如何影响存在的各种元素关系？

互动体验需要各种灵巧形式的动作。当坚持Motion Design原则时，即使最基本的UI元素也成为人类交流的复杂媒介。当这些原理被忽略时，Motion就体现了自然界所没有的特征。没有任何美学上的辉煌可以克服由此带来的笨拙。

Motion Design与数字产品UX之间的关系正在迅速成熟。原则上的Motion方法可以防止过度依赖趋势，工具和技术的短暂使用。更好的是，它跨越了2D屏幕上元素的抽象运动与3D世界中运动感知之间的鸿沟。

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手，还可获取讲座直播哦~

|福利大放送 | WELFARE 
对于设计初学者，完成从0开始创作几乎是不可能的，就像学习过程中书读百遍其义自见一样。有了大量的积累，才能在脑海里建立素材库，这些素材库能帮助同学们完成最初的设计想法积累，基于这样的基础再进行个性化的创作，最终才能做出高质量的作品集。全球院校最新作品集免费拿！添加小助手即可获取：

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外，我们提供不定主题的公开课和内部小组课，教学计划课程由三大部分组成，包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。

本文版权归UXD尤克斯所有

部分图片来自于网络

如有侵权请与我们联系