10 · 静态、动态、动画与性能

适用：添加微交互、转场、实时内容、媒体或加载反馈。“动态内容”不等于“必须有动画”。

MOT-01 · 先区分三种变化

类型	示例	设计目标
静态呈现	文章、已完成报表、说明图	层级、可读性、稳定性
动态内容	请求结果、实时日志、协作状态	正确性、新鲜度、变化提示与用户控制
动画过渡	展开、移位、淡入、转场	解释关系、反馈动作、保持上下文

一个实时监控页可以几乎没有装饰动画；一张静态卡片也可以有必要的焦点和按压反馈。别为了显得有活力给每个区域加运动。

MOT-02 · 动效必须有目的

目的	建议形式	静态替代
确认按下	小幅颜色或位置变化	清楚的按下与忙碌样式
说明展开	短促展开或淡入	立即显示并更新展开状态
保持对象连续性	短距离位置过渡	明确选择或位置标记
表示等待	阶段或真实进度	等待文本和可查询状态
提醒新内容	轻量强调一次	“有新内容”入口
品牌表达	小范围、可关闭的装饰	静态关键帧

建议起点：控件反馈约 100–180ms，小面板约 160–240ms，较大转场约 200–320ms。这些是本系列的调试范围，不是标准。设备性能、运动幅度和任务频率决定最终值。

不等待动画结束才允许下一次操作。连续点击、取消、返回和切换窗口都应留下正确状态。

MOT-03 · 用户可以选择减少运动

系统的 prefers-reduced-motion: reduce 应影响非必要的位移、缩放、视差和循环装饰；还可以提供产品内关闭动效的选择。状态变化必须仍可理解。媒体查询的用法见 MDN prefers-reduced-motion。

.panel-enter { animation: reveal 180ms ease-out both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(.4rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-enter { animation: none; }
}
[data-motion="off"] .panel-enter { animation: none; }

不要把业务完成信号只绑在 animationend：动画被关闭后，逻辑仍应完成。等待状态不能仅靠一个运动中的圆圈表达。

自动开始、持续超过五秒且与其他内容并行的移动、闪烁或滚动信息，通常需提供暂停、停止或隐藏机制；自动更新信息另有控制要求，存在必要活动例外。见 WCAG 2.2.2。本手册建议装饰循环默认不自动开始。

MOT-04 · 动态数据尊重阅读与位置

消息流在用户已滚到底部时可跟随；用户向上阅读时提供“新消息”入口，不强行拉回。列表刷新避免突然重排正在点击的对象。实时数值注明时间范围，缺失不能渲染成 0。

读屏反馈按阶段或批次更新，避免每个流式字符都被播报。暂停视觉动画不应隐瞒后台任务事实。

MOT-05 · 用实际测量判断流畅

优先考虑 transform 和 opacity，涉及布局和绘制的动画应评估成本；不为所有元素长期设置 will-change。参见 web.dev CSS 动画性能指南。

检查：目标设备上记录掉帧、布局变化、输入延迟和资源成本；测试低性能模式、切后台恢复、快速往返与减少运动设置。不要只报告开发机上的帧率。

MOT-06 · 声音和触觉作为补充反馈

按任务决定是否需要声音或触觉：计时结束、来电或游戏动作可能受益，普通列表点击通常无需每次发声。提供独立开关，避免与读屏、公共环境和连续操作冲突；同一结果仍有可见表达。

Web 页面自动播放超过三秒的音频，需要暂停、停止或独立于系统音量的控制，见 WCAG 1.4.2。本手册建议声音由清楚标识的用户动作开启。

触觉能力依赖平台和硬件。Web 的 Vibration API 并非所有主流浏览器都支持，不能依赖它完成关键反馈，参见 MDN Vibration API。原生设备应按平台能力专项设计与实测。

演示见交互实验室，素材与动画资源的加载见图片图标。本版没有声音或触觉演示。