sionrui/.claude/skills/indie-game-dev/references/ui-ux-design.md

游戏UI/UX设计

目录

• 设计原则
• UI层次结构
• HUD设计
• 菜单系统
• 反馈系统
• 新手引导
• 可访问性设计

设计原则

游戏UI设计核心

1. 不干扰游戏 - UI服务于游戏，不是主角
2. 信息层次清晰 - 重要信息优先级最高
3. 一致性 - 全局风格统一
4. 响应性 - 即时反馈所有交互

信息优先级

P0: 生死相关 (血量/倒计时/警告)
P1: 核心玩法 (技能/弹药/目标)
P2: 辅助信息 (小地图/任务/分数)
P3: 次要信息 (设置/社交/收藏)

UI层次结构

标准UI层级

Layer 5: 全屏覆盖层 (Loading/过场)
    ↓
Layer 4: 模态对话框 (确认/提示)
    ↓
Layer 3: 弹窗面板 (背包/技能树)
    ↓
Layer 2: HUD (血条/技能/小地图)
    ↓
Layer 1: 游戏世界 (3D/2D场景)

屏幕布局分区

┌────────────────────────────────────────┐
│  [左上: 玩家状态]      [右上: 目标/任务] │
│                                        │
│                                        │
│            [中心: 游戏区域]             │
│                                        │
│                                        │
│  [左下: 技能/物品栏]    [右下: 小地图]   │
└────────────────────────────────────────┘

HUD设计

核心HUD元素

{
  "hud_elements": {
    "health_bar": {
      "position": "bottom_left",
      "visibility": "always",
      "style": "gradient_fill",
      "critical_threshold": 0.25,
      "animations": ["damage_flash", "heal_pulse", "critical_pulse"]
    },
    "mana_bar": {
      "position": "below_health",
      "visibility": "contextual",
      "style": "solid_fill"
    },
    "skill_slots": {
      "position": "bottom_center",
      "count": 4,
      "show_cooldown": true,
      "show_keybind": true
    },
    "minimap": {
      "position": "top_right",
      "size": "medium",
      "rotation": "player_facing",
      "show_markers": ["objective", "npc", "danger"]
    },
    "ammo_counter": {
      "position": "bottom_right",
      "visibility": "combat_only"
    }
  }
}

状态指示器设计

状态类型	视觉表现	位置建议
生命值	条形/心形/数字	左上/底部
法力/能量	条形/球体	生命值下方
Buff/Debuff	图标列表+倒计时	状态栏
弹药	数字+图标	武器附近
经验值	条形	顶部/底部

菜单系统

菜单结构设计

主菜单
├── 继续游戏
├── 新游戏
│   └── 选择难度
├── 加载存档
├── 设置
│   ├── 画面设置
│   ├── 音频设置
│   ├── 控制设置
│   └── 游戏设置
└── 退出

暂停菜单

{
  "pause_menu": {
    "layout": "centered",
    "background": "blur_game_view",
    "options": [
      {"label": "继续", "action": "resume", "default": true},
      {"label": "设置", "action": "open_settings"},
      {"label": "存档", "action": "save_game"},
      {"label": "返回主菜单", "action": "quit_to_menu", "confirm": true}
    ]
  }
}

背包UI设计

┌──────────────────────────────────────┐
│ [角色]  [装备]  [消耗品]  [素材]       │
├──────────────────────────────────────┤
│  ┌──┐┌──┐┌──┐┌──┐┌──┐┌──┐           │
│  │  ││  ││  ││  ││  ││  │           │
│  └──┘└──┘└──┘└──┘└──┘└──┘  [详情]  │
│  ┌──┐┌──┐┌──┐┌──┐┌──┐┌──┐           │
│  │  ││  ││  ││  ││  ││  │           │
│  └──┘└──┘└──┘└──┘└──┘└──┘           │
├──────────────────────────────────────┤
│ 物品名称: 剑                         │
│ 攻击力: +50                          │
│ 描述: 一把普通的剑                    │
└──────────────────────────────────────┘

反馈系统

反馈类型矩阵

事件	视觉	音效	震动
受伤	红色闪烁	痛苦音效	轻微
死亡	灰度+慢动作	死亡音效	强烈
拾取	飘字+粒子	拾取音效	无
升级	光效+UI动画	升级音效	中等
任务完成	弹窗+奖励展示	完成音效	无
技能冷却	图标填充动画	冷却完毕提示	无

伤害数字设计

{
  "damage_numbers": {
    "normal": {
      "color": "#FFFFFF",
      "size": 24,
      "animation": "float_up_fade"
    },
    "critical": {
      "color": "#FF4444",
      "size": 36,
      "animation": "pop_bounce",
      "prefix": "暴击!"
    },
    "heal": {
      "color": "#44FF44",
      "size": 24,
      "prefix": "+"
    }
  }
}

引导指示

视觉引导手段:
- 箭头/光柱指向目标
- 高亮可交互物体
- 路径光效指引
- 小地图标记

原则:
- 引导不能喧宾夺主
- 可选关闭引导
- 渐进式减少引导强度

新手引导

引导类型

类型	适用场景	特点
强制教学	核心机制	必须完成才能继续
可跳过教学	基础操作	可选择跳过
上下文提示	进阶技巧	首次使用时提示
悬浮帮助	复杂系统	悬停显示说明

引导设计模板

{
  "tutorial_step": {
    "id": "first_attack",
    "trigger": "first_enemy_encounter",
    "highlight": "attack_button",
    "message": "点击攻击按钮消灭敌人",
    "arrow_target": "enemy",
    "block_other_input": true,
    "skip_condition": "enemy_killed"
  }
}

引导流程设计

开始
  ↓
[触发条件检查]
  ↓
[暂停游戏/限制输入]
  ↓
[高亮UI元素]
  ↓
[显示指引信息]
  ↓
[等待玩家操作]
  ↓
[验证操作正确]
  ↓
[播放成功反馈]
  ↓
进入下一步骤 或 完成

可访问性设计

视觉可访问性

{
  "accessibility_options": {
    "colorblind_mode": {
      "type": ["protanopia", "deuteranopia", "tritanopia"],
      "effect": "调整UI颜色方案"
    },
    "high_contrast": {
      "effect": "增强UI对比度"
    },
    "text_size": {
      "range": [0.8, 1.5],
      "default": 1.0
    },
    "screen_reader": {
      "support": true,
      "read_hud": true
    }
  }
}

操作可访问性

功能	说明
按键重映射	所有操作可自定义
长按/连按切换	选择触发方式
自动瞄准	辅助瞄准功能
QTE自动完成	自动完成快速反应事件
游戏速度调节	0.5x - 1.0x

听觉可访问性

- 所有音频事件有视觉替代
- 字幕系统完善
- 闭 caption 支持音效描述
- 音频提示可视化指示器

UI动效指南

常用动效

{
  "animations": {
    "fade_in": {"duration": 0.2, "easing": "ease_out"},
    "fade_out": {"duration": 0.15, "easing": "ease_in"},
    "scale_pop": {"duration": 0.15, "scale": 1.1, "easing": "back_out"},
    "slide_in": {"duration": 0.25, "direction": "right", "easing": "ease_out"},
    "shake": {"duration": 0.1, "intensity": 5},
    "pulse": {"duration": 0.5, "scale": 1.05, "loop": true}
  }
}

动效原则

• 持续时间 < 0.3s (不阻塞操作)
• 使用缓动函数增加质感
• 避免过度动画分散注意力
• 提供关闭动画的选项