项目背景

 

动效是优化前端体验的重要手段之一。然而在多数情况下，动效往往在页面基础功能完成后才添加，在后期添加的动效通常缺乏功能性、合理性和美观度。为了追求页面观感的炫酷，加了过于复杂和过多的动画，只会妨碍用户获取信息和操作，阻碍用户体验。因此，对现有的动效理论进行了一定的学习，参考了「Material Design」、「动效十二原则」、「视觉科学」以及通过对大量网站的动效分析，整理了一套合理和适度的动效理论。希望依据这些理论设计和开发合适的动效，提升用户体验，优化开发流程。

 

理论依据

 

Material Design

 

Why Material Design

 

Material Design(后面简称MD)是Google开发的一套设计语言，旨在遵循优秀设计的经典定则，同时还伴有创新理念和新的科技。MD在扁平化设计的基础上，保留了多空间的概念。同时，MD强调根据用户行为凸显核心功能，进而为用户提供操作指引。

 

与之相比的是由Apple发布的Flat Design（后面简称FD）设计语言。FD核心是简约和扁平化设计，让所有元素看上去都在同一层平面。FD强调使用简单的视觉元素，让用户集中在内容而不是设计艺术上。

 

选择参考MD而不是FD是因为MD的理念更适用更易用，具体原因如下：

 

其一，MD更适用于多数业务场景。FD是扁平化设计，并不适用于大多数页面，没有渐变、纹理、阴影等体裁类元素，在描述空间层次时会显得有点匮乏和不够直观，交互上容易让用户混淆，比如说哪里可以点击，哪里不可以点击，相比而言MD在保持简约的同时保留了多空间的概念，更具直觉性。

 

其二，在动效方面，MD更能符合用户预期。MD强调动画要贴近真实物理世界，所有动画都与现实生活有关联，要符合用户的生活经验。而FD强调的动画不该将用户的注意力打断。这两者都很重要，但当我们考虑在页面上加入动效，主要是两个目的，有趣和有效。而有效性的前提是动效需要具有预期性，预期性是指通过动效缩小用户预期的效果和实际效果的差距，让用户更容易理解动效的目的。而用户的预期来自物理世界和生活经验，所以动效的设计最好以现实世界为原型，而打断注意力是可以通过设计避免的。

 

其三，在应用方面，MD的使用更简单。MD已经有一整套整理好的理论基础可以作为参考。

 

因此选择MD作为主要的设计依据。下面具体讲述MD的动效理论和应用。

 

What is Material Design

 

MD的动效规范，从「材料动效」、「时长」、「缓动」、「移动」、「形变」、「编排」、「自定义动画」七个纬度给出通用建议。

 

1.材料动效

 

MD强调动效用于描述空间关系、功能以及提供优雅流畅的交互效果。动效需要具备反映敏捷、自然、有意识、有意图四个特征，并且遵守快速、简单明了、整体性的规则。这些动效带来的好处可以在下方案例中观察到。

 

 

 

场景转换时，通过动效可以传达页面的层次结构，视觉简单不突兀，同时减少用户感知上的延迟。

 

2.时长

 

元素变换时，速度要足够块，避免用户等待，但同时又要足够慢，有时间让用户理解动效传达的信息。时长依据运动的幅度改变，移动距离长、形变面积大，需要较长的动画时长。移动距离短，形变面积小，则使用较短的动画时长。

 

MD建议移动端的过渡时长通常控制在300ms内。大屏设备需要更多时长，平板比手机长30%，可穿戴设备比手机短30%。

 

 

而PC端动效应该比手机端更敏捷更简单，保持在150ms到200ms之间。

 

 

3.缓动

 

动效中的加速和减速应该平滑，才不会显得呆板。加速和减速不对称，动效会更自然和愉悦。

 

缓动曲线分为标准曲线、减速曲线、加速曲线和夏普曲线。

 

标准曲线（ease-in-out）是最常见的缓动曲线，元素会快速加速，缓慢减速，主要用于元素变大变小，以及其他属性改变的动效上。元素进入或离开屏幕，导致屏幕上其他元素发生移动时，也建议使用标准曲线。

 

减速曲线（ease-out）建议用于元素进入屏幕的时候，元素全速进入屏幕然后缓慢减速到目标位置。

 

加速曲线（ease-in）建议用于元素离开屏幕的时候，元素加速离开屏幕。夏普曲线与标准曲线类似，也是先加速再减速。

 

夏普曲线类似标准曲线，也是先加速再减速，只是曲线在减速阶段有细微的区别，减速比标准曲线快。标准曲线是`cubic-bezier(0.4, 0.0, 0.2, 1)` 而夏普曲线是 `cubic-bezier(0.4, 0.0, 0.6, 1)`。

 

标准曲线

 

 

夏普曲线

 

 

夏普曲线建议用于离开之后可能会返回屏幕的元素上。

 

4.移动

 

屏幕内的移动

 

元素在屏幕内两点之间会沿着一条自然下凹的弧线移动。所有屏幕内的移动都遵循标准曲线。

 

向上弧线

 

 

向下弧线

 

 

沿单轴（水平或垂直）运动的元素不遵循弧线轨迹，并且可以以稍快的速度移动。元素进出屏幕应该沿单轴运动。

 

进出屏幕的运动

 

MD建议元素进入屏幕时，如果对其他元素没有影响，使用减速曲线，移动端持续225ms。因为入场时，用户的焦点停在元素的终端，缓慢的加速是不必要的。当元素永久离开屏幕时，使用加速曲线，持续195ms。因为终点不可见，缓慢的减速是不必要的。元素暂时离开屏幕使用夏普曲线，持续300ms。因为元素可能从离开的位置再次返回，快到终点时要进行减速。

 

暂时离开屏幕

 

永久离开和进入

 

 

元素进入屏幕，会导致其他元素发生移动时，则使用标准曲线。平滑的缓动可以减小混乱，避免视觉干扰和突兀。

 

 

5.形变

 

矩形转换

 

元素形变时，宽度和高度沿运动曲线异步变化。屏幕内的形变都使用标准曲线。

 

元素形变可使用非对称转换和对称转换，非对称转换需要宽度和高度以不同的速率变换，对称转换需要宽度和高度以相同的频率变换。改变多个元素的的属性或位置时，使用非对称转换，当单个元素沿着单个轴进行变换时，使用对称转换。

 

非对称转换

 

 

对称转换

 

 

径向转换

 

径向转换通常用于圆形转换成其他形状。矩形间的转换不使用径向转换，径向转换高度和宽度需要同步转换。

 

 

转换的起点可以是元素的当前位置，或者是表面最终出现的位置的中心。

 

 

合并&分割

 

元素分割成多个元素，每一部分开始移动时就是分离状态。多个元素合并成一个元素，边缘应该重叠。

 

 

6.编排

 

连续性

 

表面扩展时，如果存在大块共享元素，共享元素需要保持一直可见。如果很少共享元素，则以单个元素为转换焦点。如果没有共享元素，则所有元素一起移动。

对称转换

 

 

很少共享元素

 

 

没有共享元素

 

 

多个元素转换时，用最重要的元素引导用户的视线，避免无焦点场景造成视觉复杂。

 

 

如果转换完成时有图片或其他元素没有加载，需要预留空间，避免元素跳动。

 

 

创建

 

新表面的创建需要从触摸点出现

 

 

多个表面出现时，需要快速交错显示出来。

 

  

没有触摸点创建表面，应使用平滑且快速的动效，避免过多的动效分散注意力。

 

 

7.自定义动画

 

图标

 

给图标加上动效，可以利用图标描述按钮功能和当前状态。

 

菜单 icon

 

 

播放 icon

 

 

编辑 icon

 

 

插画

 

在图片和插画中使用微妙的动画，可以为用户带来更有趣的体验。比如在404页面或者loading时使用，使页面更加有趣。

 

 

以上是MD对于页面动效的通用建议，在设计动效时作为参考，可以保证动效的合理性和美观性。下一篇会介绍「动效十二原则」，基于原则推导实现动效的思路。

 

总结

 

结尾附上整理的MD动效建议脑图版。

 

 

动效数值

 

速度

 

人的眼睛和大脑每秒能处理的图像数为10到12个，在常规的光线条件下，视网膜需要80毫秒来记录一幅新图像，随后如果被其他图像覆盖，就会产生连续的幻觉，即所谓的视觉暂留。因此在做序列帧动画时，一般是1秒12帧。

 

研究发现当在正常的光线下阅读时，多数人为了感知一个文字而进行的观察时间仅需50-60毫秒。但在观察例如一幅图片时，人们需要对其观察至少150毫秒才能诠释他们看到的内容。因此保持内容停留时长至少有150ms

 

之后再进行动效，依据内容的复杂度相应增加停留时长，确保用户有充足的时间理解内容。并且，物理世界物体的运动基本不会是匀速，所以避免使用linear让动效显得不自然。

 

MD 的速度建议值正在合理范围内，速度统一为，元素进入视线采用ease-out 225ms，离开屏幕使用ease-in 195ms，暂时隐藏的元素使 ease-in-out 300ms。

 

幅度

 

这里要介绍下眼跳、注视、平稳跟踪几个眼动特征。

 

眼跳是一种从一个注视点到另一个注视点之间的快速眼动行为，注视则是将中央窝视野在目标上保持一定的时长以获得足够的视觉图像细节。由于眼跳发生时眼球的移动速度极快，这期间几乎不会获得任何有效的视觉信息。眼跳的平均时间约为20-40ms，速度可达到600°/s。

 

平稳跟踪是一种缓慢的眼动行为，平稳跟踪的速度一般小于30°/s，超过30°/s

 

的平稳追踪将变为眼跳，我们对追踪水平方向的缓慢移动物体比追踪垂直方向的运转机制更好。我们一般也不会对目标物体旁的其他物体进行视觉处理。我们应控制动效幅度，避免不必要的眼跳行为打断用户获取信息。

 

 

移动端我们眼睛距离屏幕的距离一般为15cm左右，那么根据初中数学可以算出三角形底边长度为8cm，换算成像素为150px。因此移动端元素运动幅度应该小于150px/s，pc端小于450px/s。

 

动效十二原则

 

介绍

 

这是一位在动效领域有15年研究经验的设计师 Issara Willenskomer 总结出的动效设计原则。Issara是uxinmotion(http://uxinmotion.net) 创始人，专注于动效设计教学，帮助支持过Facebook、Airbnb、Amazon等500个客户解决动效设计问题。

 

因此我们在Issara的研究基础上，进一步研究动效的解决方案。

 

概述

 

以上十二条原则根据时间、关联性、连续性、时间层级、空间连续性可以分为：

 

- 时间相关的原则：缓动（Easing）、偏移（Offset）和延迟（Delay）

 

- 关联性相关的原则：父子关系（Parenting）

 

- 连续性相关的原则：形变（Transformation）、复制（Cloning）、覆盖（Overlay）、遮罩（Masking）、值变（Value Change）

 

- 时间层级相关的原则：视差（Paralax）

 

- 空间连续性相关的原则：景深（Obscuration）、维度（Dimensionality）和平移与缩放（Dolly & Zoom）

 

 

一、时间性

 

1.缓动

 

当元素移动时，都应该使用缓动。

 

 

自然界不存在线性运动，物体往往在做加速和减速运动，依据此规律设计动效，会更自然，更符合用户的预期。第一个示例里的匀速运动很不自然，不符合预期的动效，会降低交互的可用性。第二个示例加入的缓动，上升时先加速后减速，下落时加速，显得更自然，是因为它符合物理世界的规律。

 

2.偏移和延迟

 

偏移和延迟常用于多个并列元素发生偏移或变化时。

 

 

同层级元素偏移或者变化时，通过使用延迟增加分离感。分离感可以帮助用户理解元素间的关系，也可以引导用户的注意力。第一个示例里使用了延迟，相比第二个示例中的同时出现，第一种动效通过时间差说明了元素间的分离关系，帮助用户在看清之前，就能理解出现的内容，因而提升了体验上的可用性。

 

二、关联性

 

1.父子关系

 

父子关系常用于两个元素需要协同变化时。

 

 

父子关系是将两种元素关系起来，通过同步运动暗示元素之间的继承关系，创造体验的协同感。拖动左边的元素，右边对应的元素跟随发生一样的偏移。这样用户可以很容易理解页面上的结构和元素关系，父子关系适合在做即时交互的时候使用。

 

三、连续性

 

1.形变

 

形变常用于通过连贯的状态描述元素功能的改变。

 

 

图中的按钮点击后变成进度条，提交完毕又恢复成按钮的样子。这样将体验中可感知的节点，衔接成一个完整的故事，可以更好的让用户感知、记忆和跟踪。

 

2.复制

 

复制常用于由已有元素复制出新元素的连贯方式描述它们的关联性。

 

 

先引导用户注意力集中在主题元素上，通过复制产生新元素，能够让用户感知到两者的因果关系。

 

3.覆盖

 

覆盖常用于多个元素存在同一区域不同时显示时，通过堆叠来弥补扁平空间缺乏层次的问题，用堆叠元素的相对位置来描述它们的空间关系。

 

 

前景元素向右滑动露出背景元素，通过排列元素的上下关系来描述它们的相对位置。覆盖原则能够通过层级之间的位置关系，在扁平空间增加Z轴的概念，向用户传达空间方位。

 

4.遮罩

 

遮罩常用于元素处于不同的形状表达不同的功能。

 

 

图片通过形状和位置的改变，从banner图变成唱片。在元素内容不变的情况下，这种无缝衔接的遮住和露出元素的方式，也创造了连续的描述性。

 

5.值变

 

值变是通过数值动态连续的变化方式描述关联。

 

 

动态变化的数值，会让人很快明白数值背后的意义。图中控制条的拖动和数值的变化，能很快明白拖动的意义。如果数值是瞬间从0%变成30%，那么这种关联性就很弱。

 

四、时间层级

 

1.视差

 

视差常用于当用户滚动页面时，在扁平空间创造空间层次突显主要内容。

 

 

视差是不同元素以不同的速度运动造成视觉的层次感。视差让用户注意力集中在主要内容上。主要内容元素的运动速度较快，运动较慢的元素会被弱化。

 

五、空间连续性

 

1.景深

 

景深常用于主要内容变换时，允许用户看到非主要元素的情况。

 

 

非主要元素在底层模糊，主要元素在上层透明。使用景深原则可以给用户提供一个全局或客观的视图。

 

2.维度

 

维度常用于用多维的空间结构表现新元素的进场和离场。

 

 

用翻转来表现卡片的离场，这样的动效加强了表现力。维度原则的应用能够改善扁平空间中的用户体验，多维的动效能够帮助增强用户的方向感，让用户有更贴近现实的体验。

 

3.平移与缩放

 

平移与缩放常用于在空间里查看局部或从局部查看全局的变焦运动。

 

 

在没有空间移动的情况下，通过哦元素本身的放大缩小让用户感觉元素处于更大或更小的场景之内，能够创造出空间感。

 

总结

 

 

 

关于「十二原则」更详细的内容可以浏览原文。

 

应用方案

 

目前有了「Material Design」、「动效十二原则」、「视觉科学」作为理论依据，是设计出合理动效的前提，但还不足以设计出具体的动效，动效形式的确定需要具体的方法。通过大量的案例分析，下面介绍常见的动效形式，以及具体的动效设计思路和落地方案。

 

案例分析

 

以下是收集到的100个网站的动效案例，将这些案例按照原则分类整理成以下表格（此处省略90条，完整版见附件）。

 

 

通过归纳整理，得出基于每条原则常见的动效形式。

 

 

 

按原则分类，动效的常见形式包括：

 

- 缓动：加速、减速、先加速再减速。

 

- 偏移与延迟：同类延迟、不同类延迟。

 

- 父子关系：尺寸、透明度、位置、旋转角度、形状、颜色等属性跟随变化即可。

 

- 形变：大小变化、颜色变化、角度变化等。

 

- 值变：数字递增或递减、文字变化。

 

- 遮罩：平面径向展开。

 

- 覆盖：同层平移、上层滑出、上层滑入。

 

- 复制：从已有元素克隆分裂新元素。

 

- 视差：动静对比视差、不等速对比视差。

 

- 景深：下层模糊。

 

- 维度：翻转。

 

- 平移与缩放：平移焦点、局部缩放。

 

动效设计方法

 

将理论和常见动效相结合，在设计动效时，按照「确定动效场景」、「选择动效形式」、「优化动效效果」三个步骤实施。

 

在「十二原则」的总结里已经概括了每个原则的适用场景，那么从场景出发，可以找到依据的原则。每个原则包括一种或多种动效形式，根据具体的场景和元素来选择合适的动效形式。最后参考「Material Design」和「动效数值」的建议对动效效果进行优化。下面列举具体的动效设计方法：

 

1.缓动类动效

 

确定动效场景：

 

有元素移动时，一定使用「缓动」。

 

选择动效形式：

 

缓动的形式包括加速、减速、先加速后减速。先加速后减速是最常用的缓动形式。元素在进入屏幕时选择「减速运动」，在离开屏幕时选择「加速运动」，暂时离开屏幕时则选择「先加速再减速」。

 

加速

 

 

减速

 

 

先加速后减速

 

 

优化动效效果：

 

元素全速进入屏幕，然后缓慢减速到目标位置，建议时间225ms。在离开屏幕时采用加速运动，元素全速离开屏幕，建议时间195ms。暂时离开屏幕时则采用先加速再减速，建议时间300ms。时间可依据具体场景和设备做调整。

 

2.延迟类动效

 

确定动效场景：

 

当多个并列元素发生变化时，使用「偏移和延迟」。

 

选择动效形式：

 

偏移和延迟的形式包括同类延迟和不同类延迟。列表类元素，包括文字列表、图片列表等，属于同类元素，选择「同类延迟」。非列表类的不同元素，选择「不同类延迟」。

 

同类延迟

 

 

不同类延迟 

 

 

优化动效效果：

 

- 创建多个表面，不应该一次性出现，应交错入场，且间隔时间不超过200ms

 

- 元素不应乱序出现，网格项的交错效果为从左到右、从上到下。不同类元素参考网格项，也按空间顺序（通常情况是从上至下，从左至右）依次出现

 

- 交错形式应是在单个方向上穿件清晰、平滑的视觉路径

 

根据「动效数值」的建议，移动端元素运动幅度应该小于150px/s，pc端小于450px/s。

 

3.父子类动效

 

确定动效场景：

 

即时交互中，两个元素同时变化时使用「父子关系」。

 

选择动效形式：

 

父子关系的形式包括用尺寸、位置、旋转角度、形状、颜色等很多属性体现。需要依据具体场景选择形式，常用的Tab和Slide是偏移的同步。

 

大小同步

 

 

焦点同步

 

 

 

优化动效效果：

 

多个元素转换时，用最重要的元素引导用户的视线，避免无焦点场景造成视觉复杂。父子动效要确定一个视觉焦点，通常子元素为主要内容，则已子元素为视觉焦点。

 

4.形变类动效

 

确定动效场景：

 

元素功能改变时，使用「形变」。

 

选择动效形式：

 

形变的形式包括大小变化、颜色变化、角度变化，可以通过改变元素的尺寸、角度、透明度、颜色、边框等来体现。需要依据具体场景选择形式，常用的图片在交互时放大，按钮在交互时可以改变背景色、边框或者大小。

 

 

 

优化动效效果：

 

- 屏幕内的形变都使用标准曲线

 

- 不对称的矩形形变，扩展时先变换高度，折叠时先转换高度

 

- 对称的矩形形变需要宽度和高度以相同的频率变换，变换时间比不对称转换稍短

 

- 当元素异步扩展时，其包含的内容（例如文本或图片）也会以恒定的宽高比进行转换

 

5.复制类动效

 

确定动效场景：

 

已有元素产生新元素，使用「复制」。

 

选择动效形式：

 

复制的形式是从已有元素克隆分裂出新元素。如果新元素的产生和页面已有元素存在因果关系，则选择分裂的形式生成新元素。

 

 

 

优化动效效果：

 

- 复制出的新元素以径向或矩形转换从触摸点出现

 

- 新元素应平滑快速出现，使用尽量简单的动画

 

6.覆盖类动效

 

确定动效场景：

 

同一区域存在多个元素不同时显示，使用「覆盖」。

 

选择动效形式：

 

覆盖的形式包括同层平移、上层滑出和上层滑入。依据表面的层级关系选择相应的形式，当两个平面在同层时，选择「同层平移」的形式；需要隐藏上层元素显示下层元素，选择「上层滑出」性；需要隐藏下层元素显示上层元素时，选择「上层滑入」形式。

 

同层平移

 

 

上层滑出

 

 

上层滑入

 

 

优化动效效果：

 

覆盖层的动效参考「缓动类动效」对进出场的编排，覆盖层应从触摸点出现。

 

7. 遮罩类动效

 

确定动效场景：

 

当元素内容不变而功能发生改变时使用「遮罩」。

 

选择动效形式：

 

遮罩的常用形式是平面径向展开。

 

 

 

优化动效效果：

 

- 遮罩的径向变换转换起点可以是元素当前位置或最终位置的中心

 

- 径向变换不使用异步转换

 

• 径向变换用于圆形转换成矩形，不要转换复杂的形状

8.值变类动效

 

确定动效场景：

 

当数值变化时，使用「值变」。

 

选择动效形式：

 

值变的常用形式是数字动态变化显示进度。

 

数字变化

 

文字变化

 

 

优化动效效果：

 

数字具有意义时，使用值变动效。

 

9. 视差类动效

 

确定动效场景：

 

当主要内容在页面滚动时出现，使用「视差」。

 

选择动效形式：

 

视差的形式包括动静对比视差和不等速对比视差。当页面有背景图时，选择「动静对比视差」固定背景图，页面滚动出现主要内容，主要内容会成为视觉焦点；相邻两个区块，要突出后面新出现的内容时，选择「不等速对比视差」，后面的元素移动速度大于前面的元素，后面的元素会称为视觉焦点。

 

动静对比

 

 

不等速对比 

 

优化动效效果：

 

控制移动速度，移动端元素运动幅度应该小于150px/s，pc端小于450px/s。

 

10.景深类动效

 

确定动效场景：

 

上层元素不完全覆盖底层元素，允许用户看到底层非主要元素时使用「景深」。

 

选择动效形式：

 

景深的常用形式是下层模糊。

 

 

优化动效效果：

 

自主创建元素使用尽量少的动画，浮层建议使用渐入渐出的形式。

 

11.维度类动效

 

确定动效场景：

 

在元素进场和离场时，扩展空间使用「维度」。

 

选择动效形式：

 

维度的常用形式是翻转，扩展页面成三维空间。

 

 

 

优化动效效果：

 

对速度和幅度进行合适的调整，翻转的幅度小于30°/s。

 

12.平移缩放类动效

 

确定动效场景：

 

需要视线在全局和局部之间切换时使用「平移与缩放」。

 

选择动效形式：

 

平移与缩放的形式包括平移焦点和局部缩放。

 

平移焦点

 

 

 

局部缩放