329 lines
8.0 KiB
Markdown
329 lines
8.0 KiB
Markdown
# 游戏UI/UX设计
|
||
|
||
## 目录
|
||
- [设计原则](#设计原则)
|
||
- [UI层次结构](#ui层次结构)
|
||
- [HUD设计](#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元素
|
||
|
||
```json
|
||
{
|
||
"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 | 图标列表+倒计时 | 状态栏 |
|
||
| 弹药 | 数字+图标 | 武器附近 |
|
||
| 经验值 | 条形 | 顶部/底部 |
|
||
|
||
## 菜单系统
|
||
|
||
### 菜单结构设计
|
||
|
||
```
|
||
主菜单
|
||
├── 继续游戏
|
||
├── 新游戏
|
||
│ └── 选择难度
|
||
├── 加载存档
|
||
├── 设置
|
||
│ ├── 画面设置
|
||
│ ├── 音频设置
|
||
│ ├── 控制设置
|
||
│ └── 游戏设置
|
||
└── 退出
|
||
```
|
||
|
||
### 暂停菜单
|
||
|
||
```json
|
||
{
|
||
"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动画 | 升级音效 | 中等 |
|
||
| 任务完成 | 弹窗+奖励展示 | 完成音效 | 无 |
|
||
| 技能冷却 | 图标填充动画 | 冷却完毕提示 | 无 |
|
||
|
||
### 伤害数字设计
|
||
|
||
```json
|
||
{
|
||
"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": "+"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 引导指示
|
||
|
||
```
|
||
视觉引导手段:
|
||
- 箭头/光柱指向目标
|
||
- 高亮可交互物体
|
||
- 路径光效指引
|
||
- 小地图标记
|
||
|
||
原则:
|
||
- 引导不能喧宾夺主
|
||
- 可选关闭引导
|
||
- 渐进式减少引导强度
|
||
```
|
||
|
||
## 新手引导
|
||
|
||
### 引导类型
|
||
|
||
| 类型 | 适用场景 | 特点 |
|
||
|------|----------|------|
|
||
| 强制教学 | 核心机制 | 必须完成才能继续 |
|
||
| 可跳过教学 | 基础操作 | 可选择跳过 |
|
||
| 上下文提示 | 进阶技巧 | 首次使用时提示 |
|
||
| 悬浮帮助 | 复杂系统 | 悬停显示说明 |
|
||
|
||
### 引导设计模板
|
||
|
||
```json
|
||
{
|
||
"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元素]
|
||
↓
|
||
[显示指引信息]
|
||
↓
|
||
[等待玩家操作]
|
||
↓
|
||
[验证操作正确]
|
||
↓
|
||
[播放成功反馈]
|
||
↓
|
||
进入下一步骤 或 完成
|
||
```
|
||
|
||
## 可访问性设计
|
||
|
||
### 视觉可访问性
|
||
|
||
```json
|
||
{
|
||
"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动效指南
|
||
|
||
### 常用动效
|
||
|
||
```json
|
||
{
|
||
"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 (不阻塞操作)
|
||
- 使用缓动函数增加质感
|
||
- 避免过度动画分散注意力
|
||
- 提供关闭动画的选项
|