virtheart
5c41eb410b
- 新增HUD图标、面板和状态指示器资产 - 实现HUD图标组件和错误边界组件 - 重构顶部状态栏和底部导航栏 - 更新路线面板样式和交互 - 添加HUD资产清单和切片脚本 - 移除未使用的资产文件 - 调整API安全配置和生产环境设置
159 lines
5.0 KiB
Markdown
159 lines
5.0 KiB
Markdown
# 07 UX 与界面信息架构
|
||
|
||
本文档面向 UI/UX、客户端与策划，定义信息架构、主要界面、关键交互与可用性约束。该项目的 UI 是“游戏本体”：核心玩法发生在信息读取与决策上，因此 UI 的清晰度与节奏控制优先级极高。
|
||
|
||
## 7.1 设计目标
|
||
|
||
- 让玩家在 5 秒内回答三个问题：
|
||
- 我在哪（地点/时间/风险）
|
||
- 我现在状态如何（生存状态与主要威胁）
|
||
- 我下一步能做什么（行动入口与成本）
|
||
- 避免“信息黑箱”：所有关键数值变化必须可追溯原因
|
||
- 支持 PC / 平板横屏的单屏 HUD 体验，任何时候可暂停/保存
|
||
|
||
## 7.2 信息架构（IA）
|
||
|
||
### 7.2.1 顶层导航
|
||
|
||
推荐采用“主界面一屏 + 抽屉/面板”的结构：
|
||
|
||
- 常驻区：
|
||
- 顶部：时间、地点名、风险提示、灾害提示
|
||
- 左侧/上方：核心状态条（饥饿/口渴/精力/生命/理智/辐射）
|
||
- 右侧/下方：背包摘要（容量、关键补给数量）
|
||
- 主操作区：
|
||
- 地点内容（可做的事）
|
||
- 事件/战斗显示区
|
||
- 日志/信息提示区
|
||
|
||
```mermaid
|
||
flowchart TB
|
||
A[顶部栏：时间/地点/灾害] --> B[状态区：生存状态]
|
||
B --> C[主操作区：地点动作/事件/战斗]
|
||
C --> D[信息区：日志/提示/详情]
|
||
B --> E[背包/仓库面板]
|
||
C --> F[制作/科技面板]
|
||
C --> G[任务面板]
|
||
```
|
||
|
||
对应源文件：[ui-ia.mmd](./diagrams/ui-ia.mmd)
|
||
|
||
### 7.2.2 主要面板
|
||
|
||
- 背包面板：
|
||
- 分类筛选、搜索（可选）
|
||
- 物品详情（来源/用途/效果/交易价值/耐久）
|
||
- 一键整理（按类型/价值/用途排序）
|
||
- 制作面板：
|
||
- 工作台分区（手工/工坊/锻造/烹饪/过滤/医疗/科研）
|
||
- 配方筛选：可制作/缺材料/缺条件
|
||
- 成本预览：材料/时间/精力/副作用
|
||
- 任务面板：
|
||
- 主线/支线/动态任务分组
|
||
- 当前步骤与下一目标
|
||
- 任务影响提示（解锁了什么）
|
||
- 地图面板：
|
||
- 地点图（节点与连接）
|
||
- 每个地点风险、预估耗时、可用服务
|
||
- 路线预估：总耗时与补给消耗
|
||
|
||
## 7.3 关键交互规范
|
||
|
||
### 7.3.1 “行动按钮”的统一规格
|
||
|
||
每个行动入口（采集/翻找/移动/制作/休息/治疗）必须在按钮或悬浮层里显示：
|
||
|
||
- 耗时（分钟）
|
||
- 主要消耗（口渴/精力/耐久/弹药）
|
||
- 风险提示（战斗概率、辐射概率、受伤概率）
|
||
- 产出类型提示（材料/补给/线索）
|
||
|
||
### 7.3.2 事件交互
|
||
|
||
事件 UI 结构：
|
||
|
||
- 文本区：事件描述（支持变量插入，如当前地点名）
|
||
- 选项区：0–4 个选项，置灰不可选并说明原因
|
||
- 结果区：选择后展示结果摘要 + 详细日志入口
|
||
|
||
可选：对“检定类选项”展示成功率区间或影响因素提示（不必暴露全部公式）。
|
||
|
||
### 7.3.3 战斗交互
|
||
|
||
战斗界面必须让玩家看懂：
|
||
|
||
- 距离与射程关系（可视化条）
|
||
- 当前命中率（或“高/中/低”）
|
||
- 本回合可用行动（攻击/防御/前进/后退/逃跑）
|
||
- 行动成本（弹药/精力/耐久）
|
||
|
||
战斗日志：
|
||
|
||
- 每回合输出结构化日志（命中/伤害/减伤/距离变化）
|
||
- 日志可滚动，可复制（用于反馈与 QA）
|
||
|
||
## 7.4 新手引导（Onboarding）
|
||
|
||
建议采用“轻量引导 + 任务驱动学习”：
|
||
|
||
- 第一次打开：
|
||
- 解释核心状态条与时间推进
|
||
- 提示“任何行动都有成本”
|
||
- 前 30 分钟的任务链：
|
||
1. 找水 → 2. 找食物 → 3. 做出第一个工具 → 4. 去交易点 → 5. 解锁第一个科技
|
||
|
||
引导要求：
|
||
|
||
- 不使用大量弹窗打断
|
||
- 以任务提示 + 高亮操作入口为主
|
||
|
||
## 7.5 可用性与无障碍
|
||
|
||
- 触控目标：最小 44px
|
||
- 颜色对比：状态条颜色与背景满足可读性
|
||
- 文本可缩放：移动端支持字体放大
|
||
- 动效：
|
||
- 时间加速/进度条需可取消或可暂停
|
||
- 低性能设备避免大量 DOM 动画
|
||
|
||
## 7.6 通知与日志策略
|
||
|
||
### 7.6.1 消息优先级
|
||
|
||
- P0：死亡/濒死、关键资源耗尽（缺水）、重大剧情选择
|
||
- P1：战斗开始/结束、灾害开始/结束、重要任务推进
|
||
- P2：普通状态阈值变化（饥饿偏低）、制作完成
|
||
- P3：常规资源刷新（仅在详情中可见）
|
||
|
||
### 7.6.2 信息密度控制
|
||
|
||
- 主界面只展示“决策需要的信息”
|
||
- 其余信息通过：
|
||
- 悬浮详情
|
||
- 日志面板
|
||
- 事件详情页
|
||
|
||
## 7.7 多端适配策略
|
||
|
||
- PC：
|
||
- 三栏布局（状态/背包/主操作+信息）
|
||
- 鼠标悬浮展示细节
|
||
- Tablet（横屏）：
|
||
- 保持单屏 HUD，不切成长网页
|
||
- 缩窄三栏宽度，优先保住顶部状态带与底部模式坞站
|
||
- 背包、任务、蓝图通过弹层进入
|
||
- 当前阶段不适配小屏手机：
|
||
- 不为 860px 以下宽度继续补专门的游戏体验设计
|
||
- 若后续启动移动版，再单独设计纵向信息架构
|
||
|
||
## 7.8 界面清单（MVP）
|
||
|
||
- 主界面（地点 + 行动入口 + 日志）
|
||
- 背包/仓库
|
||
- 制作/科技
|
||
- 地图
|
||
- 任务
|
||
- 战斗
|
||
- 事件详情（可选）
|
||
- 设置（音量/文本速度/难度/存档管理）
|