区分有效反馈与装饰性效果
使用 prefers-reduced-motion 媒体特性在 CSS 中检测用户偏好;必要时,也让脚本控制的效果遵循同一偏好。例如,移除反复出现的背景缩放,同时保留表示操作成功的短暂颜色或文字提示。减少动态效果不应悄悄造成信息损失:玩家仍需看懂发生了什么变化以及接下来该做什么。
不要机械地删除所有动画。移动目标可能是游戏玩法,而碰撞后的相机抖动可能是装饰性的。保留位置或时间所需的运动,并在可能的情况下提供另一个清晰的信号。 MDN 解释说,该偏好要求减少或替换不必要的动作。
测试过渡和重复效果
检查整个体验中的运动:菜单、加载、镜头切换、胜负状态,以及长时间游玩中反复出现的效果。只禁用一项 CSS 动画可能遗漏 JavaScript 或 canvas 实现的运动。让各绘制层统一遵循偏好,并避免玩家在游戏中改变系统设置时出现突兀变化。
开启操作系统的减少动态效果设置,并检查玩家是否仍能定位目标、识别命中并理解状态转换。一起测试 CSS、脚本和画布效果。MDN介绍了这一媒体特性,以及偏好生效时如何提供替代样式。
关于浏览器游戏减少动态效果的常见问题
减少动态效果是否意味着停止游戏中的所有运动?
不是。有些运动对玩法或状态表达必不可少。减少或替换非必要效果,同时保留清晰的线索,让玩家理解时机、位置和操作反馈。
页面如何检测偏好?
CSS 可以使用 prefers-reduced-motion 媒体特性。脚本或画布效果也需要采用等效的偏好设置路径,确保视觉呈现保持一致。
延伸阅读
发现信息过时了? 报告需要更正的内容