页面滚动时背景大幅视差、卡片从远处飞入、点击后整个画面缩放，对很多用户只是“酷”，对前庭敏感用户可能产生眩晕和恶心。Reduced Motion 不是关闭所有动画，而是为非必要运动提供更安全的替代表达。
01 WCAG 2.2 对由交互触发的非必要运动提出可关闭要求
W3C Animation from Interactions 2.3.3 是 AAA 成功标准，目标是让用户能关闭由交互触发、对功能并非必要的运动动画。
即使企业只以 AA 为目标，Reduced Motion 仍然是很有价值的设计最佳实践。
02 最需要谨慎的是大范围位移、缩放和视差
按钮轻微颜色变化通常问题较小，整屏内容随滚动前后移动、Zoom 转场、3D 空间旋转更容易造成不适。
评估动效时不要只看持续时间，还要看运动面积、距离和是否影响空间稳定。
03 prefers-reduced-motion 可以读取用户系统偏好
前端可以通过 CSS 媒体查询识别用户是否设置了减少动态效果，并切换到更克制动画。
设计师应为 Reduced Motion 状态提供明确替代，不要把责任全丢给开发“自己减一下”。
04 减少运动不等于所有动画 duration=0
状态变化仍然需要反馈。可以用淡入淡出、颜色、边框或小范围变化替代大幅位移。
某些动画对理解本身必要，例如展示对象移动关系，可以保留但控制强度，或者提供静态说明。
05 品牌官网尤其容易为了叙事过度使用滚动驱动动画
Scroll storytelling 可以增强沉浸感，但如果用户必须滚动很多次才能“解锁”正文，既影响可用性，也让 Reduced Motion 难以降级。
内容本身应该在关闭复杂动效后仍然完整、可读和可操作。
06 自动播放动画还要考虑暂停和注意力干扰
持续循环背景视频、数字滚动和闪烁元素会长期争夺注意。
除了运动敏感，还需考虑认知负担、性能和内容可读性。能停止、暂停或不自动播放往往更友好。
07 Motion Token 可以把 Reduced Motion 做进设计系统
定义 duration、easing、distance 等 Motion Token，并为 reduced 模式设置替代值，能让整个产品一致降级。
这样不是每个页面临时写媒体查询，而是从组件层建立运动策略。
08 测试时真正开启系统“减少动态效果”选项
Mac、iOS、Windows、Android 都有相关可访问性设置。打开以后检查导航、Modal、页面切换和营销动画是否仍然可理解。
如果关闭运动后内容消失、按钮无法出现，说明动画已经被错误地当成页面功能本身。
09 Reduced Motion 不等于把 duration 全部改成 0
有些过渡用于说明元素出现、状态切换或空间关系，完全瞬移反而会让变化更难理解。更好的策略是去掉大幅位移、旋转和缩放，保留短暂淡入、颜色或透明度变化。
也就是说，减少的是造成身体不适的运动强度，而不是删除所有状态反馈。
10 动效规范需要给“可关闭”和“必须保留”划边界
装饰性视差、背景粒子和滚动飞入通常可以关闭；进度变化、提交反馈等功能性动画则需要提供低运动替代。
设计系统可以给 Motion Token 增加 reduced 版本，让网页和产品端在同一用户偏好下获得一致行为。
常见问题
Reduced Motion 是 WCAG AA 必须项吗？
Animation from Interactions 2.3.3 属于 AAA，但减少非必要运动仍是广泛推荐的可访问性实践。
开启 Reduced Motion 就应该关闭所有动画吗？
不需要。可以保留必要反馈，重点减少大幅、视差、缩放等可能造成不适的运动。
什么是 prefers-reduced-motion？
CSS 媒体查询，可识别用户操作系统是否偏好减少动态效果。
视频背景也需要处理吗？
持续自动播放内容应考虑暂停、替代和可读性，并与无障碍和性能要求一起评估。
设计稿需要单独做 Reduced Motion 版本吗？
复杂动效最好明确标注替代行为，设计系统可统一定义降级规则。
相关服务与进一步咨询
链接复制成功
