存读档与多周目交互设计规范

为了让玩家在浏览器端（纯本地化运行）拥有流畅、安全且符合《武林外传》市井江湖世界观的游玩体验，以下针对启动加载、继续、存读档、重开档以及多周目传承的详细 UI/UX 交互与逻辑设计方案。

《同福客栈》存读档与多周目交互设计规范 (UI/UX)

本设计围绕**“账本（存档）”与“账目结算（多周目）”**的概念展开，旨在将底层单调的数据存取行为包装为客栈账房对账的江湖沉浸式体验。

一、 浏览器启动与首次加载（Launch & Loading UX）

在无中心服务器的游戏环境下，启动界面的核心UX任务是：快速检测数据完整性、降低返回玩家的进入阻力（Friction）、建立信任感。

1.1 加载页（Loading Screen）设计

• 视觉隐喻：古风宣纸背景。中间为一根扁担，两个水墨画风的木桶悬挂两端。随着资源加载进度（0% - 100%），水桶逐渐装满并向下沉，扁担微微弯曲。
• 文案包装：加载条下方循环显示趣味小贴士（如：“老白正在擦桌子...”、“大嘴正在尝试研发炭烤八爪鱼...”、“秀才正在清点账目...”）。
• 静音启动（Mute by Default）：由于浏览器对自动播放音频的限制，首次打开默认静音，右上角显示“喇叭（静音）”图标，点击后淡入游戏经典BGM，避免给用户造成惊扰。

1.2 快速归来（Quick Resume）机制

加载完成后，系统自动扫描 localStorage 中的存档状态：

• 新玩家（首次打开）：系统直接跳转至剧情序幕（掌柜乘轿子落魄来到七侠镇），序幕结束后自动进入空闲账簿界面。
• 老玩家（有未完成的经营档）：
  • 加载完毕后，大堂背景上方浮现一个醒目的红褐色大按钮：「掌柜回店 / 继续经营」。
  • UX 优化点：直接点击该按钮可跳过主菜单，以单击（Single-tap）方式秒进最近一次游玩的存档（默认加载 lastSavedSlot），最大化缩短挂机玩家的返回时间。
  • 在下方提供小字按钮：“返回大账台”（进入多存档选择界面）。

二、 存档（Save）与 自动记账 逻辑

在 Web 端，玩家随时可能关闭标签页、清理浏览器缓存或遭遇突发浏览器闪退。因此，无感知的自动存档为主，手动的“立此存照（备份）”为辅。

2.1 自动记账（Background Autosave）

• 时间触发：每 10 秒向 LocalStorage 写入一次当前槽位的增量数据。
• 事件触发：当玩家点击升级设施、解锁菜谱、雇用员工、或获得大量货币（如结账）时，触发即时存盘。
• 页面卸载触发：绑定浏览器的 window.onbeforeunload 事件，在玩家关闭标签页、按 F5 刷新或杀进程的瞬间，强制执行一次全量存盘。
• UI 反馈：在游戏界面右上角，设计一个极小、半透明的红色木质印章。每当自动存盘成功，印章轻轻盖下，显示**“已记账”**水墨字样，0.5秒后渐隐。

2.2 手动记账（立此存照 / Backup Save）

模拟经营玩家常有在做重大决策前（如豪掷千金采购食材、挑战黑道高手前）“存盘留底”的习惯。

• 入口设计：游戏右侧菜单中的**【账本】** \rightarrow 【立此存照】。
• 机制：每个存档槽位除“自动档”外，额外提供一个**“备忘手抄本（手动档）”**。玩家手动保存会覆盖此手抄本。
• UX 提示：保存时弹窗提示：“今日账目已抄录于备忘本。若后续经营不善，可随时翻阅此页重头来过。”

三、 继续游戏与读档（Load）交互设计

读档界面即为游戏的主启动界面。在视觉上设计为账房柜台后面的**“账簿悬挂架”**（木质牌挂）。

┌──────────────────────────────────────────────────────────┐ │ 账房重地 · 账簿架 (Slot Select) │ ├──────────────────────────────────────────────────────────┤ │ [ 挂牌一 ] ─────────────────────────────────────────── │ │ ┌────────────────────────────────────────────────────┐ │ │ │ 第 3 周目 - 经营中 [ 自动档: 624日 · 傍晚 ] │ │ │ │ 银两: 2.86京文 | 口碑: 2002 点 | 健康分: 99 │ │ │ │ ────────────────────────────────────────────────── │ │ │ │ [📂 读取自动档] [📖 翻阅备忘录] [结业结算(阅历)] │ │ │ └────────────────────────────────────────────────────┘ │ │ [ 挂牌二 ] ─────────────────────────────────────────── │ │ ┌────────────────────────────────────────────────────┐ │ │ │ ➕ 空闲账簿 │ │ │ │ 尚未开启新的江湖故事... │ │ │ │ ────────────────────────────────────────────────── │ │ │ │ [ 🔑 挑选天命·开启新周目 ] │ │ │ └────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────┘

3.1 读档交互逻辑

1. 自动档优先：点击账簿卡片本身或【读取自动档】，直接进入最近一次自动存盘的营业状态。
2. 备忘本（手动档）加载：点击【翻阅备忘录】，系统弹窗展示手动存盘的时间与数据，确认后覆盖当前自动档进度。
3. 游戏内“读档/回溯”：
   • 在游戏内点击【账本】 \rightarrow 【回溯备忘录】。
   • 由于回溯代表放弃今日的部分营业额，系统会弹出确认框并摇晃算盘，伴随散落的算珠声提示：“账目回溯后，今日已产生的流水将被撕毁，确定要翻阅昨日备忘本吗？”。

四、 重开档与删档（Reset & Delete）设计

在游戏运营中，必须严格区分**“良性重开（周目结业转化阅历）”与“恶意删档（格式化彻底清空）”，并在交互上对后者设置极高的“阻尼感（UX Friction）”**以防止误操作。

4.1 主动结业（良性重开 / Soft Reset）

• 当玩家发现经营不善、难以维持时，无需彻底删档。可随时在账簿架点击**【结业结算】**。
• 交互逻辑：进入结算动画，展示当前天数与资产，按公式转换为全局“江湖阅历”，清空该单局槽位。这是一种鼓励性质的重开，不让玩家的努力白费。

4.2 撕毁账簿（彻底删档 / Hard Reset）

如果玩家仅仅是希望清空某个槽位重来，不进行阅历转化，可点击卡片角落不起眼的“垃圾桶”或“撕毁”图标。

• 安全防御交互设计（防手抖）：
  • 第一次点击：按钮变为倒计时（3秒内不可点，防止连点）。
  • 第二次点击：弹出红色高警示度弹窗（宣纸上印着一个血红色的“拆”或“毁”字）。
  • 终极阻尼判定：玩家必须在文本输入框中手动输入“额滴神呀”（或“同福客栈”），下方的【确认撕毁】按钮才会由灰变红并解锁。
  • 音效与视觉：点击确认后，屏幕上出现**“账本被撕碎”**的裂纹动画，伴随刺耳的“啦”撕纸声，碎纸屑飘落，卡片复原为空闲状态。

五、 多周目传承（New Game Plus）选择流程设计

当玩家在一个存档中达成任何一种结局（通关或主动结业），系统将自动引导玩家进入多周目传承闭环，流程如下：

步骤 1: 达成终局 ──► 步骤 2: 阅历结算 ──► 步骤 3: 传承商店 ──► 步骤 4: 天命词条 ──► 步骤 5: 开启新篇章

5.1 步骤 2：金算盘阅历结算（The Settlement）

• 界面中央出现一个巨大的红木金算盘，算珠自动飞速上下拨动，伴随噼里啪啦的清脆响声。
• 算盘下方逐行显示折算清单：
  • 账上余银：2.86 京文 \rightarrow 折合阅历 180 点
  • 结业健康：99 分 \rightarrow 折合阅历 198 点
  • 终局达成：【朝廷御用】 \rightarrow 乘数系数 1.2x
• 结算总额：金币堆叠特效，最终大字弹出：“本次共获得江湖阅历: 🏮 453点”。点击后，阅历注入顶部的全局账户。

5.2 步骤 3 & 4：传承商店与天命词条选择 (NG+ Build Panel)

在选择好空闲槽位、准备开启新周目时，界面切换为**“开张采购单（天命面板）”**。

┌────────────────────────────────────────────────────────┐ │ 🏮 开张准备 - 天命挑选清单 │ ├────────────────────────────────────────────────────────┤ │ 账户阅历余额: 2,500 点 │ │ │ │ [ 选购带入下周目的单次物资 ] │ │ ▢ [铜板行囊]：下局初始银两 +500 两 (消耗: 50 点) │ │ ▢ [百年老汤]：后厨初始解锁3道经典菜 (消耗: 80 点) │ │ │ │ [ 挑战词条（增加通关阅历倍率） ] │ │ ▢ [重税时代]：税收+50% (通关阅历 +15%) │ │ ▢ [盗贼猖獗]：安保消耗翻倍 (通关阅历 +20%) │ │ │ │ 最终预计阅历倍率: 1.0x ──► 1.35x │ │ │ │ [ ✍️ 签字画押，开张营业！ ] │ └────────────────────────────────────────────────────────┘

• 交互逻辑：玩家勾选特权和词条时，右侧的“最终预计阅历倍率”和“阅历消费额”会进行实时动态伸缩动画。
• 按手印进场：最后，玩家点击【签字画押】按钮。界面上盖下一个红色的客栈公章，伴随喜庆的鞭炮声和佟掌柜的经典语音（“同福客栈开张喽——！”），画面淡入客栈清晨大堂，新周目正式开启。