# 07 UX 与界面信息架构 本文档面向 UI/UX、客户端与策划,定义信息架构、主要界面、关键交互与可用性约束。该项目的 UI 是“游戏本体”:核心玩法发生在信息读取与决策上,因此 UI 的清晰度与节奏控制优先级极高。 ## 7.1 设计目标 - 让玩家在 5 秒内回答三个问题: - 我在哪(地点/时间/风险) - 我现在状态如何(生存状态与主要威胁) - 我下一步能做什么(行动入口与成本) - 避免“信息黑箱”:所有关键数值变化必须可追溯原因 - 支持碎片化:移动端单手可操作,任何时候可暂停/保存 ## 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: - 三栏布局(状态/背包/主操作+信息) - 鼠标悬浮展示细节 - Mobile: - 单栏纵向布局 - 背包与详情用抽屉/底部弹层 - 长按替代悬浮 ## 7.8 界面清单(MVP) - 主界面(地点 + 行动入口 + 日志) - 背包/仓库 - 制作/科技 - 地图 - 任务 - 战斗 - 事件详情(可选) - 设置(音量/文本速度/难度/存档管理)