# game ui ux
Confidence: high
Last verified: 2026-04-28
Generation: human_only


## 2. 信息设计原则

### 2.1 信息优先级金字塔

```
       紧急/重要
       ┌────────┐
       │ 生命值 │  ← 随时可见、大尺寸、颜色突出
       ├────────┤
       │ 任务目标│  ← 需要时可见
       ├────────┤
       │ 资源计数│  ← 玩家查阅时可见
       ├────────┤
       │ 社交信息│  ← 后台显示
       └────────┘
```

### 2.2 视觉编码

用视觉属性传递信息层级：

| 属性 | 用法 | 示例 |
|------|------|------|
| **尺寸** | 越大越重要 | 生命值 > 队友列表 |
| **颜色** | 红色=危险，绿色=安全，金色=稀有 | 低血量变红闪烁 |
| **位置** | 越靠近中央越重要 | HUD 四角 vs 屏幕中央提示 |
| **动画** | 动态吸引注意力 | 新任务闪烁、受伤时屏幕边缘泛红 |
| **透明度** | 越透明越次要 | 非战斗时隐藏 HUD |

### 2.3 格式塔原则在游戏 UI 中的应用

| 原则 | 游戏 UI 应用 |
|------|-------------|
| **相近** | 相关功能按钮分在一组 |
| **相似** | 同类型道具用相同图标风格 |
| **闭合** | 血条用分段方式让人一目了然满血状态 |
| **连续** | 技能树用连线引导阅读方向 |
| **图底** | 弹窗用半透明背景突出前景内容 |

---

## 3. 游戏 UX 设计准则

### 3.1 尼尔森交互设计十大启发式

适应到游戏场景：

| 启发式 | 游戏中的体现 |
|--------|-------------|
| **系统状态可见性** | 加载进度条、CD 倒计时、保存标识 |
| **系统与现实匹配** | 跳跃按 A/X、射击按 RT 符合直觉 |
| **用户控制与自由** | 暂停、回滚、跳过对话、撤销操作 |
| **一致性与标准** | 同类型道具颜色一致、操作方式统一 |
| **错误预防** | 确认购买弹窗、不可点击按钮灰色化 |
| **识别而非回忆** | 道具图标 + 名称同时显示 |
| **灵活性与效率** | 快捷键、宏命令、自定义按键 |
| **美学与极简设计** | 不堆砌信息、适当留白 |
| **帮助用户识别错误** | 无效操作有提示（"MP 不足"） |
| **帮助与文档** | 教程、图鉴、操作说明 |

### 3.2 游戏 UX 自检清单

- [ ] 玩家在 3 秒内能找到关键信息（生命、弹药、目标）
- [ ] 所有可交互元素在 5 秒内可识别
- [ ] 反馈延迟 < 100ms（即时感）
- [ ] 没有让玩家困惑的图标（无文字说明也能理解）
- [ ] 错误操作有清晰提示
- [ ] 长按/双击等高级操作有教程
- [ ] 所有 UI 在目标分辨率下完整显示
- [ ] 控制器/键盘/触屏三种输入方式都可用

---

## 4. 移动端触控设计

### 4.1 触摸热区

```
     ┌─────────────────────────────┐
     │  不方便          │          │
     │  (左手拇指盲区)   │  安全区  │
     │                  │          │
     ├─────────────────────────────┤
     │                            │
     │         拇指弧              │
     │    ───────┘ └──────         │
     │  最舒适的操作区域            │
     ├─────────────────────────────┤
     │  安全区      │   不方便      │
     │              │  (右手拇指盲区)│
     └─────────────────────────────┘
```

### 4.2 触摸设计规范

| 规范 | 数值 | 说明 |
|------|------|------|
| **最小触摸目标** | 44x44 DIP（推荐 48x48） | iOS HIG 标准 |
| **触摸目标间距** | ≥ 8px | 防止误触 |
| **操作反馈时间** | < 100ms | 触感/视觉/音效即时响应 |
| **手势一致性** | 全屏统一 | 滑动=视角/翻页，点按=确认 |

### 4.3 单手持握适配

- **底部 1/3 区域** — 放置主要操作按钮（攻击、跳跃、互动）
- **顶部区域** — 显示信息，不放置关键操作
- **可配置布局** — 允许玩家自定义按钮位置（如吃鸡类游戏的键位自定义）

### 4.4 响应式布局

| 设备类型 | 参考宽度 | 适配要点 |
|----------|----------|----------|
| 小屏手机 | 375px | 精简 HUD，关键信息为主 |
| 大屏手机 | 414px | 显示更多信息 |
| 平板 | 768px+ | 接近桌面布局 |
| 横屏模式 | > 高度 | 调整 HUD 到两侧 |

**断点参考：**
- `width < 400px` → 移动小屏模式
- `width < 768px` → 移动大屏/小平板
- `width >= 768px` → 桌面/平板模式

---

## 5. 可访问性设计

### 5.1 色盲友好

| 色盲类型 | 占比（男性） | 注意事项 |
|----------|------------|----------|
| 红绿色盲 | 8% | 不要只用红/绿区分敌我/品质 |
| 蓝黄色盲 | 0.5% | 较少见但仍需考虑 |
| 全色盲 | 0.01% | 极少数，但需要纹理辅助 |

**设计策略：**
- 颜色 + 图标/形状 双重编码（不只是颜色）
- 提供色盲模式（替换色调）
- 重要信息（敌我识别）用形状或标签辅助
- **避免：** 红/绿组合、只靠颜色区分品质等级

### 5.2 字体与可读性

| 场景 | 最小字号 | 推荐字号 |
|------|----------|----------|
| 对话文本 | 14px | 16-18px |
| UI 按钮标签 | 12px | 14-16px |
| HUD 数值 | 16px | 18-24px |
| 标题 | 20px | 24-36px |

**额外考虑：**
- 提供字体大小缩放选项
- 背景与文字对比度 ≥ 4.5:1（WCAG AA 标准）
- 避免使用纯装饰性字体显示关键信息

### 5.3 通用可访问性

| 功能 | 说明 |
|------|------|
| **字幕** | 所有对话和关键音效提供字幕 |
| **可重新映射按键** | 支持自定义键位 |
| **自动瞄准/辅助瞄准** | 降低操作门槛 |
| **慢动作模式** | 降低反应速度要求 |
| **闪光警告** | 对光敏性癫痫玩家提前警示 |
| **文字转语音** | 帮助视障玩家 |

---

## 6. UI 动画与反馈

### 6.1 反馈响应时间标准

| 反馈类型 | 响应时间 | 示例 |
|----------|----------|------|
| 即时反馈 | < 100ms | 按钮按下状态、触觉反馈 |
| 动作反馈 | 100-300ms | 伤害数字弹出、道具拾取 |
| 结果反馈 | 300-1000ms | 升级动画、合成结果 |
| 过渡反馈 | 200-500ms | 页面切换、弹窗打开 |

### 6.2 动画原则

- **缓入缓出：** UI 移动/出现/消失都要有缓动，不要生硬切换
- **一致性：** 所有同类动画使用相同的时长和曲线
- **不阻塞：** 动画应可跳过，不能影响操作
- **有意义：** 每个动画都要传达信息（血量变化方向、页面层级关系）

---

## 7. 原型与测试工具

| 工具 | 用途 | 适合阶段 |
|------|------|----------|
| **Figma** | UI 设计 + 交互原型 | 初稿到高保真 |
| **Adobe XD** | UI 原型 + 动效 | 初稿到高保真 |
| **Balsamiq** | 低保真线框图 | 概念阶段 |
| **Unity UI Toolkit** | 引擎内 UI 实现 | 开发阶段 |
| **Unreal UMG** | 引擎内 UI 实现 | 开发阶段 |

### 快速原型工作流

```
纸面草图（30min）
  → Figma 低保真（2h）
  → Figma 高保真（1天）
  → 可交互原型（2天）
  → 用户测试 → 迭代
  → 引擎内实现
```

### 测试方法

- **5 秒测试：** 让测试者看 UI 5 秒，然后问记住了什么
- **点击测试：** 给测试者任务，看他们点哪里
- **热力图：** 记录视线和点击分布
- **A/B 测试：** 两个版本对比效果

---

## 8. 游戏 UI 常见模式与反模式

### 常见模式

| 模式 | 适用场景 |
|------|----------|
| 径向菜单 | 快速选择多个选项（武器切换） |
| 上下文菜单 | 根据玩家状态显示不同选项 |
| 分页/标签 | 背包、图鉴等多内容界面 |
| 模态弹窗 | 重要确认（购买、退出） |
| Toast 通知 | 非阻断性提示（成就、好友上线） |

### 反模式（避免）

| 反模式 | 问题 | 改进 |
|--------|------|------|
| 无限嵌套菜单 | 玩家找不到想要的功能 | 扁平化 + 搜索 |
| 信息过载 HUD | 屏幕全是数据和图标 | 分层显示 + 隐藏非关键信息 |
| 无确认的破坏操作 | 误删道具/误消费 | 关键操作加确认弹窗 |
| 不一致的交互 | 同一游戏中操作方式不统一 | 建立 UI 设计规范 |
| 假禁用按钮 | 灰色按钮点不了但不说为什么 | 显示原因（"需要 5 级"） |

---

## 参考来源

- Scott Rogers: Level Up! The Guide to Great Video Game Design (3rd Ed.)
- iOS Human Interface Guidelines — 触摸目标规范
- WCAG 2.1 — 可访问性标准
- Nielsen's 10 Usability Heuristics
- ACM HCI in Games (2025): UX Guidelines for HUD Design
- Design The Game: Touchscreen Design Guide (2025)

---

## 参见

- [game-design-principles.md#八种玩家美学] — 感官美学与 UI 的关系
- [player-psychology.md#行为经济学] — 消费 UI 中的心理学应用
- [templates/gdd-template.md] — GDD 模板中的 UI 规格部分