№ · 完成设计 CH.06.22
主页 · ✅ 完成设计 · 游戏启动与多周目系统UIUX设计文档

游戏启动与多周目系统UIUX设计文档

📅 2026-06-22 · 📦 12.5 KB · ✅ 完成设计 · 📝 MD 文档 🏷️ Buff🏷️ 经济🏷️ 设计🏷️ 联机🏷️ 终局

基于《同福客栈》已有的美术风格（米黄色/红褐色古风调色盘、木质宣纸UI、模拟经营与WebRTC联机功能），围绕**“本地化账号（全局成就）”与“多周目（存档/传承）”**核心玩法，为您提供游戏启动界面的交互设计及横板、竖版UI/UX布局设计方案。

《同福客栈》游戏启动与多周目系统 UI/UX 设计文档 (V1.0)

一、 游戏启动界面（Start Menu）交互与逻辑设计

由于游戏采用纯客户端存储（LocalStorage），无中心服务器。启动界面需要兼顾**“继续经营（多槽位）”、“全局账号积累（传承/成就）”以及“数据防丢安全（导入导出）”**三大诉求。

1.1 视觉风格定位

  • 色调：沿用已有设计的米黄色背景（#fbf6ec）、深红褐色木质包边（#3e1d13）、金黄色点缀与水墨微晕。
  • 意境：关中客栈的清晨。晨光微熹，一块斑驳的“同福客栈”木质大门横跨屏幕。

1.2 核心功能版块

启动界面不进行强制分屏，而是采用**“主柜台”**的设计隐喻，将功能拆分为：

  1. 账房挂牌（存档槽位）：展示 3 个独立周目存档，支持继续、开启新周目、或主动结业结算。
  2. 客栈遗珍（传承商店）：使用跨周目货币“江湖阅历”兑换永久或单次Buff。
  3. 江湖绘卷（成就墙）：以画卷形式展示已解锁的全局成就及永久被动加成。
  4. 数据行囊（导入/导出）：防止缓存丢失的本地数据双向备份通道。

二、 横版（Landscape）UI/UX 布局设计（PC/Web端）

横版设计承接图一的双栏/多栏栅格化视觉风格。左侧为核心槽位操作区，右侧为全局系统页签区。

2.1 整体线框布局

┌─────────────────────────────────────────────────────────────────────────────────────────┐ │ [同福客栈 LOGO] 累计阅历: 2,500 点 | 全局成就: 12/40 [行囊备份]│ ├─────────────────────────────────────────────────┬───────────────────────────────────────┤ │ │ [ 全局页签: 📜 江湖绘卷 | 🏮 传承商店 ] │ │ 【 掌柜柜台 - 经营账簿（存档槽位） 】 │ │ │ │ ┌───────────────────────────────────┐ │ │ ┌───────────────────────────────────────────┐ │ │ 📜 江湖绘卷 (已激活永久被动) │ │ │ │ 📂 账簿一（第 3 周目） - [ 经营中 ] │ │ │ │ │ │ │ 进度：第 624 日 · 傍晚 | 资金：2.86 京文 │ │ │ - [税务楷模] 衙门税收 -10% │ │ │ │ 状态：[天降财神 Buff 激活中] │ │ │ - [降龙传人] 乞丐不堵门 │ │ │ │ [继续经营] [结业结算] │ │ │ │ │ │ └───────────────────────────────────────────┘ │ │ 🏮 传承商店 (阅历余额: 2500) │ │ │ ┌───────────────────────────────────────────┐ │ │ │ │ │ │ 📂 账簿二（第 1 周目） - [ 待结算 ] │ │ │ 🛒 购买：[下局银两+500] (消耗 50) │ │ │ │ 终局：【朝廷御用驿站】(1.2x 阅历系数) │ │ │ 🛒 购买：[永久解锁-小六] (消耗 800) │ │ │ │ [金算盘结算(可得350阅历)] │ │ └───────────────────────────────────┘ │ │ └───────────────────────────────────────────┘ │ │ │ ┌───────────────────────────────────────────┐ │ │ │ │ ➕ 空闲账簿三 - [ 新周目 ] │ │ │ │ │ 尚未开启新的江湖故事 │ │ │ │ │ [开启新周目] │ │ │ │ └───────────────────────────────────────────┘ │ [WebRTC 快速联机通道] │ └─────────────────────────────────────────────────┴───────────────────────────────────────┘

2.2 UI 细节设计与交互体验 (UX)

  • 存档槽位状态机显性化：
    • 经营中卡片：采用淡绿色微晕，右侧放置醒目的深红褐色“继续经营”按钮。新增“结业结算”小按钮（允许玩家在未达 60 天时主动结业，提走阅历折算）。
    • 待结算卡片：卡片边缘带有金黄色波纹流光。点击“金算盘结算”时，触发一小段金币坠落的音效与水墨特效，计算转换公式，清空该槽位并将阅历点注入顶端全局账户。
    • 空闲卡片：卡片虚线包边，底色暗淡。点击“开启新周目”时，不立刻进入游戏，而是右侧面板无缝切换为“天命挑选器”，允许玩家用阅历购买初始携带特权后再点火开张。
  • 右侧双页签切换（Tabs）：
    • 使用木质书签挂件的形式，点击时伴随清脆的“翻书”纸张摩擦声。
    • “江湖绘卷”采用卷轴铺展样式，已解锁的成就是带色彩的工笔插画，未解锁的则是黑白剪影，悬停显示达成线索。

三、 竖版（Portrait）UI/UX 布局设计（移动端）

竖版设计承接图二的单栏、上下堆叠、卡片流式布局。保证玩家能单手握持时，仅靠大拇指即可完成“选档-买特权-开张”的全套操作。

3.1 整体线框布局

┌──────────────────────────────────────────┐ │ (同福客栈) v1.15.1 [⚙️ 数据备份] │ ├──────────────────────────────────────────┤ │ 👤 全局账号信息 │ │ 江湖阅历: 🏮 2,500 点 | 达成成就: 🏆 12/40│ ├──────────────────────────────────────────┤ │ │ │ 【 经营账簿（选择槽位） 】 │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ 📂 账簿一（第 3 周目） - [ 经营中 ] │ │ │ │ 624日·傍晚 | 资金: 2.86京文 │ │ │ │ ──────────────────────────────────── │ │ │ │ [结业结算] [继续经营] │ │ │ └──────────────────────────────────────┘ │ │ ┌──────────────────────────────────────┐ │ │ │ 📂 账簿二（第 1 周目） - [ 待结算 ] │ │ │ │ 达成终局: 【朝廷御用驿站】 │ │ │ │ ──────────────────────────────────── │ │ │ │ [✨ 金算盘结算 (可得350阅历)] │ │ │ └──────────────────────────────────────┘ │ │ ┌──────────────────────────────────────┐ │ │ │ ➕ 账簿三 - [ 新周目 ] │ │ │ │ 空闲槽位，等待大掌柜开张 │ │ │ │ ──────────────────────────────────── │ │ │ │ [开启新周目] │ │ │ └──────────────────────────────────────┘ │ │ │ ├──────────────────────────────────────────┤ │ [📜 江湖绘卷] [🏮 传承商店] [🎨 换皮] │ ◄── 底部固定全局导航 (底部 Tab 栏) └──────────────────────────────────────────┘

3.2 UI 细节设计与交互体验 (UX)

  • 指尖安全区设计：
    • 高频交互按钮（“继续经营”、“金算盘结算”、“开启新周目”）均放置在屏幕中下段（拇指热区范围内），避免用户握持手机时需要将手移至顶部触控。
  • 底部固定导航栏 (Bottom Tab Navigation)：
    • 竖版界面下方固定一排常驻菜单（江湖绘卷、传承商店、皮肤外观）。
    • 点击“传承商店”时，系统从屏幕下方拉起一个古风抽屉式弹窗（Half-Screen Modal）。玩家在不离开当前槽位列表的前提下，可以滑动浏览商品。
  • 横竖屏自适应动效：
    • 若玩家在移动端旋转屏幕，UI 骨架屏（Skeleton）会以卡片为单位，从竖向单列布局流式平铺为横向双列布局，过渡动画不打断背景音乐播放。

四、 本地化无服务器环境下的 UX 特色功能设计

由于游戏没有中心服务器，在设计启动界面时，必须在前端加入以下 UX 辅助设计，以保护玩家的数据资产并提升体验：

4.1 醒目的“行囊备份（数据导入导出）”浮窗

  • 触发位置：横版右上角、竖版右上方，设计为一个**“皮革行囊”**图标。
  • 交互逻辑：
    1. 点击后弹窗展示两个竹简形按钮：【打包行囊（导出）】与【解开行囊（导入）】。
    2. 点击【打包行囊】，系统会自动将 GlobalProfile 和 3 个 SaveSlot 序列化并生成带有安全校验签名的 Base64 代码，一键复制至系统剪贴板，并提示：“客栈账簿已打包。请妥善保存在您本地的记事本中，防止浏览器清理缓存导致客栈充公！”
    3. 点击【解开行囊】，提供文本框供玩家粘贴 Base64 代码。导入时进行签名安全校验，校验成功后无缝刷新页面加载客栈。

4.2 首次进入游戏的“天命传承”交互流程

当玩家点击“空闲账簿”开启新周目时，系统不直接进入加载页，而是引导至一个仪式感极强的“开张准备”流程：

  1. 第一步：取字号（客栈名默认“同福客栈”，玩家可消耗阅历购买并自定义客栈牌匾字号）。
  2. 第二步：带随身行囊（选购下一周目单次Buff）。界面显示玩家当前拥有的“江湖阅历”余额，玩家可以勾选“下局初始资金 +500文”、“小贝开局携带3串糖葫芦”等特权。勾选时，底部会自动显示剩余余额。
  3. 第三步：挑战词条选择。可选“重税时代（税收+50%，通关阅历+15%）”，满足硬核玩家挑战欲。
  4. 第四步：按手印开张。屏幕中央出现一张写着“关中七侠镇同福客栈开张契约”的宣纸，玩家点击或在手机屏幕上按压印章，触发墨迹晕开效果，正式转场进入游戏内大堂。