# 涂鸦丫 小程序 - 产品设计文档 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](https://www.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 以内加减法、乘法表、混合运算 | 成语/古诗 | 高阶迷宫、数独 | 自制绘本 | #### 「学习路线」设计要点 1. **以 4 周为一个循环**：每周 3 个练习项，共 12 个。不求覆盖全部，而是给出一条**有节奏的推荐路径** 2. **跨品类编排**：不能只推数学，应穿插专注力、语文、创意，保持孩子兴趣 3. **由易到难**：第 1 周入门、第 2 周进阶、第 3 周拓展、第 4 周综合巩固 4. **运营可配置**：学习路线以 JSON 配置存储，运营可根据上新内容调整推荐 5. **可扩展为「打印计划」**：未来结合用户体系，可记录完成进度，变成每日/每周打印计划 #### 学习路线数据结构 ```typescript 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 页」的割裂感；与「我的」页的关系见下文联动说明。 **设计原则**： 1. **一屏两件事，主次清晰**：默认优先展示「收藏的题型」（强意向）；「下载历史」作为第二 Tab，满足「上次打的是哪个」的溯源需求。 2. **列表即入口**：每一行都能 **一键回到该题型的生成/预览页**（带默认参数或上次参数，见技术实现约定），减少二次搜索。 3. **轻量管理**：支持**取消收藏**、历史项**删除/清空**（需二次确认）；不提供复杂文件夹，避免早教场景下的操作负担。 4. **空状态友好**：用鸭丫 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 模板引擎（产品视角） > 详细技术设计见 [技术架构设计文档](./技术架构设计文档.md) 第五章 #### 为什么需要模板引擎？ **现状痛点**：目前每新增一种可打印资料（如一种新题型、一张涂色卡），都需要开发者编写新的前端页面和绘制代码，然后提交微信审核发版。这意味着： - 新增一种题型需要 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 分包优化 ``` 当前分包结构： 建议优化后： ├── 主包 ├── 主包 │ ├── mathIndex │ ├── home (发现首页) │ ├── focusIndex │ ├── category (分类页) │ ├── index (识字) │ ├── profile (我的) │ └── copyBook (练字) │ └── guide (打印指南) ├── mathPages ├── mathPages (数学相关) └── focusPages ├── chinesPages (语文相关) ├── englishPages (英语相关) ├── puzzlePages (益智相关) └── craftPages (创意手工) ``` ### 7.4 数据模型扩展 ```typescript 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; // 生成器参数 layoutConfig: LayoutConfig; // 排版参数 userConfigurable?: UserConfigField[]; // 用户可调整的参数（渲染到设置面板） // ─── 兼容旧架构 ─── legacyPage?: string; // 旧页面路径（迁移过渡期使用） } ``` > 完整的类型定义和 JSON 配置示例见 [技术架构设计文档](./技术架构设计文档.md) 第五章 --- ## 八、实施路线图 ``` 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 |