TinyWaste/docs/07-UX与界面信息架构.md

07 UX 与界面信息架构

本文档面向 UI/UX、客户端与策划，定义信息架构、主要界面、关键交互与可用性约束。该项目的 UI 是“游戏本体”：核心玩法发生在信息读取与决策上，因此 UI 的清晰度与节奏控制优先级极高。

7.1 设计目标

• 让玩家在 5 秒内回答三个问题：
  • 我在哪（地点/时间/风险）
  • 我现在状态如何（生存状态与主要威胁）
  • 我下一步能做什么（行动入口与成本）
• 避免“信息黑箱”：所有关键数值变化必须可追溯原因
• 支持 PC / 平板横屏的单屏 HUD 体验，任何时候可暂停/保存

7.2 信息架构（IA）

7.2.1 顶层导航

推荐采用“主界面一屏 + 抽屉/面板”的结构：

• 常驻区：
  • 顶部：时间、地点名、风险提示、灾害提示
  • 左侧/上方：核心状态条（饥饿/口渴/精力/生命/理智/辐射）
  • 右侧/下方：背包摘要（容量、关键补给数量）
• 主操作区：
  • 地点内容（可做的事）
  • 事件/战斗显示区
  • 日志/信息提示区

flowchart TB
  A[顶部栏：时间/地点/灾害] --> B[状态区：生存状态]
  B --> C[主操作区：地点动作/事件/战斗]
  C --> D[信息区：日志/提示/详情]
  B --> E[背包/仓库面板]
  C --> F[制作/科技面板]
  C --> G[任务面板]

对应源文件：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）

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