AI-Health/健康管家-页面设计文档.md

健康管家 — 页面设计文档

本文档逐一描述每个页面的布局、组件、交互、状态。配合需求规格文档 V2 和技术设计文档 V2 使用。

---

你是一名顶级移动端产品设计师和Flutter UI工程师。

不要设计功能。

不要思考业务。

只关注视觉表现。

==================================================

产品定位：

AI健康陪伴助手

不是：

医院系统

不是：

企业后台

不是：

健康管理工具

==================================================

视觉参考：

支付宝蚂蚁阿福

Apple Health

Headspace

Calm

==================================================

用户第一眼看到页面时必须觉得：

温暖

轻松

有陪伴感

有生命力

高级

可信赖

==================================================

不要出现：

后台管理系统感

表格感

数据中心感

医院感

安卓原生感

Material3默认感

==================================================

视觉关键词：

Soft

Friendly

Companion

Minimal

Premium

AI-first

==================================================

设计原则：

聊天优先于表单

卡片优先于列表

陪伴优先于工具

情感优先于数据

==================================================

页面整体留白必须充足。

不要塞满内容。

每个页面只保留最重要的信息。

==================================================

所有页面必须看起来像：

一个会关心用户的AI

而不是一个记录数据的软件。

==================================================

视觉密度：

低密度

大量留白

==================================================

圆角：

非常圆润

卡片24+

按钮20+

胶囊999

==================================================

颜色：

以浅紫色为核心

大面积白色

少量渐变

少量高饱和色

==================================================

阴影：

非常轻

几乎感受不到

==================================================

背景：

不是纯白

使用浅灰白

局部加入柔和渐变

==================================================

图标：

圆润

可爱

避免锐利线条

==================================================

所有页面必须符合：

Dribbble作品级别

Behance展示级别

而不是业务系统页面。

==================================================

最终目标：

用户第一眼认为：

“这是一个AI健康管家。”

而不是：

“这是一个健康管理APP。”

请把整个产品设计成：

支付宝阿福 × Apple Health × AI Companion。

用户打开App时， 感觉自己是在和一个关心自己的AI交流，

而不是在使用一个健康记录工具。

P1. 登录页 /login

功能

手机号 + 验证码登录（登录即注册）

布局

┌──────────────────────────────────┐
│                                  │
│          🏥 健康管家              │  Logo + App 名称
│                                  │
│  ┌──────────────────────────────┐│
│  │ +86 │ 输入手机号...          ││  手机号输入框
│  └──────────────────────────────┘│
│                                  │
│  ┌────────────────┐ ┌──────────┐│
│  │ 输入验证码...   │ │ 获取验证码 ││  验证码输入框 + 发送按钮
│  └────────────────┘ └──────────┘│
│                                  │
│  ┌──────────────────────────────┐│
│  │        登   录               ││  主按钮（紫底白字）
│  └──────────────────────────────┘│
│                                  │
│  ☐ 已阅读并同意《服务协议》《隐私政策》│  协议勾选
│                                  │
└──────────────────────────────────┘

交互

• 输入手机号 → [获取验证码] 按钮亮起
• 点击 [获取验证码] → 倒计时 60 秒 → 按钮变灰
• 开发阶段：验证码输入任意 6 位数字即可
• 输入 6 位验证码 + 勾选协议 → [登录] 亮起
• 登录成功 → 跳转 /home
• 登录失败 → 红色提示文字

状态

状态	显示
正常	如上
手机号格式错误	"请输入正确的手机号"
验证码错误	"验证码错误，请重新输入"
网络错误	"网络连接失败，请检查网络"
加载中	[登录] 按钮显示 loading 动画

---

P2. 首页 /home

功能

App 主界面，包含对话流、任务卡片区、Agent 面板、输入框、侧滑抽屉

布局

┌──────────────────────────────────┐
│ ☰                              ←│  顶部：左侧菜单按钮 → 抽屉
│                                  │
│ ┌ 任务卡片区（可折叠）───────────┐│
│ │ 💊 计划8:00吃阿司匹林  [✓]   ││  用药提醒卡片
│ │ 🏃 今日待运动：散步30分钟 [✓]  ││  运动打卡卡片
│ │ 🩺 今日待测量：血压           ││  指标测量提醒
│ └──────────────────────────────┘│
│                                  │
│ ┌ 对话流 ───────────────────────┐│
│ │                                ││
│ │  AI: 早上好！昨天心率105...    ││  AI 气泡（白底紫左边框）
│ │                                ││
│ │             用户: 血压135/85  ││  用户气泡（紫底白字右对齐）
│ │                                ││
│ │  AI: 收到！已记录血压 135/85 ✅││
│ │                                ││
│ └────────────────────────────────┘│
│                                  │
│ ┌ Agent 面板（点击胶囊后出现）───┐│  ← 仅当有激活的 Agent 时显示
│ │ [手动录入血压] [手动录入血糖]  ││
│ │ ...                            ││
│ └────────────────────────────────┘│
│                                  │
├──────────────────────────────────┤
│ [胶囊1][胶囊2][胶囊3]...[胶囊6]  │  智能体胶囊栏（横向滑动）
├──────────────────────────────────┤
│ [📎] │ 输入你想说的...    │ [📤] │  输入框（系统键盘语音）
└──────────────────────────────────┘

组件树

HomePage (Scaffold)
  ├── Drawer (HealthDrawer)
  ├── Body: Column
  │    ├── TaskCardArea (可折叠)
  │    │    ├── MedicationCard
  │    │    ├── ExerciseCard
  │    │    └── MeasurementCard
  │    ├── Expanded: ChatMessagesView (ListView.builder)
  │    │    ├── ChatBubble (AI)
  │    │    ├── ChatBubble (User)
  │    │    ├── DataConfirmCard
  │    │    ├── DietResultCard
  │    │    ├── MedicationConfirmCard
  │    │    ├── ReportCard
  │    │    └── QuickOptionsRow
  │    └── AgentPanel (AnimatedContainer, 条件显示)
  ├── Bottom: Column
  │    ├── AgentBar (SingleChildScrollView horizontal)
  │    │    └── CapsuleButton × 6
  │    └── InputBar
  │         ├── AttachButton (📎)
  │         ├── TextField
  │         └── SendButton (📤)

交互

• 输入消息 → [📤] 发送 → 消息上屏 → SSE 流式返回 → AI 逐字显示
• 点击胶囊 → 胶囊高亮 → AgentPanel 出现 → 对话切换到该 Agent
• 再次点击同一胶囊 → 胶囊恢复 → AgentPanel 消失 → 对话回到默认
• 向上滑动对话流 → 任务卡片区自动折叠
• 任务卡片 ✓ 点击 → 快捷打卡
• 左上角菜单 → 打开侧滑抽屉

状态

状态	显示
首次打开（零数据）	AI 问候语 + 引导建档
正常有数据	AI 问候（带异常提醒） + 任务卡片
SSE 流式中	AI 气泡逐字增长 + Tool Calling 中间提示
网络错误	全屏"无网络连接"
无任务卡片	卡片区不显示，对话流占满

---

P3. 侧滑抽屉（HealthDrawer）

功能

不跳转页面，从左侧滑出的抽屉面板

布局

┌──────────────┬──────────────────┐
│              │                  │
│  👤 张三      │  点击 → P12     │
│  冠心病支架术后│  个人中心       │
│              │                  │
│  ⚙️ 设置     │  点击 → P17     │
│              │                  │
│  ❤️ 血压 128/82                │  最新测量值
│  💓 心率 72                     │  未测显示 "--"
│  💉 血糖 5.2                    │
│  🫁 血氧 98%                    │
│              │                  │
│  📋 历史对话                    │
│  05-31  血压咨询 + 胸闷         │  日期 + 摘要
│  05-30  饮食分析                │
│  05-28  用药调整                │
│  ...                            │
│              │                  │
│  [退出登录]                     │
└──────────────┴──────────────────┘

交互

• 点击头像 → 跳转 P12 个人中心
• 点击设置 → 跳转 P17 设置
• 点击最新指标 → 跳转 P4 趋势图表
• 点击历史对话 → 加载该对话到首页对话流
• 退出登录 → 确认弹窗 → 清除 token → 跳转 P1

---

P4. 趋势图表页 /trend/:type

功能

查看某个健康指标的历史趋势曲线

布局

┌──────────────────────────────────┐
│ ← 返回    血压趋势               │  顶栏
├──────────────────────────────────┤
│  [7天] [30天] [90天]             │  时间切换
├──────────────────────────────────┤
│                                  │
│   📈 折线图                      │  血压：双轴（收缩压+舒张压）
│                                  │  其他：单轴
│   支持双指缩放、滑动              │
│                                  │
├──────────────────────────────────┤
│ 最近 7 天                        │
│ 05/31  128/82  ✅               │  数据列表
│ 05/30  135/85  ⚠️ 偏高          │
│ 05/29  --      未测量            │
│ ...                              │
└──────────────────────────────────┘

状态

状态	显示
有数据	折线图 + 数据列表
数据不足（<2条）	"暂无足够数据生成趋势图"
从未测量	"--" + 引导去记数据

---

P5. 健康日历页 /calendar

功能

月视图日历，标记用药/运动/复查

布局

┌──────────────────────────────────┐
│ ← 返回    2026年6月              │  顶栏 + 月份切换
├──────────────────────────────────┤
│  一  二  三  四  五  六  日       │
│              1   2   3   4        │
│  5   6   7   8   9   10  11       │
│  ...                             │
│            💊  💊         📋      │  用药=紫点 运动=绿点 复查=黄标记
│                                  │
├──────────────────────────────────┤
│ 6月3日                           │  当日摘要
│ 💊 阿司匹林 ✓                    │
│ 🏃 散步30分钟 ✓                  │
│ 🩺 血压 128/82                   │
└──────────────────────────────────┘

---

P6. 用药列表页 /medications

功能

查看当前用药计划

布局

┌──────────────────────────────────┐
│ ← 返回    我的用药               │
├──────────────────────────────────┤
│ 💊 阿司匹林 100mg                │  每条药品卡片
│    每天 08:00  早饭后             │  点击 → P7 编辑
│    2026/05/01 - 长期              │
│    来源：处方                     │
│    [✓ 今日已打卡]                │
├──────────────────────────────────┤
│ 💊 阿托伐他汀 20mg               │
│    每天 20:00  晚饭后             │
│    来源：AI 录入                  │
│    [○ 待打卡]                    │
├──────────────────────────────────┤
│ [+ 添加药品]                     │  跳转 P7 新建
└──────────────────────────────────┘

空状态

┌──────────────────────────────────┐
│         💊                       │
│    暂无用药计划                   │
│  可通过AI对话或手动添加          │
│    [去药管家]                    │
└──────────────────────────────────┘

---

P7. 编辑用药页 /medications/:id/edit

功能

新增/修改用药计划

布局

┌──────────────────────────────────┐
│ ← 返回    添加药品 / 编辑药品    │
├──────────────────────────────────┤
│ 药品名称  [_______________]      │
│ 剂量      [______]  mg/片/粒    │
│ 服药时间  [08:00] [20:00]       │  支持多个时间
│          [+ 添加时间]            │
│ 起始日期  [2026/06/01]          │
│ 结束日期  [长期]                │
│                                │
│ [删除该药品]  [保存]            │
└──────────────────────────────────┘

---

P8. 报告列表页 /reports

功能

查看已上传的报告

布局

┌──────────────────────────────────┐
│ ← 返回    我的报告               │
├──────────────────────────────────┤
│ 📋 血常规 2026/05/28             │
│    状态：医生已确认 ✅            │
│                                  │
│ 📋 心电图 2026/05/15             │
│    状态：待医生确认 ⏳            │
│                                  │
│ 📋 出院小结 2026/05/01           │
│    状态：医生已确认 ✅            │
└──────────────────────────────────┘

空状态

┌──────────────────────────────────┐
│         📋                       │
│     暂无报告                      │
│  可到「看报告」上传              │
└──────────────────────────────────┘

---

P9. 报告详情页 /reports/:id

功能

查看报告 AI 解读 + 原始图片

布局

┌──────────────────────────────────┐
│ ← 返回    报告详情               │
├──────────────────────────────────┤
│ 报告类型：血常规                  │
│ 上传时间：2026/05/28 14:30       │
│ 状态：⏳ 待医生确认               │
├──────────────────────────────────┤
│ AI 预解读结果                     │
│                                  │
│ 指标列表：                        │
│ 白细胞   8.5×10⁹/L  正常 ✅     │
│ 红细胞   4.2×10¹²/L 正常 ✅     │
│ 血红蛋白 105 g/L     偏低 ⚠️    │
│ ...                              │
│                                  │
│ AI 分析：血红蛋白略偏低...         │
│ ⚠️ AI 预解读，待医生确认          │
├──────────────────────────────────┤
│ [查看原始图片]                    │
└──────────────────────────────────┘

---

P10. 医生列表页 /doctors

功能

选择要咨询的医生

布局

┌──────────────────────────────────┐
│ ← 返回    选择医生               │
│         本月剩余 3 次             │
├──────────────────────────────────┤
│ 👨‍⚕️ 王建国  主任医师            │  医生卡片
│    心血管内科                     │
│    擅长冠心病术后管理             │
│    [咨询王主任]                   │
├──────────────────────────────────┤
│ 👩‍⚕️ 李芳  副主任医师            │
│    营养科                         │
│    擅长术后营养指导               │
│    [咨询李主任]                   │
└──────────────────────────────────┘

---

P11. 问诊对话页 /consultation/:id

功能

患者与医生的文字聊天（含 AI 分身对话）

布局

┌──────────────────────────────────┐
│ ← 返回    王建国 主任            │
│    以上为AI分身回复              │  医生未亲自回复时的提示
├──────────────────────────────────┤
│                                  │
│  AI分身: 根据您的描述...          │  AI 分身气泡
│  以上为AI分析，具体请咨询王主任   │
│                                  │
│  患者: 我最近两天胸口有点闷       │
│                                  │
│  医生: 持续多久了？做过什么检查？ │  医生亲自回复
│                                  │
├──────────────────────────────────┤
│ │ 输入消息...              │ [📤] │
└──────────────────────────────────┘

状态

状态	显示
AI 分身对话中	回复末尾标注 AI 免责声明
医生已读未回	"医生已读"
医生已回复	正常消息气泡
问诊已结束	输入框锁定，显示"本次问诊已结束"
问诊配额用完	显示"本月问诊次数已用完"

---

P12. 个人中心页 /profile

功能

用户信息 + 功能菜单

布局

┌──────────────────────────────────┐
│ ← 返回    个人中心               │
├──────────────────────────────────┤
│  👤 张三                         │
│     冠心病支架术后 12周           │
│     138****1234                  │
│                         [编辑]   │  跳转 P13
├──────────────────────────────────┤
│  📋 健康档案              >      │  跳转 P14
│  📱 设备管理              >      │  跳转占位页
│  🔔 通知偏好              >      │  跳转 P18
│  ⚙️ 设置                  >      │  跳转 P17
│  ❓ 关于                  >      │  跳转 P19
│  🚪 退出登录              >      │  确认弹窗
└──────────────────────────────────┘

---

P13. 编辑资料页 /profile/edit

功能

修改个人基本信息

布局

┌──────────────────────────────────┐
│ ← 返回    编辑资料               │
├──────────────────────────────────┤
│ 头像      [👤 点击更换]          │
│ 姓名      [张三____________]     │
│ 性别      [男] [女]              │
│ 出生日期  [1970-03-15]          │
│ 手机号    138****1234（不可改）   │
│                                  │
│ [保存]                           │
└──────────────────────────────────┘

---

P14. 健康档案页 /health-archive

功能

查看和编辑完整健康信息

布局

┌──────────────────────────────────┐
│ ← 返回    健康档案         [编辑] │
├──────────────────────────────────┤
│ 📋 基本信息                       │
│   姓名：张三  性别：男            │
│   出生：1970-03-15                │
│   身高：170cm  体重：72kg         │
├──────────────────────────────────┤
│ 🩺 诊断信息                       │
│   主要诊断：冠心病                 │
│   手术类型：PCI支架植入术          │
│   手术日期：2026-03-15             │
├──────────────────────────────────┤
│ 🏥 病史与限制                     │
│   过敏史：无                      │
│   饮食限制：低盐 低脂              │
│   慢性病史：高血压 高血脂          │
│   家族病史：父亲冠心病             │
├──────────────────────────────────┤
│ 📊 健康数据（本周平均）            │
│   血压 130/82  心率 74            │
│                       [查看趋势]  │
├──────────────────────────────────┤
│ 📋 检查报告  3份          [查看]  │
│ 💊 当前用药  2种          [查看]  │
│ 🎯 运动计划  进行中       [查看]  │
└──────────────────────────────────┘

交互

• 点击 [编辑] → 各字段变为可编辑状态
• 点击各功能入口 → 跳转对应页面
• AI 对话中了解到的信息自动填充到对应字段

---

P15. 饮食记录列表页 /diet-records

功能

按日期查看历史饮食记录

布局

┌──────────────────────────────────┐
│ ← 返回    饮食记录               │
├──────────────────────────────────┤
│ 2026-06-01                       │  按日期分组
│  🍽️ 午餐  644千卡  ★★★☆☆       │
│    米饭 1碗 | 红烧肉 5块          │
│                                  │
│ 2026-05-31                       │
│  🍽️ 晚餐  520千卡  ★★★★☆       │
│    面条 1碗 | 青菜 1份            │
│  🍽️ 午餐  380千卡  ★★★★☆       │
│    三明治 1个                     │
└──────────────────────────────────┘

空状态

┌──────────────────────────────────┐
│        🍽️                        │
│    暂无饮食记录                   │
│  可通过「拍饮食」或对话录入       │
└──────────────────────────────────┘

---

P16. 运动计划页 /exercise-plan

功能

查看和编辑本周运动计划

布局

┌──────────────────────────────────┐
│ ← 返回    运动计划               │
│          2026年 第23周            │
├──────────────────────────────────┤
│ 周一   散步 30分钟    ✅ 已完成    │  每日条目
│ 周二   慢跑 20分钟    ○ 待完成    │
│ 周三   游泳 30分钟    ○ 待完成    │
│ 周四   休息日                    │
│ 周五   散步 30分钟    ○ 待完成    │
│ 周六   休息日                    │
│ 周日   散步 30分钟    ○ 待完成    │
├──────────────────────────────────┤
│ [修改计划]  [本周已完成 1/5]      │
└──────────────────────────────────┘

空状态

┌──────────────────────────────────┐
│        🏃                        │
│    暂无运动计划                   │
│  可通过「运动计划」或对话创建     │
│    [创建计划]                     │
└──────────────────────────────────┘

---

P17. 设置页 /settings

功能

App 设置

布局

┌──────────────────────────────────┐
│ ← 返回    设置                   │
├──────────────────────────────────┤
│ 隐私保护中心              >      │  P19 文本页
│ 通知偏好                  >      │  P18
│ 字体大小    ───●─────           │  滑动条 0.8x-1.6x
│ 协议与公告                >      │  P19 文本页
│ 关于                      >      │  P19 文本页
│                                  │
│ [退出登录]                       │  确认弹窗
│ [注销账号]                       │  二次确认 + 清数据
└──────────────────────────────────┘

---

P18. 通知偏好页 /settings/notifications

功能

各类型推送独立开关

布局

┌──────────────────────────────────┐
│ ← 返回    通知偏好               │
├──────────────────────────────────┤
│ 💊 用药提醒               [🔘]   │  开关
│ 📋 复查提醒               [🔘]   │
│ 💬 医生回复               [🔘]   │
│ ⚠️ 异常警告               [🔘]   │
└──────────────────────────────────┘

---

P19. 静态文本页 /page/:type

功能

展示隐私政策 / 服务协议 / 关于

布局

┌──────────────────────────────────┐
│ ← 返回    隐私政策               │  标题随 type 变化
├──────────────────────────────────┤
│                                  │
│  纯文本内容（后期填充）           │
│                                  │
└──────────────────────────────────┘

---

P20. 复查列表页 /followups

功能

查看复查/随访安排

布局

┌──────────────────────────────────┐
│ ← 返回    复查随访               │
├──────────────────────────────────┤
│ 即将到来                          │
│ 📋 心内科复查  06/05 15:00       │
│    地点：市一医院 3楼             │
│    提醒：后天                      │
├──────────────────────────────────┤
│ 已完成                            │
│ ✅ 术后3周复查  04/05             │
│ ✅ 术后6周复查  04/26             │
└──────────────────────────────────┘

空状态

┌──────────────────────────────────┐
│        📋                         │
│    暂无复查安排                   │
│  医生端创建后自动同步             │
└──────────────────────────────────┘

---

页面汇总

#	路由	页面	类型
1	/login	登录页	独立页面
2	/home	首页（含抽屉+面板+胶囊栏）	独立页面
3	—	侧滑抽屉	组件（非页面）
4	/trend/:type	趋势图表	独立页面
5	/calendar	健康日历	独立页面
6	/medications	用药列表	独立页面
7	/medications/:id/edit	编辑用药	独立页面
8	/reports	报告列表	独立页面
9	/reports/:id	报告详情	独立页面
10	/doctors	医生列表	独立页面
11	/consultation/:id	问诊对话	独立页面
12	/profile	个人中心	独立页面
13	/profile/edit	编辑资料	独立页面
14	/health-archive	健康档案	独立页面
15	/diet-records	饮食记录列表	独立页面
16	/exercise-plan	运动计划	独立页面
17	/settings	设置	独立页面
18	/settings/notifications	通知偏好	独立页面
19	/page/:type	静态文本页	独立页面
20	/followups	复查列表	独立页面

总计：20 个独立页面 + 1 个侧滑抽屉组件 + 6 个 Agent 面板组件

---

Agent 面板设计（首页内嵌，非独立页面）

默认对话（无面板）

只有对话流，无额外面板。

记数据面板

┌──────────────────────────────────┐
│ 📊 记数据                        │
│ [手动录入血压] [手动录入血糖]    │  快捷按钮
│ [手动录入心率] [手动录入血氧]    │
│ [手动录入体重]                   │
│                                  │
│ 或直接对我说：                   │
│ "血压 135/85"                   │
└──────────────────────────────────┘

拍饮食面板

┌──────────────────────────────────┐
│ 📸 拍饮食                        │
│ [拍照] [上传照片]（支持多张）    │
│                                  │
│ 或直接对我说：                   │
│ "中午吃了牛肉面"                 │
└──────────────────────────────────┘

药管家面板

┌──────────────────────────────────┐
│ 💊 药管家                        │
│ [用药管理] [用药提醒]            │
│                                  │
│ 或直接对我说：                   │
│ "医生让我吃阿托伐他汀 20mg"      │
└──────────────────────────────────┘

AI 问诊面板

┌──────────────────────────────────┐
│ 🩺 AI 问诊                       │
│ [找医生]                         │
│                                  │
│ 或直接对我说你的症状              │
└──────────────────────────────────┘

看报告（无面板）

点击直接调起相机/文件选择器，不弹出面板。

运动计划面板

┌──────────────────────────────────┐
│ 🏃 运动计划                      │
│ [查看本周计划] [创建新计划]      │
│                                  │
│ 或直接对我说：                   │
│ "我想每周一三五散步 30 分钟"     │
└──────────────────────────────────┘