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

我们的世界是运动之一。即使在静止的瞬间，叶子也会发抖，肺部也会扩张。在数字产品设计领域，运动似乎是第二自然，这是对日常工作的扩展，可以毫不费力地加以利用。

从理论上讲，使UI元素移动很容易。在预定路径上定义点，然后软件对间隙进行补间。实际上，它不是那样工作的。工具和技术是必不可少的，但它们是从原理中获取力量的。如果要提高数字产品的可用性，就必须以适用于无数用例的不变行为规则为基础。

运动设计的起源

运动设计与UX的结合相对较新，但其根源是迪士尼。迪斯尼原理是为了讲故事而提炼出身体运动的基本定律。它们使绘制的角色能够移动和表情，但不能充分满足现代用户界面对交互运动的需求。

当代设计师试图弥合这一差距。更具说明性的示例之一是动画设计的十项原则，这是迪士尼动画专家Jorge R. Canedo Estrada的改编作品。

在建立运动中用户体验的原则时，可以从以下几点入手

A. 从UI动画中区分运动设计

B. 阐明运动如何帮助可用性

C. 解开核心运动行为的内部运作方式

运动不仅仅是装饰

动作设计不是UI动画的代名词。这一点很关键，因为UI动画几乎总是被当作一种经过深思熟虑的外观，而与UX没有任何关系（除了增加魅力）。动作不是装饰，而是行为，行为只能帮助或阻碍用户体验。

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

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

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

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

实时交互：运动行为会立即响应用户输入。

非实时交互：交互后，用户必须短暂等待并观察动作行为。

运动支持可用性

运动设计必须以四种不同的方式支持可用性。

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

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

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

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

数字产品的12种运动设计原理

1.缓和

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

放松的反面是线性运动。显示线性运动的UI元素立即从固定速度变为全速，从全速变为固定。这种行为在物理世界中不存在，并且对于用户而言似乎停滞不前。

UI卡和相应的椅子移动很快，但是由于缓和，它们可以平稳且受控地停下来。

2.偏移和延迟

当多个UI元素同时且快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素可能具有其自身功能的可能性。

偏移和延迟会在同时移动的UI元素之间创建层次结构，并传达它们是相关的但又不同的信息。元素的时序，速度和间距不是完全同步，而是交错排列，从而产生微妙的“一个接一个”的效果。

当用户在屏幕之间漫游时，偏移和延迟表明存在多个交互选项。

这个加密货币应用程序一次引入了多个UI元素。它们的到来有些交错，以通知用户这些元素是相关的，但又是截然不同的。

3.父子元素关联

父子元素关联将一个UI元素的属性链接到其他UI元素的属性。当父元素中的属性更改时，子元素的链接属性也会更改。所有元素属性可以相互链接。

例如，父元素的位置可以绑定到子元素的比例。当父元素移动时，子元素的大小会增加或减小。

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

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

4.转型

当一个UI元素变成另一个UI元素时，将发生转换。例如，下载按钮将转换为进度条，该进度条将转换为完成图标。

从UX的角度来看，转换是一种向用户显示其相对于目标的状态（系统状态的可见性）的有效方法。当UI元素之间的进度链接到带有开始和结束的过程（例如，下载文件）时，这特别有用。

转换表示下载的开始，中间和完成。

5.数据变化

在数字界面中，数据表示（数字，基于文本或图形的表示）丰富，出现在从银行应用程序到个人日历到电子商务站点的产品中。由于这些表示形式与实际存在的数据集相关联，因此它们可能会发生变化。

值的变化传达了数据表示的动态性质，并告知用户数据是交互式的，并且可能会受到一定程度的影响。当没有动静地引入值时，用户参与数据的意愿降低。

动态引入值以向用户显示他们有能力影响数据。

6.遮罩

遮罩是UI元素各部分的战略性揭示和隐藏。通过更改元素外围的形状和比例，遮罩会发出信号，表示实用性发生了变化，同时允许元素本身保持可识别性。因此，理想的选择是诸如照片和插图之类的详细视觉效果。

从可用性的角度来看，设计人员可以实施屏蔽以向用户显示他们正在通过一系列交互进行中。

遮罩用于从图像捕获到上传到在线店面中的过渡。

7.叠加

在2D空间中，没有深度，UI元素只能沿X轴或Y轴移动。叠加会在UI的2D空间中产生前景色/背景色的错觉。通过模拟深度，覆盖可以根据用户需要隐藏和显示元素。

使用重叠时，信息层次结构是一个重要的考虑因素。例如，用户在做笔记应用程序中应该首先看到的是他们的笔记列表。然后，可以使用滑动来公开每个消息的辅助选项，例如删除或存档。

重叠式运动可让用户快速归档或删除此记事应用中的条目。

8.克隆

克隆是一种运动行为，其中一个UI元素拆分为其他元素。这是突出显示重要信息或交互选项的聪明方法。

当UI元素在界面中实现时，它们需要一个清晰的起点来链接到屏幕上已经存在的元素。如果元素只是无处不在而突然爆发或消失，则用户将缺乏进行自信交互所需要的上下文。

用户可以放心地单击彩色圆圈，因为它们显然源自“添加注释”图标。

9.模糊

想象磨砂玻璃门。它需要交互才能打开，但是可以（在某种程度上）辨别另一端正在等待什么。

它为用户提供了一个界面，该界面要求进行交互，同时显示要跟随的屏幕提示。导航菜单，密码屏幕和文件夹/文件窗口是常见的示例。

模糊处理为用户提供了重要的互动方式，同时让他们保持产品叙事的方向。

10.视差

当两个（或多个）UI元素同时移动但速度不同时，将显示视差。在此，目的是建立层次结构。

A. 交互式元素移动速度更快，并显示在前景中。

B. 非交互式元素的移动速度变慢并退回到背景。

视差引导用户使用交互式UI元素，同时允许非交互式元素保留在屏幕上并保持设计统一性。

使用视差时，最重要的交互式元素移动最快，而非交互式元素移动较慢并退回到背景。

11.维度

维度使UI元素似乎具有多个交互方面，就像物理世界中的对象一样。通过使元素看起来像是可折叠的，可翻转的，浮动的或具有逼真的深度属性而实现的。

作为一种叙事设备，维度意味着UI元素的不同侧面被链接在一起，并实现了无缝的屏幕过渡。

维度意味着2D UI元素具有多个交互方面，就像物理世界中的对象一样。

12.变焦

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

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

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

滚动：用户的视点似乎越来越接近背景图像。

缩放：用户的视角不会更接近图像。而是图像的比例会增加。

运动就是沟通

互动体验的需求运动在其所有的轻快和微妙的形式。当坚持运动设计原则时，即使最基本的UI元素也成为人类交流的复杂媒介。当这些原理被忽略时，运动就体现了自然界所没有的特征。

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

文章来源：站酷    作者：DuiaDesign

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务