brand-motion-guidelines

品牌动效指南

编写一套品牌动效系统——用于定义品牌或产品如何动起来的文档，如 Slack、IBM Carbon、Klarna 和 Material 等成熟设计系统所采用的做法。输出一份可直接填写的模板，涵盖原则、缓动／时长令牌、动效库、徽标规则、反馈状态、无障碍设计，以及正反示例。

适用场景

当品牌或产品需要一套有文档记录的动效语言、团队中的动画风格不一致、需要为设计师和工程师定义命名的缓动／时长令牌，或需要制定减少动态效果／无障碍标准时使用。输出内容应为结构化文档，而非代码。

决策树——先确定系统范围，再选择令牌

需要做出两项判断：这个品牌实际需要多大的系统，以及某个动效应使用哪个令牌。不要为一个落地页构建包含 7 个部分的系统；也不要为多团队设计系统只交付一页文档。

How many surfaces/teams will use this?
├─ One site / one campaign → lightweight: principles + tokens + a short
│   library. Skip deep logo/state sections unless relevant.
├─ A product (app/web) → full 7-part doc; tokens are mandatory.
└─ A brand across product + marketing + broadcast → full doc PLUS a
    Motion Personality preset (see motion-art-direction) so every medium matches.

Picking the token for a given motion:
  duration: larger element / longer travel → longer token
            (instant<fast<base<slow<slower)
  easing:   entrance → decelerate · exit → accelerate (and shorter)
            within-view move → standard · brand moment → emphasized
            continuous loop → linear · playful accent → spring (sparingly)

经验法则：如果一个动效说不出自己使用的令牌，那它就是一次性设计——而一次性设计正是系统显得不一致的原因。

动效系统包含哪些内容

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

1. 动效原则——3-5 条有名称的信念，用于指导每一处动画。
2. 时长与缓动令牌——为时长和曲线命名，确保动效风格一致且工程师能够实现。
3. 动效库——将进入、退出和过渡模式映射到令牌。
4. 徽标动画规则——规定标志可以以及不可以如何移动。
5. 反馈与状态动效——加载、成功、错误、悬停、焦点。
6. 无障碍设计——减少动态效果、光敏感性、焦点可见性。
7. 正例／反例——用具体示例让规则一目了然。

令牌是核心

其他所有内容都会引用令牌。将时长和曲线定义为有名称的令牌，各定义一次；动效库和组件复用这些令牌。这样动效系统才可落地实现，而不只是装饰。

时长令牌示例（填写／调整）

令牌	值	用途
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 (ease-out)	(0.0, 0.0, 0.2, 1)	进入——快速出现，平稳停下
ease-accelerate (ease-in)	(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），让元素组显得生动而不拖沓。

模板（填写）

[BRAND] MOTION GUIDELINES                         Version: ___  Owner: ___

1. PRINCIPLES
   We move to: [principle 1 — e.g. "Guide attention, never steal it"]
               [principle 2 — e.g. "Fast by default, expressive on purpose"]
               [principle 3 — e.g. "Every motion has a reason"]
               [principle 4] [principle 5]

2. TIMING TOKENS
   instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms

3. EASING TOKENS
   standard ____ · decelerate ____ · accelerate ____ · emphasized ____

4. MOTION LIBRARY
   Entrances: [list patterns + tokens]
   Exits:     [list patterns + tokens]
   Transitions:[list patterns + tokens]

5. LOGO ANIMATION
   Allowed: [reveal style, duration token, when it may animate]
   Never:   [stretch, distort, rotate freely, recolour, exceed ___ms]

6. FEEDBACK & STATE MOTION
   Loading: [spinner/skeleton rules + when each]
   Success: [confirmation motion]
   Error:   [shake/colour rules — never colour alone]
   Hover/Focus: [token + visible focus requirement]

7. ACCESSIBILITY
   Reduced motion: [what happens — see section below]
   Photosensitivity: max 3 flashes/sec; no full-screen strobing.
   Focus: focus indicators never animate away or disappear.

8. DO / DON'T
   ✅ [do]            ❌ [don't]

Logo 动画规则（填写）

明确说明哪些做法允许，哪些禁止。典型基准：

• 允许：使用 duration-slow-slower + ease-emphasized 来展示/构建；轻柔定格；始终保持一致的一种标志性构建动画。
• 禁止：不成比例地拉伸/挤压标志、自由旋转、使用调色板以外的颜色、每次出现都播放动画（仅用于关键时刻），或超过约定的最长时长。

反馈与状态动效

• 加载：内容布局使用骨架屏；仅在等待时间短且不确定时使用旋转指示器；等待时间超过约 1s 时显示进度。
• 成功/错误：动效需与标签或图标配合——绝不能仅通过颜色或动效传达状态（无障碍要求）。
• 悬停/焦点：使用 duration-fast + ease-standard；焦点状态必须清晰可见，且不能通过动画让自身移出视野。

无障碍（必需章节）

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

示例

良好示例 — 以令牌为准的动效库条目：

模态框打开：duration-slow（400ms）+ ease-emphasized；缩放比例 0.96→1，背景遮罩淡入。关闭：duration-base（250ms）+ ease-accelerate。

每个值都是命名令牌，关闭时长短于打开时长，缓动符合意图（品牌时刻进入时使用强调效果，离开时使用加速效果）。工程师可以直接实现，且效果会与其他所有模态框一致。

反面模式 —“感觉”式指南：

“动画应该流畅、现代、令人愉悦。使用好看的缓动，让动画灵动，但不要太快。”

问题所在：没有命名令牌，没有具体数值，没有进入/退出规则，也没有可实现的内容——“流畅”和“灵动”相互矛盾，每位工程师的理解也各不相同，因此产品最终会变得不一致（这正是文档要解决的问题）。解决方法：用令牌表替换形容词，将每种模式映射到令牌，并提供包含具体毫秒数的建议/禁忌示例。

常见错误

症状	发生原因	修正方法
各屏幕上的动效不一致	手动调整的一次性数值，没有设计令牌	一次性定义令牌；每种模式都引用这些令牌
文档听起来不错，却无法实现	原则写成了形容词，而不是数值	为每条原则配上一条数值令牌规则
所有动效都在弹跳	到处都用了弹簧效果／过冲效果	仅在品牌时刻使用弹簧效果／强调效果
退出动效显得迟缓	退出时长 ≥ 入场时长	让退出动效比入场动效短一个级别；加快退出速度
动画影响无障碍体验	没有减少动态效果／仅依赖颜色的状态	添加必需的无障碍章节；让动效与文字／图标搭配
Logo 在各处的动画各不相同	没有 Logo 规则	说明一种标志性的揭示方式，并明确列出“绝不”事项
令牌值不断改名	名称采用字面数值（duration-250）	按用途命名（duration-base），以便日后调整数值

交付规范 — 优秀的动效指南文档应包含什么

输出应为结构化文档（模板见 references/full-template.md），而非代码。完整文档应包含以下七个部分，并且：

• 3-5 条命名原则，每条都配有一行规则（而非形容词）。
• 带有数值／曲线的时长和缓动令牌——这是可实现的核心内容。
• 将每种模式映射到令牌的动效库。
• 明确列出 Logo 的允许事项／禁止事项。
• 反馈／状态动效（加载、成功、错误、悬停、焦点）。
• 必需的无障碍章节（减少动态效果、光敏性、焦点、不得仅靠颜色传达含义）。
• 能消除歧义的具体“应该／不应该”示例。

完成前 — 检查清单

• 3-5 条原则，每条都有名称和一行规则。
• 已定义带数值的时长令牌，以及带 cubic-bezier 曲线的缓动令牌。
• 每种动效库模式都注明了所用令牌。
• 入场动效减速，退出动效加速且时长更短；只有循环动效使用线性缓动。
• Logo 规则同时列明允许事项和禁止事项。
• 反馈状态将动效与文字／图标搭配（绝不只依赖颜色）。
• 已包含无障碍章节：减少动态效果、光敏性、焦点、对比度。
• “应该／不应该”示例具体（包含数值），而非空泛感受。
• 令牌名称体现语义（用途），而非字面数值。

相关框架

本文档是品牌动效的权威记录；两个相关技能分别提供上游理论和针对各项目的风格感受——请参考并应用它们，不要重复其中的表格：

• animation-principles — 原则章节应体现三大支柱（意图 → 基调 → 工艺）；主要／次要／环境动效层级说明了为何主视觉动效与环境漂移动效要使用不同的令牌；1/3 规则则说明了错开动效的限制（不要让所有元素同时移动）。请注明引用来源；规范表格请保留在该文档中。
• motion-art-direction — 如果品牌覆盖产品、营销和广播，请选择一个命名的动效个性预设，并在文档顶部注明，然后据此推导令牌值（更敏捷的预设 → 时长更短；更高端的预设 → 时长更长、更平滑）。动效语言规范请参见该文档。

快速参考

决策	默认值
默认 UI 时长	duration-base 250ms
入场缓动	减速（ease-out）
退出缓动	加速（ease-in），短于入场动效
线性缓动	仅用于循环动效（加载旋转器／进度指示器）
错开间隔	每个项目 30-50ms
Logo 动画	保留标志性、保持一致、绝不扭曲
状态反馈	动效 + 标签／图标，绝不只依赖颜色
减少动态效果	将变换替换为淡入淡出／即时变化

参考文件

• references/full-template.md — 完整的动效指南文档填写模板，展开了所有章节并附有示例文案。
• references/token-reference.md — 完整的时长和缓动令牌表，包含数值、cubic-bezier 曲线和使用说明。
• references/dos-and-donts.md — 具体“应该／不应该”示例库，以及原则示例（Slack／IBM／Material 风格）。