# 测试点击区域，而不仅仅是按钮艺术

> 通过将视觉艺术作品与交互边界分开并检查触摸设备上的大小、间距和重叠，使游戏控件更容易点击。

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

控件可能看起来很大，但其实际点击区域只是图稿的一小部分。在浏览器游戏中，刻意定义交互边界并用手指（而不仅仅是精确的鼠标指针）对其进行测试。正确的目标取决于其角色、间距和周围运动，但清晰的命中区域可以减少意外失误，并使输入更容易推理。

## 将可见形状与命中区域分开

对于暂停按钮等小图标，让可单击容器延伸到绘制的符号之外。将相邻操作保持足够远的距离，以免手指模糊地同时激活这两个操作。在画布游戏中，绘制对象并根据相同的布局数据计算其命中区域；在单独的代码路径中重复坐标会导致漂移。

WCAG 2.2 成功标准 2.5.8 规定目标至少为 24 × 24 CSS 像素，同时列出了具体例外，包括间距和等效控件。应将其视为无障碍要求，而不是设计上限：移动目标或主要操作可能需要更大的区域。不要只靠颜色或不明显的边框来标示触控生效的位置。

## 在真实屏幕尺寸下检查命中测试

在每条边和每个角附近、相邻控件之间，以及游戏区域缩放时测试点按。确认可见控件、DOM 交互区域和游戏世界坐标指向同一操作。对于小型移动物体，可以把命中区域设得比图形更大，同时与危险物保持足够间距。

用触控测试不同视口尺寸。鼠标通常比手指更容易精确定位。将指针位置转换到游戏区域的坐标系，并在调整大小后再次确认。W3C 的说明介绍了该标准及其例外。

## 常见问题

**每个游戏中的目标都必须至少为 24 像素吗？** WCAG 2.2 成功标准 2.5.8 要求指针输入目标至少为 24 × 24 CSS 像素，同时规定了例外。请评估该标准，并根据游戏场景选择更大的交互区域。

**交互区域可以比图形更大吗？** 可以。扩大较小图标周围的交互区域能让它更容易被触发，但要确保相邻控件仍能清楚区分，且操作结果可预期。

## 跟随好奇心探索

- [设计网页游戏的触控操作](https://oneshotgems.ai/zh-Hans/topics/touch-controls-for-web-games): 设计触控交互时，要考虑浏览器手势、清晰的视觉反馈和明确的指针状态，让游戏在手机上也能做出可预期的响应。
- [为浏览器游戏构建响应式布局](https://oneshotgems.ai/zh-Hans/topics/responsive-game-layouts): 使游戏表面适应其容器，而不将模拟状态与屏幕尺寸联系起来，并在不断变化的视口中测试布局。
- [设计能用单个拇指操作的手机游戏](https://oneshotgems.ai/zh-Hans/topics/one-thumb-mobile-game-design): 将操作精简到单个拇指能完成的范围，考虑握持姿势与手指遮挡，再用真实握法测试玩法。

## 延伸阅读

- [W3C：目标大小（最小）](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN：指针事件](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/game-touch-targets