# 《快上船！》UI 设计需求文档（Design Brief）

> 提交对象：AI 设计平台
> 版本：v1.0 · 2026-07 · 对应 free/19 · gameId `g23_shangchuan`
> 玩法参照：[demo.html](demo.html)（可玩原型，emoji 占位美术）；策划语境：[index.html](index.html)

---

## 0. 给设计平台的总说明（请先读）

1. 本作是微信/抖音竖屏小游戏（9:16），核心画面是**一条会真实倾斜的渡船**。全部界面围绕"船在水上、随时会歪"这个物理事实设计——倾斜、摇晃、水位是功能信息，不是装饰。
2. **配色方案请你提出**（见第 3 章）：本文档不指定任何色值，只给情绪与功能约束，请提交完整色彩系统提案供我方确认。
3. 交付以第 6 章资产清单为准逐项核对；第 11 章列出的 SDK 统一层组件**不在重绘范围**。
4. demo 中全部 emoji 均为占位符，文末附录给出 emoji → 正式资产的逐项对照。

## 1. 项目概述

| 项 | 内容 |
|---|---|
| 游戏名 | 快上船！ |
| 一句话玩法 | 洪水上涨，把排队的动物按重量和脾气摆上渡船——船会真实倾斜，稳住别翻、载满起航 |
| 心理引擎 | 扭矩配重平衡 + 活体重心扰动（物理直觉/风险管理） |
| 品类 | 物理救援休闲（IAA 免费档） |
| 平台 | 微信小游戏 / 抖音小游戏，竖屏 9:16，单指操作 |
| 核心情绪 | 心跳（船在红线上颤抖）→ 松一口气（扶正/起航成功）→ 温暖（小家伙们安全过河） |
| Slogan 候选 | 「稳住，别翻！」 /「就差一只小羊」 |

## 2. 目标用户（设计须贴合）

- 主力：18–40 岁休闲玩家，刷短视频看到"翻船惨剧/极限扶正"素材进来，期待 3 秒内看懂。
- 女性向占比预计偏高（Q 版动物救援题材）：动物必须**可爱、无辜、值得救**，失败演出必须无痛（落水→游回码头，永不受伤）。
- 操作场景：地铁/床上单手竖屏，UI 热区全部在下半屏，重要状态（倾角/水位）在上但只读。

## 3. 设计基调与情绪（配色方案请你提出）

### 3.1 情绪关键词
`雨天洪水的紧张` × `Q 版动物的软萌` × `木船码头的手作温暖` × `警报红线的心跳感`

### 3.2 全案视觉命题（美术灵魂，请重点提案）
1. **"船是活的"**：船体是全游戏第一主角——木质、有分量、被踩会颤、倾斜时吱呀作响。请把"重量感"画进船的造型（厚船板、吃水线、缆绳、补丁）。
2. **"危险是可读的刻度"**：倾角计、水位、翻船红线是玩法核心信息，需要一套**仪表化的危险语言**（刻度、指针、警戒区），且不依赖颜色单一维度（缺氧/色弱可读：形状+图标+动画三重编码）。
3. **"洪水在涨但不恐怖"**：水是威胁也是舞台。雨天氛围要紧张但保持童话感（参考绘本式雨天，而非灾难片），码头下沉的过程要"揪心"而不"吓人"。

### 3.3 请设计平台回填的色彩说明（我方不指定色值）
- 请提案：主色 / 辅色 / 警示色 / 中性色系统，覆盖暗部水面与亮部 UI 两种环境。
- 功能约束：① 倾角安全区/警戒区/红线三态必须在色觉障碍下仍可区分（配合形状）；② 放置预判点三态（安全/临界/危险）同上；③ 水面在深色环境里不能吞掉船体轮廓。
- 请一并给出：文本色阶（标题/正文/弱化）、按钮态（常态/按下/禁用）、面板底色。

## 4. Logo 设计需求

- 中文字标「快上船！」，感叹号是情绪核心（可做成船锚/浪花变体）。
- 字形：圆润厚重（配合"重量感"命题），可微倾斜 3–5°（呼应船体倾斜的玩法签名）。
- 需要：主 Logo（横）、方形 App 图标版（船+一只最萌动物探头）、单色版。

## 5. 界面 / 页面清单（逐屏设计，竖屏 9:16）

> 布局骨架已在 demo 验证：顶部状态区 → 河面主画面（约 62% 高）→ 动物队列条 → 底部操作栏。请在此骨架内做视觉深化，勿改热区结构。

### 5.1 局内主界面（核心屏 · 最重要）
- **顶部**：关卡名 pill、水位倒计时 pill（末 15 秒进入警示态）、目标清单 pill（动物头像 × 进度）、**倾角计**（横条式，中间安全区、两端红线，指针 + 危险时整条发光/颤动）。
- **河面主画面**：雨天天空（阵风预告云从入风侧压进来）、下沉中的码头（岸上排队动物 + 呼救气泡）、**渡船**（甲板格清晰可数、桅杆、吃水线、船随倾角整体旋转）、前景水面两层波浪。
- **甲板格**：放置预判点三态（安全/临界/危险，形状区分：圆/三角/叉）。
- **动物队列条**：2–3 张动物卡（立绘 + 名字 + 重量标签 + 特性角标），选中态高亮；后续数量提示。
- **底部**：平衡舵、加宽甲板两个道具位（用后置灰）、图鉴入口、**起航大按钮**（未达标灰态显示"还差 X 只"，达标后金色呼吸态）。

### 5.2 翻船瞬间 · 稳定锚弹窗（near-miss 签名时刻）
- 背景：画面定格 + 慢镜泛红边缘，船身角度数字大字「26.3°」+「差 1.3° 就稳住了」。
- 弹窗为 SDK 三通道组件（第 11 章，不重绘），但需要设计**弹窗上方的定格演出区**：倾斜船身剪影 + 稳定锚图标待命。
- 扶正成功演出：锚链拉直、船身摆回、甲板结霜（全员冻结 3 秒的视觉语言）。

### 5.3 差一点加时弹窗（水位归零 · 差 ≤2 只）
- 定格岸上没接到的动物特写（可怜巴巴）+「就差 1 只！」大字；弹窗同为 SDK 组件。

### 5.4 起航与结算页
- 起航演出：3 秒稳住条（船驶离码头、行为全冻结的"屏息感"）。
- 结算：渡走动物逐只跳上岸 + 渡运费逐条入账 + **随机小费翻牌**（R1 时刻，需开牌动效）+ 时间加成条 + 「看广告 ×2」按钮态（SDK 组件）+ 本局最大倾角战绩行。

### 5.5 失败页（洪水漫过码头 / 弃船）
- 无痛演出：动物游回码头挤成一团瞪你；安慰渡资 30% 入账；一键「再来一趟」主按钮。

### 5.6 选关页（航线图）
- 第一章「涨水的河」：河流蜿蜒航线，关卡节点 = 小码头；锁定/可玩/三星已过三态；章节预告（湖泊/海峡/风暴剪影）。

### 5.7 渡客图鉴（R9 核心面板）
- 18 格动物图鉴：已收录（彩色立绘+名字）/ 未收录（剪影+？）；新收录入册动效；「广告免费抽」入口 + 保底计数条（"再抽 3 次必出"）。

### 5.8 天赋面板（SDK 通用面板，仅需 3 个天赋图标）
- 压舱石 / 老水手 / 渡口熟客，各含等级态。

### 5.9 船坞 / 船装皮肤页（正式版）
- 船坞 6 级外观（木筏→小舢板→渡船→双桅渡轮→蒸汽渡轮→方舟）陈列 + 皮肤直售位 + 去广告 ¥12 卡片。

### 5.10 签到 / 每日任务 / 回归礼包
- 7 日阶梯签到墙（第 7 天大奖放大）+ 断签补签入口；每日任务三条列表式。

### 5.11 分享卡（静态导出两套）
- 求助卡：「船要翻了，快来搭把手！」（倾斜船身 + 慌张动物）。
- 挑衅卡：「本局最大倾角 24.9°，你敢让大象上船吗」（战绩数字大字）。

### 5.12 设置 / 合规页（简）

## 6. 图形资产清单（全量，交付按此核对）

### 6.1 Logo 与品牌
| # | 资产 | 数量 |
|---|---|---|
| 1 | 主 Logo / 方形图标 / 单色版 | 3 |
| 2 | 启动闪屏（Logo + 雨天码头） | 1 |

### 6.2 动物立绘（核心量产项 · 玩法判定资产）
> 每种动物 = 站立 + 行走 + 滑动（抓地惊恐）+ 行为特写 4 态；重量感必须画进体型。

| # | 动物 | 特殊态 |
|---|---|---|
| 1 | 小羊（基准，最"值得救"的脸） | 落水扑腾/游泳 |
| 2 | 大象（巨大、憨、踏板时全船震） | 落板冲击尘土 |
| 3 | 冻企鹅（冰壳包裹，绝对不动） | 冰壳反光 |
| 4 | 猴子（机灵反派脸） | 抬头张望（预告）/ 爬杆 / 桅顶坐 |
| 5 | 兔子（神经质） | 竖耳 ❗（预告）/ 跳跃 |
| 6 | 猫 + 老鼠 | 摆尾盯梢（预告）/ 追击奔跑；老鼠过甲板小跑 |
| 7 | 正式版 12 种剪影（狐/猪/牛/长颈鹿/龟/鹦鹉/狗/鹿/熊/袋鼠/鳄/火烈鸟） | 图鉴剪影即可 |

### 6.3 渡船（第一主角）
| # | 资产 | 说明 |
|---|---|---|
| 1 | 船体 6 级外观 | 木筏→…→方舟；每级含甲板格纹理、吃水线、缆绳细节 |
| 2 | 桅杆（含旗） | 猴子可爬的视觉暗示（爪痕/横档） |
| 3 | 甲板格态 | 空格 / 预判三态点（圆/三角/叉）/ 选中高亮 |
| 4 | 稳定锚 | 待命 / 抛下拉直 / 结霜冻结三态 |
| 5 | 平衡舵、加宽甲板道具图标 + 装上后的船体挂件 | 2+2 |

### 6.4 场景氛围
| # | 资产 |
|---|---|
| 1 | 雨天天空（常态/阵风预告云/风暴章变体） |
| 2 | 码头（含下沉三阶段：干爽/漫水/只剩桩顶）+ 岸上呼救气泡 |
| 3 | 水面两层波浪条 + 浪花粒子 + 落水水花 |
| 4 | 四章节背景变体（河流/湖泊/海峡/风暴） |

### 6.5 UI 组件
| # | 资产 |
|---|---|
| 1 | 倾角计全套（底、刻度、安全区、指针、红线警示态） |
| 2 | 水位倒计时 pill（常态/警示态）、目标清单 pill |
| 3 | 动物队列卡（常态/选中/置灰）+ 重量标签 + 特性角标 |
| 4 | 起航按钮（灰态/就绪金色呼吸态/按下） |
| 5 | 结算面板全套（小费翻牌、加成条、战绩行） |
| 6 | 航线图节点三态、章节剪影 |
| 7 | 图鉴格两态 + 保底计数条 |
| 8 | 签到墙、任务列表、回归礼包卡 |

### 6.6 天赋图标（3 项 × 等级态）
### 6.7 分享与买量
| # | 资产 |
|---|---|
| 1 | 求助/挑衅分享卡模板 2 套 |
| 2 | 买量素材关键帧 4 组（翻船惨剧/极限扶正/猴子背刺/洪水倒计时，见报告第八章） |

## 7. 图标系统（线性/面性规范请平台定）
覆盖：体力⚡、金币、钻石、图鉴、设置、声音、锚、舵、甲板、补签、翻倍。风格与动物立绘同一世界观（手作木质+软萌）。

## 8. 用户操作流程（User Flow）
启动 → 选关（航线图）→ 局内（选卡→看预判点→放置→安抚/抱起→起航）→ 结算（翻牌/翻倍）→ 下一关 / 图鉴 / 天赋。
关键分支：翻船 → 稳定锚三通道 → 扶正续玩 / 弃船结算；水位归零差 ≤2 → 加时三通道。

## 9. 玩法说明（供设计师理解语境）
船按真实重心倾斜：重的动物放边上船就歪，歪过各动物的"滑移角"它们就往低处滑、越滑越歪；猴子爬桅杆会让全船变"晃"，兔子受惊乱跳，猫追老鼠横穿甲板。玩家的全部操作是：选动物、挑格子放、点行为预告中的动物安抚、把放错的抱起来重放、按起航。**倾斜角度 = 全游戏最重要的一个数字**，所有危险信息围绕它展示。

## 10. 关键动效 / 演出需求（9 条）
1. 放置落板：船体下沉一颤 + 尘土/水花（重量差异要可感：大象 ≫ 兔子）。
2. 船体摇摆：放置后 2–3 个来回的阻尼摆动（吱呀声联动）。
3. 滑动：动物抓地惊恐脸 + 爪痕拖线，撞到邻居/舷栏「咚」。
4. 行为预告三重信号：头顶气泡图标 + 身体抖动 + 音效（1.2 秒，必须显眼）。
5. 猴子爬杆：跑→攀→坐顶回头挑衅的完整链。
6. 红线危机：倾角计整条发光 + 画面边缘泛红 + 宽限进度（0.8 秒）可视。
7. 稳定锚：锚链拉直→船身摆回→甲板结霜。
8. 起航 3 秒：稳住条 + 船驶离 + 岸上动物挥手。
9. 结算小费翻牌 + 图鉴新入册盖章。

## 11. 平台统一层衔接（SDK 组件边界，不在重绘范围）
- 三通道解锁弹窗（看广告/喊好友/付费/免费出口四钮，顺序固定）、经济 HUD（金币/钻石/体力 pill）、天赋通用面板、激励视频模拟层——均为 `game-sdk.js` 统一组件，**只需提供品牌化的图标与插画素材**（锚、体力、钻石等），不要重设计弹窗结构。
- 本作自绘 HUD（倾角计/水位/目标）位于顶部第一行，SDK HUD 自动下移避让（demo 已实现）。

## 12. 交付规格
- 全部资产 PNG（透明底）+ 源文件；动物立绘 ≥512px，UI 组件按 @2x；关键动效给序列帧或 Lottie。
- 命名：`boat_lv1`、`animal_sheep_idle`、`ui_tilt_needle` 式小写下划线。
- 竖屏安全区：顶部 88px / 底部 68px 内不放关键信息。

## 13. 合规与内容红线（动笔前必读）
- 动物永不受伤：落水 = 扑腾游回码头；无血、无溺亡暗示；失败文案自嘲"船夫"不嘲动物。
- 无赌博视觉联想：小费翻牌做成"信封/包裹"而非老虎机；图鉴抽取概率公示位预留。
- 广告按钮不做诱导性伪装；未成年人保护提示位预留。

## 附：现有 Demo 占位对照（emoji → 需产出的正式资产）
| demo 占位 | 正式资产 |
|---|---|
| 🐑🐘🐧🐒🐰🐱🐭 | 6.2 动物立绘全套 |
| 船体（canvas 色块梯形） | 6.3 船体 6 级 |
| 🚩（桅杆） | 桅杆+旗 |
| 圆点（绿/黄/红预判） | 甲板预判三态（圆/三角/叉） |
| 顶栏横条倾角计 | 6.5-1 倾角计全套 |
| 🌊 pill | 水位倒计时组件 |
| ⚓🛞🧱📕 | 图标系统 |
| 码头（色块） | 6.4-2 码头三阶段 |
| ⚓ 稳定锚（弹窗文案） | 6.3-4 稳定锚三态 |

## 附：给设计平台的交付检查清单
- [ ] 色彩系统提案（含功能三态色觉无障碍验证）
- [ ] Logo 3 版 + 闪屏
- [ ] 动物 6 种 ×4 态 + 12 剪影
- [ ] 船体 6 级 + 桅杆 + 锚三态 + 道具 2+2
- [ ] 场景 4 组（含码头下沉三阶段）
- [ ] UI 组件 8 组（倾角计优先级最高）
- [ ] 天赋图标 3 + 通用图标 11
- [ ] 分享卡 2 + 买量关键帧 4 组
- [ ] 关键动效 9 条（序列帧/Lottie)