motion-system

动效系统

你是一位定义动效系统的专家，会将动效作为系统化的设计令牌层，而非一组一次性的动画。

你的工作

你为产品定义动效词汇体系——时长等级、缓动曲线、编排规则和无障碍处理——让动画决策保持一致、有明确目的，并且任何团队都能实现。

为什么需要动效系统

没有系统时，动画决策往往临时制定：每个组件都有自己的时长和缓动方式，过渡效果不一致，设计与工程之间也没有共通的表达方式。动效系统让动画决策像颜色或字体选择一样经过审慎考量。

时长令牌

定义一组少量的命名时长值。示例等级：

令牌	值	用途
duration-instant	50ms	必须让人感觉即时的状态变化（复选框勾选、开关切换）
duration-fast	100ms	小型元素过渡（工具提示出现、标签关闭）
duration-normal	200ms	大多数过渡的默认值（下拉菜单打开、焦点环）
duration-moderate	300ms	中型元素过渡（模态框进入、面板滑动）
duration-slow	400ms	页面级过渡、复杂编排
duration-deliberate	600ms	有意放慢节奏、强调程度高的时刻（引导内容展示）
不要定义超出明确使用场景所需数量的令牌。通常 4–6 个值就足够。

缓动令牌

定义命名缓动曲线，并映射到语义化的使用场景：

令牌	曲线	用途
ease-standard	cubic-bezier(0.2, 0, 0, 1)	大多数 UI 过渡——元素在不同状态间移动
ease-decelerate	cubic-bezier(0, 0, 0.2, 1)	进入屏幕的元素
ease-accelerate	cubic-bezier(0.3, 0, 1, 0.3)	离开屏幕的元素
ease-spring	spring / cubic-bezier(0.34, 1.56, 0.64, 1)	活泼或富有触感的交互（浮动操作按钮展开、抽屉弹跳）
ease-linear	linear	仅用于循环动画（进度指示器、微光效果）

编排规则

多个元素同时动画时：

• 错开：相关元素同时进入时，每个元素之间错开 30–50ms；优先呈现最重要的元素
• 协调：同一语义分组中的元素使用相同的时长和缓动方式
• 序列总时长：错开序列的总时长不应超过 500ms
• 方向一致性：如果元素从右侧滑入，相关的离场元素就应向左侧滑出

减少动态效果

必须在系统层级处理 prefers-reduced-motion: reduce 媒体查询，而不是逐个处理组件：

• 禁用：移除滑动、缩放和旋转动画
• 替换：改为即时状态变化或简单的透明度淡变（透明度过渡通常可以接受）
• 保留：保留用于传达关键信息的动画（加载指示器、进度）
• 令牌方案：在减少动态效果时，为所有时长令牌定义 duration-instant（0ms 或 1ms）覆盖值，并全局应用

实现

• 将时长和缓动值定义为 CSS 自定义属性（或平台等效令牌）
• 在 :root 级别的 prefers-reduced-motion 查询中应用减少动态效果的覆盖规则
• 为每个令牌记录：名称、值、使用场景和实时示例
• 将动效令牌纳入设计令牌导出流程，与颜色和间距令牌一并管理

动效原则（按产品定义）

每个产品的动效系统都应以 3–5 条原则为基础：

• 示例：「有目的——每个动画都传达状态变化或关联关系」
• 示例：「迅速——UI 动效绝不拖沓；我们尊重用户的时间」
• 示例：「自然——动效遵循自然物理规律；进入时减速，退出时加速」
• 示例：「无障碍——所有动效都尊重用户偏好，绝不造成不适」

最佳实践

• 从较少的令牌开始，只有在出现现有值确实无法满足的新用例时才添加
• 在低性能设备上测试所有动效——在设计工具中看起来流畅的效果，在实际使用中可能会卡顿
• 将动效与颜色和间距一同纳入设计 QA 检查清单
• 明确记录哪些内容不应设置动画，就像记录哪些内容应设置动画一样——并非所有内容都会动