Files

Joywayer f55d2a57c3 chore: initial commit

2026-05-08 11:04:00 +08:00

21 KiB

Raw Permalink Blame History

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

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

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

菜单选项列表：

新游戏（New Game）
继续（Continue）— 无存档时灰显
设置（Settings）
退出（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 触发时正确出现
相变时血条颜色/动画正确
奥拉三阶段血条独立显示正确

无障碍

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

21 KiB Raw Permalink Blame History Unescape Escape

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

目录

1. UI 层次结构总览

1.1 全局屏幕流程图

1.2 UI 层级栈（Z-Order）

2. 主菜单系统

2.1 主菜单屏幕规格

2.2 难度选择屏幕

2.3 存档选择屏幕

3. 游戏内 HUD

3.1 HP 条

3.2 魂力（Soul Power）槽

3.3 形态指示器

3.4 快速道具栏

3.5 HUD 可见性规则

4. 暂停菜单系统

4.1 暂停菜单布局

4.2 暂停菜单行为规则

5. 死亡屏幕

5.1 死亡流程

5.2 死亡文字规格

5.3 重生规则

6. 能力/技能界面

6.1 能力界面布局

6.2 能力界面交互规则

7. 物品与收集品界面

7.1 界面分类标签

7.2 题记（Lore）查看规格

8. 大地图界面

8.1 大地图布局

8.2 大地图交互规格

8.3 地图揭示规则

9. 对话与字幕系统

9.1 NPC 对话框规格

9.2 字幕系统规格

9.3 NPC 字幕颜色对应

10. 系统设置界面

10.1 设置界面标签

10.2 音频设置规格

10.3 无障碍设置规格

11. 过场动画 UI

11.1 过场动画通用规范

11.2 主要过场动画列表

12. Boss 血条规格

12.1 Boss 血条布局

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

13. 平台差异规格

14. UI 验收清单

21 KiB

Raw Permalink Blame History