# 减少不必要的动作而不隐藏意义

> 按照玩家减少动态效果的设置，提供更平静的画面，同时保留必要的游戏信息和清楚的操作反馈。

- URL: https://oneshotgems.ai/zh-Hans/topics/reduced-motion-in-games
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

浏览器游戏可能包含镜头移动、画面震动、视差、反复缩放和装饰性粒子。有些运动传达必要的游戏状态，有些只是视觉演出。尊重玩家在操作系统中设置的减少动态效果偏好，判断哪些效果可以减弱、替换或移除，同时不掩盖命中、分数变化或方向提示。

## 区分有效反馈与装饰性效果

使用 prefers-reduced-motion 媒体特性在 CSS 中检测用户偏好；必要时，也让脚本控制的效果遵循同一偏好。例如，移除反复出现的背景缩放，同时保留表示操作成功的短暂颜色或文字提示。减少动态效果不应悄悄造成信息损失：玩家仍需看懂发生了什么变化以及接下来该做什么。

不要机械地删除所有动画。移动目标可能是游戏玩法，而碰撞后的相机抖动可能是装饰性的。保留位置或时间所需的运动，并在可能的情况下提供另一个清晰的信号。 MDN 解释说，该偏好要求减少或替换不必要的动作。

## 测试过渡和重复效果

检查整个体验中的运动：菜单、加载、镜头切换、胜负状态，以及长时间游玩中反复出现的效果。只禁用一项 CSS 动画可能遗漏 JavaScript 或 canvas 实现的运动。让各绘制层统一遵循偏好，并避免玩家在游戏中改变系统设置时出现突兀变化。

开启操作系统的减少动态效果设置，并检查玩家是否仍能定位目标、识别命中并理解状态转换。一起测试 CSS、脚本和画布效果。MDN介绍了这一媒体特性，以及偏好生效时如何提供替代样式。

## 常见问题

**减少动态效果是否意味着停止游戏中的所有运动？** 不是。有些运动对玩法或状态表达必不可少。减少或替换非必要效果，同时保留清晰的线索，让玩家理解时机、位置和操作反馈。

**页面如何检测偏好？** CSS 可以使用 prefers-reduced-motion 媒体特性。脚本或画布效果也需要采用等效的偏好设置路径，确保视觉呈现保持一致。

## 跟随好奇心探索

- [让游戏更易辨识：不要只靠颜色传达信息](https://oneshotgems.ai/zh-Hans/topics/accessible-game-colors): 结合对比度与额外的视觉线索，让玩家在色调相似或无法辨色时也能区分游戏状态。
- [为浏览器游戏设计有用的音频控件](https://oneshotgems.ai/zh-Hans/topics/game-audio-controls): 让玩家通过清晰的静音和音量行为控制游戏声音，并在不中断游戏的声音提示的情况下处理浏览器自动播放限制。

## 延伸阅读

- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion)
- [MDN：可访问性的媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using_for_accessibility)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/reduced-motion-in-games