减少动态不等于删除品牌标识或隐藏标题。应约定保留信息与构图的静态或克制状态,让供应商演示普通和减少动态两条路径,而不是把所有动画元素直接设为不可见。
适用读者与交付决定
包含品牌动态与装饰动画的设计型网站。把本题作为网站供应方的有限验收任务;实际系统证据不能由教学例子替代。
官方依据与解释边界
prefers-reduced-motion表达用户减少非必要动态的偏好;采用什么替代效果仍需设计和交互审核。 MDN: reduced motion · 核对日期:2026年10月16日。
已填写教学例子
合成例子,不是真实客户案例。 列出有限输入、预期结果及反例,不代表已完成真实平台集成。
窄屏可横向滚动表格。
| 输入/情况 | 检查口径 | 预期结果 |
|---|---|---|
| reduce | 静态构图 | 品牌可见 |
| no-preference | 已批准常规动画 | 常规 |
| unknown setting | 保守预览 | 静态建议 |
怎样执行验收
- 把装饰运动与必要状态反馈分开列出。
- 批准静态状态,确认不播放时间线时文字和操作仍完整。
- 在支持浏览器测试加载前设置及运行中偏好切换。
如何解释结果与保留证据
例子只选择建议显示状态,不实现媒体查询。真实验收应在同宽度截图比较两种状态的内容可见性、焦点和构图。DOM节点还在隐藏层里,不等于品牌视觉被保留。
适用边界
不授权改动MadRaven现有主页和动画,也不是完整无障碍或性能认证。
离线复核
把下方两份文件存入同一目录,以Node22.13或更新版本运行。示例不联网、不修改任何账号或网站。 已填输入与预期输出 · 可检查的函数
node decision-check.mjs reduced-motion-brand-acceptance.json