214 lines
9.4 KiB
Markdown
214 lines
9.4 KiB
Markdown
# 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 个区域，从上到下：
|
||
|
||
1. **问候 + 日期** — "上午好，张大爷" 24px 粗体 + 日期 + 消息红点
|
||
2. **今日体征完成度** — 圆形进度环（72px）+ 完成百分比 + 4 指标胶囊（血压/心率/血糖/体重）
|
||
- **计算逻辑（纯前端）：** 查询当日体征数据 API，4 个指标（血压/心率/血糖/体重）中当天有记录的计为完成，进度 = 已完成数 / 4
|
||
- **与积分签到的区别：** 这是"今日体征记录完成度"（纯展示），不是积分商城的"每日签到"（`usePointsStore.checkinStatus`）。两者独立，不耦合。
|
||
- **无需新后端 API：** 复用现有 `getHealthSummary` 或当日体征查询接口，前端计算百分比。
|
||
3. **今日体征 2x2** — 白色卡片网格，数值 32px 衬线体，状态标签（正常/偏高/未记录）
|
||
4. **今日待办（≤3条）** — 预约/随访/异常提醒，带图标和副标题
|
||
5. **快捷操作** — 两个大按钮："记录体征"（实色）+ "预约挂号"（描边）
|
||
|
||
**首页不放置的内容（从当前首页移除）：**
|
||
- 设备快捷入口（血压计/血糖仪卡片）→ 移至"健康"Tab
|
||
- 6 项快捷服务网格（预约挂号/健康录入/趋势/告警/资讯/AI）→ 精简为 2 个核心按钮
|
||
- 健康资讯文章列表 → 入口移至"健康"Tab 底部或"我的"页
|
||
|
||
## 4. 健康页设计
|
||
|
||
**功能定位：** 体征数据录入 + 趋势查看 + 设备管理
|
||
|
||
### 4.1 录入区
|
||
- 顶部类型 Tab：血压 / 心率 / 血糖 / 体重（56px 高大 Tab，选中项 $pri 实色底白字）
|
||
- 血压：收缩压 + 舒张压两个大输入框（56px 高，数值 28px 衬线体），上下排列（非左右，防止老年用户填反）
|
||
- 心率/体重：单个大输入框
|
||
- 血糖：数值 + 时段选择（空腹/餐后 2h，大按钮组）
|
||
- 每个输入框下方显示参考范围和实时状态（正常/偏高/偏低）
|
||
- 保存按钮：全宽 56px 高 $pri 实色
|
||
- 异常值保存前弹出确认："血压偏高 (160/95)，确认提交？"
|
||
|
||
### 4.2 趋势图
|
||
- 复用现有 `getTrend` API
|
||
- 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. 验证方式
|
||
|
||
1. `pnpm build` — 小程序编译通过
|
||
2. 微信开发者工具预览 — 布局和字号正确
|
||
3. 真机测试 — 在 60+ 患者手机上验证可读性和触控体验
|
||
4. WCAG 2.1 AA — 色值对比度合规（≥4.5:1 正文，≥3:1 大字），使用 axe-core 或微信开发者工具无障碍审计
|
||
5. 核心路径验证（每条 ≤ 3 步）：
|
||
- 记录血压：首页 → 点击"记录体征" → 输入 → 保存（3 步）
|
||
- 查看趋势：健康 Tab → 查看趋势图（1 步）
|
||
- 预约挂号：首页 → 点击"预约挂号" → 选择时间 → 确认（3 步）
|
||
- 查看消息：消息 Tab → 点击对话（2 步）
|
||
6. 不同屏幕尺寸测试：特别是老年用户常用的小屏 Android 设备
|
||
7. 字体回退验证：衬线体在低端 Android 设备上的回退（使用 `Georgia, "PingFang SC", serif`）
|
||
|
||
## 12. 迁移与发布策略
|
||
|
||
- 一次性全量发布（非 A/B 测试），因为 5 Tab → 4 Tab 是结构性变更，无法共存
|
||
- 旧路径 `pages/consultation/`、`pages/mall/` 保留为路由页面，但不再从 TabBar 进入
|
||
- 小程序分享卡片可能指向旧路径——这些页面保留可访问，不受影响
|
||
- 发布前在测试环境完整走一遍所有核心路径
|