第15章 - 儿童向设计规范与实现
15.1 交互规范清单：规范与代码的对照
产品定位（6–12 岁、核心指标是「记住」）推导出一套交互规范。下表把每条规范与实现方式、当前状态对齐 —— 已实现的给出落点，未实现的明确标注为待做：
| 规范 | 实现方式 | 状态 |
|---|---|---|
| 可点击区域 ≥ 88×88 逻辑像素 | BaseScene.addButton 默认 520×136；顶栏 DOM 按钮 min-h-12（48px 物理高） |
✅ |
| 按钮不依赖悬停 | 按下瞬间下沉 9px + 音效；无 hover 语义 | ✅ |
| 无失败惩罚、无倒计时、无限重试 | 放错弹回原位；后羿射掉最后一个太阳，天黑后太阳自己回来；诱惑有时限、不会等不到头 | ✅ |
| 关键文本配拼音 | 典故馆卡片与典故卡都带 pinyin 字段 |
✅ |
| 字号下限 28 设计像素 | textStyle 基准：典故卡原文与出处已从 13.8 CSS px 提到 28 设计 px |
✅ |
| 不靠颜色单独传达信息 | 对/错同时有图标与音效；女娲配对靠形状不靠颜色（色弱友好） | ✅ |
尊重 prefers-reduced-motion |
ctx.reducedMotion 跳过场景淡入等动效 |
✅ |
| 无广告、无外链、无分享诱导、不采集个人信息 | 遥测只本地缓冲、flush() 空实现；无任何第三方 SDK |
✅ |
| 连续游玩 20 分钟提示休息 | — | ⏳ 规划中（阶段 1） |
| 家长锁（退出/设置/清档长按 3 秒） | — | ⏳ 规划中（阶段 1） |
这份清单的态度值得说明：项目把「没做的」明确列为「没做」，而不是含糊带过。规范写在方案里、代码里只做了能做的部分 —— 读者应该能分辨哪些是承诺、哪些是现状。
15.2 记忆工程的代码落点（回顾与串联）
第 1 章讲过五层记忆机制，这里把每一层的具体实现位置补全，作为一张可坐标化的地图：
| 层 | 机制 | 实现位置 |
|---|---|---|
| L1 情境代入 | 分幕绘本 + 旁白；玩家扮演典故中的角色 | templates/story.ts；defineGame 强制每局以故事开场 |
| L2 关键抉择 | 关键动作由交互承载；keyMoment 提供揭晓语与复习题 |
各游戏场景（曹冲的「秤被压垮」、后羿的「射九留一」）；reward.ts 播 keyMoment.reveal |
| L3 多通道编码 | 看（画面）+ 听（TTS 念读）+ 做（拖拽/连点）+ 说（跟读念白）+ 选（复习题） | AudioBus.speak、orb.speak 归位念白、quiz 模板（待接线） |
| L4 收集与结构 | 典故卡 + 图鉴；卡按 yearApprox 排序 |
reward.ts 的 card:unlocked；AlbumView |
| L5 间隔重复 + 迁移 | 1/3/7/21/60 天调度；transfer 题 |
progress/review.ts；quiz 数据「每典故 3 题含 1 道迁移」由 schema 强制 |
这张表是整套架构的「为什么」：keyMoment、misconceptions、quiz.kind、card:unlocked、ReviewScheduler 这些看起来零散的设计，全部服务于同一件事。
15.3 「少写字，多动手」的三个案例
十二部游戏加起来，屏幕上几乎没有教学文字：开场的两句话，加上卡住时才出现的一句短提示。其余全靠图形、动画、音效与语音。三个最能说明问题的案例：
曹冲称象：从「点按钮」到「动手做」
第一版被判定「太死板、文字太多、说教」——复盘出的问题是把「关键抉择」做成了文字选择题，孩子始终在读，没有在做。重做后的改动对照：
| 维度 | 改前 | 改后 |
|---|---|---|
| 故事 | 4 幕 + 「下一幕」按钮 | 2 幕，点哪都行，每屏一句话 |
| 关键抉择 | 三选一的文字题 | 不做题：让玩家自己试出来 |
| 玩法 | 点石头按钮看数字涨 | 拖拽大象与石头，看水痕 |
| 结算 | 文字测验 3 题 | 石头过秤，数字累加出 3000 |
| 屏幕文字 | 每屏 1–2 句 + 题目 | 几乎没有，靠图形 / 动画 / 音效 |
「直接称 → 秤垮了」这第一步是设计的关键：问题是被玩家自己撞见的，不是被告知的。
后羿射日：零惩罚的教学
「不能全射下来」这个分寸感，如果写成文字提示就是说教；做成机制则是：射到只剩一个 → 大地回春；贪心把最后一个也射了 → 天黑，一句「要留一个太阳」，1.8 秒后太阳自己回来。孩子自己撞一次就懂了 —— 全程没有失败画面、没有扣分。
烽火戏诸侯：教训落在点火的人身上
信任是「点」出来的，不是「讲」出来的：点一次烽火，信任少一格（数据里的 decoyRounds = 3）；第三次「他们连城门都没到」；第四次点火是真的 —— 一个人也没来。全篇没有一句说教文案，孩子是自己把信任点完的。出处还注明「后世学者多存疑」，教训落在信用上，不落在褒姒身上。
15.4 美术策略：几何绘制与「换资源不改代码」
阶段 0 的美术全部用 Phaser Graphics 绘制：零图片资源，先把玩法与学习闭环跑通。统一的画法约定（写进 cartoon.ts）：
- 厚描边（统一
THEME.outline暖黑，不纯黑）+ 圆角 + 落地阴影； - 同一套角色风格：圆脸、腮红、三头身比例（如大象的四条粗腿、招风耳、象鼻路径）；
- 反馈动画标准化：
popIn（出现）、squash（受重）、sparkleAt（成功）、createHand（引导）。
「换资源不改代码」是一条被结构保证的承诺：绘制代码全部收在 games/<id>/src/art.ts 的画法函数里（drawElephant、drawStage、drawPiece…），模板与工具箱只调用它们。将来切真素材时：
- 资源放进
games/<id>/public，story[].illustration从'none'改为资源名（content:check会提示确认资源就位）； art.ts里的绘制函数换成贴图调用 —— 模板、契约、外壳、测试全部不动。
配套的待办（方案中已列、实物未建）：ASSETS-LICENSES.md 授权台账 —— 字体 / 音效 / 音乐 / BGM 逐个记录来源与许可证。项目文档把这条称为「会踩死人的坑，从第一天就做」；目前因为还没有引入外部资源，台账尚未创建，属于「进真素材时必须同步建立」的事项。
15.5 音频策略：合成音效与 TTS 旁白
- 音效：六个（
tap/correct/wrong/splash/unlock/complete）用 WebAudio 振荡器实时合成，零文件（第 9 章有配方表）；另有tone(freq, ms)支持「进度听得见」（盘古撑天音调渐高）； - 旁白：浏览器 TTS（桌面/网页）+ 原生 TTS（安卓），语速中文 0.9 / 英文 0.95；关键归位句（「左眼变成了太阳」）用语音而不是文字完成反馈；
- 将来换真人配音：按 locale 取音频文件（
zh-CN/en各一套），改的只是AudioBus.speak的实现；方案给单文件定的预算是 3–8 秒切片、≤ 100 KB、.m4a + .ogg双格式（iOS 认 m4a、安卓/桌面认 ogg）。
15.6 历史内容的准确性
儿童教育产品的信任建立在内容准确性上，代码层面有三条硬约束：
source.book与source.quote是 schema 必填 —— 每张典故卡都展示出处与原文引用，编不出出处的典故进不了合集；- 三分法定性：
kind把「神话 / 传说 / 信史」分开。神农、大禹是传说时代的人物：算「信史」不诚实，算「神话」也不对 —— 所以内容模型加了第三个值，典故馆里多一枚徽章； - 有争议的内容如实标注：烽火戏诸侯的出处注明「后世学者多存疑」，不把存疑故事当信史讲。
15.7 性能与体积预算（硬指标）
| 指标 | 预算 | 现状 |
|---|---|---|
| 外壳首屏 JS | ≤ 150 KB gzip | 约 83 KB（实测） |
| 单个懒加载 chunk | ≤ 450 KB gzip | Phaser 约 363 KB（共享，进游戏才加载） |
| 单游戏业务 chunk | ≤ 120 KB gzip（方案目标） | 1.2–6.1 KB（实测） |
| 单图片 / 音频 | ≤ 200 KB / ≤ 100 KB | 阶段 0 无资源文件 |
| 单局时长 | 3–5 分钟 | 各典故 sessionSeconds 在 120–300 秒 |
| 中端安卓帧率 | 60fps；低端 ≥ 30fps | 低端降级策略属阶段 2 |
体积的两条守卫随时在跑：check-size.mjs（构建产物）与逐帧重画的克制（不维护精灵列表、特效按需生成即销毁）。
15.8 明确「暂不做」的清单
技术方案里有一节专门写「Anti-scope」，列的都是主动不做的事：
账号系统 / 后端 API / 排行榜 / 多人联机 / 内购 / 广告 / 3D / 后台 CMS / 多语言（当时只做简繁 + 拼音）/ vue-router（3 个视图时 20 行 hash 路由够用）。
理由不是「不会做」，而是它们都会显著抬高成本与合规风险，且对「让孩子记住典故」这个核心指标几乎无贡献。反过来说，清单里每一项都留了触发条件：
- 内容资产超过 20 个典故、确实需要非程序员编辑时，再引入 CMS；
- 路由超过 5 条或需要嵌套路由时，再引入 vue-router；
- 需要跨设备时，再换
ProgressStore实现做云存档。
对儿童产品而言，少做一个功能往往比多做一个功能更需要勇气。
15.9 小结
- 儿童向规范不是口号，逐条都有落点或明确的「待做」标记；
- 记忆工程五层各有实现位置，
keyMoment/quiz.kind/ 复习调度这些数据结构是「为什么」的答案； - 「少写字、多动手」由三个案例支撑：曹冲的重做、后羿的零惩罚、烽火的信用机制；
- 美术（几何绘制）与音频（合成 + TTS）两条都是「阶段 0 零资源、换资源不改代码」的策略；
- 历史准确性三条硬约束（出处、三分法、存疑标注）是教育产品的底线。
下一章收尾：把散落在各章的所有踩坑记录集中起来，并回答常见问题。