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

方案 A · Kidsbox 星球

一个「内容即视觉」的分级动画盒子 —— 现有宝宝端最自然的进化，小改版本也能立刻上手的形态。

对标 小小优趣 × YouTube Kids 组合原型 P1 大卡片视频流 + P2 播单/时间锁 设备 手机竖屏 → iPad 横屏 实现代价 ★☆☆☆☆ 最低 技术栈 PWA 直接演进

设计定位

Positioning

方案 A 不发明新范式，而是把业内验证最充分的「家长播单制儿童视频库」形态做透：孩子打开就看到大封面、大按钮、大字，全部内容都在家长审核范围内；时间额度像天空中的太阳一样始终可见。它的野心不在"多"，而在把 4 岁孩子独立使用的路径缩短到两次点击：打开 → 点最大的封面 → 开始看。

🌤内容即视觉封面卡片是唯一主角，框架 UI 克制、无广告、无弹窗（小小优趣策略）。

🌞额度即太阳今日剩余时长化作常驻太阳环，孩子自己能读懂"还能看多久"。

📺频道即心智儿歌/故事/百科/拼读四个频道对应 contentKind，3 岁也能建立分类感。

🔁看完即停自动连播关闭（产品契约），播完给"下一集"按钮而不是自动开始。

设计 Tokens

Visual language

天空 Sky
#BFE3F5→#7EC4E8

太阳 Sun
#FFB627

珊瑚 Coral
#FF7A59

薄荷 Mint
#59C99A

深海 Ink
#2E5E7E

奶白 Paper
#FAF6EE

今天想去哪一个世界？

圆体优先：ui-rounded / SF Pro Rounded（iPad 原生支持），Android 回退 PingFang SC / MiSans。标题 800 字重，正文 ≥12.5px，按钮文字 ≥14px。全部圆角 14–28px，卡片投影低角度大柔影，禁用描边按钮。

动效与质感原则
· 天空渐变背景 + 缓慢漂浮的云（CSS 动画，无粒子）。
· 卡片按压缩放 0.96 + 弹性回弹；不做飞入式转场。
· 额度环用 conic-gradient 实时渲染，无第三方图表库。
· 触控目标全部 ≥44px；4 岁孩子无识字依赖（图标+颜色+语音反馈）。

关键界面 · 手机竖屏

Key screens · 390×844

9:41●●●

今天想看什么？

还有 21 分钟 · 2 个小视频

🎵

已审核

今日主打 · SUPER SIMPLE SONGS

儿歌轮播 · 跟着唱起来

韵律动作 · 适合 2-4 岁 · 20 集

全部🎵 儿歌📖 故事🌍 百科

继续看Maisy 第 3 集 ›

🐭

官方

▶

Maisy Mouse

看到 60% · 还剩 3 分钟

🔤

私有

▶

Yakka Dee!

NEW · 5 集

儿歌货架全部 ›

📺

看动画

🎧

听儿歌

⭐

我的

A1 · 首页「今天想看什么？」太阳额度环（长按进家长区）；今日主打大卡；频道 chips；「继续看」承接断点。全部卡片带「已审核/官方/私有」来源徽章。

9:41●●●

‹

🔤

Yakka Dee! · 说说看

一个单词， five 次开口 · CBeebies

🌱 入门 starter · 适合 2-4 岁 · 英音

第 1 主题 · 我的世界3 / 7 集

🍌2:10

Banana

香蕉 · 开口词

官方播放

▶

🚗2:08

Car

小汽车 · 开口词

官方播放

▶

第 2 主题 · 动物朋友0 / 7 集

🐘2:12

Elephant

大象 · 开口词

Kidsbox 私有

▶

‹

返回首页

▶

随便播一集

A2 · 系列详情双语标题 + 级别/年龄/口音徽章（原则 8：级别常驻）；unit 主题分组即现有契约的 unitId/unitTitle；每集标注时长与播放来源。

9:41●●●

‹ 返回19

🍌

▶

Banana · 香蕉

Yakka Dee! 第 1 主题 · 开口词 · 2 分 10 秒

今日剩

19 分钟

还能选

2 个

本集完

自动停不连播

🚗

下一集 · 不自动播

Car · 小汽车

2 分 08 秒 · 需要你按一下

接着看

看完这集就休息一下眼睛吧 ☀️

A3 · 播放页额度三卡（今日剩/还能选/自动停）把产品契约可视化；播完停在「下一集」待确认，自动连播关闭（契约要求）。

10:12●●●

🌙

眼睛要休息啦

今天已经看了 30 分钟、3 个小视频。
休息 20 分钟后，太阳会重新升起。

18:24

距离下一次观看时间

🎵🐘🚗 + ?

家长区取消 ✕

长按太阳环 1.5 秒进入。请输入家庭口令（孩子不可绕过）。

123456789

与现有家庭会话口令一致 · 本地设备记住登录

A4 · 休息页 + 家长门时间到 → 月亮页倒计时（峰终原则：展示今天看过的内容而非黑屏）；家长门沿用长按 + 口令，与现行实现一致。

iPad 横屏布局

1180×820 · 最终消费设备

📺看

🎧听

⭐我的

🌞21分

今天想看什么？

还有 21 分钟 · 2 个小视频 · 全部内容爸爸妈妈看过啦

🎵

已审核 · Super Simple Songs

儿歌轮播 · 跟着唱起来

韵律动作 · 适合 2-4 岁 · 20 集

继续看Maisy · 第 3 集

🐭

Maisy Mouse

🔤

Yakka Dee!

🐯

Peppa Pig

故事时间6 个系列

🦆

Sarah & Duck

🐶

Hey Duggee

🧸

Puffin Rock

🌞

还能看 21 分钟

今天 3 个名额已用 1 个

妈妈放的排队清单

🍌

Yakka Dee · Banana

2 分钟 · 开口词

🚗

Yakka Dee · Car

2 分钟 · 开口词

🐘

Yakka Dee · Elephant

2 分钟 · 开口词

1左侧竖轨导航：看/听/我的 + 底部额度太阳。iPad 上拇指远、视线集中左侧，竖轨优于底部 tab。
2双栏货架：左「继续看」右「故事时间」，行数随窗口高度增加；封面卡按 16:10 网格放大。
3右侧信息栏：额度卡 + 「家长排队清单」（Admin 下发的播放队列），这是 iPad 独有的"放哪台设备、家长说了算"的位置。
4横屏播放：全屏视频 + 右上角额度环悬浮，侧栏在暂停时滑出（下一集/系列信息）。

代价、风险与分叉选项

Trade-offs & forks

✅ 依赖与代价（最低）

零新后端实体：全部数据来自现有 ChildPlayable / quota 契约，纯 PWA 前端重构。
现有 sky-bg 云朵主题直接升级；家长门/护眼模式逻辑不变。
工作量估计：一个迭代内可完成（含 Android 壳回归）。

⚠️ 风险与对策

形态最"眼熟"，惊喜感最低 → 用「今日主打 + 排队清单」保住策展感。
大卡流无任务约束，仍可能连看多集 → 额度三卡 + 休息页承担节律（契约硬限制兜底）。
对"学习感"诉求强的家长说服力弱 → 若需要，叠加方案 B 的任务层（见分叉）。

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

分叉 1 · 首页首屏：A-案「今日主打 hero 卡」（策展感强，当前选择） vs B-案「频道宫格先行」（类 YouTube Kids，孩子自主性强）。原型中首页顶部可用开关切换。
分叉 2 · 来源徽章显性度：当前为小徽章（不干扰孩子）；可改为完全隐藏（仅家长区可见）。默认选择显性小徽章——"爸爸妈妈看过"本身就是安全感设计。