motion-design

动效设计技能

适用场景

在以下情况下使用此技能：

• 创建 UI 动画（按钮、卡片、模态框、页面过渡）
• 设计微交互和反馈动画
• 构建加载、成功或错误状态
• 为插图或装饰元素制作动画
• 规划滚动触发或基于进度的动画
• 建立品牌动效标识
• 编排多元素序列

决策树：

1. 是否具有功能性目的（反馈、引导）？→ 使用响应性时序规则
2. 是否表达品牌个性？→ 使用动效个性原型
3. 是否讲述故事或引导注意力？→ 使用迪士尼原则 + 编排
4. 是否为复杂的多元素场景？→ 使用 1/3 规则 + 错开模式

---

快速参考：8 步检查清单

创建任何动画之前：

1. 情绪目标？ — 喜悦、平静、紧迫、优雅
2. 动效个性？ — 活泼、高端、商务、活力
3. 主要属性？ — 位置、缩放、旋转、不透明度
4. 持续时间？ — 参见下方时长表
5. 缓动类型？ — 入场 = 减速，退场 = 加速
6. 主视觉元素？ — 应用舞台调度原则
7. 次要 + 环境层？ — 增添丰富感
8. 1/3 规则？ — 动效距离、同时运动的元素

---

三大支柱（关键）

在做出任何技术决策之前，每个动画都必须满足三大支柱：

支柱	问题	决定因素
情绪意图	希望观看者感受到什么？	缓动、时序、幅度
视觉叙事	微型故事是什么？	铺垫 → 行动 → 收尾
动效技艺	如何让动画显得可信？	物理规律、次级运动、路径

三个动效层（平面动画 = 缺少层次）：

• 主要层：观看者关注的主要动作
• 次要层：辅助丰富感（阴影、图标位移）
• 环境层：背景动态（渐变、细微脉动）

深入了解：director/core-philosophy.md

---

动效个性

每个项目选择一种原型，并始终保持一致。

原型	持续时间	缓动	超调	关键词
活泼	150-300ms	ease-out-back	10-20%	有趣、奇幻、弹跳、可爱
高端	350-600ms	cubic-bezier(0.4,0,0.2,1)	0%	优雅、简约、奢华、精致
商务	200-400ms	cubic-bezier(0.2,0,0,1)	0-3%	清爽、专业、商务、仪表板
活力	100-250ms	ease-out-expo	15-30%	动感、活力、大胆、令人兴奋

默认选择：UI 使用商务风格，插图使用活泼风格。

品牌动效标识 — 定义三个常量：

1. 标志性缓动：用于 80% 动画的一条曲线
2. 时长组合：3 种时长（快速 / 标准 / 慢速）
3. 入场模式：一种统一的入场风格

深入了解：director/motion-personality.md

---

属性选择

效果目标	主要属性	次要属性
入场/退场	位置	不透明度、缩放
强调/吸引注意	缩放	旋转（轻微）、不透明度脉冲
状态变化	不透明度、颜色	缩放（按压反馈）
方向/流动	位置	旋转（沿路径运动）
深度/3D 感	缩放 + 阴影	位置（视差）
加载/进度	旋转（加载指示器）	缩放、不透明度脉冲
成功	缩放（弹出）	颜色、旋转（绘制勾号）
错误/警报	位置（抖动）	颜色、旋转（摇摆）

简洁性阈值：只使用必需的最少属性。一个 = 直接明了；两个 = 精致；三个及以上 = 可能过于繁复。

深入了解：reference/property-selection.md

---

持续时间表

元素类型	持续时间	理由
工具提示 / 微反馈	80-120ms	必须让人感觉即时
按钮按下 / 切换	120-180ms	提供灵敏反馈
图标过渡	150-250ms	清晰呈现状态变化
卡片进入 / 退出	200-350ms	增强空间感知
模态框 / 对话框	300-400ms	注意力焦点转移
页面过渡	400-600ms	上下文切换
戏剧性揭示	600-1200ms	营造戏剧性铺陈

距离决定持续时间：100px = 基准。200px = 1.3x。400px = 1.6x。

进入 > 退出：进入动画比退出动画长 30-50%。用户更关注出现的内容。

交互反馈：

• 悬停：<100ms
• 按下：<150ms
• 松开/稳定：200-300ms
• 错误抖动：300-400ms（2-3 次振荡）

深入了解：reference/timing-easing-tables.md

---

缓动选择

方向规则：

• 进入 → 减速（快速开始，轻柔着陆）：ease-out 系列
• 退出 → 加速（轻柔开始，快速离开）：ease-in 系列
• 屏幕内 → 两端平滑：ease-in-out 系列
• 循环环境动画 → 无缝衔接：基于正弦的 ease-in-out

行业标准：

标准	三次贝塞尔曲线	用途
Material Design 3	(0.2, 0, 0, 1)	屏幕内默认效果
MD3 Emphasized	(0.05, 0.7, 0.1, 1)	进入、吸引注意
MD3 Accelerate	(0.3, 0, 1, 1)	退出、关闭
Apple HIG	(0.25, 0.1, 0.25, 1)	iOS 标准效果
Snappy UI	(0.2, 0, 0, 1)	快速、果断
Gentle float	(0.4, 0, 0.2, 1)	环境、背景
Bounce settle	(0.175, 0.885, 0.32, 1.275)	超调、活泼

基于材质的缓动：

材质	持续时间缩放	超调
坚硬（金属、石头）	1.2x	0%
弹性（橡胶、凝胶）	0.8x	15-25%
流体（水、颜料）	1.5x	5%
纸张（卡片、纸页）	1.0x	3-5%
气体（烟雾、薄雾）	2.0x	0%
玻璃（易碎）	0.9x	0%

深入了解：reference/timing-easing-tables.md

---

常见模式

按钮按下（活泼）

1. 预备：缩放至 0.97（50ms，ease-out）
2. 挤压：缩放至 [1.04, 0.96]（100ms，ease-in）
3. 跟随动作：超调至 1.02，再稳定至 1.0（弹簧，200ms）
4. 次要效果：按下时阴影收缩，图标向下移动 2px
5. 总时长：按下约 150ms + 稳定 200ms

卡片进入（高级质感）

1. 起点：目标位置下方 20px，透明度为 0
2. 路径：轻微弧线（中点处 X 轴偏移 10px）
3. 缓动：ease-out-cubic 减速
4. 跟随动作：阴影比卡片晚 50ms 出现
5. 次要效果：卡片落位后 100ms，内容淡入
6. 分层：其他卡片变暗至 80%

成功状态（活泼）

1. 主要效果：使用 ease-out-back 弹出缩放
2. 次要效果：绘制出勾号
3. 环境效果：细微的粒子爆发
4. 颜色：绿色填充
5. 总时长：300-400ms

错误抖动（企业风格）

1. 主要效果：位置振荡 2-3 次，水平方向 ±10-15px
2. 缓动：使用 ease-in-out 实现急停
3. 颜色：红色色调
4. 总时长：300-400ms
5. 不超调：错误效果应显得坚定

更多模式：patterns/entrance-exit.md | patterns/state-feedback.md

---

编排要点

协调入场：

• 主角优先——主要元素最先入场，或以最突出的方式入场
• 空间一致性——所有元素从同一方向入场
• 反向运动——主角向右移动 → 环境元素以 20-30% 的速度向左移动

1/3 规则（距离）：任何运动的行进距离都不得超过屏幕的 1/3，除非有关键帧变化。

1/3 规则（元素）：存在 3 个或更多元素时，同时处于活动运动状态的元素不得超过 1/3。

错峰预算：

模式	延迟	总预算	使用场景
微型级联	20-40ms	<200ms	列表项、网格单元格
标准	50-100ms	<400ms	卡片、面板、导航
戏剧化	100-200ms	<600ms	主视觉区块
波浪	30-60ms	<500ms	数据可视化

关键：总错峰时长必须控制在 500ms 以内。

深入了解：director/choreography.md

---

情绪与运动映射

情绪	特征	路径	缓动	时长
喜悦	弹跳、弧线	弯曲、向上	ease-out-back	200-400ms
平静	平滑、流畅	柔和曲线	sine ease-in-out	500-1000ms
紧迫	锐利、快速	直线	ease-out	100-200ms
悲伤	缓慢、向下	下垂曲线	cubic ease-in-out	600-1200ms
惊讶	突然、扩张	径向向外	ease-out-expo	150-300ms
优雅	缓慢、克制	长弧线	(0.4,0,0.2,1)	400-700ms
顽皮	弹跳、不规则	弧线、曲折	ease-out-back	200-350ms

路径即语言：棱角分明 = 紧张。弯曲 = 友好。螺旋 = 奇趣。对角线 = 有目的。垂直 = 成长/重量。水平 = 进展。

深入了解：director/emotion-mapping.md

---

重量分类

重量	示例	时长	超调	缓动
重	模态框、遮罩层	300-500ms	0%	柔和、高阻尼
中	卡片、面板	200-350ms	3-5%	适中
轻	工具提示、徽章、图标	80-200ms	5-15%	响应灵敏

---

质量规则

严重——绝不可违反

1. 空间移动绝不用线性缓动——始终使用缓动曲线（仅加载指示器和进度条使用线性缓动）
2. 重要状态变化绝不只改变不透明度——需结合位置或缩放变化
3. 移动距离绝不超过屏幕的 1/3，除非设置了中间关键帧
4. 始终包含三个运动层——主要 + 次要 + 环境

高优先级——强烈建议遵循

1. 根据元素类型匹配时长（见表格）
2. 使用方向性缓动（入场时 ease-out，退出时 ease-in）
3. 运用迪士尼原则（尤其是预备动作和跟随动作）
4. 在整个场景中保持一致的个性

完整检查清单：reference/quality-checklist.md

---

故障排查速查表

问题	可能原因	修复方法
看起来很机械	使用线性缓动或缺少弧线	添加缓动曲线和弧线路径
感觉太慢	时长对该元素类型来说太长	查看时长表，使用 ease-out
显得廉价/扁平	缺少次要运动和环境运动	添加阴影运动和背景动态效果
太分散注意力	运动元素过多	应用 1/3 规则，降低幅度
缺少个性	所有地方都使用通用缓动	始终如一地运用个性原型

深入了解：reference/troubleshooting.md

---

文件参考

理念（director/）：

• 核心理念 — 三大支柱深入解析
• 决策框架 — 完整决策流程
• 迪士尼原则 — 12 条原则，针对 UI 调整
• 动作个性 — 4 种原型 + 品牌形象
• 情绪映射 — 情绪 → 动作 + 色彩心理学
• 编排 — 多元素协调
• 叙事结构 — 微型故事框架
• 情境适配 — 平台、a11y、性能

参考（reference/）：

• 时长与缓动表 — 时长 + 缓动速查
• 属性选择 — 属性传达指南
• 故障排查 — 动画问题 + 修复方法
• 质量检查清单 — 评估标准

模式（patterns/）：

• 进入与退出 — 进入/退出方案
• 状态反馈 — 成功、错误、加载、悬停
• 环境与持续效果 — 循环、呼吸、视差
• 多元素 — 错峰 + 编排方案