# 健康管家 — 页面设计文档 > 本文档逐一描述每个页面的布局、组件、交互、状态。配合需求规格文档 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 分钟" │ └──────────────────────────────────┘ ```