mobile-game-ui-design

name	mobile-game-ui-design
description	移动端游戏UI设计规范，整合基础设计原则与心理学应用，适用于卡牌、策略、RPG等类型游戏。提升操作效率、降低认知负荷、增强沉浸感。
keywords	["移动端游戏","游戏UI","拇指热区","菲茨定律","认知负荷","游戏化设计"]
tags	["游戏设计","UI设计","移动端","心理学"]
trigger_phrases	["移动端游戏设计","游戏UI设计","拇指热区","游戏化设计","移动游戏UI","手游设计"]

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