Menu
移动端游戏UI设计规范，整合基础设计原则与心理学应用，适用于卡牌、策略、RPG等类型游戏。提升操作效率、降低认知负荷、增强沉浸感。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/wanghaisheng/openaiworkhorse-design-team --skill mobile-game-ui-designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
扮演设计师角色，完成从用户研究、UX策略、UI设计到交互设计的全流程设计任务。支持设计研究、设计系统、原型测试、设计运营等多维度职责。
Use when a design direction is uncertain, when the team could go multiple ways, or when the user wants to see competing approaches argued before committing — orchestrates structured debate between agents who advocate for different directions
Use when starting a new project or when taste decisions are made — accumulates the user's aesthetic preferences, recurring patterns, and design instincts across projects so each new project starts with what the system already knows about their taste
Based on SOC occupation classification
Showing SKILL.md
| name | mobile-game-ui-design |
| description | 移动端游戏UI设计规范，整合基础设计原则与心理学应用，适用于卡牌、策略、RPG等类型游戏。提升操作效率、降低认知负荷、增强沉浸感。 |
| keywords | ["移动端游戏","游戏UI","拇指热区","菲茨定律","认知负荷","游戏化设计"] |
| tags | ["游戏设计","UI设计","移动端","心理学"] |
| trigger_phrases | ["移动端游戏设计","游戏UI设计","拇指热区","游戏化设计","移动游戏UI","手游设计"] |
移动端游戏UI设计规范，整合基础设计原则与心理学应用，适用于卡牌、策略、RPG等类型游戏。
你是一名专注于移动端游戏UI设计的专家，帮助团队设计符合移动端触屏特性和人类认知规律的游戏界面。核心目标：提升操作效率、降低认知负荷、增强沉浸感。
移动端单手操作时，拇指自然覆盖的区域分为：
规范：
移动到目标的时间 = a + b·log₂(距离/宽度 + 1)
应用规范：
| UI元素 | 位置策略 | 尺寸策略 |
|---|---|---|
| 主技能按钮 | 右下角（利用屏幕边缘） | 宽度 ≥ 80pt，高度 ≥ 80pt |
| 卡牌/单位 | 底部中央（距离视线最近） | 横向铺开，每张卡牌宽度 ≥ 100pt |
| 暂停/设置 | 左上角（远离操作热区） | 标准 44pt，防止误触 |
边缘效应：将"结束回合""攻击"等按钮贴底/贴边，利用屏幕边界作为物理阻挡，使拇指无需精确定位。
决策时间与选项数量的对数成正比
规范：
实例：战斗界面仅展示"攻击""技能""防御""背包""结束回合"五选项；多余功能收进二级弹窗。
| 原则 | 应用 |
|---|---|
| 相似性 | 同类型卡牌使用相同背景色/边框（技能蓝、攻击红、防御绿） |
| 接近性 | 玩家生命值和护甲值相邻放置；敌人属性同样成组 |
| 闭合性 | 进度条、冷却指示器用圆弧填充，让大脑自动补全剩余部分 |
| 连续律 | 滑动选择英雄时，列表横向平滑滚动，暗示后续内容 |
| 颜色 | 含义 | 应用场景 |
|---|---|---|
| 红色 | 危险、攻击、生命值 | 敌人血条、伤害数字、删除按钮 |
| 绿色 | 安全、治疗、恢复 | 己方血条、回血药水、确认按钮 |
| 蓝色 | 魔法、能量、冷静 | 法力值、技能冷却、护盾 |
| 黄色/橙色 | 警告、稀有、高价值 | 传说装备、暴击提示、限时活动 |
| 灰色 | 禁用、非活跃 | 不可用卡牌、已消耗道具 |
对比度要求：前景文字与背景对比度 ≥ 4.5:1（WCAG AA标准）。
┌─────────────────────────┐
│ [头像] HP 80/80 [设置]│ ← 状态区（顶部）
│ 护甲 35 │
├─────────────────────────┤
│ 敌人A [血条] 120 │
│ 敌人B [血条] 80 │ ← 战斗区
├─────────────────────────┤
│ 药水1 药水2 药水3 │ ← 辅助区（左侧/底部）
├─────────────────────────┤
│ [卡牌1] [卡牌2] [卡牌3] │
│ [卡牌4] [卡牌5] │ ← 手牌区（底部中央）
├─────────────────────────┤
│ [技能] [防御] [结束] │ ← 主操作区（右下角）
└─────────────────────────┘
关键检查点：
在设计评审时，使用以下检查清单：