diff options
Diffstat (limited to 'docs/design/ui-gap-20260928.md')
| -rw-r--r-- | docs/design/ui-gap-20260928.md | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/docs/design/ui-gap-20260928.md b/docs/design/ui-gap-20260928.md new file mode 100644 index 0000000..e08e869 --- /dev/null +++ b/docs/design/ui-gap-20260928.md @@ -0,0 +1,63 @@ +# 启动/主菜单/HUD 与用户标准差距审计(P41,2026-09-28) + +> 本文件仅为审计与候选清单,**本单不实现任何 UI 改动**,供 Hermes 选择后续切片。 +> 审计依据:现有源码(`LaunchScreen.fs` / `TitleScreen.fs` / `MenuState.fs` / `HudLayout.fs` / +> `Game.fs` 的 `DrawSplash` / `DrawMenu` / `DrawWorldView`)与已录证据 +> `docs/evidence/p38-splash-1.png`、`p38-splash-2-menu.png`、`p38-hud-day.png`、 +> `p38-hud-night.png`、`p38-hud-closeup-2x.png`。 + +用户标准(三项):① 精美启动动画;② 无大黑块;③ 星露谷式布局。 + +## 一、现状(可核对事实) + +### 启动动画(LaunchScreen) +- 时长固定 `durationFrames = 150`(60Hz 约 2.5s),标题淡入 `fadeInFrames = 45`,全程帧计数纯函数、确定性可复现。 +- 图层:5 段天色带 → 屋脊/屋檐剪影随暗幕上浮 → 水面色带 → 中文主标题「江南水乡」(投影+亮面,淡入上浮)→ 英文副标题 → 底部「ESC 或 空格 跳过」呼吸提示;整屏暗幕 1→0 退场。 +- **无大黑块**:色带 + 剪影 + 窄条提示,结构上不会整屏纯黑;`check-no-white-blocks.py` 亦覆盖白块。 + +### 主菜单(TitleScreen / MenuState) +- 复刻启动画面的静态背景(同色带/屋脊/水面色带),右侧单一面板列出条目;游标独立列避免压字。 +- 6 个页面:MainMenu / OccupationSelect / Settings / Controls / LoadError / Playing。 +- 交互仅键盘(方向/回车/Esc),无鼠标、无手柄;菜单本身**无动效**(无入场滑动、无选中脉冲、无环境动画);除启动淡入外背景完全静止。 + +### HUD(HudLayout / DrawWorldView) +- 顶部单条窄带 `barHeight = 36`,常驻 5 段:时段/时间/倍速/体力/钱币;每段为 7x7 原创点阵图标(`iconScale = 2`)+ 文字,数值取自真实世界状态。 +- **无底部快捷栏/物品栏、无背包网格、无右上日历钟卡、无体力条形图、无头像对话框**;世界内提示是 `FloatingPrompt` 的纯文字暗底小条。 + +## 二、差距清单(对照三项标准) + +| # | 标准 | 差距 | 影响面 | +|---|------|------|--------| +| G1 | 精美启动动画 | 启动仅为「色带+屋脊+文字」的淡入,无环境动效(水面涟漪/灯笼呼吸/云影/视差);信息密度低、无品牌/序列帧层次 | 首屏观感 | +| G2 | 星露谷式布局 | HUD 仅顶部纯文字条;缺底部 hotbar、物品/背包网格、右上日历钟卡、体力条形图;布局与星露谷差异大 | 常驻可玩观感 | +| G3 | 星露谷式布局 | 对话/交互仅 `FloatingPrompt` 文字小条,缺头像框+名字+九宫格对话框 | 叙事/交互观感 | +| G4 | 精美启动动画 | 主菜单背景静止、无环境动效,选中态无脉冲/滑动;与启动画面割裂 | 首屏→菜单过渡 | +| G5 | 无大黑块(已基本达标) | 无已知黑块;潜在风险:菜单面板/提示条在极端字号或宽高比下留白偏大,非黑块但显空 | 边缘分辨率 | + +## 三、候选改进(按「观感收益 / 实现成本」排序,供 Hermes 选) + +1. **C1 菜单/启动环境动效(最高优先)** + 在现有 splash + 菜单背景上叠加纯函数的环境动效:水面逐格涟漪、灯笼呼吸光晕、屋脊上方缓慢视差/云影。 + - 复用现有 `waterFrameTickAt` / `lanternGlowLayers`,零新素材;帧计数纯函数保持确定性,便于回归。 + - 收益:直接命中「精美启动动画」,且同一实现同时改善主菜单静止感。 +2. **C2 HUD 星露谷化:右上日历钟卡 + 图形化体力条 + 底部 10 格 hotbar** + 保留顶部窄带或改为右上角卡片(季节/日/时段/时钟),体力改条形图,底部加空格键位的快捷栏(先占位图标)。 + - 纯布局/点阵扩展,走 `HudLayout` 纯模型 + 回归测试;不引入外部素材。 + - 收益:最大程度贴近星露谷布局;成本中等。 +3. **C3 对话框升级:头像框 + 名字牌 + 九宫格对话框** + 用现有角色 atlas 取头像切片,`FloatingPrompt` 升级为带边框/名字的对话框,保留纯函数布局与回归。 + - 收益:叙事观感显著;成本中高(需角色头像定位)。 +4. **C4 启动动画加层:村民剪影视差 + 序列帧/信息层** + 在启动画面加入岸边村民剪影与灯笼微动,或 2-3 段镜头推进;可配合短序章。 + - 收益:进一步「精美」;成本中,且需注意不引入黑块。 +5. **C5 菜单交互反馈与输入扩展(鼠标/手柄 + 选中脉冲/滑动)** + 选中态加脉冲与滑动、进入/返回加动效;补充鼠标 hover/点击与手柄导航。 + - 收益:手感与完成度;成本中,需改 `MenuState`/输入层。 + +### 建议排序理由 +C1 以最低成本同时改善启动与菜单观感,应先行;C2 是「星露谷式布局」的核心缺口,建议紧随;C3/C4/C5 按叙事优先级与交互完整度后续排期。 + +## 四、验收建议(后续切片) +- 像素级:`check-no-white-blocks.py` 继续覆盖新帧;环境动效须为帧计数纯函数(同参逐字节可复现)。 +- 布局级:`HudLayout`/`TitleScreen` 纯模型新增回归断言(矩形不重叠、段位不越界)。 +- 视觉级:出 `docs/evidence/p41-*` 三帧(splash/菜单/HUD)供 4x 裁剪 vision 判读。 |
