5000字干货 ！超详细的交互动效设计指南
前言
当我们提及"动效设计"这一词，第一印象往往是详细效设那一类炫酷的极具视觉表现力的动效 ，而有一类动效 ，字干它们如春风细雨般融入了用户交互过程的货超互动点滴之中 ，为打造符合用户心智的详细效设流畅体验默默做着贡献 ，它们就是字干「交互动效」。
本文将从以下三个方面展开介绍——「什么是货超互动交互动效」「为什么要重视交互动效」「交互动效的设计流程和方法」 ，带领大家了解交互动效的详细效设基础概念 ，以及具体的字干设计流程方法 ，希望大家看完后能够对交互动效有更加清晰的货超互动认知。
一、详细效设什么是字干交互动效 ？
交互动效指的是那些用于引导和响应用户交互行为的动效，它们与用户的货超互动交互行为密切相关 ，起到帮助用户理解 、详细效设提供操作反馈 、提升感知流畅性的作用 。
与视觉动效不同的地方在于 ，交互动效主要作用于产品的基础体验和功能体验层面 ，为用户营造更加自然流畅的体验 。而视觉动效除了在功能体验层面能帮助用户降低理解成本之外 ，更多作用于情感体验 ，增加产品趣味性 、传递产品调性 ，目的是引起用户的情感共鸣 ，调动用户的正面情绪 。
交互动效&视觉动效示例
交互动效与视觉动效的影响范围差异
二 、为什么要重视交互动效 ？
在实际的项目中 ，交互设计师往往会先处理任务流程和页面信息设计。在设计工作量大 、时间紧张的时候 ，很可能遗漏掉需要增加交互动效的细节 ，到点检验收的时候才发现这些问题 ，这种情况在新人设计师中较为常见。
在验收阶段，由于项目排期时间紧，开发有别的 bug 要改 ，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题 。
验收阶段才发现动效问题的尴尬
必要的场景缺失动效直接上线 ，可能会产生以下的体验问题 ：
- 不符合预期 ，产生理解困难 ：交互动效用于传达页面变化过程 ，如果过程缺失 ，可能会导致变化不符合用户预期 ，使得用户产生理解困难 。
- 感知卡顿 ：缺失必要的手势动效会导致用户操作的不流畅 ，缺失必要的转场动效则会影响视觉观感的流畅性。
动效缺失产生体验问题例子
总的来说 ，不注重交互动效将会给产品体验埋下各种体验问题隐患 ，加上进入互联网下半场后 ，互联网产品将会更加注重设计上的精致精细度。由此来看，掌握系统化的动效设计方法，已然成为设计师们的必修课 。
三 、交互动效的设计流程和方法
1. 动效评估
在设计之前 ，我们需要先判断是否真的需要做动效 ？不能为了做动效而去做动效 。
① 场景聚焦
首先 ，我们需要知道 ，什么样的场景适合做交互动效 ？可以总结为以下三类场景 ：
三种适合做交互动效的场景
「场的变化」指的是用户需要从产品中的一个「场」到另一个「场」 ，发生在页面间的转场 、或页面内的转场 。
「场的变化」相关例子
「内容的新增或减少」指的是由于用户的交互行为，导致页面中的内容（模块 、组件 、元素等）产生新增或减少 。
「内容新增/减少」相关例子
「元素的属性变化」指的是由于用户的交互行为 ，导致页面中的元素属性产生变化，例如位置改变 、状态变化 、值变化等。
「元素属性变化」相关例子
② 优先级评估
筛选出适合添加交互动效的场景后 ，我们需要评估在这个场景中做动效的优先级 。判断做动效的必要性 ，可以从以下四个维度从高到低的维度去进行优先级评估 ：
「一致性」——如果某个场景已经有定义好的动效规范，原则上需要遵循规范进行适配 ，以确保全局动效体验的一致性 。这一个维度对于那些存在动效语言的产品是非常重要的 ，一致性是为整体产品调性和品牌所服务。例如iOS在全局都保持了高度统一的动效体验 ，如果某一个组件缺失了用户习以为常的动效 ，很容易被用户感知到且产生对品牌的负面评价 。
「帮助用户理解」——不加动效是否会影响用户对当前页面变化的理解 ？如果因为缺失动效 ，在元素关系 、页面层级 、状态变化上造成用户较大的困惑 ，影响了用户体验 ，那么在该场景下添加动效的必要性是较大的 。
「提升流畅度」——不加动效是否会影响视觉层面和操作层面的流畅度 ？即视觉上是否会产生闪跳、突变等卡顿感 ，操作上是否实时反馈 、符合用户预期 。
「引导注意力」——页面中的元素是否需要通过动效来引导用户的注意力 ？会不会对用户造成不必要的打扰？有时候产品会出于业务诉求希望通过动效的手段来引导用户注意力，达到业务的目标 ，但是我们需要站在用户的角度去思考用户的注意力是否应该被引导 ，不让动效成为对用户的干扰。
动效优先级评估
2. 动效设计
① 动效原则
设计原则用于指导我们设计动效的方向 ，确保不偏离正确的方向 。结合行业内的各类动效规范的设计原则 ，我们总结出以下六个通用性较高的设计原则 ：
- 舒适 ：动效需要符合现实世界的物理属性 ，贴近用户的心智认知 ，感知上舒适 、同时兼具视觉美感 。
- 高效 ：高效响应并减少过长的位移和时间 ，使动效触达不拖沓 。
- 流畅 ：不卡 、不闪 、不跳 ，帧率稳定 、响应及时 、跟手操作是动效流畅体验的基础要求
- 统一：同个产品内的动效体验感知统一 ，体现在相同的控件动效保持一致、相似的动效编排一致 。
- 简单清晰 ：界面元素运动尽可能少且简洁 ，减少路径及不必要的元素 ，确保动效过程清晰、重点突出。
- 克制有度：控制出现频率 ，不增加额外操作 ，不干扰用户 ，确保动效有意义。
交互动效设计原则
② 动效属性
变化
一个完整的动效是由不同元素的不同变化组成的 ，常见的变化类型有 ：位移 、透明度 、大小 、旋转、3D 旋转...
动效常用变化类型
时长
小于 200ms 的动效不易被感知 ，多于 1000ms（1s）则让用户感到缓慢 ，交互动效时长一般在 200ms-500ms 之间 ，我们在设计时长时，可以从以下几个因素进行考虑 ：
i）复杂程度 ：复杂的动画比简单的动画需要更多的时间来表达
动效复杂程度对时长的影响
ii）区域范围：动效运动在一定的范围内进行 ，小范围内比大范围的运动所用的时间相对更短
动效区域范围对时长的影响
iii）入场/退场 ：一般来说，退场的动效时长要比入场短 ，让用户更把注意力放在后续的内容中
动效入场/退场对时长的影响
曲线
曲线与时长相互配合产⽣运动的韵律感 。调整曲线能使物体实现加速和减速 ，⽽不是以恒定的速率运动 。在自然定律下 ，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。以下是三种常用的曲线类型 ：
i） 加速曲线 ：适用原本在视线中的物体 ，需要消失或退场 ，逐渐加速符合退场行为特征 ，例如弹窗/浮层退出 、卡片删除等 。
加速曲线示意
ii） 减速曲线 ：适用原本在视线外的物体 ，需要出现或进场，逐渐减速符合进场行为特征 ，例如弹窗/浮层出现 、页面进入等 。
减速曲线示意
iii） 缓入缓出曲线 ：先加速后减速 ，适用于运动前后始终在用户视线范围内的物体 ，符合物体启动和停止的真实规律，例如图片缩放 、tab 切换 、开关等 。
缓入缓出曲线示意
③ 动效编排
动效属性是针对单个元素进行设置的 ，那么如何对多个元素进行动效组合和编排？下面提供一些动效编排的技巧 ：
淡入淡出
淡入淡出是通过透明度变化来实现过渡转场 ，也是最简洁实用 、最常见的一种类型。其分为「单向淡入淡出」、「交叉淡入淡出」和「错开淡入淡出」
i） 单向淡入淡出 ：在前后层叠的场景中 ，只有前景元素进行淡入或淡出动作 ，下方元素无变化 。
单向淡入淡出示意
ii） 交叉淡入淡出 ：存在退场元素与进场元素的场景下 ，一个淡入视野 ，另一个淡出 。在整个过程中 ，会存在两个元素和它们后面的内容同时可见的时候 。
交叉淡入淡出示意
如果退场元素和入场元素在视觉样式或者布局结构上差异较大，交叉淡入淡出可能会带来视觉上的混乱 ，这时候可适当错开出场元素淡出和进场元素淡入的时机 。
可通过错开元素进出场时机避免带来视觉混乱
iii） 错开淡入淡出 ：在入场元素淡入之前，将退场元素完全淡出 。这种方式可以规避视觉上出现重叠元素 ，但是可能会造成有一瞬间出现容器内容为空的情况。
错开淡入淡出示意
一镜到底
一镜到底是通过共享元素 、容器和动势来进行转场过渡的一种编排方式 ，有助于提升用户操作任务的效率 ，增强视觉的流畅感，是转场设计中重点推荐的编排方法 。
i） 共享元素
共享元素是转场前后持续存在的界面元素 ，是在转场发生后希望用户关注到的焦点元素 ，它增强了转场的连续感 。
共享元素转场示意
ii） 共享容器
当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感 。容器通过大小 、高度 、圆角等属性进行补间过渡转换 ，容器内的元素可通过淡入淡出或共享元素的手法进行过渡 。
共享容器转场示意
在使用共享容器转场时 ，有以下原则需要注意 ：
原则 1——尽量减少独立移动的元素数量。多个元素运动会争夺并分散注意力，我们可以通过淡入淡出减少元素移动 ，让注意力更聚焦 。
原则 1 ：避免过多独立移动的元素
原则 2—— 避免焦点元素在运动过程中和其他元素重叠 。焦点元素和其他元素运动轨迹重叠会产生杂乱无章的过渡 ，同样地 ，可以用淡入淡出来简化运动。
原则 2 ：避免焦点元素运动轨迹和其它元素重叠
iii） 共享动势
无法通过补间变化来实现柔和过渡 ，可以提取出可用的共享转换属性 ，来实现前后的平滑过渡 。常用的共享运动属性有位移 、缩放 、旋转等 。
共享动势效果示意
其它编排技巧
i） 运动路径
如果转场中的元素沿对角线移动 ，线形运动路径具有简单而实用的风格 ，而弧形运动路径则创造了更加强调和戏剧性的风格。
线形和弧形运动路径差异对比
ii） 振荡
一般情况下 ，转场动效在到达终点时会结束 。当添加振荡时 ，过渡路径至少超过其端点一次 ，然后反向返回端点 。振荡可以用来表达一种更加俏皮和充满活力的过渡风格 。
有无振荡差异对比
iii） 纵深变化
一般情况下 ，背景内容在容器变换过渡期间保持静态 。可以通过动画背景内容的比例来强调纵深变化。这种通过强调前景和背景内容之间的距离 ，使过渡看起来更加生动 。
有无纵深变化差异对比
iv ）交错
一般情况下 ，入场元素会打包为一个组进行处理 。「交错」是指通过对组中的元素应用短延迟 ，创建一种级联效果 ，将注意力非常短暂地集中在组中的每个元素或个别元素上 。
通过交错将注意力短暂地集中在每一项上
交错还有可以用于强调页面元素 ，将需要强调的页面核心操作或元素在其他元素入场完毕后完成入场 ，能够吸引用户注意力 ，完成视觉引导 。
通过交错突出核心元素
③ 动效落地
尽管我们把动效设计得再精美 ，最终还是要靠开发大哥们把它还原出来 。交互动效需要开发通过代码来实现 ，因此动效标注如何让开发看得懂且能理解 ，就尤为重要 。
这里推荐大家使用参数化的表格来进行标注 ，转场动效的标注文档中需要包括以下要素 ：
- 动效 demo 附件 ：方便开发直接查看整体的动效效果
- 触发条件 ：说明动效发生的条件，即用户通过什么行为触发该动效
- 元素示意 ：将动效中发生变化的元素进行拆解 ，通过图示清晰示意
- 变化属性 ：元素的什么属性发生 ，例如透明度 、位置 、大小等等
- 动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行 ，「持续时长」表示该变化持续发生多长时间
- 变化值&贝塞尔曲线 ：描述属性具体的变化值范围 ，以及相应使用的贝塞尔曲线参数
转场动效标注文档示意
手势动效的标注和转场动效略有不同，因为手势动效是跟手的效果 ，不像转场动效是在固定的时长内完成 ，因此不需要描述时长相关的参数和动效曲线 ，取而代之的是需要描述清楚页面元素跟手的联动关系 。
手势动效标注文档示意
在动效验收的时候 ，如果发现有还原问题 ，那么可以将没有按照设计标注来做的地方在表格中圈出来 ，帮助开发快速定位问题 ，提高沟通效率 。
在验收环节运用标注文档定位问题
结语
交互动效作为提升产品精致精细度的必不可少的要素之一 ，也是作为设计师不可或缺的技能 ，本文给大家讲解了从动效评估-动效设计-动效落地的全流程方法 ，希望能对大家了解交互动效 、上手交互动效设计有一定的帮助 。当我们希望给用户带来不一样的惊喜和极致体验时，不妨试一试从交互动效入手 。
参考资料及部分示例图来源：
- material.io/design/motion
- developer.harmonyos.com
作者 ：VMIC UED
