# 74 · UI 屏幕流程文档（UI Screen Flow Document）

> **所属文档集** [← 返回索引](./README.md) · [总览](./00_Overview.md)  
> **关联文档** 51_UISystemDesign · 53_HUDSpec · 56_AccessibilityGuide · 14_ProgressionSystem · 70_MacroPacingDocument  
> **文档性质** 定义全游戏所有 UI 屏幕的层次结构、导航流程、各屏幕元素规格和平台差异。本文档是 UI 开发的权威来源，与 UIT（UI Toolkit）实现层配合使用。

---

## 目录

1. [UI 层次结构总览](#1-ui-层次结构总览)
2. [主菜单系统](#2-主菜单系统)
3. [游戏内 HUD](#3-游戏内-hud)
4. [暂停菜单系统](#4-暂停菜单系统)
5. [死亡屏幕](#5-死亡屏幕)
6. [能力/技能界面](#6-能力技能界面)
7. [物品与收集品界面](#7-物品与收集品界面)
8. [大地图界面](#8-大地图界面)
9. [对话与字幕系统](#9-对话与字幕系统)
10. [系统设置界面](#10-系统设置界面)
11. [过场动画 UI](#11-过场动画-ui)
12. [Boss 血条规格](#12-boss-血条规格)
13. [平台差异规格](#13-平台差异规格)
14. [UI 验收清单](#14-ui-验收清单)

---

## 1. UI 层次结构总览

### 1.1 全局屏幕流程图

```
游戏启动
    │
    ├─► [启动加载画面] ─► [标题动画（LOGO）] ─► [主菜单]
    │
    │
[主菜单]
    │
    ├─► [新游戏]
    │       └─► [难度选择] ─► [开场过场动画] ─► [游戏主界面]
    │
    ├─► [继续游戏]
    │       └─► [存档选择（最多3个）] ─► [加载画面] ─► [游戏主界面]
    │
    ├─► [设置]
    │       └─► [设置界面（见第10节）]
    │
    └─► [退出游戏]（仅 PC）
    

[游戏主界面]（内核循环）
    │
    ├─► [HUD]（常显）
    │       ├─ HP 条
    │       ├─ 魂力（Soul Power）槽
    │       ├─ 形态指示器
    │       ├─ 快速道具栏
    │       └─ 小地图（可选显示，默认关闭）
    │
    ├─► [暂停菜单]（按 ESC / Start）
    │       ├─► [继续]
    │       ├─► [大地图]
    │       ├─► [物品/收集品]
    │       ├─► [能力界面]
    │       ├─► [设置]
    │       └─► [返回主菜单]
    │
    ├─► [死亡屏幕]（HP 归零）
    │       ├─► [再试一次]（从最近庇护所重生）
    │       └─► [返回主菜单]
    │
    └─► [过场动画]（叙事触发）
            └─► [游戏主界面]（自动返回）
```

### 1.2 UI 层级栈（Z-Order）

| 层级 | 名称 | 内容 | Z-Index |
|------|------|------|---------|
| 0 | World Layer | 游戏场景（Unity Camera）| — |
| 1 | HUD Layer | HP/魂力/形态指示器 | 100 |
| 2 | Dialogue Layer | 对话框/字幕 | 200 |
| 3 | Overlay Layer | 暂停菜单/死亡屏幕等全屏覆盖 | 300 |
| 4 | Cinematic Layer | 过场动画黑边/字幕 | 400 |
| 5 | System Layer | 加载画面/崩溃报告 | 500 |

---

## 2. 主菜单系统

### 2.1 主菜单屏幕规格

| 元素 | 位置 | 规格 |
|------|------|------|
| 背景 | 全屏 | 动态背景（循环动画；世界地图的一个角落，轻微parallax）|
| 游戏标题 | 上方 1/3 | 泽灵标题字体；发光效果（蓝绿色）|
| 菜单选项 | 中央 | 垂直列表；字体大小 28px；选中时左侧出现光效 |
| 版本号 | 右下角 | 字体大小 12px；颜色 #666666 |
| 开发者信息 | 左下角 | 字体大小 12px；颜色 #666666 |

**菜单选项列表**：
1. 新游戏（New Game）
2. 继续（Continue）— 无存档时灰显
3. 设置（Settings）
4. 退出（Quit）— 仅 PC；主机平台不显示

### 2.2 难度选择屏幕

| 选项 | 描述 | 推荐人群 |
|------|------|---------|
| 朝露（Dewdrop）| 所有伤害减半；庇护所无限次数；不影响成就 | 不熟悉动作游戏的玩家 |
| 流岚（Wandering Wind）| 标准难度（参考 69/70 的设计目标）| 目标受众 |
| 虚渴（Hollow Thirst）| 伤害+30%；Boss 额外技能激活 | 高挑战玩家 |

**设计规则**：难度选择后可在设置中随时更改（不锁定）。

### 2.3 存档选择屏幕

| 元素 | 规格 |
|------|------|
| 存档卡片数量 | 3个（固定3个存档槽）|
| 存档卡片信息 | 游戏时长 + 最后存档位置 + 进度百分比 + 已收集道具数 |
| 空存档状态 | 显示"空白" + 幽灵边框效果 |
| 删除存档 | 长按（1.5s）+ 确认弹窗（防误触）|

---

## 3. 游戏内 HUD

### 3.1 HP 条

| 属性 | 规格 |
|------|------|
| 位置 | 左上角，距边界 20px |
| 样式 | 横向分段式（每段 = 1HP；最大 8HP）|
| 颜色 | 满血：#A8FF78（绿色）；低于 25%：#FF6B6B（红色）；扣血动画：红色扣减后2s回落 |
| 尺寸 | 每段宽 24px，高 8px，间隔 2px |
| 最大血量增加时 | 新段从右侧以动画扩展进入（0.5s）|
| 受伤时 | 屏幕边缘短暂红色晕染（0.2s，最大不透明度 60%）|

### 3.2 魂力（Soul Power）槽

| 属性 | 规格 |
|------|------|
| 位置 | HP 条正下方，间隔 8px |
| 样式 | 单一弧形槽（弧度约 180°）|
| 颜色 | 根据当前形态改变：天魂=蓝（#4FC3F7），地魂=绿（#66BB6A），命魂=红（#EF5350），无形态=白（#E0E0E0）|
| 满槽动画 | 轻微脉动发光（0.8s 周期）|
| 使用时 | 槽值减少动画（0.1s 快速响应）|

### 3.3 形态指示器

| 属性 | 规格 |
|------|------|
| 位置 | 右侧，HP 条水平对齐（右上角）|
| 样式 | 3个圆形图标，水平排列，已解锁=亮色，未解锁=暗色/锁定图标 |
| 当前形态 | 对应图标放大 20% + 发光效果 |
| 切换动画 | 图标间切换时短暂旋转效果（0.15s）|
| 无形态状态 | 3个图标全部暗色，中央显示无形态图标 |

### 3.4 快速道具栏

| 属性 | 规格 |
|------|------|
| 位置 | 右下角，距边界 20px |
| 槽位数 | 2个（左槽=主道具，右槽=副道具）|
| 快捷键显示 | 槽位右下角显示按键提示（PC: Q/E；手柄: LT/RT）|
| 数量显示 | 叠加数量在右上角（字体大小 12px）|

### 3.5 HUD 可见性规则

| 场景 | HUD 状态 |
|------|---------|
| 正常探索/战斗 | 全部显示 |
| 过场动画 | 全部隐藏（渐隐 0.3s）|
| NPC 对话 | 保留 HP 条；隐藏魂力/道具 |
| 庇护所内 | 全部隐藏（进入庇护所后自动淡出）|
| 截图模式（可选）| 全部隐藏 |

---

## 4. 暂停菜单系统

### 4.1 暂停菜单布局

```
┌─────────────────────────────────┐
│         [ 已暂停 ]               │
│                                   │
│  > 继续                           │
│    大地图                         │
│    物品 & 收集品                  │
│    能力与技能                     │
│    设置                           │
│    返回主菜单                     │
│                                   │
└─────────────────────────────────┘

背景：模糊化游戏画面（高斯模糊 8px）+ 半透明深色遮罩（#000000, 70%）
```

### 4.2 暂停菜单行为规则

| 场景 | 行为 |
|------|------|
| 过场动画中 | 暂停键无响应（不可暂停）|
| Boss 战中 | 暂停键有响应，但 Boss 菜单内无"大地图"选项（节奏打断最小化）|
| 庇护所内 | 暂停键有响应，正常功能 |
| 死亡屏幕 | 暂停键无响应 |

---

## 5. 死亡屏幕

### 5.1 死亡流程

```
HP 归零触发
    │
    ▼
[死亡动画]（0.5~1.5s，各角色不同，见 71_ProtagonistDesign）
    │
    ▼
[屏幕渐黑]（黑色淡入，1.0s）
    │
    ▼
[死亡文字显示]（见下方规格）
    │
    ▼
    ├─► 玩家输入 → [选项菜单]
    └─► 等待 3s → [选项菜单]（自动出现）

[选项菜单]
    ├─► [再试一次]（从最近庇护所重生）
    └─► [返回主菜单]
```

### 5.2 死亡文字规格

| 属性 | 规格 |
|------|------|
| 文字内容 | 随机从预设列表选取（见下方）|
| 字体 | 与游戏 Lore 字体一致（衬线风格）|
| 颜色 | 白色（#FFFFFF），背景全黑 |
| 动画 | 文字从透明渐显（1.5s），显示 3s，然后选项出现 |
| 字体大小 | 24px（桌面），适当缩放（手机/主机）|

**死亡文字预设列表**（从旧题记中选取语句；叙事感，非嘲讽）：
- "蚀素吞噬一切，但不会吞噬记忆。"
- "传承的意志，还在跳动。"
- "死亡不是终点，遗忘才是。"
- "再试一次。"（简短直白版）
- "……它还在等你。"
- "你知道该做什么。"

### 5.3 重生规则

| 条件 | 重生位置 |
|------|---------|
| 正常死亡 | 最近触发的庇护所 |
| 无庇护所触发时（游戏最开始）| 游戏初始生成点（苏醒裂缝入口）|
| 过渡通道死亡 | 过渡通道的入口端（进入过渡通道前的最后庇护所）|

---

## 6. 能力/技能界面

### 6.1 能力界面布局

```
┌────────────────────────────────────────┐
│  能力 & 技能                             │
│                                          │
│  [天魂形态图标]  [地魂形态图标]  [命魂形态图标]  │
│      ▼              （未解锁）       （未解锁）   │
│  ─────────────────────────────────────── │
│  [裂空掌]  [灵踪弹]  [漩灵击]             │
│    已学习    未学习    未学习              │
│                                          │
│  通用能力：                               │
│  [冲刺] ✓    [双跳] ✗    [蚀护印] ✗      │
│                                          │
│  [选中能力的详细描述区域]                  │
└────────────────────────────────────────┘
```

### 6.2 能力界面交互规则

| 行为 | 结果 |
|------|------|
| 选中未解锁能力 | 显示锁定原因（如："击败腐蚀洞穴 Boss 后解锁"）|
| 选中已解锁能力 | 显示详细描述、伤害/效果数值 |
| 选中通用能力（冲刺/双跳）| 显示获得地点和游戏中演示 GIF（如有）|
| 按下演示按键 | 临时切换到"演示模式"（角色展示使用该能力）|

---

## 7. 物品与收集品界面

### 7.1 界面分类标签

| 标签 | 内容 |
|------|------|
| 消耗品 | 回复道具、蚀护印材料等 |
| 题记（Lore）| 已发现的世界台词石碑（25块总量）|
| 遗物（Relic）| 被动能力强化道具（15块总量）|
| 回响碎片 | 隐藏结局材料（10块总量）|
| 关键道具 | 特殊进度道具（不可丢弃）|

### 7.2 题记（Lore）查看规格

| 属性 | 规格 |
|------|------|
| 未发现状态 | 显示轮廓+问号图标；显示发现区域提示（"此题记在坍塌废墟中"）|
| 已发现状态 | 显示完整内容；发现地点；发现时的背景音乐可选回放 |
| 阅读时 | 全屏半透明背景；文字逐行显示（打字机效果）|
| 返回 | 任意输入键关闭 |

---

## 8. 大地图界面

### 8.1 大地图布局

```
┌────────────────────────────────────────┐
│  大地图                         [关闭] │
│                                        │
│  ┌──────────────────────────────────┐ │
│  │                                  │ │
│  │      世界地图（可缩放/滚动）      │ │
│  │      玩家位置：★               │ │
│  │      已探索区域：明色显示        │ │
│  │      未探索区域：暗色显示        │ │
│  │      庇护所：● 图标             │ │
│  │      Boss：✦ 图标               │ │
│  │                                  │ │
│  └──────────────────────────────────┘ │
│                                        │
│  图例：[★玩家] [●庇护所] [✦Boss]       │
│                                        │
│  快速旅行：选择庇护所 → 按确认传送     │
└────────────────────────────────────────┘
```

### 8.2 大地图交互规格

| 交互 | 行为 |
|------|------|
| 滚动/移动光标 | 地图跟随移动 |
| 缩放（PC: 滚轮；手柄: LB/RB）| 在区域视图 ↔ 全局视图间切换 |
| 选中庇护所 | 显示庇护所名称 + 快速旅行提示（已解锁时）|
| 快速旅行 | 选中庇护所 → 确认按键 → 加载画面（1.5s）→ 传送 |
| 未探索区域 | 完全暗色，不显示任何细节 |

### 8.3 地图揭示规则

| 条件 | 揭示内容 |
|------|---------|
| 进入房间 | 该房间在地图上变为已探索（完全可见）|
| 100% 探索区域 | 该区域所有房间/连接道完整显示 + 特殊标记 |
| 未进入的相邻房间 | 不显示（完全黑暗）|

---

## 9. 对话与字幕系统

### 9.1 NPC 对话框规格

```
┌──────────────────────────────────────┐
│  [NPC头像]  厄弗                      │
│                                        │
│  "世界在失去平衡之前，我在这里         │
│   已经住了一千五百年了……"              │
│                                        │
│                        [▶ 继续]       │
└──────────────────────────────────────┘
```

| 属性 | 规格 |
|------|------|
| 位置 | 屏幕下方（距底部 40px），水平居中 |
| 宽度 | 屏幕宽度的 80%（最大 960px）|
| NPC 头像 | 左侧，尺寸 64×64px，圆角遮罩 |
| 文字动画 | 打字机效果（20ms/字）；按确认键可跳过 |
| 快进 | 第一次按确认键显示全部文字；第二次继续 |
| 多选对话 | 选项从对话框底部向上出现，玩家选择后继续 |

### 9.2 字幕系统规格

| 属性 | 规格 |
|------|------|
| 字幕位置 | 屏幕底部（距底 24px），水平居中 |
| 字体大小 | 默认 20px；可在无障碍设置中调整（16~32px）|
| 背景 | 半透明黑色块（#000000，70%）|
| 字幕颜色 | 默认白色；NPC 不同颜色（每个NPC固定颜色）|
| 显示时长 | 按说话速度自动计算；最短 1.5s/句 |

### 9.3 NPC 字幕颜色对应

| NPC | 字幕颜色 |
|-----|---------|
| 篓背哈 | #FFD54F（暖黄）|
| 厄弗 | #B0BEC5（冷灰）|
| 卡洁 | #80CBC4（青绿）|
| 西罗 | #CE93D8（淡紫）|
| 米涅 | #90CAF9（浅蓝）|
| 三祖（天衡）| #4FC3F7（蓝）|
| 三祖（地柔）| #66BB6A（绿）|
| 三祖（命刃）| #EF5350（红）|
| 奥拉 | #B0BEC5（灰，接近死亡感）|
| 泽灵（仅普通结局一句台词）| #FFFFFF（纯白）|

---

## 10. 系统设置界面

### 10.1 设置界面标签

| 标签 | 内容概述 |
|------|---------|
| 音频 | 主音量、音乐音量、音效音量、对话音量、字幕开关 |
| 画面 | 分辨率（PC）、窗口模式（PC）、垂直同步（PC）、色彩滤镜、震屏强度 |
| 操作 | 按键映射（PC）、手柄振动强度、游戏指针灵敏度（若有）|
| 无障碍 | 字幕大小、字幕背景、高对比度模式、辅助自动瞄准、无敌模式（隐藏，需特定操作解锁）|
| 语言 | 界面语言选择（已支持：中文简体、中文繁体、英语、日语）|
| 难度 | 可随时更改（朝露/流岚/虚渴）|

### 10.2 音频设置规格

| 设置项 | 类型 | 范围 | 默认值 |
|--------|------|------|-------|
| 主音量 | 滑条 | 0~100 | 80 |
| 音乐音量 | 滑条 | 0~100 | 70 |
| 音效音量 | 滑条 | 0~100 | 80 |
| 对话音量 | 滑条 | 0~100 | 100 |
| 字幕 | 开关 | ON/OFF | ON |

### 10.3 无障碍设置规格

| 设置项 | 类型 | 默认值 | 说明 |
|--------|------|-------|------|
| 字幕字体大小 | 步进选择（小/中/大/特大）| 中 | 中=20px |
| 字幕背景不透明度 | 滑条 | 70% | 0%=无背景 |
| 高对比度 HUD | 开关 | OFF | 开启后 HP/魂力条改为高饱和度颜色 |
| 震屏效果 | 步进（无/轻/标准）| 标准 | |
| 闪光效果减弱 | 开关 | OFF | 减弱特定强光效果（如 Boss 死亡光爆）|
| 辅助二段跳 | 开关 | OFF | 跳跃键长按可自动二段跳（不需要二次按键）|

---

## 11. 过场动画 UI

### 11.1 过场动画通用规范

| 元素 | 规格 |
|------|------|
| 黑边（Letterbox）| 上下各 10% 屏幕高度；颜色 #000000；淡入 0.5s |
| 字幕位置 | 黑边内（下方黑边区域）|
| 跳过提示 | 右下角小字"按 [按键] 跳过"；过场开始 2s 后出现 |
| 跳过操作 | 按下后显示确认（"确认跳过？"），防误触 |

### 11.2 主要过场动画列表

| ID | 名称 | 时长目标 | 触发点 |
|----|------|---------|-------|
| CUT-01 | 泽灵苏醒 | 45s | 游戏开始 |
| CUT-02 | 首次进入卡拉旋 Boss 房 | 10s | Boss 房间首次进入 |
| CUT-03 | 首次进入卓格拉 Boss 房 | 8s | Boss 房间首次进入 |
| CUT-04 | 首次进入艾尔典 Boss 房 | 12s | Boss 房间首次进入 |
| CUT-05 | 首次进入逆吞 Boss 房 | 8s | Boss 房间首次进入 |
| CUT-06 | 进入核心熔炉（奥拉出现）| 20s | 首次进入 Core |
| CUT-07 | 三形态激活演出 | 30s | A-M05 虚渴神殿入口 |
| CUT-08 | 普通结局 | 90s | 奥拉死亡后（普通路线）|
| CUT-09 | 真结局 | 120s | 三祖觉醒（真路线）|
| CUT-10 | 隐藏结局 | 150s | 奥拉/泽灵合一（隐藏路线）|

---

## 12. Boss 血条规格

### 12.1 Boss 血条布局

```
[屏幕顶端，居中]

 ████████████████████████░░░░░░░░░░  HP: 280/400
              【卡拉旋】
```

| 属性 | 规格 |
|------|------|
| 位置 | 屏幕顶端，水平居中，距顶部 16px |
| 宽度 | 屏幕宽度的 60%（最大 720px）|
| Boss 名称 | 血条下方，字体大小 18px，居中 |
| 颜色 | P1=淡橙（#FF8F00）；P2=深红（#C62828）；P3=暗紫（#6A1B9A）（如有）|
| 相变提示 | 血条清空时短暂闪烁（白色，0.3s），然后进入过场 |
| 出现时机 | Boss 战触发后 0.5s 淡入 |
| 消失时机 | Boss 死亡后 2s 淡出 |

### 12.2 奥拉特殊血条规格（三阶段）

```
P1 血条：████████████ 400HP
P2 血条：████████████ 400HP  （P1结束后新血条出现）
P3 血条：████████████ 400HP  （P2结束后新血条出现）

阶段指示器：[●●●] → [○●●] → [○○●] → 结束
```

- 三个血条分开显示，每次相变结束时当前血条消失，下一个血条出现
- 阶段指示器位于血条右侧（三个点表示三个阶段）

---

## 13. 平台差异规格

| 元素 | PC | PS5 | Nintendo Switch |
|------|----|----|----------------|
| 按键图标 | 键盘字母+鼠标图标 | PS 圆形/叉/方/三角图标 | Switch ABXY 图标 |
| 快速旅行 | 支持 | 支持（PS5 自定义地图 UI）| 支持（切换模式下）|
| HDR | 可选 | 默认开启（支持 HDR10）| 不支持 |
| 触觉反馈 | 不支持 | DualSense 自适应触发（Boss 攻击弹反时触发强反馈）| 手柄震动 |
| 截图功能 | Steam 截图 | PS5 截图按钮 | Switch 截图按钮 |
| 语言切换 | 随时可改 | 随时可改 | 随时可改 |
| 死亡屏幕 | "再试一次"/"返回主菜单" | 同左 | 同左（无"退出游戏"选项）|
| 主菜单"退出游戏" | 有 | 无（使用主机关闭）| 无 |

---

## 14. UI 验收清单

**HUD**
- [ ] HP 条最大值 / 空值状态均正确显示
- [ ] 魂力槽颜色随形态正确切换
- [ ] 形态指示器正确显示已/未解锁状态
- [ ] 所有 HUD 在过场动画时正确隐藏
- [ ] HUD 元素无遮挡重要游戏内容

**菜单导航**
- [ ] 所有菜单可通过键盘/手柄导航
- [ ] 返回键（ESC / B键）在所有子界面均有效
- [ ] 无死角（不存在无法返回的菜单状态）
- [ ] 快速旅行从选择到传送流程无异常

**死亡与重生**
- [ ] 死亡动画→黑屏→死亡文字流程正确
- [ ] 重生位置为最近庇护所（非关卡起点）
- [ ] 死亡文字随机且不重复（短期内）

**对话与字幕**
- [ ] 打字机效果可跳过（不影响后续流程）
- [ ] NPC 颜色对应正确
- [ ] 字幕背景不遮挡重要游戏元素

**Boss 血条**
- [ ] Boss 血条在 Boss 触发时正确出现
- [ ] 相变时血条颜色/动画正确
- [ ] 奥拉三阶段血条独立显示正确

**无障碍**
- [ ] 字体大小调整立即生效
- [ ] 震屏"无"设置下全程无震屏效果
- [ ] 高对比度模式下所有关键信息可区分