编辑指南:在使用一些产品时，感觉用户体验不是很流畅，这是因为缺乏页面或窗口的过渡动态效果。交互效果一直是被忽略的一部分，但是影响了用户的体验。本文作者从六个维度分析了互动效果，希望对你有所帮助。

不知道大家有没有注意到一个现象。很多公司或者团队没有独立的交互设计岗位，交互设计工作往往由产品经理或者UI设计师来完成。

产品经理更注重业务流程和任务流程的完整性，UI设计师更注重表示层的感受，所以容易被交互设计师忽视的“交互效应”更容易被忽视。所以我们总觉得我们的产品没有大厂的流畅，但是说不出什么毛病，所以我可以明确的告诉你，缺乏对页面或者窗口的过渡动态考虑。

下面干货，先来一张脑图:

一、动态效应的分类

从不同的维度分析，动态设计类型有不同的分类结果。

维度1:使用动态效果的目的

因为动态效应有负面影响，所以合理使用尤为重要。Cooper (2014)提出要谨慎使用动态效应。动态效果的过度使用不仅让人困惑和反感，还会让人身体不适。比如苹果的IO7，其过于强烈的视差效果让很多用户感到不适。交互有效性的主要目标应该是支持和增强用户在状态之间的转换。

Saffer(2013)提出动态效应的使用有以下目的:

吸引用户注意力在指定区域表现对象和用户操作间的关系维持多窗口或多状态的上下文关系提供持续性事件的认知感创造虚拟空间引导用户在状态和功能间转化创造沉浸感和趣味性 （每一个举一个动图例子）

雅兰斯卡(2016)还定义了UI动态的四个功能:

支持微交互显示运动过程解释装饰

Google的《材料设计》(2017)提出，在MD中，用动态效用来描述空的关系、功能、美感和流动性。动态效果显示了应用程序是如何组织的以及它可以做什么，如下所示:

引导窗口切换提示用户接下来发生的事对象间的层级感和空间感减缓用户对等待事件的认知美感和个性化

在这个维度中，我将动态效果的类型分为“解释”、“装饰”和“解释+装饰”。

维度2:动态效果的时机

根据动态效应的时机和作用，动态效应大致可分为四类，即品牌动态效应、引导动态效应、过渡动态效应和反馈动态效应。

1)品牌动态效应

通常，品牌行动会出现在引导页面上。

从狭义上来说，品牌类动效指的是产品的logo动画，将产品或公司的品牌形象特色进行准确传达，如谷歌logo动画；从广义上来说，品牌类动效是产品中统一、独特能够与其他产品产生差异化的动效设计，甚至能够上升至产品的“隐形logo”的地位，如苹果的解锁动效、MD中的FAT按钮动效等。

一些产品的品牌动态风格会传递给其他产品的动态设计，使产品的设计风格与动态特征相一致。

2)导向动力效应

引导动作一般出现在引导页面或者入口动作之后，吸引用户的注意力或者引导用户操作，减少用户的困惑，比如APP的引导页面。引导类动作还包括页面元素动画和图标动作，吸引了用户的注意力和操作。

3)类似过渡的动态效应

过渡型动态效果可以细分为出发型动态效果和入口型动态效果，两者是对立的，主要功能是页面级显示和平滑过渡。

离开动态效果是页面上元素的离开，进入动态效果是页面上元素的进入。他们占据了动态设计的绝大部分，在塑造整个产品形象中起着重要的作用。同时，要更加注重约束效应的设计要求。

4)反馈动态效应

反馈动作是指用户在操作后对页面给出操作反馈提示的动作，是连接用户操作和页面跳转的过渡效果。反馈动态可以细分为实时反馈动态和整体反馈动态。

在反馈动态效果中，设计师最熟悉的是加载动态效果，这是用户点击下载时给用户的反馈，同时连接了出发动态效果和入场动态效果，使得用户的天赋反馈更加流畅，避免了中间的失误。

维度3:动态效果的变化属性

在浏览器中最常用、最容易实现、最能保证性能的是位置、比例、旋转、透明四个属性的变化。当改变这四个属性中的任意一个或多个都可以达到互动微效果的目的时，就不需要添加其他不必要的属性，以免影响动态效果的流畅度。

属性的变化一般分为线性变化和曲线变化两种。

1)线性变化

线性变化有匀速和急停两个特点，一般适用于与物理属性无关的过渡动态效果(如透明度属性的变化，包括褪色或颜色之间的切换)或规则加载动态效果(如均匀循环、数值变化或进度变化)。在与物理参数相关的变化中(如位置变化)，尽量避免使用线性变化，否则很容易给人带来生硬不自然的感觉。

2)曲线变化

曲线有多种类型。在交互微动作效果的设计中，缓和曲线的应用范围最广，效果最自然，对用户的干扰也较少，多用于与物理属性相关的属性变化。常见的场景如下:

二、动态效果的设计原则

Google Material Design(2020)提出系统动态效果原则:

提供有效信息(信息性):

动态效果设计通过强调元素、操作可用性和操作结果之间的关系来通知用户。

焦点(聚焦):

动态效果要针对重要内容，不要造成不必要的干扰。

富有表现力:

动态效果应该在用户的各种使用场景中，为常见的交互添加个性，表达品牌风格。

苹果IOS (2021)提出的系统动态效果原理:

1)明智地使用动态效果

不要为了用动画而用动画。过多或不必要的动画会让人感到孤立或分心，尤其是在无法提供沉浸式体验的应用程序中。IOS使用运动效果(如视差效果)在主屏幕和其他区域创建深度感。这些效果可以增加理解和乐趣，但是过度使用它们会混淆应用程序，使它们难以控制。如果你想取得运动成绩，一定要测试成绩，保证好成绩。

2)遵循现实世界的规律

人们倾向于接受艺术感，但是当运动毫无意义或者似乎忽略了物理规律的时候，就会有失落感。例如，如果有人通过从屏幕顶部向下滑动来显示视图，他们应该能够通过向上滑动来擦除视图。

3)使用一致的动画

熟悉流畅的体验可以让用户更好的参与其中。他们习惯了iOS中使用的微妙动画，如平滑过渡、设备方向的平滑变化和基于物理的滚动。除非你想创造身临其境的体验，比如游戏，自定义动画应该相当于内置动画。

4)使动画可选

当在“辅助功能”偏好设置中启用“减少动作”选项时，您的应用程序应该最小化或消除应用程序动画。

材料设计(2017)也提出了四个原则:

响应：动效要快速响应用户的操作，移动设备上，长动画大约在 300-400ms 之间，短动画大约在 150-200ms 之间。自然：对于动效的运动状态，要符合真实世界，因此要根据实际情况运用合适的 natural easing curves感知：运动的物体对周围的物体会产生影响，因此要考虑其周围的环境目的：动效要具有目的性，传达给用户特性的信息

腾讯ISUX在互动微动作设计指南(2017)中提出的功能动态原理:

1)保持克制

控制持续时间和发生频率。不添加额外的操作，也不打扰用户。

2)焦点清晰

专注，有逻辑，给用户充足的阅读时间。

3)自然流畅

保持视觉连续性和缓慢过渡。请勿堵塞、闪光或跳跃。

迪士尼动画家约翰逊和托马斯的《生活的幻觉:迪士尼动画》中的十二个动画设计原则:

压缩和拉伸预期感布局一气呵成和分批设计跟随和重叠动作缓入和缓出弧第二动作时间夸张立体感有趣

在游仙上找了个作者。并选择了9个可以应用于交互式动画制作的原则。我也在这里分享它们:

时间和节奏：动画的总时长和每帧动画间的距离（先快后慢，或先慢后快）缓入和缓出：符合现实世界规律，物体不能凭空运动和停止，有加速和减速过程预期感：给动画添加一个反向动画，让动画更突出，更好的帮助用户理解动画压缩和拉伸：制造视觉上的假想，突出效果弧：符合现实世界规律，少有纯直线运动跟随和重叠动作：辅物体会追随主物体运动，且由于惯性，会有时间延迟第二动作：添加第二动作用于丰富第一动作夸张：让动画更具个性有趣：结合以上8点，传递给用户一个有趣的印象

第三，持续时间的动态效应

时间是动态效果的核心要素，在设计动态效果时需要考虑两种类型的时间——响应时间和持续时间。

1.响应时间

响应时间是指从用户操作到反馈的时间间隔。不同的触发机制有不同的响应时间限制:

对于由用户操作 直接触发 的反馈，理想的响应时间应该控制在 100毫秒内对于由用户操作 间接触发 的反馈，响应时长可允许达到 1秒左右，不可 超过2秒 无反馈当 超过2秒 才能获取反馈结果时，须设计加载动效（loading）：当反馈时间为 2-9秒 时，可使用循环的加载样式（如常见的菊花转）当反馈时间 超过10秒 时，须使用带有进度指示的加载样式（如已加载了60%，还剩30秒）

2.持续时间

互动微动作效果持续时间不宜过长，以免浪费用户时间，影响用户阅读和操作效率，持续时间一般不超过500毫秒(加载动态效果除外)。

如果想让用户清晰地捕捉到元素的渐变，持续时间必须大于200毫秒；如果你不介意用户认为元素的变化是瞬间的，你想尽可能的节省用户的时间，时长也可以设计在200ms以内(比如颜色从悬停到按钮微妙的变化)。

一方面，具体时长的取值会受到元素大小和动态效果复杂程度的影响；另一方面，它还会受到目标动态效果和设备运行动态效果的影响:

小元素的细微变化效果(如褪色、大小变化等。)一般在200~300毫秒内。

较大元素的复杂变化效应(如大规模慢位移)可长达400-500ms。

较快的动效更容易吸引用户注意力，也更节省时间。若动效元素在用户的视线之外，为了吸引用户注意并采取行动，可使用在短时间内变化较大的动效（如发生位置移动和速率改变）；若动效元素已经在用户的注意范围内，为了保持视觉连续性，完成必要的过渡（如渐隐渐现）后即可结束。较慢的动效较少分散用户注意力，更适用于非用户直接触发的场景。若动效不是用户直接触发的，不希望用户注意力被转移，可使用在长时间内变化较小的动效（一般不会出现位置移动）不同设备的屏幕尺寸和特性不同，理想的持续时间也不一样。一般来说，对于移动设备而言，屏幕越大往往动效的位移也越大，因此持续时间也应该越长（可穿戴设备上的持续时间大约比手机上快30%，平板电脑上的持续时间大约比手机上慢30%）。而台式设备的动效设计往往比移动设备中的动效设计更简单快速（150毫秒~200毫秒间较为常见），这是因为复杂的动效在台式设备场景下容易出现掉帧、卡顿的情况，瞬时响应的动效能避免这一点。

(时长可穿戴设备<手机<平板，来自Google Material Design)

退出动态效果一般比进入动态效果快(例如，当进入动态效果设置为230毫秒时，退出动态效果可以设置为200毫秒)。这是因为当一个元素进入时，用户一般需要读取和处理新的信息，但是当一个元素进入时，通常表明用户在这个元素上的任务已经完成，所以不需要关注。快速退出可以为用户节省更多时间。

3.补充

过渡型动态效果可以细分为出发型动态效果和入口型动态效果，两者是对立的，主要功能是页面级显示和平滑过渡。

离开动态效果是页面上元素的离开，进入动态效果是页面上元素的进入。他们占据了动态设计的绝大部分，在塑造整个产品形象中起着重要的作用。同时，要更加注重约束效应的设计要求。

(不同复杂度动态用户的惊奇程度与使用时长的关系)

高度复杂的动态效果会大幅增加用户的惊喜，但随着时间的推移，惊喜会逐渐减少。在用户使用的中后期，复杂的动态效果往往会引起用户的反感，影响用户的操作。低复杂度的动态设计潜移默化的影响着用户的惊喜程度。当用户熟悉并适应产品的动态节奏后，惊喜度会逐渐上升，最终保持在一个较高的水平。

4.动力效应基本单元的拆卸

1.变化的基本类型

1)运动

2)缩放比例

3)旋转旋转

4)阿尔法透明

5)形状形状

6)彩色

2.可调参数

Duration 持续时间Speed 变化的速度

3.常用变速模式(时变量)

1)以恒定速度线性变化

2)平滑步骤慢-快-慢

在物理世界中，物体不会立即开始或停止。相反，它们需要时间来加速和减速。没有适度的过渡看起来僵硬和机械，而适度的过渡更容易让人联想到自然的运动。

3)弹簧弹簧(超出范围)正变-负变-正变& # 8230；

4)弹跳弹跳(范围内):正变-负变-正变& # 8230；

5)消极变化-积极变化5)预期准备行动

动词 （verb的缩写）材料设计的常见动态效果模式

1.容器转换容器转换

容器转换模式旨在包含容器用户界面元素之间的转换。这种模式在两个用户界面元素之间创建一个可见的连接。通过将一个元素无缝转换成另一个元素，可以增强两个元素之间的关系。例如，当卡被转换成详细页面时，用户的注意力被引导到识别该详细页面是该卡的扩展版本。

将卡片放入详细信息页面将列表项放入详细信息页面将FAB放入详细信息页面将搜索栏扩展为搜索

容器转换模式也可以应用于只占据屏幕一部分而不扩展到全屏视图的转换:

将FAB转换为菜单将FAB转换为媒体播放器将FAB转换为表单将筹码转换为扩展筹码

2.共享轴共享轴

共享轴模式用于具有空或导航关系的用户界面元素之间的转换。这种模式使用公共转换来增强x、y或z轴上元素之间的关系。

注册流程沿x轴过渡步骤沿y轴过渡父子级导航沿z轴过渡

3.淡入淡出(页面A/状态→页面B/状态)

淡入淡出模式使用的，相互之间关系不是很强的UI元素之间的过渡。

例如，通过单击底部导航栏触发的过渡使用淡入模式。淡入淡出是最好的选择，因为底部导航中的目的地通常被分组到可能彼此不相关的主要任务中。另外，淡入模式不会误导用户以为可以在目的地之间水平滑动。

点击底部导航栏中的目的地点击刷新图标点击帐户切换器

在淡入过渡中，退出的元素首先淡出。接下来，输入的元素逐渐淡入，整体大小从92%缩放到100%。元素缩放从92%(而不是0%)开始，以避免过多关注过渡。缩放更改仅应用于传入的元素，以强调新内容而不是旧内容。

4.淡入淡出(打开和关闭弹出层)

该模式用于在屏幕限制范围内输入用户界面元素，或从屏幕中心向外淡出退出视图(如对话框)。

对话框菜单snack barFAB

当您输入时，元素将会淡入淡出，并按比例从80%缩放到100%。缩放动画从80%(而不是0%)开始，以避免过度关注过渡。退出时，元素只会淡出。缩放动画仅适用于输入元素。这侧重于新内容(输入元素)而不是旧内容(退出元素)。

不及物动词具体案例分析

总结动态效果案例分析的三个简短原则:

逻辑：动效是否符合客观逻辑（响应时间，方向，一致性，目的）时间：动效的时长是否合适（视觉上感受良好）真实：动效是否反映了真实世界的运动规律（惯性，缓入缓出）

按照场景、目的、制作、评价四个步骤，讲解如何综合运用设计理论和原则。

案例1:

场景:横幅

目的:状态、注意、缓解

制作:作者制作的旋转横幅主要使用Framer的PageComponent。计时器用于控制页面的切换和底部导航点样式的切换。你需要掌握简单的咖啡脚本的语法。

细节优化:

添加一个加载按钮的效果，让用户感受到还有多久切换到下一个 Banner。技术上使用的是 CSS 的 background-image: linear-gradient 属性。通过控制其投射角度，动态变化大小。时间上，24 frames/s 是一个适中的节奏。所以假定 2s 走完 360 度，则每 0.0417s 走完 7.5 度。实时刷新界面即可。其次，转完一圈后的气泡效果的时间为 0.3 左右，符合Material Design 对手持设备动效时间的要求。Easing function上，左滑动画使用的是 ease-out, 又慢到快的划出屏幕，符合实际。圆的旋转是 linear, 时间是均匀流动的。动画上的细节加在了气泡上，气泡是先缩小再放大，缩小是为了给接下来的放大提供一个预判，应用了 Anticipation 原理。其次是刻意夸张了缩小的效果，scale 0.5->0.1, opacity 0.1->1, 应用了 Exaggeration 原理。缩小时用的 easing function 是ease-in-out, 放大用的是 ease-out。符合客观规律。

评估:

逻辑：符合一致性。该动效实现了四个动效目的。响应时间还可以进一步优化。时间：采用 Material Design 标准，可根据实际情况进一步优化真实：Easing Function 符合实际情况。夸张部分动画为了突出动效效果。气泡破裂的感觉还可以进一步优化。

案例2:

场景:形式

目的:状态、注意、反馈和个性化

制作:作者制作的表单效果，模仿Google登录。用于控制页面切换的页面组件。因为Framer soundtrack不支持form Input控件，所以在Github上用一个输入插件来模拟动态输入效果。

细节优化:

头像添加一个背景色的改变，也就是动态的导入用户头像，用到了 Scale 属性。并同时把用户的账号显示在头像下方。按钮添加 MouseDown 效果，监听用户单机事件，当鼠标按下时，按钮添加选中效果。鼠标放开时，效果消失，返回原状态。运用的是 Frame 的 State 变化机制。Easing function上，进入的效果都是 ease-out, 出去的效果都是 ease-in, 符合实际场景注意一下小图标的触摸区域，要保证其足够大，很容易被手指点击到。即返回图标背后是有一块更大的透明区域用来接收点击事件。

评估:

逻辑：符合方向的一致性。该动效实现了四个动效目的。时间：采用 Material Design 标准，可根据实际情况进一步优化真实：Easing Function 符合实际情况。个性化还可以再提升，使其更有趣点

案例3:

场景:图像

目的:关注，个性化

制作:作者制作的图像动画。两个画面层，循环滚动。单独提取云层，通过控制其位置使其在指定时间移动。

细节优化:

如果使用图片动画，插画的质量要保证足够好。颜色，渐变的使用符合常识。注意高光，阴影，渐变方向等细节。添加了云层的移动，使2个动画图片之间产生了联系，有一种时间上的过度感，从白昼到黑夜。

评估:

逻辑：符合生活常识。实现了 2 个目的，个人还是不建议在手机使用图片效果，交互目的偏少，且需要消耗大量带宽。时间：时间略长，可以设计一些时间短且有趣的图片动画。真实：由于 Framer 不太适合��վ�������制作纯视觉上的动效，多图层同时动画很容易导致浏览器渲染产生问题，动画看起来很抖动。这里的云层（只是个图片图层）只做了一个移动，更真实的可以做一个抖动效果。不过那样我觉的更适合使用 AE 制作成 Gif 再导出。但 Gif 会存在质量偏低的问题。使用 Svg 和 Canvas 技术来制作复杂的 Web 动效是更明智的选择。

最后推荐一个快速软件Principle，类似于素描的操作，几乎没有学习成本。操作界面如下:

我花了几分钟做了一个容器变化的动态效果: