Kidsbox · KB-71 · Child Client Design Proposal C / 5

方案 C · 英语群岛

把片库变成一张可以航海探索的群岛地图 —— 洪恩式闯关进度 × ABCmouse 的「地点即内容」，但用收藏徽章替代货币。

对标 洪恩识字 × ABCmouse（Hey Duggee 徽章彩蛋） 组合原型 P4 关卡地图 + P8 徽章收集 + P2 时间锁 设备 手机竖屏 → iPad 横屏全景 实现代价 ★★★★☆ 中高（地图美术 + 游戏层开关） 技术栈 PWA（SVG 地图，无需游戏引擎）

设计定位

Positioning

每个「主题 unit」变成一座小岛、每集视频变成岛上的一站：看完一站，点亮一站、掉一枚徽章；集齐本岛徽章，通往下一岛的船票到手。与洪恩/ABCmouse 最大的不同有二：一是激励只有徽章收藏、没有货币商城（吸收调研结论：收藏比金币更契合教育产品）；二是游戏层可被家长一键关闭，关闭后地图退化为普通列表——"从游戏切换成课程"只需要一个开关。

🗺地点即内容岛 = unit 主题（如「Yakka Dee 开口词岛」「Numberblocks 数字岛」），站 = 单集，结构直接来自现有契约。

🏅徽章非货币每集掉一枚主题徽章（Hey Duggee 式）；集齐点亮岛徽章；可反复翻看的收藏册就是奖励本身。

🔓进度不锁死下一岛默认"乘船解锁"，但「自由帆船模式」始终可达任意岛（家长可配置），对冲强解锁的探索代价。

🧊游戏层可关家长关闭后：地图→列表、徽章→隐藏、庆祝→简化，产品退化为方案 A。

设计 Tokens

Visual language

浅海 Sea
#7FD4E8

深海 Deep
#3FB3D4

沙岸 Sand
#FFE3A9

草岛 Grass
#8ED08A

糖果 Candy
#FF8A5C

葡萄 Grape
#B07CE8

扬帆出发！今天的岛在不远的地方

地图是手绘风 SVG：岛体用两层色块（高光+阴影）+ 白色描边；海面用两层波浪纹理叠加。节点 48px 起步，当前站有呼吸光圈。全部素材为 inline SVG——不需要游戏引擎，PWA 可承载（调研结论：完整虚拟世界是重客户端形态，轻量地图不是）。

动效与反馈
· 当前站呼吸光圈（SVG scale 动画）；船沿着虚线航线移动（CSS offset-path）。
· 过关：三颗星依次弹出 + 徽章"掉落"进收藏册。
· 无排行榜、无门票经济 HUD（明确区别于 ABCmouse 的 tickets 常驻）。
· 岛屿未解锁显示海雾 + 锁链，但岛名可见——期待感而非完全黑盒。

关键界面 · 手机竖屏

Key screens · 390×844

9:41●●●

🏅12 ⏱还剩 21 分

⚙️

英语群岛

已点亮 12 / 21 站 · 收集 12 枚徽章

⛵ 自由帆船模式 · 开启中家长允许时，任何岛都能直接去

C1 · 世界地图首页岛 = 现有 unit 主题；当前站呼吸光圈；已完成岛挂岛徽章；未解锁岛有海雾但可见名字。HUD 只有徽章数和剩余时间——刻意没有货币。

9:41●●●

‹

儿歌湾

SUPER SIMPLE SONGS · 已点亮 5/7 站

🦆

站 6 · Six Little Ducks

六只小鸭子 · 2 分 15 秒 · 看完掉徽章

出发 ▶

C2 · 岛内关卡路径洪恩式棋盘路径：已过站亮金星、当前站放大呼吸、未到站灰色上锁；底部浮层 = 下一站卡片（时长+奖励预告）。

20:10●●●

我的徽章册

12 / 21 枚

每看完一集掉一枚 · 点徽章可以再听一次那首歌

🌧

Rain Rain

儿歌湾 · 站 1

🐞

Ladybug

儿歌湾 · 站 2

NEW

🐒

Monkeys

儿歌湾 · 站 3

🐝

？？？

还没有收集到

🦆

？？？

还没有收集到

🔤

Banana

开口词岛 · 站 1

🚗

Car

开口词岛 · 站 2

🐘

Elephant

开口词岛 · 站 3

🔢

？？？

数字岛还没开放

🏝

开口岛徽章 7/7 集齐！
岛徽章「小小开口王」已点亮 ✦

C3 · 徽章收藏册未收集的显示"？？？"剪影（收集欲）；点已收集徽章可回听对应歌曲（收藏即复习入口）；集齐一岛点亮岛徽章。

9:47●●●

⭐

站 6 点亮啦！

Six Little Ducks · 看完了 2 分 15 秒

🦆

「小鸭子」徽章入手

已放进徽章册 · 点它可以再听一遍

回岛 🏝

看下一站 ➜

今天还能看 17 分钟 · 看完这站建议休息 ☀️

C4 · 过关庆祝（峰终）三星弹出 + 徽章掉落；按钮给出「回岛 / 下一站」而不是自动连播；底部轻提示剩余额度，与休息契约衔接。

iPad 横屏布局

1180×820 · 全景群岛

🏅 12 / 21 ⏱ 还剩 21 分钟

家长开关 · 游戏层 ⚙️

🦆

下一站 · Six Little Ducks（儿歌湾 · 站 6）

2 分 15 秒 · 看完点亮并掉落徽章

扬帆出发 ▶

1横屏全景地图是 iPad 的天然舞台：三大岛同屏，路径一目了然；手机上则改为纵向滚动航海图。
2下一站浮层常驻底部：孩子不用记"我玩到哪"，任何时刻一条路径就能继续。
3游戏层开关放家长门后：关闭后此页退化为按系列分组的普通列表（= 方案 A 形态）。

代价、风险与分叉选项

Trade-offs & forks

✅ 依赖与代价（中高）

后端：需一张 child_progress 表（点亮站/徽章，本地 localStorage 起步、后续入 D1，追加式 migration）。
地图为 inline SVG 手绘，每岛一张底图；无游戏引擎、无物理、无实时渲染——PWA 可承载。
徽章图形可先由 emoji+色环生成器批量产出，后续再替换定制美术。

⚠️ 风险与对策

游戏化过度挤占内容（洪恩/ABCmouse 的公共教训）→ 徽章是唯一激励物；无商城无货币无排行榜。
强解锁顺序破坏自由浏览 → 「自由帆船模式」默认开启；解锁只影响"点亮进度"不影响"能不能看"。
美术成本可能膨胀 → 起步用程序化生成地图 + 主题色，验证孩子是否买账再投入定制美术。

⑂ 分叉选项（两案都保留，原型里都做了）

分叉 1 · 解锁模型：A-案「线性乘船」（看完本岛才开下一岛，仪式感强） vs B-案「自由帆船」（全部可达，进度只做点亮）。原型默认 B-案，家长可切 A-案。
分叉 2 · 徽章形态：站级徽章（每集一枚，当前选择） vs 星级评价（洪恩三星制）。调研结论倾向站级收藏——评分会引入"没拿满星"的挫败。