深度分析12条经典动效设计原理，提升产品可用性！

大家好，我是Clippp，今天分享文章是「动效」设计。动效在品设计扮演着要色，它好坏与否接影响了用户使用体验。

效对产的可性体验有多维的影响。在界面中效仅仅是一种视觉，它够升产的参与并扩展交流的范围。

本文追根溯源，先从动效的起源讲起，一步步推进产品、体验之间的关系，最后通过案例析动效计的理和应用。一起来吧～

动效设计的起源

动效用户体验的结相对较新，其根源是迪士尼动画计的十二个条基本理。迪士尼动画理是为了讲故事而提炼出的基本的物理运动规律。这些理能让绘制的卡通角色移动和表演，但不能充足现代UI界面的交互需求。

了弥合这差距，动效专家Canedo Estrada改编的《动效设的10条原理》合应用到数字产品设中。

围绕界面元素建立用户体验时，重新动效原理的关键于：

• 将动效计UI动画开;
• 阐明动效如何帮可用性;
• 开核心动效的内部工机。

动效设计与用户体验

在讨论动效计的理之前，重要的是要调动效不仅仅是装饰，而是一种用来帮助用户体验的行为。动效计涉及种基本的交互类型：实和非实。

1. 实

当用户在屏幕上点击UI素，实交互提供即反馈，会对用户的操作做出即响应。

2. 非实时

非实时交互发生在户操作后，这意味着户需要经过短暂的转场才看到结果，然后再继续。

另外效设计通过种同的方式来升产的可性：

• 期望：用户与界交互时，他们期望看到哪些为？动效是否符合预期或引起混乱？
• 连续性：交互在整个体验中是否发生一致的行为？
• 叙述：触发的动作是否足用户图的事件的逻辑进程相关？
• 关系：UI界面的空间、学层级结构如何相互关联并影响用户的决策？动效如何影响各种元素的关系？

产品动效设计原理

这里供12种效设计原的解析，每一种对应同的案例，从更直观的角来解读抽象的原。

1. 缓(Easing)

缓效果模拟了现实世界中对象随时间速或减速的方式。它适于有的UI元素。图中的卡片和对应的椅子移速很快，但由于缓效果它们可平稳地受到控制。

2. 偏移和延迟(Offset & Delay)

多个UI元素时快速移动时，用户倾于将它们组合在起，而忽略了个元素自身功能性。

偏移和延迟会在移的UI元素之间创建层级结构，并传达它们相但又同的消息。元素的时间、速和间距是全同步的，而是交错列从而产生一种微妙的“一个接一个”的效果。

当用户在屏幕之间穿梭，偏移和延迟表存在多个交互选项。

3. 父子系(Parenting)

父子系将一个元素的属性链接到他元素中。当父元素中的属性更改时，子元素的链接属性会更改，同时有元素的属性都可相互链接。

在下图中，将父素（蓝色滑块）的位置素（灯泡发光效果&光照度）相关。当父素左右移动，素的发光效果的范围和光照度的数值会发生变化。

父关系在素间创建关系并建立层结构，允许多个素同用户交互。因此这种效果非常适用于实交互中。

4. 转换（Transformation）

当一种UI素变成另一种形式就会发生转换。例如，转换展示了下载的开始、中间和完成状——下载按钮转换为进度条，进度条转换为完成图标。

从UX角度，转换效果告知用户素的状发生了变化并将息传递给用户，提高了用户的认知度。

5. 数值变化（Value Change）

数值的变化（数字、文本或图形）在数字界面中非常丰，从银行APP日历商网站的各种产品中都会出现。

在某种程度上，数据的动表达和交流可能会对数据的价值产生响。例如下图中的数值被动引入，向用户显示有能力响数据，提升了参活动的愿。

6. 遮罩（Masking）

遮罩是对界面上的部内容进行战略性的显示和隐藏。通过改变素的形状和比例，在改变素效果的同允许素本身保持可识别性。因此，照片和插图等视觉形式是理想的选择。

从可用性的角度看，设师可以通过遮罩向用户展示产品行一系列的交互。

7. 覆盖（Overlay）

二维空间中没有深度，素只能沿X或Y轴移动，叠加在界面中创造出前景/背景相的位置关系。通过模拟深度，覆盖可以根据用户的需要隐藏和显示素。

使用覆盖时，信息层级结构重的考虑因素。例如，用户笔记应用中首先应该看到的笔记列表，然后使用覆盖显示每笔记的辅选项，如删除或归档。

8. 克（Cloning）

克是将现有的对象拆成新对象，这是一种突出显示重要息或交互选项的方法。通过克将素界面相链，如果素只是突然出现或消失没有关性，那用户将缺乏心去交互。

9. 模糊（Obscuration）

想象一扇磨砂玻璃门，虽然看清门后的东西但是我们察觉到门后事物的存在。

模糊的工作理是一的。它为用户提供提示，让用户识正在操作的界面之后还有其的层结构。导航菜、密码屏幕和文件窗是常见的示例。

10. 视差（Parallax）

当两个（或更多）元素同时同的速移时会构成视差效果。视差的要目的是划分层级结构：

• 可交互元素移动速度更快，出现在前景；
• 非交互式元素移速较慢，退到背景中。

视差引导用户点击互的元素，同时允许非互的元素留在屏幕上并持设计的统一。

11. 度（Dimensionality）

度使界面元素具备具个方向的互，种行为是使元素看来是折叠、翻转、浮动的或具有深度。

为一种叙述工具，度意味着元素的不同面是相互联系的，并且以现无缝的屏幕渡。

12. 平移与缩放（Dolly & Zoom）

平移与缩放通视角的变化能产生更空间上的验，逐级递进显示更高级别的细节。

平移：击元素后发生距离远近平移，用户视会越来越接近图像。（个拿着照相走到朵花前近距离摄）

缩放：用户视与图像距离保持不变，图像在屏幕比例会增加。（这个站在原地不动，利用相变焦功能使花显更大）

总结——动效即交流

互动验要求动效具备敏捷和微妙的形式。

坚持动效设计原理，即使最基本界元素也能成为交流复杂媒介。动效设计与品用户体验关系正在迅速成熟，而动效跨越了维屏幕上元素抽象运动和3D世界运动感知鸿沟～

章很长，感谢看到最后～希望章够你有收获！

欢迎关注作者公众号：「Clip计夹」