brand-motion-guidelines
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBrand Motion Guidelines
品牌动效指南
Author a brand motion system — the document that defines how a brand or product moves, the way mature design systems (Slack, IBM Carbon, Klarna, Material) do it. Output is a fill-in-ready template covering principles, easing/timing tokens, a motion library, logo rules, feedback states, accessibility, and do/don't examples.
撰写一套品牌动效系统——就像成熟设计系统（Slack、IBM Carbon、Klarna、Material）那样，定义品牌或产品的动效表现形式。输出为可直接填充的模板，涵盖动效原则、缓动/时间标记、动效库、Logo动效规则、反馈状态、无障碍设计以及正确/错误示例。
When to use
使用场景
Use when a brand or product needs a documented motion language, when animation feels inconsistent across a team, when defining named easing/duration tokens for designers and engineers, or when adding a reduced-motion/accessibility standard. The output is a structured doc, not code.
当品牌或产品需要标准化的动效语言文档、团队间动效表现不一致、需要为设计师和工程师定义命名化的缓动/时长标记，或是需要添加减少动效/无障碍标准时使用。输出为结构化文档，而非代码。
Decision tree — scope the system, then pick the token
决策树——先确定系统范围，再选择标记
Two judgments: how big a system does this brand actually need, and which token a given motion should use. Don't build a 7-part system for a landing page; don't ship a one-pager for a multi-team design system.
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)Rule of thumb: if a motion can't name the token it uses, it's a one-off — and one-offs are what make a system feel inconsistent.
需做出两个判断：该品牌实际需要多大规模的系统，以及特定动效应使用哪种标记。不要为单页面着陆页构建7模块的系统；也不要为多团队设计系统只输出单页文档。
有多少平台/团队会使用这套系统？
├─ 单个网站 / 单个营销活动 → 轻量化版本：原则 + 标记 + 简短
│ 动效库。除非相关，否则跳过Logo/状态的深度章节。
├─ 一款产品（APP/网页） → 完整7模块文档；标记为必填项。
└─ 覆盖产品+营销+传播的品牌 → 完整文档 + 动效风格预设
（参考motion-art-direction），确保所有媒介风格统一。
为特定动效选择标记：
时长：元素越大 / 移动距离越长 → 标记时长越长
(instant<fast<base<slow<slower)
缓动：入场 → decelerate · 退场 → accelerate（且时长更短）
视图内移动 → standard · 品牌关键瞬间 → emphasized
持续循环 → linear · 趣味点缀 → spring（谨慎使用）经验法则：如果一个动效无法明确对应到某个标记，那它就是一次性动效——而一次性动效正是导致系统表现不一致的根源。
What a motion system contains
动效系统包含的内容
A complete motion guidelines doc has seven parts. Author them in order:
- Motion principles — 3-5 named beliefs that govern every animation.
- Timing & easing tokens — named durations and curves, so motion is consistent and engineer-implementable.
- Motion library — entrance, exit, and transition patterns mapped to tokens.
- Logo animation rules — how the mark may and may not move.
- Feedback & state motion — loading, success, error, hover, focus.
- Accessibility — reduced-motion, photosensitivity, focus visibility.
- Do / Don't — concrete examples that make the rules unambiguous.
一份完整的动效指南文档包含7个部分，请按顺序撰写：
- 动效原则 —— 3-5条命名化的核心准则，指导所有动画设计。
- 时间与缓动标记 —— 命名化的时长与曲线，确保动效一致且便于工程师实现。
- 动效库 —— 入场、退场和过渡模式与标记的对应映射。
- Logo动画规则 —— Logo可采用和不可采用的动效方式。
- 反馈与状态动效 —— 加载、成功、错误、悬停、聚焦状态的动效。
- 无障碍设计 —— 减少动效、光敏性、聚焦可见性相关规范。
- 正确/错误示例 —— 消除规则歧义的具体案例。
Tokens are the core
标记是核心
Everything else references the tokens. Define durations and curves once, as named tokens; the library and components reuse them. This is what makes a motion system implementable rather than decorative.
所有其他内容都需参考标记。一次性定义好时长和曲线作为命名标记；动效库和组件将复用这些标记。这正是动效系统具备可落地性而非仅作装饰的关键。
Sample duration tokens (fill in / adjust)
示例时间标记（可填充/调整）
| Token | Value | Use |
|---|---|---|
| 100ms | Micro-feedback (toggle, tap) |
| 150ms | Hover, small state change |
| 250ms | Standard UI transition (default) |
| 400ms | Larger surfaces, modals, page sections |
| 600ms | Hero/brand moments, full-screen |
Rule of thumb: the larger the element/distance, the longer the duration. Most UI motion lives at 150-400ms; under ~100ms reads as instant, over ~500ms feels sluggish for routine UI.
| 标记 | 数值 | 适用场景 |
|---|---|---|
| 100ms | 微交互反馈（切换、点击） |
| 150ms | 悬停、小型状态变化 |
| 250ms | 标准UI过渡（默认） |
| 400ms | 大型组件、弹窗、页面区块 |
| 600ms | 核心品牌场景、全屏动效 |
经验法则：元素越大/移动距离越远，时长越长。大多数UI动效的时长在150-400ms之间；低于约100ms会被感知为瞬间完成，超过约500ms会让常规UI操作显得拖沓。
Sample easing tokens (curves)
示例缓动标记（曲线）
| Token | cubic-bezier | Feel / use |
|---|---|---|
| (0.4, 0.0, 0.2, 1) | Default; element moving within view |
| (0.0, 0.0, 0.2, 1) | Entrances — fast in, settle |
| (0.4, 0.0, 1, 1) | Exits — ease in, speed off |
| (0.2, 0.0, 0, 1) | Expressive/brand moments |
| spring(stiffness, damping) | Playful overshoot (use sparingly) |
Principle: entrances decelerate (objects arrive and settle), exits accelerate (objects leave with intent), and nothing important uses linear easing — linear feels mechanical and is reserved for continuous loops (spinners, progress).
| 标记 | cubic-bezier | 感受 / 适用场景 |
|---|---|---|
| (0.4, 0.0, 0.2, 1) | 默认；元素在视图内移动 |
| (0.0, 0.0, 0.2, 1) | 入场——快速进入，平稳落地 |
| (0.4, 0.0, 1, 1) | 退场——缓慢启动，加速离开 |
| (0.2, 0.0, 0, 1) | 表现力强的品牌场景 |
| spring(stiffness, damping) | 带弹跳感的趣味动效（谨慎使用） |
原则：入场采用减速曲线（物体到达后平稳落地），退场采用加速曲线（物体有目的地离开），重要元素不使用线性缓动——线性缓动显得机械，仅用于持续循环动效（加载 spinner、进度条）。
Motion library (map patterns to tokens)
动效库（模式与标记映射）
| Pattern | Tokens | Behaviour |
|---|---|---|
| Fade in | | Opacity 0→1 |
| Scale + fade in | | 0.96→1 scale, opacity 0→1 |
| Slide up in | | Y +8/16px → 0, fade in |
| Fade out | | Opacity 1→0 (exits faster than entrances) |
| Modal open | | Scale + fade, backdrop fades in |
| Page/section transition | | Cross-fade or shared-element move |
| List stagger | | Items cascade, not all at once |
Default rule: exits are shorter than entrances; staggers use small offsets (30-50ms) so groups feel alive without dragging.
| 模式 | 标记 | 表现 |
|---|---|---|
| 淡入 | | 透明度 0→1 |
| 缩放+淡入 | | 缩放 0.96→1，透明度 0→1 |
| 上滑入场 | | Y轴偏移 +8/16px → 0，淡入 |
| 淡出 | | 透明度 1→0（退场时长比入场短） |
| 弹窗打开 | | 缩放+淡入，背景层淡入 |
| 页面/区块过渡 | | 交叉淡入或共享元素移动 |
| 列表 stagger | 每个元素 | 元素依次出现，而非同时触发 |
默认规则：退场时长比入场短；stagger使用小偏移量（30-50ms），让群组动效生动但不拖沓。
The template (fill in)
可填充模板
[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][BRAND] MOTION GUIDELINES 版本: ___ 负责人: ___
1. 动效原则
我们的动效旨在：[原则1 — 例如「引导注意力，而非分散注意力」]
[原则2 — 例如「默认快速，按需表现」]
[原则3 — 例如「每一个动效都有意义」]
[原则4] [原则5]
2. 时间标记
instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms
3. 缓动标记
standard ____ · decelerate ____ · accelerate ____ · emphasized ____
4. 动效库
入场动效: [列出模式 + 标记]
退场动效: [列出模式 + 标记]
过渡动效: [列出模式 + 标记]
5. Logo动画
允许: [展示风格、时长标记、可触发场景]
禁止: [拉伸、扭曲、自由旋转、改色、时长超过___ms]
6. 反馈与状态动效
加载: [骨架屏/spinner规则及适用场景]
成功: [确认动效]
错误: [抖动/颜色规则 — 禁止仅用颜色传达状态]
悬停/聚焦: [标记 + 聚焦可见性要求]
7. 无障碍设计
减少动效: [具体处理方式 — 见下方章节]
光敏性: 每秒最多3次闪烁；禁止全屏高对比度频闪。
聚焦: 聚焦指示器不得通过动画隐藏或消失。
8. 正确/错误示例
✅ [正确做法] ❌ [错误做法]Logo animation rules (fill in)
Logo动画规则（可填充）
State explicitly what is allowed and forbidden. Typical baseline:
- Allowed: a reveal/build using -
duration-slow+slower; gentle settle; one signature build kept consistent everywhere.ease-emphasized - Never: stretch/squash the mark out of proportion, free-rotate, recolour outside the palette, animate every appearance (reserve it for key moments), or exceed the agreed max duration.
明确说明允许和禁止的行为。典型基准：
- 允许：使用-
duration-slow+slower的展示/构建动效；轻微的平稳落地效果；保持统一的标志性构建动效。ease-emphasized - 禁止：拉伸/挤压Logo导致比例失调、自由旋转、超出品牌色板改色、每次出现都动画（仅保留给关键场景）、超过约定的最长时长。
Feedback & state motion
反馈与状态动效
- Loading: skeletons for content layout; spinners only for short, indeterminate waits; show progress for waits over ~1s.
- Success/error: pair motion with a label or icon — never communicate state by colour or motion alone (accessibility).
- Hover/focus: +
duration-fast; focus state must be clearly visible and must not animate itself out of view.ease-standard
- 加载：内容布局使用骨架屏；仅在短时间不确定等待时使用spinner；等待超过约1s时显示进度。
- 成功/错误：动效需搭配文字标签或图标 — 禁止仅用颜色或动效传达状态（无障碍要求）。
- 悬停/聚焦：+
duration-fast；聚焦状态必须清晰可见，且不得通过动画移出视野。ease-standard
Accessibility (required section)
无障碍设计（必填章节）
- Reduced motion: honour the user's "reduce motion" setting. Replace movement/parallax/large transforms with simple opacity cross-fades or instant state changes. Keep essential meaning; remove decorative motion. (Conceptually maps to .)
prefers-reduced-motion - Photosensitivity: no more than 3 flashes per second; avoid full-screen high-contrast strobing.
- No meaning by motion/colour alone: always pair with text or icon.
- Focus visibility: never let an animation hide or remove the focus indicator.
- 减少动效：尊重用户的「减少动效」设置。将移动/视差/大型变换动效替换为简单的透明度交叉淡入或即时状态变化。保留核心信息；移除装饰性动效。（对应规范。）
prefers-reduced-motion - 光敏性：每秒闪烁不超过3次；避免全屏高对比度频闪。
- 禁止仅用动效/颜色传达信息：始终搭配文字或图标。
- 聚焦可见性：禁止通过动画隐藏或移除聚焦指示器。
Worked examples
实践示例
GOOD — a token-anchored library entry:
Modal open:(400ms) +duration-slow; scale 0.96→1, backdrop fades in. Close:ease-emphasized(250ms) +duration-base.ease-accelerate
Every value is a named token, the close is shorter than the open, the easing matches the intent (emphasized for a brand moment in, accelerate to leave). An engineer can implement it directly and it will match every other modal.
ANTI-PATTERN — the "vibes" guideline:
"Animations should feel smooth, modern, and delightful. Use nice easing and keep things snappy but not too fast."
Why it fails: no named tokens, no values, no entrance/exit rule, nothing implementable — "smooth" and "snappy" contradict and every engineer interprets them differently, so the product ends up inconsistent (the exact problem the doc was meant to solve). The fix: replace adjectives with the token tables, map each pattern to tokens, and give do/don't pairs with concrete millisecond values.
优秀案例 — 基于标记的动效库条目：
弹窗打开：（400ms） +duration-slow；缩放0.96→1，背景层淡入。关闭：ease-emphasized（250ms） +duration-base。ease-accelerate
每个值都是命名标记，关闭时长比打开短，缓动曲线匹配场景意图（品牌场景入场用emphasized，退场用accelerate）。工程师可直接实现，且所有弹窗动效将保持一致。
反模式 —「感觉型」指南：
「动画应流畅、现代、愉悦。使用合适的缓动，保持轻快但不要太快。」
失败原因：无命名标记、无具体数值、无入场/退场规则、无法落地 —「流畅」和「轻快」相互矛盾，每个工程师的理解都不同，最终导致产品动效不一致（这正是文档要解决的问题）。修复方案：用标记表格替换形容词，将每个模式映射到标记，并提供带具体毫秒值的正确/错误示例。
Common mistakes
常见错误
| Symptom | Why it happens | Fix |
|---|---|---|
| Motion inconsistent across screens | Hand-tuned one-off values, no tokens | Define tokens once; every pattern references them |
| Doc sounds nice, can't be built | Principles written as adjectives, not values | Pair every principle with a numeric token rule |
| Everything bounces | Spring/overshoot used everywhere | Reserve spring/emphasized for brand moments only |
| Exits feel sluggish | Exit duration ≥ entrance | Make exits one step shorter; accelerate them |
| Animation breaks accessibility | No reduced-motion / colour-only states | Add the required accessibility section; pair motion with text/icon |
| Logo animates differently everywhere | No logo rules | State one signature reveal + an explicit "never" list |
| Token values renamed constantly | Names are literal ( | Name by purpose ( |
| 症状 | 原因 | 修复方案 |
|---|---|---|
| 不同页面动效不一致 | 手动调整的一次性数值，无标记 | 一次性定义标记；所有模式都引用标记 |
| 文档描述优美但无法落地 | 原则用形容词而非具体规则撰写 | 每条原则搭配数值化的标记规则 |
| 所有元素都有弹跳效果 | 过度使用spring/弹跳动效 | 仅在品牌关键场景使用spring/emphasized动效 |
| 退场动效拖沓 | 退场时长≥入场时长 | 退场时长缩短一个等级；使用加速曲线 |
| 动画违反无障碍规范 | 无减少动效/仅用颜色传达状态的规则 | 添加必填的无障碍章节；动效搭配文字/图标 |
| Logo动效在不同场景表现不一 | 无Logo动效规则 | 定义统一的标志性展示动效 + 明确的「禁止」列表 |
| 标记名称频繁变更 | 名称为字面数值（如 | 按用途命名（如 |
Deliverable spec — what a good motion guidelines doc contains
交付规范 — 优质动效指南文档包含的内容
The output is a structured document (template in references/full-template.md), not code. A complete doc has all seven parts, and:
- 3-5 named principles, each with a one-line rule (not adjectives).
- Duration and easing tokens with values/curves — the implementable core.
- A motion library mapping every pattern to tokens.
- Explicit logo allowed/never rules.
- Feedback/state motion (loading, success, error, hover, focus).
- A required accessibility section (reduced-motion, photosensitivity, focus, no meaning-by-colour-alone).
- Concrete do/don't pairs that remove ambiguity.
输出为结构化文档（参考references/full-template.md），而非代码。完整文档需包含全部7个部分，且：
- 3-5条命名化原则，每条原则对应一行具体规则（而非形容词）。
- 带数值/曲线的时长与缓动标记——这是可落地的核心。
- 动效库将每个模式映射到对应标记。
- 明确的Logo允许/禁止规则。
- 反馈/状态动效（加载、成功、错误、悬停、聚焦）。
- 必填的无障碍章节（减少动效、光敏性、聚焦、禁止仅用颜色传达信息）。
- 消除歧义的具体正确/错误示例。
Before you finish — checklist
完成前检查清单
- 3-5 principles, each named and given a one-line rule.
- Duration tokens defined with values; easing tokens with cubic-bezier curves.
- Every library pattern names the tokens it uses.
- Entrances decelerate, exits accelerate and are shorter; linear only for loops.
- Logo rules state both allowed and never.
- Feedback states pair motion with text/icon (never colour alone).
- Accessibility section present: reduced-motion, photosensitivity, focus, contrast.
- Do/don't pairs are concrete (with values), not vibes.
- Token names are semantic (purpose), not literal values.
- 3-5条命名化原则，每条原则对应一行具体规则。
- 定义带数值的时长标记；带cubic-bezier曲线的缓动标记。
- 每个动效库条目都明确引用对应的标记。
- 入场用减速曲线，退场用加速曲线且时长更短；线性曲线仅用于循环动效。
- Logo规则同时包含允许和禁止内容。
- 反馈状态动效搭配文字/图标（禁止仅用颜色）。
- 包含无障碍章节：减少动效、光敏性、聚焦、对比度。
- 正确/错误示例为具体内容（带数值），而非模糊描述。
- 标记名称为语义化名称（按用途），而非字面数值。
Related frameworks
相关框架
This doc is the system-of-record for a brand's motion; two sibling skills supply the upstream theory and the per-project feel — reference and apply them, don't duplicate their tables:
- — your principles section should encode the Three Pillars (intent → tone → craft); the Primary/Secondary/Ambient motion layers explain why a hero move and ambient drift get different tokens; the 1/3 Rule justifies stagger limits (don't move everything at once). Cite these; keep the canonical tables there.
animation-principles - — for a brand spanning product + marketing + broadcast, pick a named Motion Personality preset and state it at the top of the doc, then derive token values to match (snappier preset → shorter durations; premium preset → longer, smoother). The motion-language spec lives there.
motion-art-direction
本文档是品牌动效的官方记录；两个关联技能提供上游理论和项目级风格参考——请引用并应用，不要重复其表格：
- —— 你的原则章节应融入三大支柱（意图→基调→工艺）；主/次/背景动效层级解释了为何核心动效和背景漂移使用不同标记；1/3规则说明了stagger的限制（不要让所有元素同时动）。请引用这些内容；规范表格保留在该技能文档中。
animation-principles - —— 对于覆盖产品+营销+传播的品牌，选择一个命名化的动效风格预设并在文档顶部说明，然后推导匹配的标记数值（更轻快的预设→更短时长；高端预设→更长更平滑的时长）。动效语言规范保留在该技能文档中。
motion-art-direction
Quick reference
快速参考
| Decision | Default |
|---|---|
| Default UI duration | |
| Entrance easing | decelerate (ease-out) |
| Exit easing | accelerate (ease-in), shorter than entrance |
| Linear easing | only for loops (spinners/progress) |
| Stagger offset | 30-50ms per item |
| Logo animation | reserved, consistent, never distort |
| State feedback | motion + label/icon, never colour alone |
| Reduced motion | swap transforms for fades/instant |
| 决策 | 默认值 |
|---|---|
| 默认UI时长 | |
| 入场缓动 | decelerate (ease-out) |
| 退场缓动 | accelerate (ease-in)，时长比入场短 |
| 线性缓动 | 仅用于循环动效（spinner/进度条） |
| Stagger偏移量 | 每个元素30-50ms |
| Logo动画 | 仅用于关键场景，保持一致，禁止扭曲 |
| 状态反馈 | 动效+标签/图标，禁止仅用颜色 |
| 减少动效 | 将变换动效替换为淡入/即时变化 |
Reference files
参考文件
- — the complete fill-in motion guidelines document with every section expanded and example copy.
references/full-template.md - — full duration and easing token tables with values, cubic-bezier curves, and usage notes.
references/token-reference.md - — a library of concrete do/don't pairs and worked principle examples (Slack/IBM/Material-style).
references/dos-and-donts.md
- —— 完整的可填充动效指南文档，包含所有扩展章节和示例内容。
references/full-template.md - —— 完整的时长和缓动标记表格，包含数值、cubic-bezier曲线和使用说明。
references/token-reference.md - —— 具体的正确/错误示例库，以及Slack/IBM/Material风格的原则示例。
references/dos-and-donts.md