R524809
60 KiB
60 KiB
涂鸦丫 小程序 - 产品设计文档 v3.0
定位：3-8 岁早教 A4 纸打印资料小程序 品牌名称：涂鸦丫（谐音双关：涂鸦 = doodle + 丫 ≈ 鸭，呼应小鸭子 IP 形象） 品牌 Slogan："涂鸦丫，跟小鸭丫一起画！" 品牌 IP：小鸭丫（一只爱涂鸦的小黄鸭） 主题色：#f7ee47（明黄色，呼应小鸭子形象） 版本：v3.0 产品重设计方案 最后更新：2026-03-24
一、现状问题诊断
1.1 内容层面
| 问题 | 现状 | 影响 |
|---|---|---|
| 品类单一 | 仅有数学计算、专注力训练、识字、练字四类 | 缺少英语启蒙、科学认知、艺术创造、生活常识等早教核心板块 |
| 题型趋同 | 数学 26 种题型多为数字计算变体，缺少生活化数学 | 用户容易审美疲劳，低龄段（3-5岁）可用内容少 |
| 缺乏体系 | 题型平铺排列，无年龄分级/难度递进 | 家长无法按孩子年龄/水平选择合适内容 |
| 无趣味化 | 缺少迷宫、涂色卡、手工折纸等高趣味性内容 | 与竞品（kiddoworksheets）差距大 |
| 内容静态 | 所有内容均为代码写死，每种题型需独立编写绘制代码 | 新增题型需要发版（1-2 周），无法快速响应热点/节日内容 |
1.2 用户体验层面
| 问题 | 现状 | 影响 |
|---|---|---|
| 首页缺吸引力 | 入口卡片列表式排布，无分类筛选 | 题型多时找不到内容，新用户不知从何开始 |
| 无用户体系 | 无登录/收藏/历史记录 | 用户无法追踪使用情况，留存差 |
| 缺少预览图 | 进入题型前看不到最终效果 | 试错成本高 |
| 无批量打印 | 每次只能生成一张 → 保存 → 打印 | 需要多张时操作繁琐 |
| 无打印指引 | 保存到相册后缺少从相册打印的引导 | 用户可能不知道如何打印 |
1.3 技术层面
| 问题 | 现状 | 影响 |
|---|---|---|
| 云函数名不一致 | 代码调用 robotaxi，目录名 doodle |
可能存在线上风险 |
| 无效代码引用 | index.js 引用不存在的 station/area 等模块 |
部署可能失败 |
| debug 页有死链 | 指向不存在的 demoPages/shapePrint |
功能残缺 |
| 无 PDF 导出 | createPDF 云函数仅实验性代码 |
非核心问题，PNG 保存到相册更符合手机端用户习惯，PDF 可作为远期增值功能 |
| 渲染方案限制 | 全部 Canvas 渲染，交互受限 | 难以实现复杂交互（如拖拽、填写） |
二、竞品参考与差距分析
参考 kiddoworksheets.com，对比如下：
| 维度 | kiddoworksheets | 涂鸦丫 现状 | 差距 |
|---|---|---|---|
| 内容品类 | 30+ 大类（字母、拼写、涂色、迷宫、折纸、找不同、时钟...） | 4 大类 | 严重不足 |
| 年龄覆盖 | 学前 - 5 年级 | 3-8 岁（但内容未分级） | 缺少分级体系 |
| 题目数量 | 每个品类数十到数百张 | 每种题型动态生成（无限但变化有限） | 模板多样性不够 |
| 下载方式 | 直接 PDF 下载 | 保存 PNG 到相册 | PNG 更适合手机端用户（相册易找、可直接分享打印），非劣势 |
| 视觉风格 | 彩色卡通插画 | 简约线条风格 | 视觉吸引力弱 |
| 内容更新 | 持续更新 | 代码写死 | 运营效率差距大 |
| SEO/分享 | 独立网页，搜索引擎友好 | 小程序，依赖微信生态 | 获客渠道不同 |
三、产品重设计方案
3.1 全新信息架构
┌──────────────────────────────────────────────────────────────┐
│ 首页（重设计） │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌────────┐ │
│ │ 数学 │ │ 语文 │ │ 英语 │ │ 益智 │ │ 创意 │ │
│ │ 启蒙 │ │ 启蒙 │ │ 启蒙 │ │ 游戏 │ │ 手工 │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └───┬────┘ │
├───────┼──────────┼──────────┼──────────┼─────────────┼──────┤
│ ▼ ▼ ▼ ▼ ▼ │
│ 数字认知 识字卡 字母学习 迷宫 涂色卡 │
│ 计数练习 练字帖 自然拼读 找不同 折纸 │
│ 加减运算 看图说话 词汇练习 连线题 手工 │
│ 时钟练习 成语接龙 闪卡 拼图 贴纸 │
│ 形状认知 笔顺练习 描红 数独 ... │
│ ... ... ... ... │
└──────────────────────────────────────────────────────────────┘
3.2 新 TabBar 设计
| Tab | 名称 | 说明 |
|---|---|---|
| 1 | 发现 | 首页，分类浏览所有可打印资料，含推荐/热门/最新 |
| 2 | 分龄 | 按年龄（3-4/4-5/5-6/6-7/7-8）筛选适合的内容 |
| 3 | 收藏 | 收藏的题型、已下载的历史记录 |
| 4 | 我的 | 用户中心、打印指南、设置、意见反馈 |
四、新增功能规划（按优先级排序）
P0 - 核心改进（1-2 周内完成）
低开发成本、高用户价值，优先推进
| # | 功能 | 描述 | 开发难度 | 用户价值 |
|---|---|---|---|---|
| 1 | 年龄分级体系 | 为所有题型标注适合年龄段（3-4/4-5/5-6/6-7/7-8），首页增加年龄筛选 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 2 | 难度标签 | 每个题型标注难度（入门/基础/进阶/挑战），方便家长选择 | ⭐ | ⭐⭐⭐⭐ |
| 3 | 效果预览图 | 入口卡片展示真实的打印效果缩略图，非 icon 风格 | ⭐⭐ | ⭐⭐⭐⭐ |
| 4 | 首页重设计 | 增加分类导航（横向滚动标签）+ 搜索 + 推荐区域 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 5 | 打印指南页 | 新增「如何打印」图文引导页（从保存→打印→装订的完整教程） | ⭐ | ⭐⭐⭐⭐ |
| 6 | 修复技术问题 | 清理云函数无效引用、统一函数名、移除死链 | ⭐ | ⭐⭐⭐ |
P1 - 内容扩充（2-4 周）
显著丰富产品内容，提升竞争力
4.1 数学新增题型
| # | 功能 | 描述 | 开发难度 |
|---|---|---|---|
| 7 | 时钟练习 | 认识钟表、读时间、画时针分针 | ⭐⭐⭐ |
| 8 | 形状分类 | 按形状/大小/颜色分类，圈出不同类 | ⭐⭐ |
| 9 | 规律填空 | 数字/图形规律，找出下一个 | ⭐⭐ |
| 10 | 货币认知 | 认识人民币面值，简单找零练习 | ⭐⭐⭐ |
| 11 | 测量启蒙 | 用尺子量长度、比较长短 | ⭐⭐ |
4.2 语文新增题型
| # | 功能 | 描述 | 开发难度 |
|---|---|---|---|
| 12 | 拼音练习 | 声母/韵母/整体认读音节描红、拼音组合 | ⭐⭐⭐ |
| 13 | 笔画练习 | 基本笔画（横竖撇捺等）描红练习 | ⭐⭐ |
| 14 | 偏旁部首 | 偏旁部首认知、组字练习 | ⭐⭐ |
| 15 | 看图说话 | 提供图片场景，引导孩子看图说话/写话 | ⭐⭐⭐ |
| 16 | 成语/古诗填空 | 常见成语、古诗的填空练习 | ⭐⭐ |
4.3 英语启蒙（全新模块）
| # | 功能 | 描述 | 开发难度 |
|---|---|---|---|
| 17 | 字母描红 | A-Z 大小写字母描红练习 | ⭐⭐ |
| 18 | 字母闪卡 | 字母+对应单词+插图的闪卡 | ⭐⭐ |
| 19 | 字母找一找 | 在字母方阵中找出目标字母 | ⭐（复用 numberFind） |
| 20 | 单词描红 | 常见英语单词描红（颜色/动物/数字/水果） | ⭐⭐⭐ |
| 21 | 自然拼读练习纸 | CVC 单词拼读、元音辅音分类 | ⭐⭐⭐ |
P2 - 益智游戏（4-6 周）
高趣味性内容，显著提升差异化
| # | 功能 | 描述 | 开发难度 |
|---|---|---|---|
| 22 | 走迷宫 | 不同难度的迷宫（简单路径/多分支/主题迷宫） | ⭐⭐⭐⭐ |
| 23 | 找不同 | 两张相似图片找出差异点 | ⭐⭐⭐⭐ |
| 24 | 数独入门 | 4×4 / 6×6 简易数独 | ⭐⭐⭐ |
| 25 | 控笔练习 | 虚线描画（直线/曲线/锯齿/螺旋） | ⭐⭐ |
| 26 | 连线画图 | 按数字/字母顺序连点成画（Dot-to-Dot） | ⭐⭐⭐ |
| 27 | 图形拼图 | 七巧板/图形拼合练习 | ⭐⭐⭐ |
| 28 | 记忆力翻翻卡 | 可打印的配对翻翻卡（打印→剪切→玩） | ⭐⭐ |
P3 - 创意手工（6-8 周）
拓展品类边界，吸引更多用户群
| # | 功能 | 描述 | 开发难度 |
|---|---|---|---|
| 29 | 涂色卡 | 卡通主题线稿涂色（动物/交通/节日/恐龙等） | ⭐⭐⭐ |
| 30 | 折纸模板 | 可打印的折纸展开图+步骤说明 | ⭐⭐（主要是素材制作） |
| 31 | 字母/数字手工 | 打印→剪切→粘贴的立体字母/数字 | ⭐⭐ |
| 32 | 主题手工 | 节日手工（春节/中秋/圣诞等）、季节手工 | ⭐⭐⭐ |
| 33 | 贴纸打印 | 可打印的奖励贴纸、装饰贴纸 | ⭐⭐ |
| 34 | 自制绘本 | 打印→装订的简易绘本模板 | ⭐⭐⭐ |
P4 - 体验升级（持续迭代）
提升产品专业度和用户粘性
| # | 功能 | 描述 | 开发难度 |
|---|---|---|---|
| 35 | 用户体系 | 微信授权登录 + 用户信息 | ⭐⭐ |
| 36 | 收藏功能 | 收藏喜欢的题型，快速访问 | ⭐⭐ |
| 37 | 下载历史 | 记录每次下载的内容和时间 | ⭐⭐ |
| 38 | 批量生成 | 一次生成多张不同题目的练习纸 | ⭐⭐⭐ |
| 39 | PDF 导出（增值服务） | 会员专属功能，支持多页 PDF 合并导出（需云函数），非核心路径 | ⭐⭐⭐⭐ |
| 40 | 自定义纸张 | 支持 A4/B5/Letter 等纸张尺寸切换 | ⭐⭐ |
| 41 | 打印套餐 | 按周/月推荐「每日一练」打印计划 | ⭐⭐⭐ |
| 42 | 社区分享 | 用户分享打印效果、使用心得 | ⭐⭐⭐⭐ |
| 43 | 数据统计 | 记录孩子使用数据，生成学习报告 | ⭐⭐⭐⭐ |
五、页面重设计方案
5.1 首页「发现」页重设计
现状问题：四个独立的 Tab 页各自为政，用户需要在 Tab 间跳转寻找内容。
改造方案：合并为统一的「发现」首页
┌─────────────────────────────────────┐
│ 🔍 搜索框 │
├─────────────────────────────────────┤
│ [全部] [数学] [语文] [英语] │
│ [益智] [创意] [手工] │ ← 横向滚动分类标签
├─────────────────────────────────────┤
│ │
│ 📌 今日推荐 │ ← 每日精选 2-3 个内容
│ ┌────────────────────────────┐ │
│ │ 🎄 圣诞主题涂色卡 [NEW] │ │
│ │ [效果预览图] │ │
│ └────────────────────────────┘ │
│ │
│ 🔥 热门下载 │ ← 横向滚动卡片
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │迷宫 │ │涂色卡│ │加减法│ │
│ └─────┘ └─────┘ └─────┘ │
│ │
│ 📚 数学启蒙 │ ← 按分类展示
│ ┌─────────┬─────────┬─────────┐ │
│ │ 数字认知 │ 计数练习 │ 加减运算 │ │
│ │ [缩略图] │ [缩略图] │ [缩略图] │ │
│ │ 3-5岁 │ 4-6岁 │ 5-7岁 │ │
│ └─────────┴─────────┴─────────┘ │
│ │
│ ✏️ 语文启蒙 │
│ ┌─────────┬─────────┬─────────┐ │
│ │ 识字卡 │ 练字帖 │ 拼音 │ │
│ └─────────┴─────────┴─────────┘ │
│ │
│ 🌈 创意手工 │
│ ┌─────────┬─────────┬─────────┐ │
│ │ 涂色卡 │ 折纸 │ 贴纸 │ │
│ └─────────┴─────────┴─────────┘ │
│ │
└─────────────────────────────────────┘
5.2 分类详情页
点击分类标签或「查看更多」进入的二级页面：
┌─────────────────────────────────────┐
│ ← 返回 数学启蒙 │
├─────────────────────────────────────┤
│ 年龄筛选： │
│ [全部] [3-4岁] [4-5岁] [5-6岁] │
│ [6-7岁] [7-8岁] │
│ │
│ 难度筛选： │
│ [全部] [⭐入门] [⭐⭐基础] │
│ [⭐⭐⭐进阶] [⭐⭐⭐⭐挑战] │
├─────────────────────────────────────┤
│ │
│ ┌────────────────────────────┐ │
│ │ [效果预览大图] │ │
│ │ 数字排序 │ │
│ │ ⭐⭐ 基础 | 适合 4-6 岁 │ │
│ │ 📥 12.3k 次下载 │ │
│ │ [立即生成] [❤️ 收藏] │ │
│ └────────────────────────────┘ │
│ │
│ ┌────────────────────────────┐ │
│ │ [效果预览大图] │ │
│ │ 凑十法练习 │ │
│ │ ⭐⭐⭐ 进阶 | 适合 5-7 岁 │ │
│ └────────────────────────────┘ │
│ │
└─────────────────────────────────────┘
5.3 分龄页「按年龄学」设计
设计原则：分龄页不是简单的年龄段入口页——那等同于给首页加了一层无意义的中间跳转。分龄页的核心价值是帮家长回答「我家孩子该练什么」，提供一张按发展阶段编排的「学习地图」。
与首页的区别：
- 首页「发现」= 按内容品类浏览（数学 / 语文 / 益智…），适合「我想找某类练习」的场景
- 分龄「按年龄学」= 按孩子成长阶段推荐（能力发展 + 学习路线），适合「不知道该练什么」的场景
页面结构
┌─────────────────────────────────────┐
│ 🦆 按年龄学 │
├─────────────────────────────────────┤
│ │
│ 👶 选择孩子年龄 │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 3-4 │ │ 4-5 │ │[5-6]│ ←── 横滑 │
│ │ 岁 │ │ 岁 │ │ 岁 │ 选中高亮 │
│ └─────┘ └─────┘ └─────┘ │
│ ┌─────┐ ┌─────┐ │
│ │ 6-7 │ │ 7-8 │ │
│ │ 岁 │ │ 岁 │ │
│ └─────┘ └─────┘ │
│ │
├── 以下为选中年龄段「5-6 岁」的内容 ──┤
│ │
│ 📋 这个阶段的能力目标 │
│ ┌────────────────────────────┐ │
│ │ 🔢 数感：20以内加减法、凑十破十 │ │
│ │ ✏️ 书写：笔画描红、简单汉字 │ │
│ │ 🧩 思维：方格推理、颜色规律 │ │
│ │ 🎨 创造：格子仿画、涂色 │ │
│ └────────────────────────────┘ │
│ │
│ 📌 推荐学习路线 │ ← 核心差异化
│ ┌────────────────────────────┐ │
│ │ 第 1 周 数学基础 │ │
│ │ ├── 10以内分与合 [去练习 →] │ │
│ │ ├── 10以内加法 [去练习 →] │ │
│ │ └── 数一数连一连 [去练习 →] │ │
│ │ │ │
│ │ 第 2 周 进阶计算 │ │
│ │ ├── 凑十法练习 [去练习 →] │ │
│ │ ├── 比大小 [去练习 →] │ │
│ │ └── 填缺少的数字 [去练习 →] │ │
│ │ │ │
│ │ 第 3 周 专注力训练 │ │
│ │ ├── 颜色找规律 [去练习 →] │ │
│ │ ├── 方格推理 [去练习 →] │ │
│ │ └── 格子仿画 5x5 [去练习 →] │ │
│ │ │ │
│ │ 第 4 周 综合巩固 │ │
│ │ ├── 10以内加减法 [去练习 →] │ │
│ │ ├── 识字卡 [去练习 →] │ │
│ │ └── 连连看 [去练习 →] │ │
│ └────────────────────────────┘ │
│ │
│ 📚 该年龄段全部练习 │ ← 兜底浏览
│ ┌──────────────────────────┐ │
│ │ [数学] 共 15 项 ▾ │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐│ │
│ │ │10以内│ │凑十法│ │比大小││ │
│ │ │ 加法 │ │ 练习 │ │ ││ │
│ │ └─────┘ └─────┘ └─────┘│ │
│ │ │ │
│ │ [专注力] 共 8 项 ▾ │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐│ │
│ │ │颜色找│ │方格 │ │格子仿││ │
│ │ │ 规律 │ │ 推理 │ │ 画 ││ │
│ │ └─────┘ └─────┘ └─────┘│ │
│ │ │ │
│ │ [语文] 共 2 项 ▾ │ │
│ │ ┌─────┐ ┌─────┐ │ │
│ │ │识字卡│ │练字帖│ │ │
│ │ └─────┘ └─────┘ │ │
│ └──────────────────────────┘ │
│ │
└─────────────────────────────────────┘
页面三层信息架构
| 层次 | 模块 | 作用 | 数据来源 |
|---|---|---|---|
| 第 1 层 | 年龄选择器 | 一目了然地切换年龄段，卡片式带可爱插画 | 固定 5 档：3-4 / 4-5 / 5-6 / 6-7 / 7-8 |
| 第 2 层 | 能力目标 + 学习路线 | 告诉家长「这个年龄该练什么、按什么顺序练」，解决选择焦虑 | 运营配置，按年龄段维护 4 周路线 |
| 第 3 层 | 全部练习（按品类折叠） | 想自由浏览的家长可以看到该年龄段所有可用内容 | ALL_WORKSHEETS 按 ageRange 筛选 |
各年龄段能力目标参考
| 年龄段 | 数学 | 语文 | 专注力/益智 | 创意 |
|---|---|---|---|---|
| 3-4 岁 | 数字认知 1-10、数物对应、形状认知 | 识字卡启蒙 | 连连看、线条识别、格子仿画 3x3 | 涂色卡 |
| 4-5 岁 | 数字排序、5 以内加法、比大小 | 识字卡、练字帖入门 | 颜色找规律、方位涂涂乐、图形配对 | 涂色卡、简单折纸 |
| 5-6 岁 | 10 以内加减法、凑十法、分与合 | 练字帖、拼音入门 | 方格推理、格子仿画 5x5、译码连线 | 涂色卡、手工 |
| 6-7 岁 | 20 以内加减法、破十法、100 以内运算入门 | 笔画/偏旁、看图说话 | 数独入门、迷宫、找不同 | 折纸、手工 |
| 7-8 岁 | 100 以内加减法、乘法表、混合运算 | 成语/古诗 | 高阶迷宫、数独 | 自制绘本 |
「学习路线」设计要点
- 以 4 周为一个循环：每周 3 个练习项，共 12 个。不求覆盖全部，而是给出一条有节奏的推荐路径
- 跨品类编排：不能只推数学，应穿插专注力、语文、创意，保持孩子兴趣
- 由易到难：第 1 周入门、第 2 周进阶、第 3 周拓展、第 4 周综合巩固
- 运营可配置：学习路线以 JSON 配置存储，运营可根据上新内容调整推荐
- 可扩展为「打印计划」：未来结合用户体系，可记录完成进度，变成每日/每周打印计划
学习路线数据结构
interface AgeLearningPlan {
ageRange: [number, number]; // 如 [5, 6]
ageLabel: string; // "5-6 岁"
milestones: string[]; // 能力目标描述
weeks: WeekPlan[]; // 4 周学习路线
}
interface WeekPlan {
week: number; // 1-4
theme: string; // "数学基础" / "进阶计算"
worksheetIds: string[]; // 推荐的 worksheet id 列表
}
与其他页面的联动
| 场景 | 行为 |
|---|---|
| 点击路线中的「去练习」 | 直接跳转到对应 worksheet 的生成/预览页 |
| 点击底部全部练习中的卡片 | 同上 |
| 首页分龄筛选 | 跳转到分龄页并自动选中对应年龄段 |
| 「我的」页面孩子信息 | 如已设置孩子年龄，分龄页自动选中对应年龄段 |
为什么不只做年龄入口？
如果分龄页只是展示 5 个年龄段按钮，点进去看到一堆卡片列表——那它与「首页加一个年龄筛选器」完全等价，没有独占一个 Tab 的必要。学习路线 + 能力目标才是分龄页的不可替代价值：
- 新用户打开 → 看到「5-6 岁该练凑十法、识字卡」→ 不再迷茫
- 持续用户打开 → 按照 4 周路线逐步推进 → 形成使用习惯
- 家长分享价值 → 「推荐你用这个，有按年龄的学习计划」→ 口碑传播
5.4 收藏页设计（Tab：收藏）
定位：对应 TabBar 第三项「收藏」，是用户在发现 / 分龄之外最常用的「个人书架」：一类是还想再练、想对比的题型（收藏）；一类是已经生成并保存过的练习记录（下载历史）。二者合在一页、用顶部 Segment 切换，避免「收藏在 A 页、历史在 B 页」的割裂感；与「我的」页的关系见下文联动说明。
设计原则：
- 一屏两件事，主次清晰：默认优先展示「收藏的题型」（强意向）；「下载历史」作为第二 Tab，满足「上次打的是哪个」的溯源需求。
- 列表即入口：每一行都能 一键回到该题型的生成/预览页（带默认参数或上次参数，见技术实现约定），减少二次搜索。
- 轻量管理：支持取消收藏、历史项删除/清空（需二次确认）；不提供复杂文件夹，避免早教场景下的操作负担。
- 空状态友好：用鸭丫 IP + 一句话引导去「发现」或「分龄」，与品牌文档中的空状态规范一致。
页面结构（线框）
┌─────────────────────────────────────┐
│ 我的收藏 │ ← 导航标题
├─────────────────────────────────────┤
│ ┌───────────────┬───────────────┐ │
│ │ 收藏的题型 ✓ │ 下载历史 │ │ ← 分段控制（Segment）
│ └───────────────┴───────────────┘ │
├─────────────────────────────────────┤
│ [收藏的题型] Tab 下： │
│ │
│ ┌────────────────────────────────┐ │
│ │ [缩略] 10以内加法 │ │
│ │ 数学启蒙 · 4-6岁 · ⭐⭐ │ │
│ │ 收藏于 3 天前 ❤️ │ │ ← 实心=已收藏，点此取消
│ └────────────────────────────────┘ │
│ ┌────────────────────────────────┐ │
│ │ [缩略] 走迷宫 │ │
│ │ 益智游戏 · 3-7岁 │ │
│ │ 收藏于 5 天前 ❤️ │ │
│ └────────────────────────────────┘ │
│ │
├─────────────────────────────────────┤
│ [下载历史] Tab 下： │
│ │
│ ┌────────────────────────────────┐ │
│ │ [缩略] 拼音描红 │ │
│ │ 今天 14:32 已保存相册 │ │
│ └────────────────────────────────┘ │
│ ┌────────────────────────────────┐ │
│ │ [缩略] 10以内加法 │ │
│ │ 昨天 09:15 已保存相册 │ │
│ └────────────────────────────────┘ │
│ ··· 按时间倒序，可「清空」 │ │
└─────────────────────────────────────┘
双 Tab 信息架构
| Tab | 模块 | 用户目标 | 列表字段建议 | 主操作 |
|---|---|---|---|---|
| 收藏的题型 | 收藏列表 | 快速找回「标过心的」练习 | 预览缩略、标题、品类、适龄、难度、收藏时间 | 点击进入生成/预览页；点击 ❤ 取消收藏 |
| 下载历史 | 历史记录 | 复用「上次打过的那一张」的配置感 | 预览缩略、标题、下载时间、可选：题型元信息 | 点击进入同一题型的生成页；侧滑或菜单删除单条；顶部或底部清空历史 |
交互与规则细化
| 场景 | 行为 |
|---|---|
| 从收藏进入生成页 | 跳转 worksheetId 对应页面；若产品已支持「记住上次参数」，则预填题量/范围等 |
| 从历史进入生成页 | 同上；可选展示轻提示「已为您加载上次常用设置」 |
| 取消收藏 | 即时反馈（列表项移除或红心变空），必要时 toast「已取消收藏」 |
| 删除历史项 | 单条左滑删除或行内「删除」；清空历史需弹窗确认 |
| 题型已下架/ id 失效 | 灰显条目，副文案「内容已更新，看看相似推荐」，提供跳转发现页或同类筛选 |
| 未登录（若未来接账号） | Phase 1 可仅本地缓存；接用户体系后收藏/历史跨设备同步，冲突策略以服务端时间为准 |
空状态
| Tab | 文案方向 | 主按钮 |
|---|---|---|
| 收藏的题型 | 「鸭丫还没找到收藏呢，去发现好玩的练习纸吧~」 | 跳转「发现」Tab |
| 下载历史 | 「还没有保存记录，生成一张练习纸并保存到相册后会出现在这里」 | 跳转「发现」或保留上次浏览分类 |
与「我的」页的关系（避免重复心智）
- Tab「收藏」：完整功能页，含双 Segment + 列表，是主入口。
- 「我的」中的「下载历史 / 我的收藏」：建议作为快捷入口，点击后 跳转到本 Tab 并自动选中对应 Segment，而不是再维护一套独立列表页，降低开发与认知成本。
数据要点（产品侧）
| 实体 | 关键字段 | 说明 |
|---|---|---|
| 收藏项 | worksheetId、favoritedAt |
与内容库 id 对齐，便于展示元数据 |
| 历史项 | worksheetId、savedAt、可选 localAssetId/快照 |
以「最近一次成功保存到相册」为准触发记录；是否存缩略图视包体积与隐私策略而定 |
5.5 生成/预览页重设计
┌─────────────────────────────────────┐
│ ← 返回 凑十法练习 ❤️ ··· │
├─────────────────────────────────────┤
│ │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ A4 打印效果预览区 │ │
│ │ (Canvas 实时渲染) │ │
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ ⚙️ 参数设置 │
│ ┌────────────────────────────┐ │
│ │ 范围：[10以内 ▼] │ │
│ │ 题数：[12 ▼] │ │
│ │ 纸张：[A4 ▼] │ │
│ │ 页眉：[显示 ▼] │ │
│ └────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────────┐ │
│ │ 🔄 换一批 │ │ 📥 保存到相册 │ │
│ └──────────┘ └──────────────┘ │
│ │
│ ┌──────────┐ ┌──────────────┐ │
│ │ 📤 分享 │ │ 📄 存PDF(会员)│ │
│ └──────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────┘
5.6 「我的」页面（新增）
┌─────────────────────────────────────┐
│ 我的 │
├─────────────────────────────────────┤
│ ┌─────┐ │
│ │ 头像 │ 微信用户昵称 │
│ └─────┘ 已生成 128 张练习纸 │
├─────────────────────────────────────┤
│ │
│ 📥 下载历史 > │
│ ❤️ 我的收藏 > │
│ 📋 每日打印计划 > │
│ 📊 学习统计 > │
│ │
├─────────────────────────────────────┤
│ │
│ 🖨️ 打印指南 > │
│ ⚙️ 打印设置 > │
│ 💬 意见反馈 > │
│ ℹ️ 关于我们 > │
│ │
└─────────────────────────────────────┘
六、视觉风格升级建议
6.1 现状问题
- 入口卡片仅为简单的文字+icon，缺少视觉吸引力
- 配色单一，整体观感不够「儿童友好」
- 小鸭子 IP 形象已有但未贯穿全应用，品牌感不够强
6.2 品牌体系
品牌命名释义
「涂鸦丫」是一个谐音双关的品牌名：
- 涂鸦 = doodle，精准描述产品核心功能（儿童涂鸦 / 练习纸打印）
- 丫 = 可爱语气词，暗示小朋友 / 小丫头；同时谐音「鸭」，呼应 IP 形象
- 品牌故事：涂鸦丫是一只最爱涂鸦的小鸭丫，它相信每个孩子都是天生的小画家。
品牌色彩
| 色彩 | 色值 | 用途 |
|---|---|---|
| 品牌主色（鸭丫黄） | #f7ee47 | 主按钮、品牌标识、强调元素 |
| 主色加深（暖金） | #e6d520 | 按钮按压态、边框强调 |
| 辅助色（暖白） | #fffef0 | 页面背景、卡片底色 |
| 辅助色（浅灰） | #f5f5f5 | 次级背景 |
| 文字主色 | #333333 | 标题、正文 |
| 文字次色 | #999999 | 辅助说明文字 |
IP 形象规范
现有 IP「小鸭丫」已用于小程序图标，需进一步延伸：
| 场景 | IP 应用 |
|---|---|
| 小程序图标 | 小鸭丫正面头像（已有） |
| 启动页/闪屏 | 小鸭丫拿着画笔，配 Slogan |
| 空状态 | 小鸭丫的不同姿态 + 趣味文案（如「鸭丫还没找到收藏呢，去发现好玩的练习纸吧~」） |
| 加载动画 | 小鸭丫走路 / 画画的微动效 |
| 打印页装饰 | 页眉角落小鸭丫 logo，页脚鸭丫鼓励语 |
| 错误页面 | 小鸭丫摊手/挠头，配友好提示文案 |
6.3 视觉改进方向
| 维度 | 建议 |
|---|---|
| 主色调 | 以品牌黄 #f7ee47 为核心，搭配暖白 #fffef0 背景，营造温暖明快的儿童氛围 |
| 卡片风格 | 入口卡片使用真实打印效果预览图 + 圆角卡片 + 柔和阴影 |
| 字体 | 标题使用圆体/手写风格字体，正文保持清晰易读 |
| 图标 | 使用统一的手绘风格图标替代 emoji，风格与小鸭丫 IP 一致 |
| 动效 | 适度加入微动效（卡片进场、按钮反馈、小鸭丫加载动画） |
6.4 打印页面风格
| 维度 | 建议 |
|---|---|
| 页眉 | 小鸭丫 Logo + 「涂鸦丫」品牌字 + 小程序码 + 日期 + 孩子姓名（可选） |
| 页脚 | 小鸭丫鼓励语（如「鸭丫说：做得真棒！」「小鸭丫为你点赞！」） |
| 装饰 | 页面边角增加小鸭丫元素（小脚印、鸭丫剪影、星星等） |
| 排版 | 优化题目间距，确保打印后字体大小适合儿童辨认（≥14pt） |
七、技术改造建议
7.1 架构优化
| 改造项 | 现状 | 目标 | 优先级 |
|---|---|---|---|
| 内容配置化 | 题型硬编码 | JSON 配置 + 云端下发，新增题型无需发版 | P0 |
| 模板引擎 | 各题型独立 Draw Service | 抽象通用模板引擎，80% 新内容通过配置上线 | P0 |
| 客户端渲染优化 | 本地 Canvas 导出 PNG | 优化渲染性能，支持批量生成多张图片保存到相册 | P1 |
| 素材管理 | 素材随代码打包 | CDN + 按需下载，减少包体积 | P1 |
| 数据埋点 | 基础 tracker | 完善用户行为分析（使用频率、下载量、题型偏好） | P1 |
| PDF 导出（增值） | createPDF 实验性代码 | 会员增值功能，云函数合并多页 PNG 为 PDF | P4 |
7.2 模板引擎（产品视角）
详细技术设计见 技术架构设计文档 第五章
为什么需要模板引擎？
现状痛点：目前每新增一种可打印资料（如一种新题型、一张涂色卡），都需要开发者编写新的前端页面和绘制代码，然后提交微信审核发版。这意味着：
- 新增一种题型需要 1-3 天开发 + 1-3 天审核 = 最快一周上线
- 要达到 150+ 种内容的产品目标，需要写 150+ 套绘制代码，不可持续
- 无法快速响应节日/热点内容（如六一儿童节涂色卡、春节手工等）
模板引擎解决什么？
核心思路：所有可打印资料的排版模式是有限的，虽然题型有上百种，但归纳后只有 6-8 种排版模式。
排版模式 覆盖的题型（举例）
──────────────── ──────────────────────────────────
网格计算型 加减法、乘法、凑十/破十、比大小、填空...
配对连线型 数物连线、连连看、译码连线、点连线...
网格涂色型 找数字涂色、方位涂色、格子仿画...
卡片排列型 涂色卡、闪卡、识字卡、字母卡、贴纸...
描红书写型 练字、拼音描红、字母描红、数字描红...
全幅素材型 整页涂色卡、折纸模板、手工模板...
序列排序型 数字排序、缺失数字、颜色规律...
特殊图形型 时钟练习、形状分类、货币认知...
有了模板引擎后：
| 场景 | 之前 | 之后 |
|---|---|---|
| 新增「50以内减法」 | 写代码 → 发版 | JSON 配置一条记录 → 即时上线 |
| 新增「恐龙涂色卡」 | 写绘制代码 → 发版 | 上传 SVG 素材 + JSON 配置 → 即时上线 |
| 新增「字母描红」 | 写代码 → 发版 | JSON 配置 + 字母数据 → 即时上线 |
| 新增「迷宫」 | 写迷宫算法 → 发版 | 需写新生成器 → 仍需发版 |
| 六一主题涂色卡 | 来不及开发 | 上传素材 + 配置 → 当天上线 |
对产品运营的影响
模板引擎上线后，产品运营模式从「开发驱动」转变为「运营驱动」：
之前：产品经理提需求 → 开发排期 → 编码 → 测试 → 审核 → 上线（1-2周）
之后：
场景 A（已有模板覆盖的新题型/素材）：
运营/产品 → 编写 JSON 配置 + 上传素材 → 云端生效 → 即时上线（<1小时）
场景 B（需要新排版模式的题型）：
产品提需求 → 开发新 TemplateRenderer → 发版（1-2周）
之后该模式下的新题型走场景 A
内容运营节奏建议
| 运营方式 | 频率 | 说明 |
|---|---|---|
| 常规上新 | 每周 2-3 种 | 通过 JSON 配置新增题型变体或素材型内容 |
| 主题上新 | 每月 1 次 | 节日/季节主题内容包（涂色卡、手工模板等） |
| 热点响应 | 随时 | 追节日/热点快速上线应景内容 |
| 版本迭代 | 每 2-4 周 | 新排版模板、新生成算法、UI 改进等需发版内容 |
7.3 内容交付形态决策框架（客户端生成 vs 云存储）
与 技术架构设计文档 第七章 §7.4（涂色卡/迷宫等素材型内容方案中的类型 A/B/C）一致，本节从产品视角给出可执行的判断标准，避免「像字母描红这种看似固定的内容是否该预生成图放云存储」这类决策反复讨论。
7.3.1 决策树（产品侧）
规划新题型或新资料时，按顺序回答下列问题：
新内容 / 新题型
│
├─ 能否通过算法 + 参数（含字库/字母表/随机种子）在客户端产出整页可打印结果？
│ ├─ 能 → 【客户端动态生成】
│ │ 例：加减法、迷宫路径、字母/拼音/数字描红、识字卡选字组合、控笔虚线…
│ │
│ └─ 否 → 是否依赖设计师绘制的线稿、展开图、贴纸图等「不可替代的美术素材」？
│ ├─ 是 → 【云存储素材 + 客户端排版导出】
│ │ 例：主题涂色卡、折纸展开图、手工模板、装饰贴纸…
│ │
│ └─ 否 → 【混合型】
│ 算法生成结构 + 云存储皮肤/底图
│ 例：迷宫（路径算法 + 主题边框）、闪卡（版式 + 配图 URL）…
一句话原则：能算出来的不要囤成静态图；只有「画出来才有价值」的才上云存储。
7.3.2 典型内容对照表
| 内容类型 | 推荐交付形态 | 简要理由 |
|---|---|---|
| 字母 / 拼音描红 | 客户端生成 | 字形规则、参数多（每页字数、重复次数、大小写组合）；预生成图组合爆炸 |
| 数字描红 | 客户端生成 | 同上；与现有数学/练字能力一致 |
| 汉字描红（练字） | 客户端生成 | 依赖笔画数据 + 田字格排版；用户自选字表 |
| 运算类、规律类题型 | 客户端生成 | 需随机「换一批」；零边际服务器成本 |
| 主题涂色卡线稿 | 云存储 + 排版 | 美术品质依赖设计稿，无法靠通用算法还原 |
| 折纸 / 手工模板 | 云存储 + 排版 | 展开图与步骤图为设计资产 |
| 贴纸、装饰素材 | 云存储 | 纯素材分发 |
| 迷宫、找不同等 | 混合型 | 结构或差异点可算法生成，主题视觉可素材化 |
7.3.3 与模板引擎的对应关系
| 交付形态 | 常见模板类型（技术文档用语） | 产品侧理解 |
|---|---|---|
| 客户端生成 | grid-exercise、tracing-writing、sequence-pattern 等 |
选模板 + 生成器 + 用户可调参数 |
| 云存储素材 | full-page-asset + static-asset |
配置素材 URL，按需下载后套 A4 |
| 混合型 | 自定义生成器 + 素材字段 | 产品需拆清「哪部分算、哪部分画」 |
7.3.4 决策时需同步考虑的约束
| 约束 | 说明 |
|---|---|
| 成本与规模 | 客户端生成主路径不增加下载带宽；大量预生成高清 PNG 会放大存储与流量成本 |
| 离线体验 | 纯客户端生成可在弱网或无网下完成预览（依赖已内置/已缓存的数据与字体） |
| 运营迭代 | JSON 配置 + 素材上架即可扩展客户端生成题型变体；云素材适合快速换主题 |
| 视觉统一 | 描红类建议统一字体与格线规范；云素材需建立插画/线稿风格指南 |
产品评审新需求时，建议在需求单中显式勾选交付形态（客户端生成 / 云素材 / 混合），并与设计、研发对齐模板类型与是否需要新增生成器。
7.4 分包优化
当前分包结构： 建议优化后：
├── 主包 ├── 主包
│ ├── mathIndex │ ├── home (发现首页)
│ ├── focusIndex │ ├── category (分类页)
│ ├── index (识字) │ ├── profile (我的)
│ └── copyBook (练字) │ └── guide (打印指南)
├── mathPages ├── mathPages (数学相关)
└── focusPages ├── chinesPages (语文相关)
├── englishPages (英语相关)
├── puzzlePages (益智相关)
└── craftPages (创意手工)
7.5 数据模型扩展
interface WorksheetConfig {
id: string;
title: string;
desc: string;
// ─── 分类与筛选 ───
category: 'math' | 'chinese' | 'english' | 'puzzle' | 'craft';
subcategory: string;
ageRange: [number, number];
difficulty: 1 | 2 | 3 | 4;
previewImage: string;
tags: string[];
isNew: boolean;
sortOrder: number;
downloadCount: number;
status: 'active' | 'draft' | 'hidden';
// ─── 模板引擎配置（核心新增）───
template: TemplateType; // 使用哪个排版模板
generator: GeneratorType; // 使用哪个数据生成器
generatorConfig: Record<string, any>; // 生成器参数
layoutConfig: LayoutConfig; // 排版参数
userConfigurable?: UserConfigField[]; // 用户可调整的参数（渲染到设置面板）
// ─── 兼容旧架构 ───
legacyPage?: string; // 旧页面路径（迁移过渡期使用）
}
完整的类型定义和 JSON 配置示例见 技术架构设计文档 第五章
八、实施路线图
Phase 1（第 1-2 周） ← 夯实基础
├── 修复技术问题（云函数/死链）
├── 增加年龄分级和难度标签
├── 效果预览图优化
├── 新增打印指南页
└── 代码分层重构（建立 core/ 和 platform/ 目录）
Phase 2（第 3-5 周） ← 🔑 模板引擎 + 首页重构
├── 【核心】开发模板引擎
│ ├── 实现 3 种高优先级模板渲染器
│ │ ├── grid-exercise（网格计算型）
│ │ ├── full-page-asset（全幅素材型）
│ │ └── tracing-writing（描红书写型）
│ ├── 实现通用 worksheet 页面
│ └── 试点迁移 2-3 种现有题型验证
├── 首页重设计（分类导航 + 搜索）
├── 内容配置化（JSON + 云端下发）
└── 云数据库建表（含模板引擎字段）
Phase 3（第 6-8 周） ← 内容爆发（模板引擎红利期）
├── 补全剩余 5 种模板渲染器
├── 存量 40+ 题型批量迁移到模板引擎
├── 通过 JSON 配置快速上线新题型：
│ ├── 数学：时钟练习、形状分类
│ ├── 语文：拼音练习、笔画练习
│ ├── 英语：字母描红、字母闪卡（JSON 配置即可）
│ ├── 益智：控笔练习
│ └── 创意：涂色卡、折纸（上传素材即可）
└── 需新生成器的题型：走迷宫、找不同
Phase 4（第 9-10 周） ← 体验升级
├── 用户体系（登录/收藏/历史）
├── 批量生成图片（多张保存到相册）
├── 每日打印计划
└── 数据统计与学习报告
Phase 5（持续运营迭代） ← 运营驱动增长
├── 每周通过 JSON 配置上新 2-3 种内容（无需发版）
├── 节日/季节主题内容包（涂色卡、手工模板等）
├── PDF 导出（会员增值功能）
├── 社区分享
├── 内容创作者入驻
└── 会员体系（免费 + 高级内容）
九、商业化思路
| 模式 | 说明 |
|---|---|
| 免费 + 广告 | 基础内容免费，展示原生广告（现有模式） |
| 会员订阅 | 月/年会员，解锁高级内容、去广告、PDF 多页导出、批量生成 |
| 内容付费 | 特定高级内容包（如「幼升小全套」「暑假特训」）单独购买 |
| 打印服务 | 接入云打印平台，用户一键下单，直接邮寄打印成品 |
十、关键指标（KPI）
| 指标 | 当前预估 | Phase 2 目标 | 长期目标 |
|---|---|---|---|
| 内容品类 | 4 类 | 8 类 | 15+ 类 |
| 可打印题型 | 41 种 | 60+ 种 | 150+ 种 |
| 日均使用 UV | - | 500 | 5,000 |
| 人均停留时长 | - | 3 min | 8 min |
| 日均下载量 | - | 1,000 张 | 10,000 张 |
| 用户次日留存 | - | 25% | 40% |
| 分享率 | - | 10% | 20% |
附录 A：竞品功能对照表
| 功能 | kiddoworksheets | 涂鸦丫 现有 | 涂鸦丫 v3.0 规划 |
|---|---|---|---|
| 字母描红 | ✅ | ❌ | ✅ P1 |
| 草书练习 | ✅ | ❌ | ❌（非目标用户需求） |
| 缺失字母 | ✅ | ❌ | ✅ P1（字母找一找） |
| 数字描红 | ✅ | ✅ 看数字写一写 | ✅ |
| 缺失数字 | ✅ | ✅ 填上缺少的数字 | ✅ |
| 闪卡 | ✅ | ❌ | ✅ P1 |
| 形状练习 | ✅ | ✅ 识别形状 | ✅ |
| 规律练习 | ✅ | ✅ 颜色找规律 | ✅ 扩展数字/图形规律 |
| 涂色页 | ✅ | ❌ | ✅ P2 |
| 画画教程 | ✅ | ❌ | ❌（优先级低） |
| 点连线 | ✅ | ✅ 数字点连线 | ✅ 扩展字母连线 |
| 加法 | ✅ | ✅ 多种加法题型 | ✅ |
| 减法 | ✅ | ✅ 多种减法题型 | ✅ |
| 乘法 | ✅ | ✅ 九九乘法表 | ✅ |
| 计数 | ✅ | ✅ 多种计数题型 | ✅ |
| 英语练习 | ✅ | ❌ | ✅ P1 |
| 高频词 | ✅ | ❌ | ✅ P2 |
| 词汇拼写 | ✅ | ❌ | ✅ P2 |
| 字谜 | ✅ | ❌ | ✅ P3 |
| 填字游戏 | ✅ | ❌ | ✅ P3 |
| 常识问答 | ✅ | ❌ | ❌（优先级低） |
| 描线练习 | ✅ | ✅ 线条识别 | ✅ 控笔练习 |
| 配对连线 | ✅ | ✅ 连连看/连线 | ✅ |
| 找相同 | ✅ | ❌ | ✅ P2 |
| 人体部位 | ✅ | ❌ | ❌（优先级低） |
| 时钟 | ✅ | ❌ | ✅ P1 |
| 贴纸 | ✅ | ❌ | ✅ P3 |
| 滑动拼图 | ✅（在线游戏） | ❌ | ❌（非打印类） |
| 找不同 | ✅ | ❌ | ✅ P2 |
| 折纸 | ✅ | ❌ | ✅ P2 |
| 迷宫 | ✅ | ❌ | ✅ P2 |