5.5 KiB
5.5 KiB
《往事拾遗》MVP（PRD 2.0）
一定要使用 docs/color.png 的配色（不使用渐变），界面简洁，交互优雅
0. 设计原则
- 微信式聊天体验：熟悉的交互，降低学习成本
- 多模态输入：文字、语音、图片、表情
- AI 引导对话：提问、陪伴、引导，最终目的是完成回忆录
- 结果导向：用户随时能看到"书在变厚"
1. 配色方案（docs/color.png）
#200028 - 深紫色（文字主色）
#8C8EA3 - 石板紫（次要文字、占位符）
#A177A6 - 中紫色（主题色、按钮、头部背景）
#CEB0DA - 薰衣草色（头像背景、高亮）
#DBBABA - 腮红色（用户头像）
#FAF7F8 - 奶油色（页面背景）
#FFFFFF - 白色（卡片、气泡）
注意：不使用渐变色，使用纯色
2. 信息架构
[对话列表] 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 功能清单
- 显示对话列表
- 点击进入聊天详情
- 底部导航切换页面
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 功能清单
- 文字消息发送/接收
- 语音消息（按住说话，上滑取消）
- 图片消息
- 表情输入
- AI 自动回复（引导式提问）
- 返回对话列表
5. 页面 3：我的回忆录（阅读电子书体验）
5.1 页面目标
- 打开就是"书"的感觉：优雅排版 + 章节清晰 + 可插图
- 能让用户产生："真的成书了" 的成就感
- 付费/导出在这里完成（不打扰阅读）
5.2 阅读体验
A. 目录页（默认进入）
- 书名 + 副标题
- 章节列表（带进度）
- "最近更新"提示
B. 章节阅读页
- 章节标题（大号）
- 段落排版：行距舒适、首行缩进
- 引用块：把金句提出来
- 插图展示
C. 书内工具条
- 目录
- 导出 PDF（付费点）
- 分享链接（付费点）
5.3 功能清单
- 目录 + 章节阅读
- 章节内容展示
- 显示插图
- 导出 PDF 入口
- 生成分享链接入口
6. 页面 4：我的（个人主页）
6.1 页面目标
- 放所有"非核心"功能：设置、付费、客服、隐私
- 不打扰聊天主路径
6.2 模块结构
A. 账户卡片
- 头像/昵称
- 当前套餐状态
B. 套餐与付费
- 升级套餐
- 我的订单
C. 数据与隐私
- 导出所有数据
D. 设置
- 语速
- 大字模式
- 夜间模式
- 每日提醒
E. 帮助
- 常见问题
- 反馈与客服
- 关于我们
7. MVP 版本范围
必做
- [] 对话列表页面
- [] 全屏聊天页面
- [] 文字/语音/图片/表情输入
- [] AI 自动回复
- [] 微信风格界面
- 真实 AI 对接
- 语音识别
- 图片上传到服务器
- 聊天记录持久化
- 回忆录自动生成，在线阅读
- 用户登录/注册
- 套餐购买