界面动效系统 是做什么的？
目的
界面动效系统提供了一种设计“功能性动效”的方法论——即用户界面中具有特定目的的运动。它超越了装饰性动画，建立了一套 时长、缓动曲线 和 编排 的系统，帮助用户理解空间关系、提供操作反馈、并在上下文切换时降低认知负荷。
使用场景
- 为UI库定义标准过渡时长和曲线。
- 设计复杂的布局变化（例如，将卡片扩展为全屏）。
- 为用户操作建立反馈动效（例如，成功勾选、加载旋转动画）。
- 编排UI层（模态框、抽屉、通知）的进入和退出。
- 使用动效引导注意力到特定元素或变化。
何时不应使用
- 仅静态的品牌美学： 视觉风格刻意避免动效以传达特定调性（例如，极简、粗野主义或“纸上”设计）。
- 纯粹装饰性的“无价值动画”： 不增加任何功能价值，且分散用户主要任务的动画（例如，背景元素未经交互持续移动）。
- 高延迟环境： 渲染动效的性能成本超过UX收益，导致“卡顿”或延迟。
输入
- 品牌个性： 动效是“明快/高效”（快速、线性）还是“自然/流畅”（弹动、柔和、有生机）？
- 交互上下文： 什么在移动？（原子级元素、容器或整个页面）。
- 触发类型： 动效由系统（加载）、用户（点击/悬停）还是环境（滚动）触发？
- 平台能力： 目标浏览器或设备的技术约束。
输出
- 时长尺度： 一组标准化的时间令牌（例如，
motion-fast、motion-standard、motion-slow）。 - 缓动调色板： 为不同动效意图定义的一组贝塞尔曲线（例如，
ease-in、ease-out、emphasized）。 - 编排规则： 元素如何进入、退出及相对移动的标准。
- 动效令牌规范： 面向开发者的动效变量文档。
工作流程
1. 建立时长尺度
根据变化大小创建逻辑的时长递进：
- 快速 (100–150ms)： 用于微交互和原子级状态（悬停、切换、激活）。
- 标准 (200–300ms)： 用于中等规模的过渡（下拉菜单、工具提示、小型展开）。
- 缓慢 (350–500ms)： 用于大型布局变化或沉浸式过渡（模态框、页面级变化）。
2. 定义缓动曲线
为不同的贝塞尔曲线赋予语义含义：
- 标准 (Ease-in-out)： 用于元素在视口内从一点移动到另一点。
- 进入 (Ease-out)： 用于元素出现或进入视口（开始快，结束慢，以感觉响应迅速）。
- 退出 (Ease-in)： 用于元素消失或离开视口（开始慢，结束快，以感觉有目的性）。
- 强调 (复杂)： 自定义曲线（例如，
cubic-bezier(0.4, 0, 0.2, 1)），用于需要高质量感的主要过渡。
3. 为空间心智模型设计
利用动效解释元素从何处来、往何处去：
- 方向连续性： 如果抽屉从右侧滑入，则必须向右侧退出。
- 父子关系： 子元素（如菜单）理想情况下应从其父元素（按钮）出发。
4. 编排序列（交错）
当多个元素同时出现时，避免“瞬间弹出”效果：
- 交错： 在元素之间引入微小的延迟（20–50ms），以引导视线按特定顺序移动。
- 方向交错： 沿阅读方向（从上到下或从左到右）交错排列元素。
5. 考虑无障碍性（减少动效）
动效必须具有包容性：
- “起飞前”检查： 始终为在操作系统层面启用“减少动效”的用户定义回退方案。
- 替代视觉： 当
prefers-reduced-motion激活时，用透明度淡入淡出或完全无动画替代动效。
决策规则
- “功能优先”规则： 如果你无法解释某个动效向用户传达了什么信息，请将其移除。
- 响应式时长： 小屏幕（手机）上的时长应更短，因为元素移动的物理距离更小。
- 操作反馈优先于流畅性： 交互反馈（例如，按钮点击）应感觉瞬时（<100ms），即使最终的过渡动画更长。
- 无无限循环： 除非表示正在进行的、阻塞后台的状态，否则避免无止境的循环动画（旋转、脉冲）。
约束条件
- 无障碍性： 必须遵循
prefers-reduced-motion。动效不得诱发癫痫（避免快速闪烁或大规模高频图案）。 - 性能： 坚持使用“仅合成器”属性（
transform和opacity）以确保60fps性能。避免对width、height或margin进行动画。 - 一致性： 在整个站点中，对同一组件类型使用相同的时长和缓动。
常见失败模式
- “动效晕眩”陷阱： 使用大幅摇摆运动（例如，整个页面滑动）导致前庭不适。
- 界面迟钝： 设置过长的时长（例如，菜单1秒），使用户等待并感觉网站卡顿。
- 线性动效： 使用“linear”缓动，与物理世界中的加速/减速相比，感觉机械且不自然。
- 方向混乱： 模态框从中心“展开”但向底部“滑出”，破坏用户的空间模型。
- “抖动”效应： 元素间隔延迟过长，使页面感觉加载缓慢。
验证标准
- 每个过渡都定义了时长和缓动令牌。
- 时长与过渡的大小成比例（快速对应小变化，缓慢对应大变化）。
- 动效支持清晰的空间心智模型（符合逻辑的进入/退出）。
- 对于多元素展现，使用交错来引导视线。
- 无障碍性：针对
prefers-reduced-motion有明确的简化策略。 - 性能：频繁动画仅使用
transform和opacity。 - 反馈动效（例如，按钮点击）在 <100ms 内开始。