动效设计的核心原理是什么？

前言

给大家分享这篇文章正文内容前，我想给大家提一个问，当你处理以下动效事件时，你认为哪一种是正确动效设计。

这是一个元素进入画面中心的动效，我们都知道物理世界中不存在绝对的匀速运动，所以我们做动效的时候为了看起来更加自然，我们会给动效加上一个缓动。不过我们在用Principle等动效软件制作的时候，面对软件提供各种缓动的运动曲线，你是否随便选一个感觉“对”的曲线使用？

上面给大家提的问题，我采访我周围的同事和一些设计朋友，大多数给的回答是缓动B是正确的，原因大都是缓动B感觉舒服一些。

答案确实是B，不过大多数设计师都回答不出具体的原因，大家都是靠“感觉”做出的判断。今天给大家的分享，是想带一起了解动效设计的底层原则和规律，不再只靠“感觉”做设计判断。

 

你是否一直凭“感觉”去做动效？

我在开始学习动效设计的很长一段时间里，也是靠着“感觉”来做动效的，我不觉得靠感觉做动效是错的，甚至有的设计师认为感觉才是做动效的基础（就像学音乐需要乐感）。不过一直靠感觉做动效，呈现作品的准确性主要依靠设计师的阅历和经验，他并不可靠谱。所以我们需要去理解动效设计的底层原则和规律，让我们的”感觉“准确呈现出来。

动效设计中有很多知识原理和常用技巧，不过经过整理梳理后，就会变得很容易理解记忆。所谓：纵使风云变幻，终究不离其宗。 只要我们对底层逻辑掌握，表层再怎么变化都脱离不了底层逻辑。 我们要让动效设计呈现准确、自然、“感觉”对。我们就需要对动效的四大要素有深入认识：缓动、时间、编排、运动理念

我们先通过案例和大家一起看这四个方面要素如何如何影响我们动效“感觉”的传达，然后再详聊它们在动效设计过程中的要点

 

缓动

缓动可调整动画的变化率，从而允许元素加速和减速，而不是以恒定的速度移动。

现实中，物体在移动时往往会加速或减速。我们的大脑习惯于这种运动，有速度变化的运动才符合物理世界客观现实，在做动画时，应利用此规律。

在其他因素相同的情况下，不同缓动曲线，会呈现出不同的运动感受。上面蓝色矩形呈现的感受是厚重有力量，黄色矩形则是轻盈的感觉。

 

时间

时间就是元素运动所消耗的时长

相同的运动距离，通过控制元素运动的时间长短，传达不一样的感受。上图蓝色和黄色矩形，运动的距离相同，消耗200ms的蓝色矩形呈现出明快高效的感受，而效果500ms的黄色矩形则呈现出自然连贯的感受。

 

编排

编排就是过度，我们对动画效果进行编排，也就是对动效的过度效果进行设计。让元素从一个状态切换到下一个状态，自然过渡，让用户的注意力自然地被引导过去

同样是从状态A过度到状态B，左边的编排方式呈现连贯、流畅的感觉，右边则是分散杂乱的。

 

运动理念

设计师结合品牌调性和物理世界的运动规律，赋予动画运动规则，不同的运动理念，动画的呈现出的感觉会大不一样

同样文字出现的动画，左边呈现出溅撒有活力的感觉，右边则是生长流畅的感觉

 

“感觉”的组成

缓动、时间、编排、运动理念的细微差别，都会给我们呈现不同的动画感受。

我们做的动效设计时，只要这四大要素处理到位，动效的感觉就对了。缓动、时间、编排、运动理念就是我们需要掌握的动效设计的内核，接下来，我会更细致的跟大家介绍它们的知识点，让大家对他们有更深刻的理解。

 

缓动——匀速运动和非匀速运动

我们对动效进行动效进行缓动处理，让它在某一个时间点加速或者减速，使动效更符合物理世界客观现实。不过在一些界面动效中，一些运动是与物理属性无关的，那对于这类的运动，是需要使用匀速的运动曲线。所以对于动效设计的缓动调节，要分为匀速运动和非匀速运动两个方面来认识。

 

匀速运动

匀速变化具有线性、骤停这两个特征，一般适用于与物理属性无关的过渡动效，如透明度属性的变化，颜色间的切换，或有规律的加载动效，如均匀的循环，在与物理参数有关的变化中，如位置变化，尽量避免使用匀速变化，否则很容易给人带来动效僵硬、不自然的感觉。

 

非匀速运动

非匀速运动的应用范围最广，用于与物理属性相关的属性变化中，如位移、旋转、缩放等。 非匀速运动的缓动曲线可以分为：标准缓动曲线（标准运动），缓入曲线（加速运动），缓出曲线（减速运动），弹性曲线（其他运动）

界面中的运动规律，是我们物理世界认知的延续。对于界面中不同运动的方式，他们分别对应着确定的缓动曲线。以下是每个动效设计师需要理解熟知的规律：

1. 单物体可视范围内点到点之间的运动——需要用标准缓动曲线（标准运动）

2. 单物体可视范围外出场的运动——需要用缓入曲线（加速运动）

3. 单物体可视范围外进场的运动——需要用缓出曲线（减速运动）

4. 表现力与反作用力的运动——需要弹性曲线

 

如何理解辅助记忆运动规律

标准缓动曲线、缓入曲线、缓出曲线、弹性曲线他们都是固定规律，我们如何理解并记住，保证在动效设计中不出错。

 

缓出曲线

这是黄色矩形元素进入界面中心的动画，这是一个单物体可视范围外进场的运动，按照前面给大家总结过得规律，它就应该是缓出曲线（减速运动）。为什么单物体可视范围外进场的运动就得是减速运动呢？如果理解?

我们前面多次提过，界面中的运动规律，是我们对物理世界认知的延续。我们想象一个汽车从视线范围外开到一个人面前速度变化是怎样的，一个司机需要让这样汽车停下，那速度肯定是40km/h > 20km/h > 0km/h 这样速度顺序，这是一个减速过程。 上面图示中，上面的汽车越来越慢停下下，下面的汽车越来越快停下来，显然是上面的上面的速度变化规律更符合我们的认知逻辑。 所以单物体可视范围外进场的运动——需要用缓出曲线（减速运动）

缓入曲线

单物体可视范围外出场的运动，就会是一个加速运动。我们映射现实中的汽车来理解，当一辆汽车从视线范围内开出，那汽车的的速度的变化是0km/h > 20km/h > 40km/h...，汽车需要从0启动再越来越快驶离视线之外。上面图示中，上面的汽车越来越快驶离视线，下面汽车一开始就具备很快的速度，这不符合物理世界的逻辑，汽车要启动，速度肯定是小到大的。所以单物体可视范围外出场的运动——需要用缓入曲线（加速运动）

 

标准缓动曲线

单物体可视范围内点到点之间的运动，就是我们最常见的标准运动，它先慢再快然后再慢。同时映射汽车的启停，当视线内一辆汽车启动——行驶——停止，它的速度变化是0km/h > 20km/h > 0km/h，物体不会突然启动或停止，它需要加速和减速才符合我们认知规律。所以单物体可视范围内点到点之间的运动——需要用标准缓动曲线（标准运动

 

弹性曲线

弹性动画我们平时不太常用，设计师也需要克制对这种动效曲线的使用，要充分考虑使用的场景是否适合。这里作为拓展了解为大家介绍。一般通过弹性运动可以表达产品的品牌调性，例如向用户展示活泼、灵动有活力的品牌调性等，强调某种信息或吸引用户注意。在iOS中的弹性运动的应用中，通过弹性反馈给予用户用为的奖励反馈，用户滑动UI，点击放大，通过回弹，显得用户操作有力度，让体验过程更加真实自然，不过在iOS中这种回弹处理得微妙，完全不会干扰用户注意力

 

时间——响应时间和持续时间

影响我们动效呈现感觉另一个重要因素——时间，时间我们从响应时间和持续时间两个方面来理解。

响应时间是指从用户执行操作到反馈出现的间隔时间；

持续时间是指从动效开始到动效结束的时长

 

响应时间

用户执行操作到反馈出现的间隔时间，用户对这个间隔时间耐心是有限度的，我们需要根据这个间隔的时长来判断采取不同的动效反馈。以下是摘自Jakob Nielsen 在《可用性工程》的研究成果，可供我们参考。

1. 1. 0.1秒是用户瞬间感受的界限，这意味着不需要任何提示（feedback）可直接显示结果。

2. 2. 1秒：即使用户感觉到了延迟，但仍然感觉流畅并保持连续的操作，一般来讲，延迟在0.1秒~1秒之间，是不需要特殊提示的，但不可超过2秒无反馈。

3. 3. 对于2~10秒的操作，如果使用百分比进度条显得有些大材小用，并且过快的显示也会让用户有种闪烁的不好效果。这时可以仅使用一个“忙碌”的动画，并且在合适的位置配上一个变化的数字提示进度，效果更好。

4. 4. 10秒是用户专注于单一任务的极限。对于超过10s延迟，在计算机执行的过程中应当给用户提示，用户将会进行其它的操作，而不会等待计算机执行完毕。

持续时间

动效开始到动效结束的时长不宜过长，以避免浪费用户时间，影响用户的阅读和操作效率，其持续时间一般不超过500毫秒

若你希望用户能清晰地捕捉到元素的渐进变化，持续时须大于200毫秒；若你不介意用户认为元素的改变是瞬间的，希望尽量节省用户时间，持续时间也可设计在 200毫秒以内（如hover到按钮上颜色瞬间发生微妙改变）

具体的持续时间的取值，一方面会受到元素的大小、动效的复杂程度影响；

· 小元素的轻微变化效果（如渐隐渐现、大小变化等小范围变化），一般在 200~300毫秒以内

· 较大元素的复杂变化效果（如包含大范围缓动位移），可长达 400-500毫秒

 

运动的元素越大，动效越复杂，一般持续的时间越长，上图为Material Design动效持续时间演示，从左往右100ms > 250ms > 300ms递增。

 

在IBM的动效规范中，运动的持续时间是根据动画的大小而定；元素的距离（移动）或大小（缩放）的变化越大，动画花费的时间越长。同样下拉选择组件，高度144px耗费时长105ms，高度336px耗费124ms。

在https://ibm.github.io/motion/ 可以体验IBM的动效规范，你可以选择动效的属性（缩放、位移、旋转等），确定要运动的距离，系统可以自动算出动效的持续时间，并提供demo演示。

 

出场动效一般比入场动效更快 ( 如当入场动效设置为230毫秒时，出场动效可设置为200毫秒) 这是因为元素入场时用户一般需要阅读并处理新出现的信息，而元素出场时通常表明用户在此元素上的任务已完成，不需要再关注了，快速出场能够节省用户更多时间。

 

编排——元素的自然过渡

简单理解，编排就是过度，我们对动画效果进行编排，也就是对动效的过度效果进行设计。让元素从一个状态切换到下一个状态，自然过渡，让用户的注意力自然地被引导过去。接下来我们从路径、连续性、引导、优先级四个方面注意编排中的注意点。

 

路径

根据 Material Design 的规定，当元素不成比例地变幻尺寸的时候，它应该沿着弧线运动，而不是直线运动，这样有助于让它看起来更加自然。上图左边呈弧线路径显得更加自然，右边直线路径感觉破坏了整体，刺眼。

 

连续性

我们要注意运动过度的连续线性，动效可以帮助在不同页面之间建立连续感；注意不同页面共享的元素，例如标题面板或按钮，以创建舒适的过渡。上图左边运动前后有衔接，能让用户感受到对象是连续的整体，右边的没有连续感，主次不清，注意力被分散 。

 

引导

当需要为多个元素设置动画时，错开元素入场，这将帮助用户理解内容和方向。用户的注意力应该沿着一个流向来引导。例如上图中，将表内容的入口错开20 ms会减少认知负荷并引导阅读方向。不过要根据交错元素的数量，调整延迟以确保总时间仍在500 ms之内

 

优先级

我们对动效进行编排时，尽可能排序页面内容的加载。从最稳定的内容（例如静态内容和标题）开始，到最重要的信息（例如主按钮或计算结果）结束，以使用户将注意力集中在这些内容上。IBM的动效规范中，对页面中元素出现的顺序做了严格的定义，静待内容＞静态内容（正文）＞动态内容＞主要动作＞动画内容

 

运动理念——赋予动效运动规则

运动理念是赋予动效的运动规则。设计师根据品牌调性，赋予动效运动规则和逻辑，最终达到目标呈现效果。不过需要注意的是设计师们在引用运动理念前需要充分的考虑当下页面使用场景、产品品牌调性等因素。

 

结语：

纵使风云变幻，终究不离其宗，只要我们对动效的缓动、时间、编排、运动理念有了深刻的认识，我们在任何时候都能做出对好的动效作品。

界面中的运动中的规律，是我们对物理世界的认知的延续，将固定设计规律和我们常见的生活场景结合起来理解将会事半功倍。

同时，我们也明白，动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的，我们界面中的动效设计，多是聚焦于帮助用户理解当前所处的状态。

以上就是本期分享的内容，我们下期再见~

转载声明：本文来源于网络，不作任何商业用途