307 lines
32 KiB
Markdown
307 lines
32 KiB
Markdown
# UX Spec: 关卡画面（选路枢纽，Level Map）
|
||
|
||
> **Status**: 定稿版 v2.0（现行——四项设计拍板：底栏状态展示 / 图上点击选路·候选按钮退役 / 放弃二次确认 / 卷轴视口范式〔2026-11-05 用户拍板〕；形态为独立屏；视觉终稿已冻结——视口行为见布局决策 5）
|
||
> **Author**: user + ZCode
|
||
> **Last Updated**: 2026-11-05
|
||
> **Platform Target**: PC (Steam)——Keyboard/Mouse 主，全部操作纯鼠标可完成（同 [battle.md](battle.md)）
|
||
> **Template**: UX Spec
|
||
> **覆盖范围**: 独立屏形态（关卡停点全景）· 入口停点 · 岔路停点 · 单链停点 · 放弃冒险入口
|
||
> **不覆盖**: 节点覆盖层（NodeOverlay——奖励/恢复兑付反馈，spec：[node-reward.md](node-reward.md)）、商店覆盖层（spec：[shop.md](shop.md)）、关卡结算屏（[level-clear.md](level-clear.md)）、战斗屏（[battle.md](battle.md)）
|
||
> **机制权威**: [关卡节点地图](../gdd/systems/冒险循环/关卡节点地图.md)（选路、兑付、停点语义）；图的来源 = [关卡节点图生成](../gdd/systems/冒险循环/关卡节点图生成.md)（参数化长图——只换图的来源与形态，不换本屏的呈现语义；多终点时各终点均带 Boss 标记，标记语义不变、数量随图；图形态随参数变化，布局自适应，形态不进呈现代码）；**系统契约**: [HUD框架](../gdd/systems/表现与支撑/HUD框架.md)（订阅纪律、模态层级、可访问性基线）
|
||
> **生成图随动登记**：入口停点候选数＝入口个数（1 或多，多入口并列呈现，首跳即选从哪个入口进场）；节点数字＝图内句柄 id（非节点深度、非数组序）；生成图深度域 L3 上探至 0–13——卷轴视口范式（布局决策 5）下画布随图生长、屏为窗口，深度不再受屏预算约束（2026-11-05 用户裁：滚动视口案落地、等比缩放案否决；原「超预算」挂账闭合）。
|
||
|
||
---
|
||
|
||
## Purpose & Player Need
|
||
|
||
关卡画面是中循环（关卡内）的枢纽屏。关卡开始即呈现这张图，此后每次兑付确认都回到它再选路——玩家在这里看图、选路、出发，直到关底 Boss 分出胜负。
|
||
|
||
一句话目的：**让「我在图上哪、下一步能去哪、去了会发生什么」一眼可读，选路即出发。**
|
||
|
||
- 节点图本体承载 P4（地牢下探隐喻）：方块地牢观感的整层纵览——当前节点与去路一眼在目，深处支路经卷轴视口拖拽/滚轮可达（布局决策 5）
|
||
- 候选选路口承载 P1（推理的掌控感）：下一步的去向明示（节点类型字面），零自动推进——每一步都是玩家亲手走出来的
|
||
- 底部状态栏承载规划原料：生命、属性与本关已选加成常读，支撑「低血先疗、缺攻先补」一类选路判断（2026-09-27 拍板：底栏 = 状态展示）
|
||
|
||
若此屏缺失或难用：中循环失去锚点（玩家不知道自己走到第几环）；零自动推进沦为「被迫逐步确认」的负担而非掌控感。
|
||
|
||
## Player Context on Arrival
|
||
|
||
- **到达时机**：关卡开始即出图（停点前移——入口不自动进入，第一次选路就是「出发」）；或每次兑付确认后返回（战后回图、奖励/恢复反馈确认后回图、商店覆盖层离开后回图）
|
||
- **到达前刚在做**：上一场战斗的结算画面，或奖励/恢复/商店覆盖层的确认动作
|
||
- **情绪状态**：谋定后动——[art-bible](../art/art-bible.md) §2.7 下探过渡的「纵深的期待」（能量 4/10）；画面应安静可读，不给选路决策添噪
|
||
- **到达方式**：游戏推进送入（屏级切换——独立屏激活期战斗屏整体隐藏）
|
||
|
||
## Navigation Position
|
||
|
||
```
|
||
存档/营地 ──开始冒险──▶ 冒险结构（关卡序列）──▶ 【关卡画面（选路枢纽，本 spec）】
|
||
├─ 选战斗/Boss 节点 → 战斗屏（battle.md）
|
||
├─ 选奖励/恢复节点 → 节点覆盖层（NodeOverlay，本屏域内弹出）
|
||
├─ 选商店节点 → 商店覆盖层（本屏域内弹出）
|
||
└─ Boss 胜利 → 关卡结算（level-clear.md）→ 下一关开始 → 回本屏
|
||
放弃冒险（任意选路停点）→ 冒险落幕 → 返回存档/营地
|
||
```
|
||
|
||
- 上游屏：关卡结算确认（下一关开始）或冒险开始
|
||
- 下游屏：战斗屏 / 节点覆盖层 / 商店覆盖层（三者兑付确认后**一律回本屏**再选路——战后回图）
|
||
- **本屏为独立屏**：激活期**独占呈现**——战斗屏宿主整体隐藏（非暗幕半透、零透出）；选路提交即离开本屏进入所选节点的兑付流程（战斗/Boss 节点切回战斗屏；奖励/恢复/商店节点本屏保持激活，兑付覆盖层在本屏域内叠加弹出，确认后回本屏）
|
||
|
||
## Layout Specification
|
||
|
||
### Information Hierarchy
|
||
|
||
本屏必须传达的全部信息，按注视优先级分六层：
|
||
|
||
1. **节点图本体**（第一注视点）：节点方块（五类型字面：战/赏/疗/王/商）、通道连线、当前位置、可选去路；类型可见性＝邻近 N 层内显示类型，范围外只见结构（机制见[关卡节点地图](../gdd/systems/冒险循环/关卡节点地图.md)）
|
||
2. **候选选路口**：亮金候选通道 + 候选节点亮金描边——「下一步能去哪」的图上双冗余（2026-09-27 拍板：候选按钮退役，图上点击为唯一提交通道）
|
||
3. **常驻语境**（顶栏）：关卡名（第 N 层·名称）、GP 常驻总量（2026-09-26 二轮拍板：GP = 关卡画面常驻总量）
|
||
4. **状态展示**（底栏，2026-09-27 拍板）：生命（当前/上限）、属性（攻击 / 护甲 AC 有效值）、本关已选加成（统一冒险加算区增量）——选路规划原料常读
|
||
5. **边缘动作**：放弃冒险入口（破坏性，危险红族，异位呈现）
|
||
6. **进度语境**：已过/当前/未来三态节点直接读图呈现——节点态即节点链进度呈现载体，**不另设进度条组件**（关卡节点地图 呈现侧口径 2026-09-17 用户拍板）
|
||
|
||
### Layout Zones
|
||
|
||
按 1280×800 基座（2026-09-12 定）。本屏为独立屏独占呈现：屏底（深底背景色 + 石纹底噪〔框材组冻结件，缺位纯色回退〕）铺满，内容三段；节点图区为卷轴视口（布局决策 5）——画布可超屏，屏为窗口。
|
||
|
||
| 区 | 位置与尺寸 | 内容 |
|
||
|---|---|---|
|
||
| **顶栏语境** | 居中横排，图区上方，高约 32px | 左：关卡名（关卡表 `display_name` 行值，如「第二层 · 幽暗地域」）；右：GP 常驻徽章（GP 图标+数字，直角细线数据框——GP 值域超点阵适用档，走 pattern 5 的 When-NOT-to-Use 路线）；HP 归底部状态栏（2026-09-27 拍板完成） |
|
||
| **节点图区** | 居中 | 卷轴视口承载整幅节点图自绘：节点方块 + 通道折线 + 节点态着色 + Boss 紫赤描边。画布随图自适应（**冻结公式不变**：宽 = 70+层深×122+44.5、高 = 52+槽位×58+25+24，下限 620×256），**可超屏**——屏为窗口，视口行为见布局决策 5；通道折线**冻结 2/3/4px**（未点亮石灰 STONE/候选亮金 GOLD_LIT/悬停加粗）；节点方块 52×36 内**节点图标 20px 烘焙 1:1**（♻ kenney 五键：战=弓/赏=桂冠/疗=篝火/王=王冠/商=钱袋，WARM 单色、当前金底转深墨——双色墨制）+ 编号（图内句柄 id）10px 右上角 |
|
||
| **底部状态栏** | 图区下方横排，高约 48px | 左-中：状态数据框组（直角细线，pattern 5 族）——生命（当前/上限 + 迷你血条）、属性（攻击 / 护甲 AC，有效值 + 加成角标）、本关加成（攻+X · 上限+Y · AC+Z，零加成隐藏）；右端：放弃冒险按钮（危险红族文字，与状态数据框保持间距——破坏性确认异位，pattern 7） |
|
||
|
||
### Component Inventory
|
||
|
||
| 组件 | 类型 | 内容 | 交互 | 现有实现锚 |
|
||
|---|---|---|---|---|
|
||
| 关卡名标签 | 文本 | 关卡表 `display_name` 行值（关卡表行读数） | 只读 | 新建（现行标题位升级） |
|
||
| GP 常驻徽章 | 直角细线数据框 | GP 图标 + 数字（冒险钱包读数；刷新经钱包变动信号投影〔gain/buy/clear 三事件〕或写路径回执后重查） | 只读 | 新建（GP 去向拍板承载面） |
|
||
| 节点图画布 | 自绘 Control（卷轴视口承载） | 节点图标（五键 20px 烘焙，双色墨制）+ 编号（图内句柄 id）、通道折线、节点态着色、Boss 紫赤描边+深墨环（BOSS_PURPLE——紫赤本色） | 悬停预承诺 / 点击提交选路（唯一通道）/ 拖拽·滚轮平移视口（布局决策 5） | ✅ 已实装（视觉终稿已落码；视口行为随卷轴范式批落地） |
|
||
| 状态数据框组 | 直角细线数据框 ×3 | 生命（当前/上限 + 迷你血条）、属性（攻击 / 护甲 AC 有效值 + 加成角标）、本关加成（加算区增量列表，零加成隐藏） | 只读 | 新建（2026-09-27 拍板：底栏状态展示） |
|
||
| 放弃冒险按钮 | 按钮（危险红族） | 「放弃冒险（同失败结算——已获大奖励保留）」；二次确认态已拍板（见布局决策 3） | 点击（首击转确认态、二击提交） | ✅ 已实装（可见性归组合根，仅冒险模式开） |
|
||
| 标题行 | 文本 | 停点语境提示（见布局决策 1 三停点标题） | 只读 | ✅ 已实装（措辞已按布局决策 1 改稿） |
|
||
|
||
**布局决策 1 —— 三停点标题定稿**：入口停点语境是「尚未走出第一步」，「继续前进（战斗房）」类措辞与之矛盾。三停点标题：
|
||
|
||
| 停点 | 候选数 | 标题 |
|
||
|---|---|---|
|
||
| 入口停点 | 入口个数（1 或多） | 「出发——选择首个节点」 |
|
||
| 单链停点 | 1 | 「继续前进」 |
|
||
| 岔路停点 | ≥2 | 「选择下一节点」 |
|
||
|
||
**布局决策 2 —— 图上直接点击选路（2026-09-27 拍板）**：候选节点的亮金描边本身是可点目标，悬停预承诺（pattern 4）后点击即提交——**候选按钮整列退役，图上点击为唯一提交通道**。
|
||
|
||
**布局决策 3 —— 放弃冒险二次确认（2026-09-27 拍板）**：放弃 = 整局冒险落幕，不可逆（pattern 7 破坏性确认）。首击转入确认态（按钮文案变「再点一次确认放弃——不可逆」，危险红边框脉冲约 3 秒，超时回落），二击才提交。代价语义（已获大奖励保留、同失败结算）常驻按钮文案。
|
||
|
||
**布局决策 4 —— 底部状态栏（2026-09-27 拍板）**：底栏作为状态展示——生命、属性、本关已选加成三项常读；顶栏保持关卡名 + GP 两件。单一展示面注记：与 [battle.md](battle.md) C 区「奇物列表（预留）」为不同屏的不同展示面——两屏循环口径各自独立（选路规划消费 vs 战斗内决策消费），不构成同屏重复。
|
||
|
||
**布局决策 5 —— 卷轴视口范式（2026-11-05 用户拍板）**：生成图实测深度域 L3 0–13 超出画布屏预算（原挂账「超预算图策略升级路径」），用户裁滚动视口案落地、等比缩放案否决（像素纪律——非整数缩放碰 20px 图标 1:1 与折线 2/3/4px 冻结值）。行为四条：
|
||
|
||
| 行为 | 规格 |
|
||
|---|---|
|
||
| 视口锚点 | 当前节点居中（屏中线 x=640±2）；入口停点尚无当前节点，锚定入口节点组居中 |
|
||
| 视口跟随 | 停点切换与兑付确认回图时，视口平滑滚动至新当前节点（时长 provisional 0.3s，单段缓动）；减动效开＝跳终态（瞬切），同 UiKit.motion 通道 |
|
||
| 手动平移 | 拖拽画布＋滚轮横滚；平移范围 clamp 在画布包络内（不出露屏底空档）；拖拽与图上点击以拖动距离阈值区分（阈值 provisional，实现期定值），拖拽不触发选路提交 |
|
||
| 指引 | 不做缩放、不做缩略图（等比缩放案已否决）；视口边缘 70px 渐隐带＋图区底部居中平移提示 chip（240×30、圆角 6、深底石灰描边、文案 14px——色值随 art-bible 冻结色板，provisional）作「视口外还有内容」的暗示；其余暗示形态（如到达边缘回弹）后置，试玩反馈再定 |
|
||
|
||
视口为纯呈现态：平移位置零核心写、不进存档（重进本屏按锚点规则重新定位）。
|
||
|
||
**视口效果图**（2026-11-05 用户人审通过，内嵌备查；节点类型字与色值为占位示意，终稿以在库 kenney 五键图标与 art-bible §4.1 冻结色板为准）：
|
||
|
||
<svg viewBox="0 0 1280 800" width="100%" style="min-width:720px" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="lmap-viewport-title lmap-viewport-desc">
|
||
<title id="lmap-viewport-title">卷轴视口效果图——第三关岔路停点</title>
|
||
<desc id="lmap-viewport-desc">当前节点居中锚定，画布 1700px 超出 1280px 屏，两侧渐隐与平移提示 chip；深度 0 与 12–13（含 Boss）拖拽滚轮可达。</desc>
|
||
<defs>
|
||
<linearGradient id="lmap-bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#4A3B2A"/><stop offset="1" stop-color="#33291F"/></linearGradient>
|
||
<linearGradient id="lmap-fadeL" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#3A2E22" stop-opacity="0.9"/><stop offset="1" stop-color="#3A2E22" stop-opacity="0"/></linearGradient>
|
||
<linearGradient id="lmap-fadeR" x1="1" y1="0" x2="0" y2="0"><stop offset="0" stop-color="#33291F" stop-opacity="0.9"/><stop offset="1" stop-color="#33291F" stop-opacity="0"/></linearGradient>
|
||
</defs>
|
||
<rect width="1280" height="800" fill="url(#lmap-bg)"/>
|
||
<text x="24" y="24" font-size="16" fill="#E8DCC8" font-weight="500">第三层 · 灰矮人矿城</text>
|
||
<rect x="1140" y="7" width="116" height="25" fill="none" stroke="#8A8578"/><text x="1198" y="24" font-size="14" fill="#E8DCC8" text-anchor="middle">◈ 128</text>
|
||
<text x="640" y="56" font-size="16" fill="#D9CBAE" text-anchor="middle" font-weight="500">选择下一节点</text>
|
||
<g fill="none" stroke="#8A8578" stroke-width="2" opacity="0.75">
|
||
<polyline points="152,311 274,369"/><polyline points="274,369 396,369"/><polyline points="396,369 518,311"/><polyline points="396,369 518,427"/>
|
||
<polyline points="884,253 1006,253"/><polyline points="884,369 1006,369"/><polyline points="1006,369 1128,311"/>
|
||
</g>
|
||
<g fill="none" stroke="#E3C05C" stroke-width="3"><polyline points="640,369 762,311"/><polyline points="640,369 762,427"/></g>
|
||
<g fill="none" stroke="#8A8578" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"><polyline points="1250,369 1280,369"/></g>
|
||
<rect x="0" y="344" width="66" height="50" rx="8" fill="#68562C"/><text x="33" y="374" font-size="14" fill="#2d2a22" text-anchor="middle" font-weight="700">战</text>
|
||
<rect x="115" y="286" width="73" height="50" rx="8" fill="#68562C"/><text x="152" y="316" font-size="14" fill="#2d2a22" text-anchor="middle" font-weight="700">战</text>
|
||
<rect x="237" y="344" width="73" height="50" rx="8" fill="#68562C"/><text x="274" y="374" font-size="14" fill="#2d2a22" text-anchor="middle" font-weight="700">疗</text>
|
||
<rect x="359" y="344" width="73" height="50" rx="8" fill="#68562C"/><text x="396" y="374" font-size="14" fill="#2d2a22" text-anchor="middle" font-weight="700">战</text>
|
||
<rect x="481" y="286" width="73" height="50" rx="8" fill="#68562C"/><text x="518" y="316" font-size="14" fill="#2d2a22" text-anchor="middle" font-weight="700">商</text>
|
||
<rect x="604" y="344" width="73" height="50" rx="8" fill="#C9A22F" stroke="#F0E3B8" stroke-width="2"/><text x="640" y="374" font-size="14" fill="#2d2a22" text-anchor="middle" font-weight="700">战</text>
|
||
<rect x="726" y="286" width="73" height="50" rx="8" fill="#3E362A" stroke="#E3C05C" stroke-width="3"/><text x="762" y="316" font-size="14" fill="#E8DCC8" text-anchor="middle" font-weight="700">赏</text>
|
||
<rect x="726" y="402" width="73" height="50" rx="8" fill="#3E362A" stroke="#E3C05C" stroke-width="3"/><text x="762" y="432" font-size="14" fill="#E8DCC8" text-anchor="middle" font-weight="700">战</text>
|
||
<rect x="848" y="228" width="73" height="50" rx="8" fill="#3E362A"/><text x="884" y="258" font-size="14" fill="#B7AB93" text-anchor="middle">战</text>
|
||
<rect x="848" y="344" width="73" height="50" rx="8" fill="#3E362A"/><text x="884" y="374" font-size="14" fill="#B7AB93" text-anchor="middle">疗</text>
|
||
<rect x="970" y="344" width="73" height="50" rx="8" fill="#3E362A"/><text x="1006" y="374" font-size="14" fill="#B7AB93" text-anchor="middle">战</text>
|
||
<rect x="1092" y="286" width="73" height="50" rx="8" fill="#3E362A"/><text x="1128" y="316" font-size="14" fill="#B7AB93" text-anchor="middle">商</text>
|
||
<rect x="1214" y="344" width="66" height="50" rx="8" fill="#3E362A"/><text x="1247" y="374" font-size="14" fill="#B7AB93" text-anchor="middle">战</text>
|
||
<rect x="0" y="60" width="70" height="680" fill="url(#lmap-fadeL)"/>
|
||
<rect x="1210" y="60" width="70" height="680" fill="url(#lmap-fadeR)"/>
|
||
<rect x="520" y="688" width="240" height="30" rx="6" fill="#2A2118" fill-opacity="0.85" stroke="#8A8578"/>
|
||
<text x="640" y="708" font-size="14" fill="#D9CBAE" text-anchor="middle">◄ 拖拽画布 / 滚轮平移 ►</text>
|
||
<rect x="0" y="744" width="1280" height="56" fill="#2A2118" fill-opacity="0.6"/>
|
||
<rect x="24" y="757" width="63" height="10" rx="5" fill="#B0453A"/>
|
||
<text x="122" y="768" font-size="14" fill="#E8DCC8">生命 14/20</text>
|
||
<text x="230" y="768" font-size="14" fill="#E8DCC8">攻击 6 ⁺2</text>
|
||
<text x="330" y="768" font-size="14" fill="#E8DCC8">AC 12 ⁺1</text>
|
||
<text x="430" y="768" font-size="14" fill="#D9CBAE">本关加成: 攻⁺2 · 上限⁺5 · AC⁺1</text>
|
||
<text x="1256" y="768" font-size="14" fill="#C0454E" text-anchor="end" font-weight="500">放弃冒险</text>
|
||
</svg>
|
||
|
||
像素级视觉判据（效果图随附，写卡与实现基线对照用）：①视口锚点＝当前节点方块中心居屏中线 x=640±2；②画布超窗不缩放——屏缘裁切、图标 20px 1:1 与折线 2/3/4px 原值呈现，屏缘两侧各 70px 渐隐带；③平移提示 chip 图区底部居中 240×30（圆角 6、文案 14px）；④拖拽/滚轮后深度 0 首列与深度 13 末列（含 Boss 紫赤描边）均可达屏内。
|
||
|
||
### ASCII Wireframe
|
||
|
||
```
|
||
1280 × 800 ────────────────────────────────────────────────────────────────────
|
||
│ （独立屏底——战斗屏整体隐藏，零透出） │
|
||
│ 第三层 · 灰矮人矿城 [◈ 128]（GP 常驻徽章） │
|
||
│ 选择下一节点 │
|
||
│ ◄渐隐│ …[战0]─[战3]─[疗6]─●[战9]─◇[赏10]─[疗13]─[战16]─[商19]…│渐隐► │
|
||
│ │ 画布 1700px 超屏（卷轴视口）：当前节点●居中锚定； │
|
||
│ │ 深度 0 与 12–13（含 Boss 紫）视口外，拖拽/滚轮可达 ◇=候选亮金描边 │ │
|
||
│ [◄ 拖拽画布 / 滚轮平移 ►] │
|
||
│ │
|
||
│ HP ▓▓▓░ 14/20 │ 攻击 6 ⁺2 │ 护甲 AC 12 ⁺1 │ 本关加成: 攻⁺2·上限⁺5·AC⁺1 放弃冒险 │
|
||
└──────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
> 图为岔路停点示意（第三关行集，卷轴视口）：已过节点暗金（GOLD_DONE #68562C）、当前节点金（居中锚定）、候选节点亮金描边、Boss 紫赤描边+外缘深墨细环（灰度冗余通道，在视口外深处）；屏缘 70px 渐隐带 + 平移提示 chip。终稿 = 节点图标组（♻ kenney 五键已接线，样张 v1 冻结）+ 通道折线 2/3/4px（已落码）。像素级效果参见布局决策 5 内嵌效果图。
|
||
|
||
---
|
||
|
||
## States & Variants
|
||
|
||
| State / Variant | Trigger | What Changes |
|
||
|---|---|---|
|
||
| **入口停点（默认首态）** | 关卡开始（停点前移） | 标题「出发——选择首个节点」；唯一候选 = 入口节点；图上全部节点为未来态 |
|
||
| **单链停点** | 兑付确认后、恰 1 个下一跳 | 标题「继续前进」；单候选节点图上点击提交（候选按钮已退役——图上点击为唯一通道） |
|
||
| **岔路停点** | 兑付确认后、≥2 个下一跳 | 标题「选择下一节点」；候选节点图上点击提交（候选按钮已退役——图上点击为唯一通道）；亮金通道与候选描边逐一分叉可辨 |
|
||
| **悬停预承诺** | 悬停候选节点 | 该节点亮金描边加粗 + 所属通道增亮 + 光标切指针态；移出即回落（仅预承诺，点击才提交） |
|
||
| **视口跟随** | 停点切换或兑付确认回图（当前节点变化） | 视口平滑滚动至新当前节点居中（provisional 0.3s；减动效跳终态）——布局决策 5 |
|
||
| **手动平移** | 拖拽画布或滚轮横滚 | 视口随动、clamp 画布包络；拖拽不触发选路（拖动距离阈值区分，provisional）；平移位置零核心写、不进存档 |
|
||
| **放弃确认态** | 首击放弃按钮 | 文案转确认语 + 危险红边框脉冲约 3 秒；超时或移出回落；二击提交放弃请求 |
|
||
| **换层进入** | 上一关结算确认 → 新关开始 | 本屏以新关卡数据淡入；屏底世界侧随层进换挡（**换层色板渐变挂点**——§2.7 切片档：只动色相/饱和、明度带归一，level_index→tint 表候选值 = art-bible §6.3 三关方向，终值随色板样张校准） |
|
||
| **减动效** | 设置开关（设置面承载；TunePanel 已退役） | 淡入、描边脉冲等全部 tween 时长减半或跳终态；视口跟随平滑滚动跳终态（瞬切）（UiKit.motion 单点包装，同 battle.md 通道） |
|
||
|
||
**无拒绝子态**：候选提交恒合法（候选集即合法集），本屏无资源面/棋盘面拒绝路径；战斗中放弃由组合根可见性封死（按钮只在选路停点可见——接口契约：战斗中放弃一律拒绝）。
|
||
|
||
---
|
||
|
||
## Interaction Map
|
||
|
||
| 组件 | 动作 | 输入 | 即时反馈 | 结果（经组合根） |
|
||
|---|---|---|---|---|
|
||
| 候选节点（图上，唯一通道） | 提交选路 | 左键 | 悬停预承诺（描边加粗 + 通道增亮 + 指针）→ 点击本屏关闭 | 选路提交 → 关卡推进方受理——到达即兑付，无进入前确认步 |
|
||
| 节点图画布（视口） | 平移视口 | 左键拖拽 / 滚轮横滚 | 视口随动、clamp 画布边界；拖拽超阈值不触发选路 | 纯呈现态——零核心写、不进存档 |
|
||
| 放弃冒险按钮 | 终结整局冒险 | 左键（二击提交——首击转确认态，2026-09-27 布局决策 3） | 危险红族反馈 | 放弃请求 → 组合根走冒险落幕（同失败结算——已获大奖励保留） |
|
||
|
||
**零自动推进纪律**（关卡节点地图 定稿）：本屏是唯一的行进发起口——不选就停在图上；没有任何定时、默认或顺延的自动前进路径。兑付后确认挂各兑付面（战斗总结结算〔settlement-summary.md〕/ 节点覆盖层 / 商店覆盖层离开动作），本屏不重复确认步。
|
||
|
||
---
|
||
|
||
## Data Requirements
|
||
|
||
| Data | Source System | Read / Write | Notes |
|
||
|---|---|---|---|
|
||
| 节点图结构 / 当前节点 / 已到序列 / 候选集 | 关卡推进方只读成文出口：全节点集 / 当前节点 / 已到序列 / 候选集 / 节点编号 / 节点出边 | Read | 呈现只读（关卡节点地图 验收「呈现只读」条）；节点态四色直接读图 |
|
||
| GP 常驻总量 | 冒险钱包读数 | Read | 刷新经钱包变动信号投影（gain/buy/clear 三事件）或写路径回执后重查；冒险收束清零后本屏不可达（收束即离屏） |
|
||
| 关卡名 | 关卡表 `display_name` 行值（关卡表行） | Read | 字段名实现期核对（level.tres 行键 `display_name` 在案） |
|
||
| 生命读数 | 主角当前生命 / 有效生命上限（跨战斗生命携带） | Read | 已拍板（2026-09-27）：底栏状态栏承载 |
|
||
| 属性与本关加成 | 有效攻击 / 有效护甲 / 有效生命上限，以及统一冒险加算区（锻造/大奖励/商店购买/节点奖励同账） | Read | 已拍板：底栏承载；无推送信号——组合根打开本屏 / 兑付确认回执后重查（命令式刷新纪律，同行动经济） |
|
||
| 选路提交 | 关卡推进方 | **Write** | 唯一写路径 = 选路提交 → 组合根 → 关卡推进方受理；本屏零其他写面 |
|
||
| 放弃请求 | 组合根 | **Write** | 放弃意图 → 冒险落幕流程（归冒险结构） |
|
||
|
||
**架构注记**：与 battle.md 同族——UI 不拥有任何游戏状态，全部读经核心只读面，全部写经组合根；呈现层直接订阅的推进信号属 HUD框架 已锁两线之一（战斗结算明细流水 + 关卡节点地图推进信号）。
|
||
|
||
---
|
||
|
||
## Transitions & Animations
|
||
|
||
| 时刻 | 过渡 | 依据 |
|
||
|---|---|---|
|
||
| 打开（进图 / 兑付确认后回图） | 独立屏淡入（约 200ms，同装板淡入档；alpha 淡入非明度变化——§2） | 屏级切换；战斗屏整体隐藏 |
|
||
| 视口跟随（停点切换/回图） | 平滑滚动至新当前节点居中（provisional 300ms 单段缓动；减动效跳终态） | 布局决策 5 |
|
||
| 选路提交 | 本屏关闭，直达所选节点兑付流程 | 到达即兑付（关卡节点地图） |
|
||
| 放弃确认态（拍板落定） | 危险红边框脉冲约 3 秒（单段呼吸，非频闪） | pattern 7；闪烁基线（≤3 次/秒）内 |
|
||
| 减动效 | 上述全部时长减半或跳终态 | HUD框架 可访问性基线 |
|
||
|
||
---
|
||
|
||
## Accessibility
|
||
|
||
无障碍基线权威 = [HUD框架](../gdd/systems/表现与支撑/HUD框架.md)「可访问性基线」节，本屏无新增豁免。呈现侧内建承诺：
|
||
|
||
- **节点态形状冗余**（全局语义红线「无任何信息仅靠色相承载」的合规项）：已过 = 暗金无描边、当前 = 金填充 + 唯一焦点方块、候选 = 亮金粗描边、未来 = 暗底无描边；Boss = 紫赤描边 + 外缘 1px 深墨环（**灰度冗余通道**——紫赤灰度对石纹噪底不可辨）+ 图标冗余。四态在灰度截图下可分类（AC，样张 L2 断言承载）
|
||
- **对比**：节点图标对方块底（双色墨制：暗底态暖白/当前金底深墨，各态 ≥4.5:1）、顶栏数字对底 ≥4.5:1（样张 L3 断言承载）；色值取 art-bible §4.1 冻结色板（已过暗金 = GOLD_DONE #68562C 冻结新值）
|
||
- **字号下限**：节点字形 ≥14px、标题 ≥16px、按钮/徽章 ≥14px（1280×800 基座，像素字体整数倍缩放）
|
||
- **破坏性异位**：放弃按钮与候选按钮分区放置（位置通道，art-bible §4.5 #7）；确认态不依赖色相单独承载（文案 + 脉冲双通道）
|
||
- **纯鼠标**：全部操作纯鼠标可完成；MVP 不做键盘焦点序（同 battle.md）
|
||
|
||
---
|
||
|
||
## Localization Considerations
|
||
|
||
- **中文像素字体随包**（硬前置，同 battle.md）
|
||
- **按钮文案 4 汉字上限**：「放弃冒险」「确认放弃」；按钮宽度按最长文案预留，固定槽高 + clip 兜底
|
||
- **关卡名**：`display_name` 最长 token「第三层 · 灰矮人矿城」（9 字符）——顶栏标签预留 40% 膨胀宽度
|
||
- **数字格式**：全部整数；GP 徽章图标+数字不依赖文本承载语义
|
||
|
||
---
|
||
|
||
## Acceptance Criteria
|
||
|
||
**布局与可读**
|
||
|
||
- [ ] 关卡开始即出图（停点前移语义），入口节点不自动进入；每次兑付确认后回到本屏
|
||
- [ ] 1280×800 与 16:9 全屏下顶栏/图区/动作栏无遮挡、无重叠；节点图经卷轴视口完整可达（拖拽/滚轮后首列与末列含 Boss 均可入屏）——画布不超屏的浅图仍整幅居中无裁切
|
||
- [ ] 节点四态（已过/当前/候选/未来）+ Boss 描边在灰度截图下可分类；色值对 art-bible §4.1 色板在案
|
||
- [ ] 顶栏关卡名与 GP 常驻徽章可见、读数与关卡推进方现值一致（GP 经 gain/buy/clear 事件刷新）
|
||
|
||
**交互与流程**
|
||
|
||
- [ ] 三停点标题按布局决策 1 呈现，入口停点不出现「继续前进（战斗房）」措辞
|
||
- [ ] 候选提交经组合根唯一写路径（选路提交 → 关卡推进方受理），到达即兑付；零自动推进（无任何不选而行的路径）
|
||
- [ ] 图上点击为唯一选路提交通道（候选按钮退役，2026-09-27 拍板）；悬停预承诺反馈可见
|
||
- [ ] 视口跟随：停点切换与兑付回图后当前节点居中（屏中线 x=640±2）；平滑滚动呈现，减动效开时瞬切
|
||
- [ ] 手动平移：拖拽与滚轮均移动视口且 clamp 画布边界；拖拽不触发选路提交；平移位置零核心写（不进存档）
|
||
- [ ] 视口指引：屏缘 70px 渐隐带与平移提示 chip 呈现（像素级判据①–④见布局决策 5 效果图）
|
||
- [ ] 底部状态栏三组读数可见且与关卡推进方现值一致（生命当前/上限、攻击/AC 有效值、本关加成增量——零加成隐藏）；兑付确认返回后读数刷新
|
||
- [ ] 放弃按钮仅冒险模式可见（调试两层不可达）；单击不提交、确认态超时回落、二击才终结（已拍板）
|
||
- [ ] 放弃后走冒险落幕（同失败结算），已获大奖励保留语义可见
|
||
|
||
**模态与测试**
|
||
|
||
- [ ] **独立性断言**：本屏激活期战斗屏宿主整体隐藏（整屏隐藏级互斥，零透出）；选路提交至战斗节点后战斗屏恢复；兑付覆盖层（节点/商店）关闭后本屏恢复——场景级断言
|
||
- [ ] 场景级 headless 测试：真实实例化本屏 + 驱动选路全程 + 断言零脚本错误（场景探针家族扩展）
|
||
- [ ] 中文渲染无豆腐块；像素字体整数倍缩放；全部操作纯鼠标可完成
|
||
|
||
---
|
||
|
||
## Open Questions
|
||
|
||
**已完成（2026-09-27 用户拍板）**：① 底栏 = 状态展示（生命 + 属性 + 本关已选加成）；② 图上直接点击选路，候选按钮退役；③ 放弃冒险二次确认。
|
||
|
||
**已完成（2026-09-28）**：④ **视觉终稿**——节点图标形制/通道质感/画布公式/底栏数据框样式/屏底以关卡画面样张 v1 冻结落码。
|
||
|
||
**已完成（2026-11-05 用户拍板）**：⑤ **卷轴视口范式**——跟随＋拖拽＋滚轮、平滑滚动（减动效瞬切）、当前节点居中锚；「图包络 ≤ 屏预算」约束随卷轴范式退役（画布随图生长，规模归参数档——关卡节点图生成 v1.5 参数契约节）；等比缩放案否决（像素纪律）。效果图人审通过并内嵌布局决策 5。
|
||
|
||
---
|
||
|
||
## 上游义务对照表
|
||
|
||
| 义务源 | 义务 | 本 spec 承载落点 |
|
||
|---|---|---|
|
||
| [关卡节点地图](../gdd/systems/冒险循环/关卡节点地图.md) | 呈现侧口径：方块地牢观感、节点态四色、不另设进度条 | Information Hierarchy 第 5 层 + 图区组件行 |
|
||
| 关卡节点地图 | 零自动推进、兑付后确认、选路只读 | Interaction Map + Data Requirements + AC |
|
||
| 关卡节点地图 | 呈现只读（节点图/当前位置/可选下一跳对呈现层只读可见） | Data Requirements 只读出口清单 |
|
||
| [HUD框架](../gdd/systems/表现与支撑/HUD框架.md) | 模态 overlay 层级纪律、订阅纪律（推进信号两线之一） | Navigation Position + Data Requirements 架构注记 |
|
||
| HUD框架 | 可访问性基线全量（对比/色弱/字号/闪烁/减动效/纯鼠标/中文字体） | Accessibility |
|
||
| [battle.md](battle.md) OQ14 二轮拍板 | GP = 关卡画面常驻总量 | 顶栏 GP 常驻徽章 |
|
||
| [art-bible](../art/art-bible.md) | 方块地牢观感（§3.2 圆角方形世界侧）、色板冻结（§4.1）、半拟物（§7.1）、明度分层（§2） | 图区组件 + Accessibility 对比条 |
|
||
|
||
---
|