250 lines
5.5 KiB
Markdown
250 lines
5.5 KiB
Markdown
# 《往事拾遗》MVP（PRD 2.0）
|
||
|
||
一定要使用 docs/color.png 的配色（不使用渐变），界面简洁，交互优雅
|
||
|
||
## 0. 设计原则
|
||
|
||
* **微信式聊天体验**：熟悉的交互，降低学习成本
|
||
* **多模态输入**：文字、语音、图片、表情
|
||
* **AI 引导对话**：提问、陪伴、引导，最终目的是完成回忆录
|
||
* **结果导向**：用户随时能看到"书在变厚"
|
||
|
||
---
|
||
|
||
## 1. 配色方案（docs/color.png）
|
||
|
||
```
|
||
#200028 - 深紫色（文字主色）
|
||
#8C8EA3 - 石板紫（次要文字、占位符）
|
||
#A177A6 - 中紫色（主题色、按钮、头部背景）
|
||
#CEB0DA - 薰衣草色（头像背景、高亮）
|
||
#DBBABA - 腮红色（用户头像）
|
||
#FAF7F8 - 奶油色（页面背景）
|
||
#FFFFFF - 白色（卡片、气泡）
|
||
```
|
||
|
||
**注意：不使用渐变色，使用纯色**
|
||
|
||
---
|
||
|
||
## 2. 信息架构
|
||
|
||
```text
|
||
[对话列表] chat-list.html <——主入口（默认首页）
|
||
├─ 对话列表（联系人）
|
||
├─ 底部导航栏
|
||
└─ 点击进入聊天详情
|
||
|
||
[聊天详情] chat.html <——全屏聊天（微信风格）
|
||
├─ 顶部：返回按钮 + 联系人名称
|
||
├─ 消息区域（AI白色气泡/用户紫色气泡）
|
||
├─ 输入区域（文字/语音/表情/图片）
|
||
└─ 无底部导航（全屏沉浸）
|
||
|
||
[我的回忆录] demo.html > 回忆录tab <——阅读页（电子书体验）
|
||
├─ 目录（章节）
|
||
├─ 章节正文（排版优雅+插图）
|
||
└─ 导出 PDF / 分享链接（付费口）
|
||
|
||
[我的] demo.html > 我的tab <——个人主页
|
||
├─ 套餐与付费
|
||
├─ 数据与隐私
|
||
├─ 设置
|
||
└─ 帮助
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 页面 1：对话列表（chat-list.html）
|
||
|
||
### 3.1 页面目标
|
||
|
||
* 让用户 **一眼看到对话入口**
|
||
* 微信式联系人列表体验
|
||
* 显示最近消息预览
|
||
|
||
### 3.2 核心组件（从上到下）
|
||
|
||
**A. 顶部头部**
|
||
|
||
* 应用标题：`往事拾遗`
|
||
* 副标题：`用对话，留住珍贵的记忆`
|
||
* 背景色：中紫色 `#A177A6`
|
||
|
||
**B. 对话列表**
|
||
|
||
* 联系人头像（圆角方形，薰衣草色背景）
|
||
* 联系人名称：`回忆录助手`
|
||
* 最新消息预览（单行省略）
|
||
* 时间戳
|
||
|
||
**C. 小贴士卡片**
|
||
|
||
* 引导用户了解产品用途
|
||
|
||
**D. 底部导航栏**
|
||
|
||
* 对话（当前）
|
||
* 回忆录
|
||
* 我的
|
||
|
||
### 3.3 功能清单
|
||
|
||
* [x] 显示对话列表
|
||
* [x] 点击进入聊天详情
|
||
* [x] 底部导航切换页面
|
||
|
||
---
|
||
|
||
## 4. 页面 2：聊天详情（chat.html）
|
||
|
||
### 4.1 页面目标
|
||
|
||
* **全屏沉浸式聊天**，无底部导航干扰
|
||
* **微信式交互**：熟悉的聊天体验
|
||
* **AI 主动引导**：提问、追问、陪伴
|
||
|
||
### 4.2 核心组件（从上到下）
|
||
|
||
**A. 顶部导航栏**
|
||
|
||
* 返回按钮（返回对话列表）
|
||
* 联系人名称：`回忆录助手`
|
||
* 在线状态
|
||
* 背景色：中紫色 `#A177A6`
|
||
|
||
**B. 消息区域**
|
||
|
||
* AI 消息：白色气泡，左侧显示，薰衣草色头像 `#CEB0DA`
|
||
* 用户消息：紫色气泡 `#A177A6`，右侧显示，腮红色头像 `#DBBABA`
|
||
* 时间戳（居中显示）
|
||
* 支持：文字、图片、语音消息
|
||
|
||
**C. 输入区域**
|
||
|
||
* 语音/键盘切换按钮
|
||
* 文字输入框 / 按住说话按钮
|
||
* 表情选择器
|
||
* 更多选项（照片、拍摄）
|
||
* 发送按钮（有文字时显示，中紫色背景）
|
||
|
||
**D. 扩展面板**
|
||
|
||
* 表情选择器：常用表情 32 个
|
||
* 更多选项：照片、拍摄
|
||
|
||
### 4.3 AI 对话逻辑
|
||
|
||
* 用户发送消息后，AI 显示"正在输入..."
|
||
* AI 回复引导性问题，帮助用户回忆
|
||
* 示例回复：
|
||
- "这个故事真让人感动！能再详细说说当时的场景吗？"
|
||
- "那个时候您多大年纪？身边有哪些人陪着您？"
|
||
- "您有没有保留那个时候的照片或者物件？"
|
||
- "这段记忆很宝贵呢。后来这件事有什么后续吗？"
|
||
|
||
### 4.4 功能清单
|
||
|
||
* [x] 文字消息发送/接收
|
||
* [x] 语音消息（按住说话，上滑取消）
|
||
* [x] 图片消息
|
||
* [x] 表情输入
|
||
* [x] AI 自动回复（引导式提问）
|
||
* [x] 返回对话列表
|
||
|
||
---
|
||
|
||
## 5. 页面 3：我的回忆录（阅读电子书体验）
|
||
|
||
### 5.1 页面目标
|
||
|
||
* 打开就是"书"的感觉：**优雅排版 + 章节清晰 + 可插图**
|
||
* 能让用户产生：**"真的成书了"** 的成就感
|
||
* 付费/导出在这里完成（不打扰阅读）
|
||
|
||
### 5.2 阅读体验
|
||
|
||
**A. 目录页（默认进入）**
|
||
|
||
* 书名 + 副标题
|
||
* 章节列表（带进度）
|
||
* "最近更新"提示
|
||
|
||
**B. 章节阅读页**
|
||
|
||
* 章节标题（大号）
|
||
* 段落排版：行距舒适、首行缩进
|
||
* 引用块：把金句提出来
|
||
* 插图展示
|
||
|
||
**C. 书内工具条**
|
||
|
||
* 目录
|
||
* 导出 PDF（付费点）
|
||
* 分享链接（付费点）
|
||
|
||
### 5.3 功能清单
|
||
|
||
* [x] 目录 + 章节阅读
|
||
* [x] 章节内容展示
|
||
* [x] 显示插图
|
||
* [x] 导出 PDF 入口
|
||
* [x] 生成分享链接入口
|
||
|
||
---
|
||
|
||
## 6. 页面 4：我的（个人主页）
|
||
|
||
### 6.1 页面目标
|
||
|
||
* 放所有"非核心"功能：设置、付费、客服、隐私
|
||
* 不打扰聊天主路径
|
||
|
||
### 6.2 模块结构
|
||
|
||
**A. 账户卡片**
|
||
|
||
* 头像/昵称
|
||
* 当前套餐状态
|
||
|
||
**B. 套餐与付费**
|
||
|
||
* 升级套餐
|
||
* 我的订单
|
||
|
||
**C. 数据与隐私**
|
||
|
||
* 导出所有数据
|
||
|
||
**D. 设置**
|
||
|
||
* 语速
|
||
* 大字模式
|
||
* 夜间模式
|
||
* 每日提醒
|
||
|
||
**E. 帮助**
|
||
|
||
* 常见问题
|
||
* 反馈与客服
|
||
* 关于我们
|
||
|
||
---
|
||
|
||
## 7. MVP 版本范围
|
||
|
||
### 必做
|
||
|
||
* [] 对话列表页面
|
||
* [] 全屏聊天页面
|
||
* [] 文字/语音/图片/表情输入
|
||
* [] AI 自动回复
|
||
* [] 微信风格界面
|
||
* [ ] 真实 AI 对接
|
||
* [ ] 语音识别
|
||
* [ ] 图片上传到服务器
|
||
* [ ] 聊天记录持久化
|
||
* [ ] 回忆录自动生成，在线阅读
|
||
* [ ] 用户登录/注册
|
||
* [ ] 套餐购买
|