品牌动效指南是做什么的？

编写一套品牌动效系统——该文档定义了品牌或产品如何动效，就像成熟设计系统（Slack、IBM Carbon、Klarna、Material Design）所做的那样。输出是一份可填充的模板，涵盖动效原则、缓动/计时令牌、动效库、标志规则、反馈状态、无障碍性以及“做/不做”示例。

何时使用

当品牌或产品需要一套有文档记录的动效语言时，当团队内的动效感觉不一致时，当需要为设计师和工程师定义命名的缓动/持续时间令牌时，或者当需要添加减少动效/无障碍标准时使用。输出是一份结构化文档，而非代码。

决策树 — 确定系统范围，然后选择令牌

需要判断两件事：这个品牌实际需要多大规模的系统，以及特定动效应使用哪个令牌。不要为着陆页构建一个七部分的系统；也不要为一个多团队的设计系统只输出一页纸。

有多少个界面/团队会使用它？
├─ 一个网站 / 一个活动 → 轻量级：原则 + 令牌 + 一个简短的库。
│   除非相关，否则跳过深入的标志/状态章节。
├─ 一个产品（应用/网页）→ 完整的七部分文档；令牌是必需的。
└─ 一个跨越产品 + 营销 + 广播的品牌 → 完整的文档以及其他一个动效个性预设（见动效艺术指导），以便每种媒介都匹配。

为给定动效选择令牌：
  持续时间：元素越大 / 移动距离越长 → 令牌时间越长
            (instant<fast<base<slow<slower)
  缓动：   进入 → 减速 · 退出 → 加速（且更短）
            视图内移动 → 标准 · 品牌时刻 → 强调
            连续循环 → 线性 · 俏皮强调 → 弹簧（谨慎使用）

经验法则：如果一个动效无法命名它所使用的令牌，那它就是一个一次性动效——而一次性动效正是导致系统感觉不一致的原因。

动效系统包含什么

一份完整的动效指南文档包含七个部分。请按顺序编写它们：

动效原则 — 3-5条命名的信念，指导所有动画。
计时和缓动令牌 — 命名的持续时间和曲线，使动效保持一致且易于工程师实现。
动效库 — 映射到令牌的进入、退出和过渡模式。
标志动画规则 — 品牌标志可以以及不可以如何动效。
反馈和状态动效 — 加载、成功、错误、悬停、聚焦。
无障碍 — 减少动效、光敏性、焦点可见性。
做/不做 — 使规则明确无误的具体示例。

令牌是核心

其他一切都引用令牌。将持续时间和曲线定义为命名令牌，仅一次；动效库和组件重用它们。这就是使动效系统可实施而非装饰性的关键。

示例持续时间令牌（填写/调整）

令牌	值	用途
`duration-instant`	100ms	微反馈（切换、轻触）
`duration-fast`	150ms	悬停、小状态变化
`duration-base`	250ms	标准 UI 过渡（默认）
`duration-slow`	400ms	更大的界面、模态框、页面区域
`duration-slower`	600ms	英雄/品牌时刻、全屏

经验法则：元素/距离越大，持续时间越长。大多数 UI 动效在 150-400ms 之间；低于约 100ms 显得即时，超过约 500ms 对于常规 UI 来说感觉迟缓。

示例缓动令牌（曲线）

令牌	cubic-bezier	感觉 / 用途
`ease-standard`	(0.4, 0.0, 0.2, 1)	默认；元素在视图内移动
`ease-decelerate` (缓出)	(0.0, 0.0, 0.2, 1)	进入 — 快速进入，稳定下来
`ease-accelerate` (缓入)	(0.4, 0.0, 1, 1)	退出 — 缓入，加速离开
`ease-emphasized`	(0.2, 0.0, 0, 1)	表现力 / 品牌时刻
`ease-spring`	spring(stiffness, damping)	俏皮的超调（谨慎使用）

原则：进入减速（物体到达并稳定），退出加速（物体有意地离开），并且没有任何重要的动效使用线性缓动——线性感觉机械，仅用于连续循环（加载动画、进度条）。

动效库（将模式映射到令牌）

模式	令牌	行为
淡入	`duration-base` + `ease-decelerate`	透明度 0→1
缩放 + 淡入	`duration-base` + `ease-decelerate`	缩放 0.96→1，透明度 0→1
向上滑入	`duration-slow` + `ease-decelerate`	Y +8/16px → 0，淡入
淡出	`duration-fast` + `ease-accelerate`	透明度 1→0（退出比进入更快）
模态框打开	`duration-slow` + `ease-emphasized`	缩放 + 淡入，背景淡入
页面/区域过渡	`duration-base` + `ease-standard`	交叉淡入或共享元素移动
列表错开	每个项目 `duration-fast`，偏移 30-50ms	项目级联，而非同时出现

默认规则：退出比进入更短；错开使用小偏移量（30-50ms），使组感觉生动而不拖沓。

模板（填写）

[品牌] 动效指南                         版本：___  所有者：___

1. 原则
   我们动效是为了：[原则1 — 例如“引导注意力，而非窃取它”]
                  [原则2 — 例如“默认快速，有意表现”]
                  [原则3 — 例如“每个动效都有原因”]
                  [原则4] [原则5]

2. 计时令牌
   即时 ___ms · 快速 ___ms · 基础 ___ms · 慢速 ___ms · 更慢 ___ms

3. 缓动令牌
   标准 ____ · 减速 ____ · 加速 ____ · 强调 ____

4. 动效库
   进入：[列出模式 + 令牌]
   退出：[列出模式 + 令牌]
   过渡：[列出模式 + 令牌]

5. 标志动画
   允许：[展示风格、持续时间令牌、何时可以动画]
   从不：[拉伸、变形、自由旋转、重新着色、超过 ___ms]

6. 反馈和状态动效
   加载：[加载动画/骨架屏规则 + 何时使用]
   成功：[确认动效]
   错误：[抖动/颜色规则 — 切勿仅用颜色]
   悬停/聚焦：[令牌 + 可见焦点要求]

7. 无障碍
   减少动效：[发生什么 — 请参阅下文]
   光敏性：最多每秒 3 次闪烁；无全屏频闪。
   焦点：焦点指示器从不动画消失或隐藏。

8. 做 / 不做
   ✅ [做]            ❌ [不做]

标志动画规则（填写）

明确说明允许和禁止的内容。典型基线：

允许：使用 duration-slow-slower + ease-emphasized 的展示/构建；平缓稳定；一个一致使用的标志性构建。
从不：拉伸/挤压标志超出比例、自由旋转、在调色板外重新着色、每次出现都动画（保留给关键时刻）、或超过约定的最大持续时间。

反馈和状态动效

加载：内容布局使用骨架屏；仅用于短暂的、不确定的等待时使用加载动画；等待时间超过约 1 秒时显示进度条。
成功/错误：将动效与标签或图标配对 — 切勿仅通过颜色或动效传达状态（无障碍）。
悬停/聚焦：duration-fast + ease-standard；焦点状态必须清晰可见，并且不能自行动画消失。

无障碍（必需部分）

减少动效：尊重用户的“减少动效”设置。将移动/视差/大型变换替换为简单的透明度交叉淡入或即时状态更改。保留基本含义；移除装饰性动效。（概念上映射到 prefers-reduced-motion。）
光敏性：不超过每秒 3 次闪烁；避免全屏高对比度频闪。
不单独通过动效/颜色传达含义：始终与文本或图标配对。
焦点可见性：绝不让动画隐藏或移除焦点指示器。

工作示例

好 — 一个基于令牌的动效库条目：

模态框打开：duration-slow (400ms) + ease-emphasized；缩放 0.96→1，背景淡入。关闭：duration-base (250ms) + ease-accelerate。

每个值都是一个命名令牌，关闭比打开更短，缓动与意图匹配（品牌时刻进入使用强调缓动，离开使用加速）。工程师可以直接实现它，并且它将与每个其他模态框匹配。

反模式 — “感觉”指南：

“动画应感觉流畅、现代且令人愉悦。使用漂亮的缓动，保持敏捷但又不过快。”

为什么失败：没有命名令牌，没有值，没有进入/退出规则，没有任何可实施的内容——“流畅”和“敏捷”相互矛盾，每个工程师都以不同方式解释，导致产品最终不一致（这正是文档本应解决的问题）。解决方法：用令牌表替换形容词，将每个模式映射到令牌，并提供带有具体毫秒值的“做/不做”例子。

常见错误

症状	原因	修复方法
跨屏幕的动效不一致	手动调整的一次性值，没有令牌	定义一次令牌；每个模式都引用它们
文档听起来不错，但无法构建	原则写得像形容词，而非值	将每个原则与一个数值令牌规则配对
一切都在弹	弹簧/超调无处不在	仅将弹簧/强调保留给品牌时刻
退出感觉迟缓	退出持续时间 ≥ 进入	使退出比进入短一步；使用加速
动画破坏无障碍	没有减少动效 / 仅使用颜色的状态	添加必需的无障碍部分；将动效与文本/图标配对
标志动画处处不同	没有标志规则	指明一个标志性展示 + 一个明确的“从不”列表
令牌值不断被重命名	名称是字面的（`duration-250`）	按用途命名（`duration-base`），以便值可以改变

交付规范 — 一份好的动效指南文档包含的内容

输出是一份结构化的文档（模板在 references/full-template.md 中），而非代码。一份完整的文档包含所有七个部分，并且：

3-5条命名的原则，每条都有一条单行规则（不是形容词）。
带有值/曲线的持续时间和缓动令牌 — 可实施的核心。
将每个模式映射到令牌的动效库。
明确的标志允许/从不规则。
反馈/状态动效（加载、成功、错误、悬停、聚焦）。
必需的无障碍部分（减少动效、光敏性、焦点、不单独通过颜色传达含义）。
消除歧义的具体“做/不做”例子。

结束前请检查清单

3-5条原则，每条都已命名并给出单行规则。
定义了带有值的持续时间令牌；带有 cubic-bezier 曲线的缓动令牌。
库中的每个模式都命名了它使用的令牌。
进入减速，退出加速且更短；线性仅用于循环。
标志规则同时声明了允许和从不。
反馈状态将动效与文本/图标配对（切勿仅使用颜色）。
存在无障碍部分：减少动效、光敏性、焦点、对比度。
“做/不做”例子是具体的（带有值），而非感觉。
令牌名称是语义化的（用途），而非字面值。

快速参考

决策	默认值
默认 UI 持续时间	`duration-base` 250ms
进入缓动	减速（缓出）
退出缓动	加速（缓入），比进入更短
线性缓动	仅用于循环（加载动画/进度条）
错开偏移量	每个项目 30-50ms
标志动画	保留的，一致的，永不扭曲
状态反馈	动效 + 标签/图标，永不单独使用颜色
减少动效	将变换替换为淡入/即时

参考文件

references/full-template.md — 完整的可填充动效指南文档，包含展开的每个部分和示例文案。
references/token-reference.md — 完整的持续时间和缓动令牌表，包含值、cubic-bezier 曲线和用法说明。
references/dos-and-donts.md — 一个具体的“做/不做”例子库，以及工作原则示例（Slack/IBM/Material 风格）。

品牌动效指南