实务专题 · 交付验收

用户要求减少动态时,品牌画面也应该完整

减少动态不等于删除品牌标识或隐藏标题。应约定保留信息与构图的静态或克制状态,让供应商演示普通和减少动态两条路径,而不是把所有动画元素直接设为不可见。

适用读者与交付决定

包含品牌动态与装饰动画的设计型网站。把本题作为网站供应方的有限验收任务;实际系统证据不能由教学例子替代。

官方依据与解释边界

prefers-reduced-motion表达用户减少非必要动态的偏好;采用什么替代效果仍需设计和交互审核。 MDN: reduced motion · 核对日期:2026年10月16日。

已填写教学例子

合成例子,不是真实客户案例。 列出有限输入、预期结果及反例,不代表已完成真实平台集成。

窄屏可横向滚动表格。

输入/情况检查口径预期结果
reduce静态构图品牌可见
no-preference已批准常规动画常规
unknown setting保守预览静态建议

怎样执行验收

  1. 把装饰运动与必要状态反馈分开列出。
  2. 批准静态状态,确认不播放时间线时文字和操作仍完整。
  3. 在支持浏览器测试加载前设置及运行中偏好切换。

如何解释结果与保留证据

例子只选择建议显示状态,不实现媒体查询。真实验收应在同宽度截图比较两种状态的内容可见性、焦点和构图。DOM节点还在隐藏层里,不等于品牌视觉被保留。

适用边界

不授权改动MadRaven现有主页和动画,也不是完整无障碍或性能认证。

离线复核

把下方两份文件存入同一目录,以Node22.13或更新版本运行。示例不联网、不修改任何账号或网站。 已填输入与预期输出 · 可检查的函数

node decision-check.mjs reduced-motion-brand-acceptance.json