feat:生产初版页面
This commit is contained in:
R524809
+255
-27
@@ -14,13 +14,13 @@
|
||||
|
||||
### 1.1 内容层面
|
||||
|
||||
| 问题 | 现状 | 影响 |
|
||||
| -------- | ---------------------------------------------- | -------------------------------------------------------- |
|
||||
| 品类单一 | 仅有数学计算、专注力训练、识字、练字四类 | 缺少英语启蒙、科学认知、艺术创造、生活常识等早教核心板块 |
|
||||
| 题型趋同 | 数学 26 种题型多为数字计算变体，缺少生活化数学 | 用户容易审美疲劳，低龄段（3-5岁）可用内容少 |
|
||||
| 缺乏体系 | 题型平铺排列，无年龄分级/难度递进 | 家长无法按孩子年龄/水平选择合适内容 |
|
||||
| 无趣味化 | 缺少迷宫、涂色卡、手工折纸等高趣味性内容 | 与竞品（kiddoworksheets）差距大 |
|
||||
| 内容静态 | 所有内容均为代码写死，每种题型需独立编写绘制代码 | 新增题型需要发版（1-2 周），无法快速响应热点/节日内容 |
|
||||
| 问题 | 现状 | 影响 |
|
||||
| -------- | ------------------------------------------------ | -------------------------------------------------------- |
|
||||
| 品类单一 | 仅有数学计算、专注力训练、识字、练字四类 | 缺少英语启蒙、科学认知、艺术创造、生活常识等早教核心板块 |
|
||||
| 题型趋同 | 数学 26 种题型多为数字计算变体，缺少生活化数学 | 用户容易审美疲劳，低龄段（3-5岁）可用内容少 |
|
||||
| 缺乏体系 | 题型平铺排列，无年龄分级/难度递进 | 家长无法按孩子年龄/水平选择合适内容 |
|
||||
| 无趣味化 | 缺少迷宫、涂色卡、手工折纸等高趣味性内容 | 与竞品（kiddoworksheets）差距大 |
|
||||
| 内容静态 | 所有内容均为代码写死，每种题型需独立编写绘制代码 | 新增题型需要发版（1-2 周），无法快速响应热点/节日内容 |
|
||||
|
||||
### 1.2 用户体验层面
|
||||
|
||||
@@ -268,7 +268,235 @@
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.3 生成/预览页重设计
|
||||
### 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 生成/预览页重设计
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
@@ -301,7 +529,7 @@
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.4 「我的」页面（新增）
|
||||
### 5.6 「我的」页面（新增）
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
@@ -436,13 +664,13 @@
|
||||
|
||||
**有了模板引擎后：**
|
||||
|
||||
| 场景 | 之前 | 之后 |
|
||||
|------|------|------|
|
||||
| 新增「50以内减法」 | 写代码 → 发版 | JSON 配置一条记录 → **即时上线** |
|
||||
| 场景 | 之前 | 之后 |
|
||||
| ------------------ | ----------------- | ---------------------------------------- |
|
||||
| 新增「50以内减法」 | 写代码 → 发版 | JSON 配置一条记录 → **即时上线** |
|
||||
| 新增「恐龙涂色卡」 | 写绘制代码 → 发版 | 上传 SVG 素材 + JSON 配置 → **即时上线** |
|
||||
| 新增「字母描红」 | 写代码 → 发版 | JSON 配置 + 字母数据 → **即时上线** |
|
||||
| 新增「迷宫」 | 写迷宫算法 → 发版 | 需写新生成器 → **仍需发版** |
|
||||
| 六一主题涂色卡 | 来不及开发 | 上传素材 + 配置 → **当天上线** |
|
||||
| 新增「字母描红」 | 写代码 → 发版 | JSON 配置 + 字母数据 → **即时上线** |
|
||||
| 新增「迷宫」 | 写迷宫算法 → 发版 | 需写新生成器 → **仍需发版** |
|
||||
| 六一主题涂色卡 | 来不及开发 | 上传素材 + 配置 → **当天上线** |
|
||||
|
||||
#### 对产品运营的影响
|
||||
|
||||
@@ -462,12 +690,12 @@
|
||||
|
||||
#### 内容运营节奏建议
|
||||
|
||||
| 运营方式 | 频率 | 说明 |
|
||||
|---------|------|------|
|
||||
| 常规上新 | 每周 2-3 种 | 通过 JSON 配置新增题型变体或素材型内容 |
|
||||
| 主题上新 | 每月 1 次 | 节日/季节主题内容包（涂色卡、手工模板等） |
|
||||
| 热点响应 | 随时 | 追节日/热点快速上线应景内容 |
|
||||
| 版本迭代 | 每 2-4 周 | 新排版模板、新生成算法、UI 改进等需发版内容 |
|
||||
| 运营方式 | 频率 | 说明 |
|
||||
| -------- | ----------- | ------------------------------------------- |
|
||||
| 常规上新 | 每周 2-3 种 | 通过 JSON 配置新增题型变体或素材型内容 |
|
||||
| 主题上新 | 每月 1 次 | 节日/季节主题内容包（涂色卡、手工模板等） |
|
||||
| 热点响应 | 随时 | 追节日/热点快速上线应景内容 |
|
||||
| 版本迭代 | 每 2-4 周 | 新排版模板、新生成算法、UI 改进等需发版内容 |
|
||||
|
||||
### 7.3 分包优化
|
||||
|
||||
@@ -506,14 +734,14 @@ interface WorksheetConfig {
|
||||
status: 'active' | 'draft' | 'hidden';
|
||||
|
||||
// ─── 模板引擎配置（核心新增）───
|
||||
template: TemplateType; // 使用哪个排版模板
|
||||
generator: GeneratorType; // 使用哪个数据生成器
|
||||
generatorConfig: Record<string, any>;// 生成器参数
|
||||
layoutConfig: LayoutConfig; // 排版参数
|
||||
userConfigurable?: UserConfigField[];// 用户可调整的参数（渲染到设置面板）
|
||||
template: TemplateType; // 使用哪个排版模板
|
||||
generator: GeneratorType; // 使用哪个数据生成器
|
||||
generatorConfig: Record<string, any>; // 生成器参数
|
||||
layoutConfig: LayoutConfig; // 排版参数
|
||||
userConfigurable?: UserConfigField[]; // 用户可调整的参数（渲染到设置面板）
|
||||
|
||||
// ─── 兼容旧架构 ───
|
||||
legacyPage?: string; // 旧页面路径（迁移过渡期使用）
|
||||
legacyPage?: string; // 旧页面路径（迁移过渡期使用）
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user