9.4 KiB
9.4 KiB
HMS 小程序患者端 — 老年友好版本设计规格
日期: 2026-04-30 | 状态: 待实施 | 选定方案: A（健康 Tab 导航）
1. 背景与目标
患者端小程序面向 60+ 慢病患者群体，当前版本信息密度高、字号小、导航层级深（5 Tab + 40 页），老年用户难以独立使用。基于多专家组（UX 无障碍、老年医学、产品策略）头脑风暴，选定方案 A 进行全面重设计。
核心目标：
- 老年患者能独立完成日常操作（记录体征、查看数据、预约挂号、服药提醒）
- 每个核心操作路径不超过 3 步
- 满足 WCAG 2.1 AA 对比度要求
2. 导航结构
4 Tab：首页 / 健康 / 消息 / 我的
| Tab | 名称 | 核心内容 | 页面文件 |
|---|---|---|---|
| 1 | 首页 | 今日打卡 + 体征 2x2 + 快捷操作 | pages/index/index.tsx |
| 2 | 健康 | 体征录入 + 趋势图 + BLE 设备 | pages/health/index.tsx（重写） |
| 3 | 消息 | 咨询对话 + 系统通知 | pages/messages/index.tsx（新建） |
| 4 | 我的 | 个人信息 + 积分 + 菜单 | pages/profile/index.tsx（调整） |
Tab 迁移映射：
| 当前 Tab | 操作 | 去向 |
|---|---|---|
| 首页 (index) | 保留，重写 | — |
| 上报 (health) | 重命名为"健康"，重写 | 合并录入功能 |
| 咨询 (consultation) | 从 Tab 移除 | 合并到"消息"Tab 的"咨询"子 Tab |
| 商城 (mall) | 从 Tab 移除 | 降级为"我的"页菜单项，pkg-mall 子包保留 |
| 我的 (profile) | 保留，调整间距 | — |
| (新增) 消息 | 新建 Tab + 页面 | pages/messages/index.tsx |
说明： pages/consultation/ 目录及 pages/consultation/detail/ 保留为路由页面（非 Tab），从消息页的"咨询"子 Tab 导航进入。pkg-mall 子包（兑换/订单/详情）全部保留，从"我的"页菜单入口进入。
3. 首页设计
5 个区域，从上到下：
- 问候 + 日期 — "上午好，张大爷" 24px 粗体 + 日期 + 消息红点
- 今日体征完成度 — 圆形进度环（72px）+ 完成百分比 + 4 指标胶囊（血压/心率/血糖/体重）
- 计算逻辑（纯前端）： 查询当日体征数据 API，4 个指标（血压/心率/血糖/体重）中当天有记录的计为完成，进度 = 已完成数 / 4
- 与积分签到的区别： 这是"今日体征记录完成度"（纯展示），不是积分商城的"每日签到"（
usePointsStore.checkinStatus）。两者独立，不耦合。 - 无需新后端 API： 复用现有
getHealthSummary或当日体征查询接口，前端计算百分比。
- 今日体征 2x2 — 白色卡片网格，数值 32px 衬线体，状态标签（正常/偏高/未记录）
- 今日待办（≤3条） — 预约/随访/异常提醒，带图标和副标题
- 快捷操作 — 两个大按钮："记录体征"（实色）+ "预约挂号"（描边）
首页不放置的内容（从当前首页移除）：
- 设备快捷入口（血压计/血糖仪卡片）→ 移至"健康"Tab
- 6 项快捷服务网格（预约挂号/健康录入/趋势/告警/资讯/AI）→ 精简为 2 个核心按钮
- 健康资讯文章列表 → 入口移至"健康"Tab 底部或"我的"页
4. 健康页设计
功能定位： 体征数据录入 + 趋势查看 + 设备管理
4.1 录入区
- 顶部类型 Tab：血压 / 心率 / 血糖 / 体重（56px 高大 Tab，选中项 $pri 实色底白字）
- 血压：收缩压 + 舒张压两个大输入框（56px 高，数值 28px 衬线体），上下排列（非左右，防止老年用户填反）
- 心率/体重：单个大输入框
- 血糖：数值 + 时段选择（空腹/餐后 2h，大按钮组）
- 每个输入框下方显示参考范围和实时状态（正常/偏高/偏低）
- 保存按钮：全宽 56px 高 $pri 实色
- 异常值保存前弹出确认："血压偏高 (160/95)，确认提交？"
4.2 趋势图
- 复用现有
getTrendAPI - 7 天柱状图，异常值用 $wrn 色，正常用 $pri 色
- 底部显示周一到周日标签
4.3 BLE 设备
- 从首页移入此区域
- 连接状态卡片：设备图标 + 名称 + 连接状态
- 一键同步按钮
- 设备管理入口（跳转
pkg-device-sync）
4.4 健康资讯入口
- 从首页移入，放在页面底部
- 单行卡片："最新健康资讯 ›" 点击跳转文章列表
5. 消息页设计
新页面，合并咨询 + 系统通知。
- 顶部 Tab 切换："咨询" | "通知"（56px 大 Tab）
- 咨询列表：对话卡片 80px 高，文字 28px，未读红点 24px
- 通知列表：随访提醒、预约确认、异常告警、用药提醒
6. 我的页设计
保留现有结构，调整参数：
- 菜单项高度 48px → 64px
- 文字 28px
- 图标 40px
- 积分 + 连续打卡横排展示
7. 设计系统调整
7.1 字号
单位说明： 代码库统一使用
px（Taro 的pxtransform编译时自动转为 rpx）。以下所有值均为px。
| 用途 | 当前(px) | 调整为(px) |
|---|---|---|
| 问候/标题 | 26 | 28 |
| 区块标题 | 24 | 26 |
| 正文 | 22 | 24 |
| 辅助文字 | 20 | 22 |
| 体征数值 | 44 | 48-64 |
| 按钮文字 | 24 | 28 |
| 最小字号 | 20 | 22 |
7.2 间距与触控
| 参数 | 当前 | 调整为 |
|---|---|---|
| 按钮最小高度 | — | 48px（120rpx） |
| 主按钮高度 | — | 56px（140rpx） |
| 菜单项高度 | 48px | 64px（160rpx） |
| 卡片圆角 | 12px | 16px |
| 卡片内间距 | 24-28px | 28-32px |
| 列表项间距 | 16px | 20px |
7.3 色彩
对比度基于
$bg#F5F0EB 计算。 WCAG 2.1 AA 要求：正文（<24px）≥ 4.5:1，大字（≥24px）≥ 3:1。
| 变量 | 当前 | 调整为 | 对比度 | WCAG |
|---|---|---|---|---|
$tx2 |
#7A756E | #5A554F | ~5.5:1 | AA 正文 |
$tx3 |
#A8A29E | #78716C | ~4.6:1 | AA 正文 |
$pri |
#C4623A | 不变 | — | — |
$bg |
#F5F0EB | 不变 | — | — |
使用约束： $tx3 仅用于 24px 及以上的文字或装饰性标签。正文一律使用 $tx2 或 $tx。
8. 功能优先级
| 优先级 | 功能 | 状态 |
|---|---|---|
| P0 | 体征数据查看（2x2 卡片） | 重写首页 |
| P0 | 体征录入（大输入框） | 重写健康页 |
| P0 | 今日体征完成度（进度环） | 新增（纯前端，复用现有 API） |
| P1 | 今日待办（≤3 条） | 新增 |
| P1 | 消息中心（咨询+通知） | 新建页面 |
| P1 | BLE 设备同步 | 保留调整 |
| P2 | 趋势图简化 | 调整 |
| P2 | 用药提醒 | 保留 |
| P3 | 积分商城 | 降级为菜单项 |
9. 页面路由变更
TabBar 配置（app.config.ts）
5 Tab → 4 Tab
删除：上报（health）、商城（mall）
新增：消息（messages）
保留：首页（index）、健康（health → 重写）、我的（profile）
页面增减
| 操作 | 页面 |
|---|---|
| 新建 | pages/messages/index.tsx |
| 重写 | pages/index/index.tsx、pages/health/index.tsx |
| 调整 | pages/profile/index.tsx |
| 删除 Tab | pages/mall/index.tsx（降级为子页面） |
| 保留 | 所有 pkg-* 子包页面 |
10. 关键文件
| 文件 | 改动类型 |
|---|---|
apps/miniprogram/src/app.config.ts |
TabBar 5→4，路由调整 |
apps/miniprogram/src/styles/variables.scss |
字号/色值/间距调整 |
apps/miniprogram/src/styles/mixins.scss |
新增老年友好 mixin |
apps/miniprogram/src/pages/index/index.tsx |
首页全面重写 |
apps/miniprogram/src/pages/index/index.scss |
首页样式全面重写 |
apps/miniprogram/src/pages/health/index.tsx |
健康页重写 |
apps/miniprogram/src/pages/health/index.scss |
健康页样式重写 |
apps/miniprogram/src/pages/messages/index.tsx |
新建消息页 |
apps/miniprogram/src/pages/messages/index.scss |
新建消息页样式 |
apps/miniprogram/src/pages/profile/index.tsx |
调整菜单和间距 |
apps/miniprogram/src/services/consultation.ts |
消息页复用咨询列表 API |
apps/miniprogram/src/services/health.ts |
复用体征数据查询（打卡进度） |
apps/miniprogram/src/stores/points.ts |
签到/积分功能保留，不改动 |
apps/miniprogram/src/components/ |
新增 ProgressRing 组件 |
11. 验证方式
pnpm build— 小程序编译通过- 微信开发者工具预览 — 布局和字号正确
- 真机测试 — 在 60+ 患者手机上验证可读性和触控体验
- WCAG 2.1 AA — 色值对比度合规（≥4.5:1 正文，≥3:1 大字），使用 axe-core 或微信开发者工具无障碍审计
- 核心路径验证（每条 ≤ 3 步）：
- 记录血压：首页 → 点击"记录体征" → 输入 → 保存（3 步）
- 查看趋势：健康 Tab → 查看趋势图（1 步）
- 预约挂号：首页 → 点击"预约挂号" → 选择时间 → 确认（3 步）
- 查看消息：消息 Tab → 点击对话（2 步）
- 不同屏幕尺寸测试：特别是老年用户常用的小屏 Android 设备
- 字体回退验证：衬线体在低端 Android 设备上的回退（使用
Georgia, "PingFang SC", serif）
12. 迁移与发布策略
- 一次性全量发布（非 A/B 测试），因为 5 Tab → 4 Tab 是结构性变更，无法共存
- 旧路径
pages/consultation/、pages/mall/保留为路由页面，但不再从 TabBar 进入 - 小程序分享卡片可能指向旧路径——这些页面保留可访问，不受影响
- 发布前在测试环境完整走一遍所有核心路径