# 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）

- 主界面（地点 + 行动入口 + 日志）
- 背包/仓库
- 制作/科技
- 地图
- 任务
- 战斗
- 事件详情（可选）
- 设置（音量/文本速度/难度/存档管理）
