# Mobile Game UI Design

> 移动端游戏UI设计规范，整合基础设计原则与心理学应用，适用于卡牌、策略、RPG等类型游戏。提升操作效率、降低认知负荷、增强沉浸感。

- Skill: `wanghaisheng/mobile-game-ui-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/mobile-game-ui-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/mobile-game-ui-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/mobile-game-ui-design

---


# Mobile Game UI Design

移动端游戏UI设计规范，整合基础设计原则与心理学应用，适用于卡牌、策略、RPG等类型游戏。

## Context

你是一名专注于移动端游戏UI设计的专家，帮助团队设计符合移动端触屏特性和人类认知规律的游戏界面。核心目标：提升操作效率、降低认知负荷、增强沉浸感。

## Domain Context

### 适用范围
- 移动端触屏游戏（iOS / Android）
- 游戏类型：卡牌、策略、RPG等

### 核心原则
- **拇指热区优化**：基于单手操作习惯布局
- **心理学原则应用**：菲茨定律、希克-海曼定律、认知负荷理论、格式塔原则
- **即时反馈**：触觉、视觉、听觉多模态反馈
- **防误触机制**：避免操作错误和意外触发

## Instructions

### 一、基础设计原则

#### 1.1 拇指热区（Thumb Zone）

移动端单手操作时，拇指自然覆盖的区域分为：

- **绿色（舒适区）**：屏幕底部、右下角 → 放置高频操作（攻击、出牌、普通技能）
- **黄色（伸展区）**：屏幕中部、左下角 → 放置中频操作（药水、背包、防御）
- **红色（困难区）**：屏幕顶部、左上角 → 放置低频或慎重操作（设置、退出、重置）

**规范**：
- 主操作按钮（攻击、结束回合）必须位于绿色舒适区
- 危险操作（删除、重置）置于红色区或增加二次确认

#### 1.2 触控目标尺寸

- 最小点击区域：44×44 pt（iOS）/ 48×48 dp（Android）
- 常用按钮：≥ 60×60 pt
- 按钮间距：≥ 8 pt，防止误触

#### 1.3 手势一致性

- **轻点**：主要交互（打牌、选择）
- **长按**：查看详情（卡牌说明、属性）
- **滑动**：滚动列表、切换目标（可配置）
- **双指缩放**：仅用于地图或牌组编辑

### 二、心理学原则应用

#### 2.1 菲茨定律（Fitts' Law）

移动到目标的时间 = a + b·log₂(距离/宽度 + 1)

**应用规范**：

| UI元素 | 位置策略 | 尺寸策略 |
|--------|---------|---------|
| 主技能按钮 | 右下角（利用屏幕边缘） | 宽度 ≥ 80pt，高度 ≥ 80pt |
| 卡牌/单位 | 底部中央（距离视线最近） | 横向铺开，每张卡牌宽度 ≥ 100pt |
| 暂停/设置 | 左上角（远离操作热区） | 标准 44pt，防止误触 |

**边缘效应**：将"结束回合""攻击"等按钮贴底/贴边，利用屏幕边界作为物理阻挡，使拇指无需精确定位。

#### 2.2 希克-海曼定律（Hick-Hyman Law）

决策时间与选项数量的对数成正比

**规范**：
- 同一屏幕上主要可操作按钮不超过5个（不包括卡牌）
- 卡牌手牌数控制在 4~7张 最佳，超过9张时提供折叠/分页
- 多级菜单深度 ≤ 3 层

**实例**：战斗界面仅展示"攻击""技能""防御""背包""结束回合"五选项；多余功能收进二级弹窗。

#### 2.3 认知负荷理论（Cognitive Load Theory）

- **分区化**：将信息分为状态区（血/蓝/护甲）、操作区（技能/卡牌）、反馈区（伤害数字）
- **渐进呈现**：高级属性（穿透、韧性）默认隐藏，长按查看
- **一致性**：同类操作（所有伤害技能）使用相同图标风格+红色色调

#### 2.4 格式塔原则（Gestalt Principles）

| 原则 | 应用 |
|------|------|
| 相似性 | 同类型卡牌使用相同背景色/边框（技能蓝、攻击红、防御绿） |
| 接近性 | 玩家生命值和护甲值相邻放置；敌人属性同样成组 |
| 闭合性 | 进度条、冷却指示器用圆弧填充，让大脑自动补全剩余部分 |
| 连续律 | 滑动选择英雄时，列表横向平滑滚动，暗示后续内容 |

#### 2.5 色彩心理学

| 颜色 | 含义 | 应用场景 |
|------|------|---------|
| 红色 | 危险、攻击、生命值 | 敌人血条、伤害数字、删除按钮 |
| 绿色 | 安全、治疗、恢复 | 己方血条、回血药水、确认按钮 |
| 蓝色 | 魔法、能量、冷静 | 法力值、技能冷却、护盾 |
| 黄色/橙色 | 警告、稀有、高价值 | 传说装备、暴击提示、限时活动 |
| 灰色 | 禁用、非活跃 | 不可用卡牌、已消耗道具 |

**对比度要求**：前景文字与背景对比度 ≥ 4.5:1（WCAG AA标准）。

#### 2.6 即时反馈与状态可见性

- **触觉反馈**：按钮点击提供轻微震动（0.05s）
- **视觉反馈**：
  - 卡牌被选中 → 上浮 + 发光
  - 攻击命中 → 数字弹出 + 目标闪白
  - 能量不足 → 卡牌变灰 + 抖动（可选）
- **听觉反馈**：轻快音效确认普通操作；沉重音效警告危险操作

#### 2.7 损失厌恶与进度保护

- 关闭游戏前弹出"未保存的进度将会丢失"，利用损失厌恶促使保存
- 充值/消费按钮用非红色（避免恐惧），但添加二次确认弹窗

### 三、移动端特有设计规范

#### 3.1 防误触机制

- **大按钮间距**：相邻可点击元素间距 ≥ 8 pt
- **延迟激活**：滑动地图时，手指离开屏幕0.2s后再响应点击，防止滑动误判为点击
- **可撤销操作**：删除或消耗道具后，提供3秒"撤销"浮窗

#### 3.2 网络与性能适配

- **加载反馈**：任何等待超过0.5秒的操作需显示加载动画
- **断线重连**：自动重试3次，期间UI保持可交互（但禁用需要服务器的操作）

#### 3.3 单手操作优化

- 所有弹出菜单优先显示在拇指侧（右手模式→右侧弹出，左手模式→左侧弹出）
- 支持左右手模式切换（镜像布局）

### 四、典型界面规范示例（以战斗界面为例）

```
┌─────────────────────────┐
│  [头像] HP 80/80  [设置]│ ← 状态区（顶部）
│         护甲 35         │
├─────────────────────────┤
│   敌人A   [血条] 120    │
│   敌人B   [血条]  80    │ ← 战斗区
├─────────────────────────┤
│  药水1   药水2   药水3  │ ← 辅助区（左侧/底部）
├─────────────────────────┤
│ [卡牌1] [卡牌2] [卡牌3] │
│ [卡牌4] [卡牌5]         │ ← 手牌区（底部中央）
├─────────────────────────┤
│    [技能] [防御] [结束]  │ ← 主操作区（右下角）
└─────────────────────────┘
```

**关键检查点**：
- "结束"按钮位于右下角（菲茨定律）
- 手牌区底部中央，卡牌宽度≥100pt（拇指热区）
- 药水瓶图标≥48pt，长按显示效果（渐进呈现）
- 伤害数字红色弹出，治疗数字绿色上升（色彩心理学）

### 五、验收清单

在设计评审时，使用以下检查清单：

- [ ] 所有触控点 ≥ 44pt，间距 ≥ 8pt
- [ ] 高频操作位于拇指舒适区，低频操作不干扰主线
- [ ] 核心信息（血量、能量）0.5秒内可定位
- [ ] 任何操作有视觉/触觉/听觉之一反馈
- [ ] 无单屏超过5个主要操作按钮（卡牌除外）
- [ ] 色彩符合含义映射（红=危险/攻击，绿=治疗/安全）
- [ ] 支持左右手模式切换（若为横屏游戏可选）
- [ ] 危险操作有二次确认或撤销机制

### 六、文档维护

- 每季度根据用户测试数据更新热区映射及按钮尺寸
- 记录用户反馈和测试数据，持续优化设计规范

## Further Reading

- **The Design of Everyday Things** — Don Norman
- **Game Design Workshop** — Tracy Fullerton
- **Rules of Play** — Katie Salen and Eric Zimmerman
- **Mobile Game Design Essentials** — Kim T. Topp