Jacky/Hulumath-Web-Demo
Archived
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo

Browse Source
This commit is contained in:
Jacky
2026-08-08 15:49:06 +08:00
parent e7dce1680a
commit 0a7207fa0e
76 changed files with 22779 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/产品文档/产品设计PRD.md
+487
View File
@@ -0,0 +1,487 @@
# 数学脑 · 产品设计 PRD
> 版本：v1.0 | 状态：草案 | 更新日期：2026-06
---
## 一、产品概要
### 1.1 产品定义
**数学脑** 是一款以"乐"为核心的数学兴趣社区 App（Web 端适配移动端）。通过视频发现、知识卡片、数学专业模拟器、互动视觉小说等多元内容形态，让用户在没有学习压力的环境下，重新认识数学的美感与用处。
**一句话**：让中小学生通过"模拟大学数学专业"等沉浸式体验，在爽的过程中爱上数学；让成年人通过知识卡片和视频，碎片化刷新对数学的认知。
### 1.2 核心定位
| 维度 | 定位 |
|------|------|
| 用户心智 | "数学也可以很有趣"——兴趣消遣型，非目标驱动型 |
| 对标参考 | B站（内容发现）+ Duolingo（游戏化留存）+ 卵石实习生（模拟体验） |
| 差异化 | 数学垂类唯一提供"大学数学专业全流程模拟"的产品 |
| 公益属性 | 支教场景作为分发渠道，促进教育公平 |
### 1.3 目标用户
| 优先级 | 用户群 | 核心场景 |
|--------|--------|---------|
| 短期主打 | 中小学生（12-18岁） | 刷视频发现数学的用处；玩模拟器体验"大学数学专业是什么样" |
| 长期沉淀 | 成年人（18-35岁） | 碎片时间读知识卡片；在视觉小说中体验数学+武侠跨界叙事 |
| 渠道用户 | 支教志愿者 & 支教地学生 | 通过支教项目接触到 App，作为辅助教学/兴趣引导工具 |
### 1.4 不做的事
- **不做刷题**：不以应试提分为目标
- **不做论坛/UGC**：不开放用户发帖、评论、私信等社交功能
- **不做广告**：商业化不依赖信息流或视频贴片广告
- **不做氪金**：无内购抽卡、虚拟币充值
### 1.5 产品理念
> **乐为核心。** 用户不需要"学到"什么——而是玩了之后，无意中感受到数学的妙处。
>
> **内容纯净。** 无社交陌生人、无氪金引导。家长放心，孩子喜欢。
>
> **支教为渠道。** 通过常青藤支教队等公益网络，把 App 带到教育资源薄弱地区。
---
## 二、功能架构
### 2.1 四大主模块
```
数学脑
│
┌────────────────────┼────────────────────┐
│ │ │
🟠 发现 🔵 知识 🟢 数学人生
（视频发现流） （知识卡片流） （沉浸式体验）
│ │ │
┌───────┼───────┐ │ ┌────────┼────────┐
│ │ │ ┌────┼────┐ │ │ │
推荐 热门 专业分区 Hero 话题 卡片 数学专业 葫芦侠行
(12) 大卡 标签 流 模拟器 互动小说
│
┌─────┼─────┐
大一～大四 8章93节点
全流程模拟 8+种结局
🟣 我的
（个人中心）
│
┌───────────┼───────────┐
│ │ │
个人信息 我的内容 更多设置
```
### 2.2 全局功能
| 功能 | 说明 | 入口 |
|------|------|------|
| AI 数学助教 | DeepSeek 大模型驱动的对话式问答 | 任意页面右上角按钮 |
| 底部 TabBar | 四个模块切换入口 | 始终可见 |
| 顶部品牌栏 | "数学脑"品牌标识 + AI入口 | 始终可见 |
| 家长模式 | 使用时长统计 + 内容消费报告 | "我的"页面 |
### 2.3 模块详情
#### 🟠 发现 · 视频发现流
**定位**：B站式数学垂类视频发现入口。
**组成**：
- **顶部搜索栏**：支持按标题、描述、作者、学科搜索
- **子导航**：推荐 / 热门 / 专业分区
- **12 个专业分区图标网格**：人工智能、计算机、电子信息、微电子、机械工程、自动化、能源动力、化工材料、生物医学、经济管理、环境工程、数学建模
- **双列视频卡片流**：封面 + 标题 + 作者 + 时长 + 观看量
- **视频详情弹窗**：标题、简介、作者、学科标签、外部链接跳转
**数据**：当前内置 54 条占位视频（各学院志愿者提供），来自 seed_videos.json → SQLite。
**交互**：
- 点击分区图标 → 展示该学科专属视频列表 + 返回按钮
- 点击视频卡片 → 弹出详情弹窗
- 搜索实时过滤
---
#### 🔵 知识 · 知识卡片流
**定位**：类似小红书/得到 App 的轻量数学知识发现，非视频形态。
**组成**：
- **每日 Hero 大卡**：渐变深蓝背景，今日主题 + 阅读统计
- **横向滚动话题标签**：统计陷阱、概率思维、几何直觉、逻辑悖论、数学模型、博弈策略、数列之美、混沌理论
- **信息流卡片（当前6张）**：
- 每张卡片包含：渐变色彩封面 + 一个引人思考的"问题" + 知识标题 + 描述 + 阅读时间
- 点击卡片 → 呼出 AI 助教深入探讨该主题
**示例卡片**：
- 被平均数骗过的所有人（你和马云的平均财富是多少？）
- 彩票：一场精心设计的数学税（2元博500万，值不值？）
- 为什么所有地图都在骗你（格陵兰岛有非洲大吗？）
**交互**：
- 点击话题标签 → 高亮筛选
- 点击卡片 → 一键呼出 AI 深入追问
---
#### 🟢 数学人生 · 沉浸式体验
**定位**：整个产品的核心差异化模块，包含两个独立子功能。
##### 子功能一：数学专业模拟器（P0 主打）
**定位**：让学生"跑完四年大学数学专业的全流程"，在模拟中选择方向、面对挑战、最终走向不同结局。参考卵石实习生 App 的模式。
**结构**：8学期（大一上→大四下），每学期约10-15个事件节点。
**核心循环**：
```
选课 → 上课（课堂事件选择题）→ 期中考试 → 课外活动与社交 → 期末考试 → 学期结算 → 暑假事件 → 下学期
```
**大三专业分流**（核心关卡）：
```
纯数学 应用数学 统计学
├─ 分析（实变/泛函） ├─ 计算数学（数值分析） ├─ 数理统计
├─ 代数（抽象代数） ├─ 金融数学（随机过程） ├─ 数据科学
└─ 几何（微分几何） └─ 生物数学（生物信息） └─ 精算
```
**属性系统**：GPA、学术倾向、社交值、兴趣值、精力值（有限分配）
**毕业结局**：数学博士、量化交易员、高中教师、数据科学家、数学作家、转行程序员、退学创业者等。
**指标**：用户留存率、日均访问次数、完整跑完四年的用户比例。
##### 子功能二：葫芦侠行 · 互动视觉小说
**定位**：北宋数学武侠背景的 8 章完整互动剧情。基于原创小说《葫芦侠行》改编。是深度内容的沉淀，适合喜欢叙事体验的用户。
**规模**：8章 × 约12节点/章 = 93个交互节点
**属性系统**：数理根基、侠义声望、心志韧性、关键角色好感度
**结局**：8+ 种（真相守望 / 数理宗师 / 逍遥江湖 / 出海远航 / 悲情英雄 / 堕落之路 / 冤狱 / 虚无）
**当前状态**：已开发完成，可运行。
---
#### 🟣 我的 · 个人中心
**定位**：标准 App 个人中心，个人信息管理 + 数据概览 + 家长入口。
**板块**：
- **个人卡片**：头像 + 昵称 + ID + 身份标签（紫色渐变背景）
- **数据统计**：已看内容数、收藏专题数、剧情存档数
- **个人信息**：昵称与头像、兴趣方向、学习偏好
- **我的内容**：我的收藏、观看记录、数学人生存档
- **更多**：设置与帮助、意见反馈
- **家长模式**（规划中）：本周使用时长、内容消费分布、知识点图谱
---
### 2.4 后续规划功能
| 优先级 | 功能 | 说明 |
|--------|------|------|
| P1 | 工具箱/趣味计算器 | 概率模拟器、数学魔术生成器、π查询器、分形画廊。作为留存工具，填补碎片时间 |
| P1 | AI 数字人视频生成 | AI写稿 + TTS语音 + 静态数字人播报，降低视频制作成本 |
| P1 | 数学冷知识随机卡片 | 摇一摇或点击刷新，轻量互动 |
| P2 | 双语支持（i18n） | UI文案抽离、故事双语JSON、视频双语描述 |
| P2 | 支教场景定制 | 为支教志愿者提供教学辅助功能、学生进度追踪 |
| P3 | 学习报告/周报 | 每周生成内容消费总结，可分享给家长 |
---
## 三、交互与UI规范
### 3.1 布局
| 规范 | 值 |
|------|------|
| 容器宽度 | `min(390px, 100vw)`（iPhone 标准比例） |
| 全屏高度 | `100dvh` |
| 安全区 | `env(safe-area-inset-top)` / `env(safe-area-inset-bottom)` |
| 桌面端 | 居中 + `border-radius: 34px` + 阴影（模拟设备壳） |
| 字体 | `-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei` |
### 3.2 底部 TabBar
- 四个入口图标：CSS 伪元素绘制，简约风格
- 背景：白色半透明 + `backdrop-filter: blur(18px)` 玻璃感
- 激活态：对应模块主色的浅色背景高亮
- 适配 safe-area 底部留白
### 3.3 色彩语义
| 模块 | 主色 | 色值 |
|------|------|------|
| 发现 | 暖橙 | `#F97316` |
| 知识 | 蓝色 | `#3B82F6` |
| 数学人生 | 绿色 | `#10B981` |
| 我的 | 紫色 | `#8B5CF6` |
切换模块时，全局 CSS 变量 `--accent` 动态替换，顶部品牌栏和视觉小说内角色名同步变色。
### 3.4 响应式
- 移动端：全宽，safe-area 适配
- 桌面端（≥480px）：居中显示在模拟设备壳中，上方和两侧留白
---
## 四、技术架构
### 4.1 技术选型
| 层级 | 技术 | 用途 |
|------|------|------|
| 后端 | Flask（Python） | 路由、API、SQLite 管理 |
| 数据库 | SQLite | 视频数据、行为日志 |
| 前端 | 原生 HTML5 + CSS3 + Vanilla JS | SPA 页面切换、视觉小说引擎 |
| AI | DeepSeek Chat API | AI 数学助教对话 |
| 数据 | JSON 文件 | 剧情节点树、种子视频 |
### 4.2 API 接口
| 路径 | 方法 | 返回 | 说明 |
|------|------|------|------|
| `/` | GET | HTML | SPA 首页 |
| `/api/videos` | GET | `{code, data, disciplines}` | 视频列表 + 学科分类 |
| `/api/chat` | POST | `{code, reply}` | AI 对话 |
| `/api/story` | GET | `{code, data}` | 互动剧情 JSON |
| `/api/log` | POST | `{code, msg}` | 行为日志 |
| `/api/students` | GET | `{code, data}` | 学生列表（B端预留） |
### 4.3 视觉小说引擎
共用引擎，数据隔离：
- `seed_story.json` → 葫芦侠行（93节点，已完成）
- `seed_simulator.json`（待建）→ 数学专业模拟器（约100-120节点）
引擎特性：打字机效果、四属性系统、章节自动检测、localStorage 存档/读档/重置、选项效果预览。
### 4.4 多端支持
```
┌─────────────────────┐
│ Flask 后端 + SPA │
│ (同一套代码) │
└─────────┬───────────┘
│
┌───────────────┼───────────────┐
│ │ │
浏览器访问 PWA 安装 小程序 web-view
(HTTP/HTTPS) (manifest.json) (壳包 + 嵌入URL)
```
不开发独立原生 App。通过 PWA + 各平台小程序 web-view 实现多端覆盖。需要 HTTPS 域名部署。
---
## 五、内容策略
### 5.1 内容矩阵
| 类型 | 数量 | 来源 | 更新频率 |
|------|------|------|---------|
| 科普视频 | 54条（占位） | 各学院志愿者 + 未来 AI 生成 | 周更 |
| 知识卡片 | 6张 | 团队原创 | 周更 |
| 话题标签 | 8个 | 团队精选 | 月更 |
| 葫芦侠行 | 93节点 | 原创小说改编 | 已完成 |
| 数学模拟器 | ~120节点 | 团队设计 | 开发中 |
### 5.2 AI 助教
- 引擎：DeepSeek Chat
- 系统提示词设定：面向中小学生的数学引导者，200字以内，生活化语言
- 触发点：知识卡片点击、任意页面右上角按钮、快捷提问按钮
- 快捷提问：数学与医学 / 数学与建筑 / 数学与AI / 为什么要学
### 5.3 AI 数字人视频（P1规划）
| 阶段 | 做法 | 单条成本 |
|------|------|---------|
| MVP | AI写稿 → 人工录旁白 → 画面剪辑 | 几乎零 |
| v1 | AI写稿 + TTS语音 + 静态数字人播报 | ¥5-15 |
| v2 | 数字人 + AI辅助画面 + 人工精修 | ¥20-50 |
### 5.4 双语规划（P2）
- UI 文案抽离为 `i18n/zh.json` / `i18n/en.json`
- 视频标题/描述增加英文字段
- 互动剧情准备英文版 JSON
- AI 助教检测用户输入语言并切换提示词
- 英语社区冷启动路径：Reddit r/math、Product Hunt、YouTube 数学频道合作
---
## 六、用户留存与增长
### 6.1 用户路径
```
第一次打开 ──→ 发现页刷视频（B站式，零门槛）
│
┌──────────────┼──────────────┐
│ │ │
看到感兴趣的 刷到知识卡片 听说"模拟器"
学科视频 点开AI追问 想试试
│ │ │
└──────────────┴──────────────┘
│
▼
进入数学人生模块
│
┌──────────────┼──────────────┐
│ │
数学专业模拟器 葫芦侠行
（主打留存） （深度内容）
│
▼
每天打开，推进学期进度
分享"我的数学人生结局"截图
```
### 6.2 增长策略
| 阶段 | 策略 |
|------|------|
| **种子期** | 高校数学社团合作、B站/小红书数学科普KOL试用推荐 |
| **增长期** | 模拟器结局截图社交分享裂变、微信小程序上线、家长社群传播 |
| **规模化** | 与教育机构合作内置、学校采购、海外 Reddit/Product Hunt 推广 |
### 6.3 支教渠道
- 与常青藤支教队等公益组织合作
- App 作为支教志愿者的辅助教学工具
- 支教地学生通过 App 接触更丰富的数学内容
- 不改变产品形态——支教是分发渠道，不是产品内核
---
## 七、盈利模式
### 7.1 原则
- 学生端永远免费
- 不伤害公益初心
- 不做广告、不做氪金
- 不接受纯捐赠模式
### 7.2 路径
**主要路径：ToB 教育采购**
- 学校/教育局采购 App 作为辅助教学工具
- 按学生数量或服务等级收费
- 与支教项目经费挂钩：支教本身有经费，App 作为其中合理的技术支出
**辅助路径：会员订阅**
- 基础内容永远免费（视频、知识卡片、模拟器主流程）
- 高级功能订阅制：额外模拟分支、深度知识图谱、学习报告、家长面板
- 参考 Duolingo Super 模式——免费可用，付费更便利
---
## 八、家长信任策略
| 策略 | 做法 |
|------|------|
| 内容纯净 | 无广告、无社交陌生人、无氪金引导 |
| 时间管控 | 内置"番茄钟"：使用30分钟自动提醒休息 |
| 学习报告 | "数学脑周报"——孩子看了什么、玩了什么、对哪些方向有兴趣 |
| 家长模式 | 独立入口，展示使用时长、内容类型分布、知识点图谱 |
| 零氪金 | 无内购、无抽卡 |
| 定位话语 | "这不是一个刷题App，而是帮助孩子建立数学兴趣的引导工具" |
---
## 九、开发规范
### 9.1 代码规范
| 语言 | 规范 |
|------|------|
| Python | PEP 8，`black`/`ruff` 格式化 |
| JavaScript | ES6，`let/const` 替代 `var`，camelCase 命名 |
| CSS | 功能前缀命名（如 `vn-`、`feed-`），CSS 变量管理主题色 |
| HTML | 区域注释分隔，语义化标签 |
### 9.2 数据规范
- API 统一返回格式：`{code: 0/-1, data: ..., msg: "..."}`
- JSON 数据结构向后兼容
- 数据库迁移使用 DB_VERSION 机制
- API Key 通过环境变量读取，不可硬编码
### 9.3 Git 规范
- 分支：`main`（稳定）/ `dev`（开发）/ `feature/xxx`
- Commit 前缀：`feat:` / `fix:` / `style:` / `refactor:`
- 静态资源版本号：`style.css?v=X.Y` 防缓存
### 9.4 安全规范
- HTTPS 部署
- API Key 环境变量隔离
- 跨域白名单配置
---
## 十、开发优先级与路线图
| 优先级 | 项目 | 说明 | 状态 |
|--------|------|------|------|
| ✅ P0 | 四大模块基础架构 | 发现/知识/数学人生/我的 | 已完成 |
| ✅ P0 | 视频发现 + 12专业分区 | 搜索+推荐+热门+分区 | 已完成 |
| ✅ P0 | 知识卡片流 | Hero大卡+话题+6张卡片 | 已完成 |
| ✅ P0 | 葫芦侠行8章互动小说 | 93节点+四属性+8结局 | 已完成 |
| ✅ P0 | 个人中心 | 资料+统计+菜单 | 已完成 |
| ✅ P0 | AI 数学助教 | DeepSeek + 快捷提问 | 已完成 |
| ✅ P0 | iPhone移动端适配 | 390px + 100dvh + safe-area | 已完成 |
| 🔨 P0 | **数学专业模拟器** | 8学期全流程模拟+分流+结局 | **开发中** |
| ⏳ P1 | 工具箱/趣味计算器 | 概率模拟器/数学魔术/分形画廊 | 待开发 |
| ⏳ P1 | AI数字人视频生成 | AI写稿+TTS+数字人播报 | 待调研 |
| ⏳ P1 | PWA + 小程序壳 | manifest.json + web-view | 待开发 |
| ⏳ P2 | 双语支持(i18n) | UI抽离+故事双语+AI切换 | 待开发 |
| ⏳ P2 | 支教场景功能 | 教学辅助+学生进度 | 待开发 |
| ⏳ P2 | 家长模式 + 周报 | 时长统计+内容报告+分享 | 待开发 |
| ⏳ P3 | ToB教育采购 | 学校端管理后台 | 待调研 |
---
## 十一、附录
### A. 当前项目文件结构
```
miniapp/
├── app.py # Flask 后端
├── data/
│ ├── seed_story.json # 葫芦侠行93节点
│ ├── seed_videos.json # 54条种子视频
│ ├── miniapp_v3.db # SQLite 数据库
│ ├── build_story.py # 剧情生成脚本
│ └── novel/ # 原著小说素材
├── static/
│ ├── css/style.css # 全局样式（~1400行）
│ └── js/app.js # 前端逻辑（~550行）
└── templates/
└── index.html # SPA 入口（~286行）
```
### B. 关键指标
| 指标 | 定义 | 目标 |
|------|------|------|
| 日活跃用户 (DAU) | 每日打开 App 的用户数 | 种子期 100，增长期 10,000 |
| 次留/7留/30留 | 次日/7日/30日留存率 | 7留 > 25% |
| 模拟器完成率 | 跑完四年全流程的用户占比 | > 15%（初期） |
| 人均使用时长 | 每日平均使用时间 | > 15分钟 |
| 分享率 | 主动分享内容的用户占比 | > 5% |