Files
zeling_v2/Docs/Design/74_UIScreenFlowDocument.md
2026-05-08 11:04:00 +08:00

567 lines
21 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 74 · UI 屏幕流程文档UI Screen Flow Document
> **所属文档集** [← 返回索引](./README.md) · [总览](./00_Overview.md)
> **关联文档** 51_UISystemDesign · 53_HUDSpec · 56_AccessibilityGuide · 14_ProgressionSystem · 70_MacroPacingDocument
> **文档性质** 定义全游戏所有 UI 屏幕的层次结构、导航流程、各屏幕元素规格和平台差异。本文档是 UI 开发的权威来源,与 UITUI 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|
| 背景 | 半透明黑色块(#00000070%|
| 字幕颜色 | 默认白色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=淡橙(#FF8F00P2=深红(#C62828P3=暗紫(#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 触发时正确出现
- [ ] 相变时血条颜色/动画正确
- [ ] 奥拉三阶段血条独立显示正确
**无障碍**
- [ ] 字体大小调整立即生效
- [ ] 震屏"无"设置下全程无震屏效果
- [ ] 高对比度模式下所有关键信息可区分