动效设计
动效的作用
提升用户体验
动画的一切皆在于时间点和空间幅度。 —— 迪士尼动画大师乃特维克
通过「时间点」和「空间幅度」的设计为用户建立运动的可信度，即视觉上的真实感。动效的目的是告诉用户元素之间的关系、哪些是可交互的、界面将会出现什么内容。在情感化设计中，优秀的动效能为交互增添趣味，让品牌更加深入人心。
增添产品气质
界面视觉是产品的颜值，交互动效是产品的肢体语言。合理的动效能将更立体、更富有关联性的信息传递出去，提高产品的表达能力，增加亲和力和趣味性。
降低沟通成本
通过高保真动效 Demo 展示设计思路和创意，提高设计提案交接率，降低设计师与开发的沟通成本，提高动效还原度。
动效涵盖范围
| 类型 | 英文 | 说明 |
|---|---|---|
| 入场/出场动效 | Enter & Exit | 元素出现和消失的动画 |
| 过渡动效 | Transition | 状态切换间的平滑衔接 |
| 加载动效 | Loading | 等待过程中的视觉反馈 |
动效设计类型
转场过渡
界面中加入平滑的过渡效果，能帮助用户理解界面前后变化的逻辑关系。人脑灰质对动态事物（移动、形变、色变）保持高度敏感。
层级展示
利用近大远小、近快远慢的原则，恰当的动效可以帮助用户理清前后位置关系，体现系统空间感。
空间扩展
通过折叠、翻转、缩放等形式拓展附加内容的存储空间，以渐进展示的方式减轻用户认知负担。
聚焦关注
通过元素的动作变化提醒用户关注特定内容。这种方式降低视觉干扰，使界面更简洁，自然地吸引用户注意力。
内容呈现
内容元素按一定秩序逐级呈现，引导用户视觉焦点走向，帮助感知页面布局和重点内容。
操作反馈
点击、长按、拖拽、滑动等交互行为，都应得到即时视觉反馈，让用户了解当前系统的响应情况。
常用动效属性
在浏览器中最常用且性能友好的四种属性变化：
| 属性 | 英文 | 说明 |
|---|---|---|
| 位置 | Position / Translate | 元素的空间位移 |
| 大小 | Scale | 元素的缩放变化 |
| 旋转 | Rotation | 元素的角度变化 |
| 透明度 | Opacity | 元素的可见度变化 |
当这四种属性的变化能达到目的时，无须加入其他属性，以免影响流畅度。
运动曲线
线性变化（Linear）
- 特征：匀速、骤停
- 适用：透明度变化（渐隐渐现、颜色切换）、有规律的加载动效（循环、进度变化）
- 注意：在位置变化等物理运动中避免使用，否则会显得僵硬不自然
曲线变化（Curves）
- 缓动曲线（Easing）应用最广、效果最自然
- 适用：与物理属性相关的变化
常见动效模式
缓入缓出
自然界几乎不存在完全线性的运动，缓动效果让运动更接近自然、符合用户预期。
偏移与延迟
错开元素的运动时间，表明元素之间的层级与关系，引导用户注意力。
父子关系
子元素的某个属性随父元素的属性按比例变化，帮助用户理解层级关系。
形变
用连贯的状态描绘表达元素功能的改变。可以是形状变化、颜色变化或角度改变。
值变
当数值发生变化时，用连续动态的方式让用户清晰看到变化方向（增多还是减少）。
遮罩
在元素进退场时创造连续性效果，让不同展示方式的变化过程具有视觉连贯性。
覆盖
在扁平化设计的界面上阐明两个独立元素的位置关系，更好地利用有限的屏幕空间。
复制
当元素被复制出来时，表达元素之间的连续性关系和因果联系。
景深
允许用户瞥得到非主要元素或场景，营造空间层次。
视差
当用户滚动界面时，在平面创造空间层次。运动效率高的元素（距离近）承载重要信息，运动效率低的元素（距离远）作为背景。
翻转
将扁平化的界面元素多维化，表达空间中的位置和层级关系。开发成本较高，使用相对较少。
镜头平移与缩放（Dolly & Zoom）
用连续的空间描述引导界面元素和空间关系，表现纵深感。
设计原则
一个优秀的交互微动效应遵循三个核心维度：
用户注意力
动效出现时，明确希望用户的注意力被吸引到哪里。
动效目标
- 吸引注意 — 需要用户立刻注意到并采取行动
- 视觉连续性 — 使元素在不同状态之间平滑转换
- 层级关系 — 表明已在注意力范围内的元素间的关系
触发机制
- 直接触发 — 用户主动操作引起的反馈
- 间接触发 — 系统状态变化引起的反馈
时间参数
响应时间
| 场景 | 时间要求 | 处理方式 |
|---|---|---|
| 直接触发反馈 | < 100ms | 即时反馈 |
| 间接触发反馈 | < 1s（不超过 2s） | 允许短暂延迟 |
| 2~9s 才能获取结果 | — | 循环加载样式（菊花转） |
| 超过 10s | — | 带进度指示的加载样式 |
持续时间
交互微动效的持续时间一般不超过 500ms（加载动效除外）：
- < 200ms — 元素改变近乎瞬间，适合 hover 等微交互
- 200~300ms — 小元素的轻微变化（渐隐渐现、大小变化）
- 400~500ms — 较大元素的复杂变化（大范围缓动位移）
设备差异
| 设备 | 持续时间调整 |
|---|---|
| 可穿戴设备 | 比手机快约 30% |
| 手机 | 基准 |
| 平板 | 比手机慢约 30% |
| 桌面端 | 150~200ms，更简单快速 |
入场 vs 出场
出场动效应比入场动效更快（约差 50ms）。入场时用户需要处理新信息，而出场表明任务已完成，快速出场节省用户时间。