最近几年，动效越来越被设计师们所青睐，Motion对数字设计的用户体验产生了巨大影响。，动效将是非常重要的一个设计流行趋势。它们可以通过多种创新方式协同堆叠和组合，提升你产品的体验与可用性。但是，如果您没有将运动设计的基本原理整合到界面元素中，则会损害可用性。

本文总结了运动设计的12条基本原理，它们将说服并打动用户。

什么是运动设计？

运动设计和UX的结合相对较新，但其根源是迪斯尼，它继续吸引着世界各地的人们。

动画的12条原则，是迪士尼在迪士尼公司多年培养的，由顶级创作者弗兰克·托马斯（Frank Thomas）和波利·约翰斯顿（Pollie Johnston）创造的，是《幻觉：幻觉》。1981年出版，《生命：迪士尼动画》，至今仍在广泛使用。被称为基本动画指南之一。

迪斯尼基本原理是动画故事中身体运动的基本定律的汇编。

它给绘制的角色带来了动感和情感，但可能不足以满足现代用户界面的交互性运动需求。

为了填补这一空白，动画专家Jorge R. Caned Estrada发布了“迪斯尼基本原理的改编版《运动设计的10条原则》”。

Jorge R. Caned Estrada的十项运动设计原理

运动设计和可用性之间有什么区别？

动作设计和UI动画并不意味着同一件事。UI动画通常被视为与UX无关的装饰。但是，动作设计本身就是一种动作，该动作有助于或阻碍用户体验。

运动设计涉及两个基本交互，即实时和非实时。

• 当用户与屏幕上的UI元素进行交互时，实时交互可为您提供即时反馈。运动运动可即时响应用户输入。
• 用户输入后发生非实时交互。用户将暂停，然后继续查看所产生的运动行为。

实时交互：运动运动可即时响应用户输入。

非实时：交互后，用户必须等待一段时间才能看到运动行为。

运动设计需要以四种不同的方式来支持可用性。

• 期望：当用户与UI元素交互时，您期望什么样的行为？此举是否符合预期或引起混乱？
• 连续性：在整个用户体验中是否存在一致的运动行为？
• 叙述：交互及其触发动作是否与满足用户需求的逻辑故事情节相关联？
• 关系：UI元素的空间，设计，层次结构等如何关联并影响用户的决策？

数字产品中运动设计的12条基本原理的总结

1.缓和

缓和模仿对象在日常生活中如何随着时间的推移而加速和减速，并且可以应用于所有UI元素。

缓动的反义词是Linear Motion，当将它应用于UI元素时，它会从固定速度加速到全速，并立即从全速运动到固定速度。

它违反了身体运动的规律，对用户而言似乎是静止的。

UI卡及其相应的椅子可以快速移动，但是由于松开，它变得平滑，受控且固定。

2.偏移和延迟

当多个UI元素同时并快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素的独特功能。

偏移和延迟会在同时移动的UI元素之间创建层次结构，从而告诉他们它们是相关的但彼此独立。

元素的时间安排，速度和间距不是完全同步，而是具有“一个接一个”显示的效果。

这个加密货币应用程序一次显示多个UI元素。元素的到达稍微偏移以传达元素相关。

3.父元素与子元素

父元素将一个UI元素的属性与另一个UI元素的属性链接。当父元素的值更改时，子元素的链接属性也会更改。

例如，您可以将父元素的位置与子元素的比例相关联。随着父元素的移动，子元素的大小会增加或减小。

父元素在UI元素之间创建关系，建立层次结构，并允许多个UI元素立即与用户通信。因此，父元素在实时交互中使用时影响最大。

蓝色滑块的位置控制背景遮罩的不透明度，灯泡周围的发光效果的散布以及光量的数值。

4.转换

当一个UI元素更改为另一个UI元素时，会发生变形。例如，将下载按钮转换为进度条或完成图标就是一个简单的示例。

从可用性的角度来看，转换是向用户显示与其目标相关联的状态（系统状态的可视化）的有效方法。对于具有开始和结束过程（例如文件下载）的UI元素尤其有用。

该变体告诉您下载已经开始，正在进行中并且已经完成。

5.价值变化

值的变化传达了数据表示的动态性质，并告知用户数​​据是交互式的，并且可能在一定程度上受到影响。如果不引入运动行为，则用户对数据的积极性就会降低。

在运动中显示值以表明它们可能会影响数据。

6.遮罩

遮罩是指故意显示或隐藏某些UI元素。

通过更改元素的形状和比例，元素本身仍可识别，并会在实用程序更改时通知您。因此，理想的候选对象是照片和插图等详细的视觉效果。

从可用性的角度来看，实现屏蔽可以告诉用户一系列交互正在进行中。

遮罩用于捕获图像，上传图像并将产品添加到在线商店。

7.叠加

叠加效果可在UI元素的平面空间中区分前景和背景。通过模拟深度，覆盖图可以根据用户需要显示或隐藏元素。

采用覆盖时，创建信息层次结构很重要。例如，在做笔记的应用程序中，用户首先看到的是笔记列表。然后，您可以使用覆盖来显示每条消息的选项设置，例如删除或存档。

叠加层使用户可以快速存档和删除Notes应用程序条目。

8.克隆

克隆是一种运动行为，其中一个UI元素被拆分为其他元素。这可能是强调重要信息和交互设置的最佳方法。

当UI元素在界面内拆分时，需要弄清楚它是从哪个元素开始的。如果某个元素出现在不知所措的地方或淡出淡出，则用户将无法放心地操作该元素。

您可以毫不犹豫地单击彩色圆圈，因为它们可以从“添加注释”图标中清晰看到。

9.可操作性

想象一下，一扇阴云密布的玻璃门。需要一些互动才能打开门，但是在某种程度上，可以说出另一边的情况。

混淆是完全相同的想法。它显示需要用户与其交互的界面，同时在下面的屏幕上显示提示。

导航菜单，密码屏幕，文件夹，模式窗口等是常见的实现示例。

可操作性，可让您保持正确的方向，同时向用户展示重要的互动信息。

10.视差

当两个或多个UI元素同时以不同的速度移动时，将显示视差。同样，目标是建立层次结构。

交互式元素移动得更快并出现在前景中，而非交互式元素则变慢并退回到背景中。

视差会引导用户使用交互式UI元素，同时将非交互式元素留在屏幕上以保持设计的完整性。

通过视差效果，最重要的交互式元素移动最快，非交互式元素移动较慢，并退回到背景中。

11.维度

维度可以使UI元素看起来像在现实世界中一样具有多个交互方面。

重要的是，此运动行为表示诸如可折叠，翻转，浮动或逼真的深度之类的元素。

在智能手机等设备中，尺寸意味着链接了UI元素的不同方面，从而实现了无缝的屏幕过渡。

尺寸表示平面UI元素具有多个交互方面。

12.多莉和缩放效果

多莉和缩放效果使用户可以在空间上移动UI元素或按比例放大以显示更详细的级别。

多莉效果：当用户的观点接近UI元素时，就会发生多莉现象。持相机的人接近拍摄对象并拍摄。

缩放效果：缩放可保持用户的视角和UI元素固定，但元素会在用户屏幕内调整大小。停止状态下使用照相机的变焦功能拍摄被摄体的状态。

多莉效果：您可以看到用户的视角更接近于背景图像。

缩放效果：用户的视角远离图像，并且图像按比例放大。

运动是交流

交互式体验需要适度的移动。如果遵循运动设计原则，那么即使基本的UI元素也将在人类交流中变得复杂。

相反，如果忽略运动设计原理，则运动将是不自然的，这是自然界中找不到的。

数字产品的运动设计和用户体验之间的关系正在日趋成熟。

遵循运动设计基本原理的方法还可以防止您过分依赖趋势，工具，技术等。

此外，您将能够弥合屏幕上UI元素的二维运动与日常生活中自然的三维运动之间的差距。

作者：Micah Bowers