浠艾福 - UI交互设计文档
项目名称：浠艾福
文档版本：V1.0
创建日期：2026-03-31
设计风格：双端差异（家长端简洁专业，孩子端活泼卡通）
一、设计风格
| 特点 |
说明 |
| 家长端 |
简洁、数据化、偏教育感 |
| 孩子端 |
卡通、活泼、明亮色彩 |
| 底部导航 |
双端各4个Tab，功能不同 |
| 交互反馈 |
积分动画、进度条、状态标记 |
二、底部导航栏
| Tab |
家长端 |
孩子端 |
| 1 |
📋 任务管理 |
📋 任务列表 |
| 2 |
🎁 奖励管理 |
🎯 专注训练 |
| 3 |
📊 数据统计 |
🏆 勋章墙 |
| 4 |
⚙️ 设置 |
👤 我的 |
三、页面清单
3.1 首页
| 页面 |
端 |
核心内容 |
| 家长端首页 |
家长 |
问候语、今日概览、孩子状态、快捷发布 |
| 孩子端首页 |
孩子 |
问候语、连续打卡、积分展示、心愿单、今日任务 |
3.2 任务相关页面
| 页面 |
端 |
核心内容 |
| 发布任务 |
家长 |
任务名称、指定孩子、截止时间、积分、分类、审核开关 |
| 任务详情 |
孩子 |
任务信息、倒计时、备注、完成按钮 |
| 完成弹窗 |
孩子 |
拍照上传、语音说明（可选） |
| 积分动画 |
孩子 |
获得积分、提前奖励提示 |
| 审核页面 |
家长 |
照片预览、AI建议、通过/确认/拒绝 |
| 任务列表 |
双端 |
日期筛选、任务状态 |
3.3 奖励/积分页面
| 页面 |
端 |
核心内容 |
| 心愿单 |
孩子 |
积分余额、奖励列表、进度条、可兑换标记 |
| 添加奖励 |
孩子 |
奖励名称、所需积分、分类 |
| 兑换确认 |
孩子 |
确认扣分、兑换前后积分对比 |
| 奖励管理 |
家长 |
待审批列表、奖励列表、添加/编辑 |
| 积分流水 |
双端 |
积分变动记录、按日期分组 |
3.4 训练/审核页面
| 页面 |
端 |
核心内容 |
| 训练首页 |
孩子 |
今日训练次数、简单模式、番茄钟模式 |
| 训练进行中 |
孩子 |
大字体倒计时、进度环、放弃按钮 |
| 自评打分 |
孩子 |
1-5星选择、积分计算 |
| 审核中心 |
家长 |
待审核任务列表、照片、AI建议、操作按钮 |
3.5 个人中心/设置页面
| 页面 |
端 |
核心内容 |
| 我的（家长） |
家长 |
家庭管理、切换模式、通知设置、数据导出 |
| 我的（孩子） |
孩子 |
勋章、成长、训练记录、积分明细 |
| 家庭管理 |
家长 |
成员列表、邀请码、添加成员/孩子 |
| 全局设置 |
家长 |
安全设置、通知开关、主题、数据管理 |
四、关键交互设计
4.1 任务完成流程
孩子点击"完成任务"
→ 是否需审核？
→ 否：显示积分动画 → 返回首页
→ 是：弹出拍照窗口 → 上传照片 → 可选录音 → 提交
→ 显示"待审核"状态
4.2 兑换流程
孩子点击"兑换"
→ 确认弹窗（显示积分变化）
→ 确认：扣分 → 状态待审批 → 通知家长
→ 家长通过：奖励生效
→ 家长拒绝：积分退还
4.3 训练流程
选择模式/时长 → 开始训练（倒计时界面）
→ 完成：自评打分 → 获得积分
→ 放弃（如家长设置不可退出）：0分
五、页面跳转关系
家长端导航
首页 ←→ 任务管理 ←→ 发布任务
↓ ↓
奖励管理 ←→ 审核中心
↓
数据统计
↓
设置 ←→ 家庭管理
←→ 通知设置
←→ 切换模式
孩子端导航
首页 ←→ 任务详情 ←→ 完成弹窗
↓ ↓
专注训练 ←→ 训练进行中
↓ ↓
勋章墙 ←→ 自评打分
↓
我的 ←→ 积分明细
←→ 兑换记录
←→ 切换模式
六、补充页面与交互
6.1 首次登录角色选择页
- 用户首次登录后，系统应优先展示角色选择页。
- 角色选项应包括成长规划师、家长、孩子三类。
- 用户完成选择后，应进入对应的资料完善或首页流程。
6.2 成长规划师资料完善页
- 页面应展示身份证号、性别、照片、证书号等字段。
- 页面应支持图片上传与表单校验。
- 提交成功后应跳转至对应首页。
6.3 邀请码绑定页
- 家长应在页面中输入邀请码完成绑定。
- 系统应展示绑定结果及绑定成功提示。
- 绑定成功后应进入家庭主页或任务页。
6.4 咨询会话页
- 页面应展示家长与成长规划师的会话列表。
- 页面应支持未读状态、消息摘要及历史记录查看。
- 进入会话后，用户应可发送与回复消息。
6.5 任务模板页
- 页面应展示模板列表、模板详情和模板编辑入口。
- 页面应支持一键使用模板创建任务。
6.6 历史记录与统计页
- 历史记录页应支持筛选、分页和状态标记。
- 统计页应展示完成率、超时率、分类分布等图表。
6.7 批量操作交互
- 任务列表应支持多选模式。
- 用户选择任务后，页面应显示批量删除、批量审核等操作按钮。
- 执行前应弹出确认弹窗，并提示操作数量与影响范围。
本文档为UI交互设计参考，具体实现时可调整细节。
