413 lines
20 KiB
Markdown
413 lines
20 KiB
Markdown
现在需要设计一个APP的ui,用于通过蓝牙方式进行设备连接，并直观显示用户当前监测的生理数据，目前可以想到的内容包括：
|
||
1.实时监测的 心率，血氧，步数，我建议以时间轴的方式 ，用ak-chart的方式直观展示，可以几个指标用不同的颜色来表示，同时辅以文字方式只显示当前，和一些特征指标，比如最高，最低。如果有运动速度，也一并显示。
|
||
2.历史数据，如睡眠数据，睡眠质量评估
|
||
3.可延展的信息
|
||
|
||
## 一、APP整体架构与导航
|
||
|
||
### 1.1 主要页面结构
|
||
- **首页/仪表板**：设备连接状态、核心生理指标概览
|
||
- **实时监测**：详细的实时数据图表展示
|
||
- **历史数据**：睡眠、运动历史记录与分析
|
||
- **设备管理**：蓝牙连接、设备设置、固件更新
|
||
- **个人中心**：用户资料、健康目标、设置
|
||
|
||
### 1.2 导航设计
|
||
- 底部Tab导航：首页、监测、历史、我的
|
||
- 顶部状态栏：显示蓝牙连接状态、电池电量、时间
|
||
|
||
## 二、首页/仪表板设计
|
||
|
||
### 2.1 页面布局
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 状态栏：蓝牙连接状态 │
|
||
├─────────────────────────────┤
|
||
│ 设备卡片 │
|
||
│ ├─ 设备名称：运动手环 │
|
||
│ ├─ 电量：85% 🔋 │
|
||
│ └─ 连接状态：已连接 │
|
||
├─────────────────────────────┤
|
||
│ 核心指标卡片组 │
|
||
│ ├─ 心率：72 bpm ❤️ │
|
||
│ ├─ 血氧：98% 🩸 │
|
||
│ ├─ 步数：8,547 步 👟 │
|
||
│ └─ 今日卡路里：320 kcal │
|
||
├─────────────────────────────┤
|
||
│ 快捷功能 │
|
||
│ ├─ 开始监测 ├─ 历史数据 │
|
||
│ ├─ 紧急报警 ├─ 设置 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 交互设计
|
||
- 点击设备卡片：进入设备详情页
|
||
- 点击指标卡片：跳转到对应详细监测页面
|
||
- 长按快捷功能：显示更多选项
|
||
|
||
## 三、实时监测页面设计
|
||
|
||
### 3.1 页面布局
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 返回 | 实时监测 │
|
||
├─────────────────────────────┤
|
||
│ 控制面板 │
|
||
│ ├─ ▶️ 开始/⏸️ 暂停 │
|
||
│ ├─ 监测模式：心率+血氧 │
|
||
│ └─ 持续时间：00:15:32 │
|
||
├─────────────────────────────┤
|
||
│ 图表区域 (ak-chart) │
|
||
│ ├─ 时间轴：过去30分钟 │
|
||
│ ├─ 心率曲线：红色 │
|
||
│ ├─ 血氧曲线：蓝色 │
|
||
│ ├─ 步数柱状图：绿色 │
|
||
│ └─ 运动速度：橙色 │
|
||
├─────────────────────────────┤
|
||
│ 当前数值面板 │
|
||
│ ├─ 心率：75 bpm (最高82) │
|
||
│ ├─ 血氧：97% (最低95%) │
|
||
│ ├─ 步数：245 (今日累计) │
|
||
│ └─ 速度：6.2 km/h │
|
||
├─────────────────────────────┤
|
||
│ 异常提醒 │
|
||
│ └─ ⚠️ 心率异常，请注意休息 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 图表交互
|
||
- 滑动时间轴：查看历史数据
|
||
- 点击图表点：显示详细数值和时间戳
|
||
- 双指缩放：放大/缩小时间范围
|
||
- 长按：锁定当前数值显示
|
||
|
||
### 3.3 数据更新机制
|
||
- 实时数据每秒更新
|
||
- 图表平滑动画过渡
|
||
- 异常数据高亮显示
|
||
|
||
## 四、历史数据页面设计
|
||
|
||
### 4.1 睡眠数据页面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 返回 | 睡眠记录 │
|
||
├─────────────────────────────┤
|
||
│ 日期选择器 │
|
||
│ ├─ 2025-10-15 (今天) │
|
||
│ └─ ◀ 2025-10-14 ▶ │
|
||
├─────────────────────────────┤
|
||
│ 睡眠概览卡片 │
|
||
│ ├─ 总睡眠时间：8h 15m │
|
||
│ ├─ 深睡：4h 30m │
|
||
│ ├─ 浅睡：2h 45m │
|
||
│ ├─ 快速眼动：1h 00m │
|
||
│ └─ 睡眠质量：良好 (85%) │
|
||
├─────────────────────────────┤
|
||
│ 睡眠阶段图表 │
|
||
│ ├─ 时间轴：22:00-06:00 │
|
||
│ ├─ 深睡：深蓝色 │
|
||
│ ├─ 浅睡：浅蓝色 │
|
||
│ ├─ 快速眼动：紫色 │
|
||
│ └─ 清醒：灰色 │
|
||
├─────────────────────────────┤
|
||
│ 睡眠建议 │
|
||
│ └─ 💡 建议提前1小时入睡 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 4.2 运动历史页面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 返回 | 运动记录 │
|
||
├─────────────────────────────┤
|
||
│ 时间筛选：今日 | 本周 | 本月 │
|
||
├─────────────────────────────┤
|
||
│ 运动记录列表 │
|
||
│ ├─ 跑步 2025-10-15 │
|
||
│ │ ├─ 距离：5.2km │
|
||
│ │ ├─ 时长：45min │
|
||
│ │ ├─ 平均心率：145bpm │
|
||
│ │ └─ 卡路里：380kcal │
|
||
│ ├─ 骑行 2025-10-14 │
|
||
│ │ ├─ 距离：12.8km │
|
||
│ │ ├─ 时长：1h 20min │
|
||
│ │ ├─ 平均心率：135bpm │
|
||
│ │ └─ 卡路里：520kcal │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
## 五、设备管理页面设计
|
||
|
||
### 5.1 蓝牙连接页面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 返回 | 设备连接 │
|
||
├─────────────────────────────┤
|
||
│ 当前设备 │
|
||
│ ├─ 运动手环 Pro │
|
||
│ ├─ 状态：已连接 🔗 │
|
||
│ ├─ 信号强度：强 📶 │
|
||
│ └─ 断开连接 │
|
||
├─────────────────────────────┤
|
||
│ 可用设备 │
|
||
│ ├─ 扫描设备 │
|
||
│ ├─ 手环 A (未连接) │
|
||
│ ├─ 手环 B (未连接) │
|
||
│ └─ 刷新列表 │
|
||
├─────────────────────────────┤
|
||
│ 连接历史 │
|
||
│ ├─ 手环 Pro (最后连接) │
|
||
│ └─ 手环 Lite (昨天) │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 5.2 设备设置页面
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 返回 | 设备设置 │
|
||
├─────────────────────────────┤
|
||
│ 基本信息 │
|
||
│ ├─ 设备名称：运动手环 Pro │
|
||
│ ├─ 固件版本：v2.1.5 │
|
||
│ ├─ 硬件版本：HW1.0 │
|
||
│ └─ 序列号：AK20250001 │
|
||
├─────────────────────────────┤
|
||
│ 监测设置 │
|
||
│ ├─ 心率监测：开 │
|
||
│ ├─ 血氧监测：开 │
|
||
│ ├─ 睡眠监测：开 │
|
||
│ └─ 自动监测：开 │
|
||
├─────────────────────────────┤
|
||
│ 提醒设置 │
|
||
│ ├─ 心率异常提醒：开 │
|
||
│ ├─ 久坐提醒：每小时 │
|
||
│ ├─ 饮水提醒：开 │
|
||
│ └─ 闹钟：07:00 │
|
||
├─────────────────────────────┤
|
||
│ 系统功能 │
|
||
│ ├─ 查找设备 │
|
||
│ ├─ 固件更新 │
|
||
│ ├─ 恢复出厂设置 │
|
||
│ └─ 解绑设备 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
## 六、个人中心页面设计
|
||
|
||
### 6.1 页面布局
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 返回 | 个人中心 │
|
||
├─────────────────────────────┤
|
||
│ 用户信息 │
|
||
│ ├─ 头像 │
|
||
│ ├─ 姓名：张三 │
|
||
│ ├─ 年龄：25岁 │
|
||
│ └─ 身高/体重：175cm/65kg │
|
||
├─────────────────────────────┤
|
||
│ 健康目标 │
|
||
│ ├─ 每日步数：8000步 │
|
||
│ ├─ 目标心率：120-150bpm │
|
||
│ ├─ 睡眠目标：8小时 │
|
||
│ └─ 体重目标：62kg │
|
||
├─────────────────────────────┤
|
||
│ 功能入口 │
|
||
│ ├─ 健康报告 │
|
||
│ ├─ 数据导出 │
|
||
│ ├─ 隐私设置 │
|
||
│ └─ 关于我们 │
|
||
├─────────────────────────────┤
|
||
│ 设置 │
|
||
│ ├─ 通知设置 │
|
||
│ ├─ 单位设置 │
|
||
│ ├─ 语言设置 │
|
||
│ └─ 退出登录 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
## 七、UI风格与设计规范
|
||
|
||
### 7.1 色彩规范
|
||
- **主色调**：蓝色系 (#2196F3)
|
||
- **辅助色**：
|
||
- 心率：红色 (#F44336)
|
||
- 血氧：蓝色 (#2196F3)
|
||
- 步数：绿色 (#4CAF50)
|
||
- 睡眠：紫色 (#9C27B0)
|
||
- 警告：橙色 (#FF9800)
|
||
- 危险：红色 (#F44336)
|
||
|
||
### 7.2 图标规范
|
||
- 使用Material Design图标
|
||
- 生理指标使用Emoji图标辅助识别
|
||
- 状态图标：连接(🔗)、断开(❌)、充电(🔋)、报警(⚠️)
|
||
|
||
### 7.3 字体规范
|
||
- 标题：18px Medium
|
||
- 正文：14px Regular
|
||
- 小字：12px Regular
|
||
- 数值：16px Bold
|
||
|
||
### 7.4 交互规范
|
||
- 点击反馈：涟漪效果
|
||
- 加载状态：骨架屏或进度条
|
||
- 错误状态：Toast提示 + 重试按钮
|
||
- 成功状态：绿色勾选动画
|
||
|
||
## 八、响应式设计
|
||
|
||
### 8.1 不同屏幕适配
|
||
- **手机端**：标准布局
|
||
- **平板端**：双列布局，图表更大
|
||
- **折叠屏**：适应外屏显示关键信息
|
||
|
||
### 8.2 暗色模式
|
||
- 支持系统暗色模式切换
|
||
- 图表颜色自动调整
|
||
- 保持良好的对比度
|
||
|
||
## 九、异常处理与用户引导
|
||
|
||
### 9.1 连接异常
|
||
- 蓝牙未开启：引导开启蓝牙
|
||
- 设备离线：显示离线状态，提示检查设备
|
||
- 连接超时：自动重试，显示进度
|
||
|
||
### 9.2 数据异常
|
||
- 传感器故障：显示故障图标，建议检查设备
|
||
- 数据缺失：显示"--"，提示稍后重试
|
||
- 网络异常：离线缓存数据，网络恢复后同步
|
||
|
||
### 9.3 新手引导
|
||
- 首次使用：设备连接引导
|
||
- 功能介绍：页面首次进入时的浮层提示
|
||
- 操作提示：重要按钮的Tooltip
|
||
|
||
## 十、技术实现建议
|
||
|
||
### 10.1 前端框架
|
||
- 使用uni-app框架，支持多端发布
|
||
- 图表组件：ak-charts或ECharts
|
||
- 状态管理：Vuex/Pinia
|
||
|
||
### 10.2 蓝牙通信
|
||
- 使用uni-app的蓝牙API
|
||
- 参考蓝牙协议文档实现数据解析
|
||
- 实现自动重连和心跳保活
|
||
|
||
### 10.3 数据存储
|
||
- 本地存储：SQLite或uni-app存储API
|
||
- 云端同步：通过API上传数据
|
||
- 数据加密：敏感健康数据加密存储
|
||
|
||
## 十一、紧急报警与录音功能
|
||
|
||
### 11.1 一键报警流程
|
||
- 首页、实时监测页、设备状态栏均提供醒目的SOS入口。
|
||
- 触发方式：长按2秒或双击物理按钮 → 弹出确认弹窗 → 二次确认才能真正发出报警。
|
||
- 报警后展示倒计时与可取消按钮，同时触发震动与红色动画反馈。
|
||
- 成功发送后显示“已通知护理人员/家属”，并可查看报警编号、时间、处理状态。
|
||
- 与协议 `CMD_EMERGENCY_ALERT (0x50)` 对接，展示发送进度与是否收到ACK回应。
|
||
|
||
### 11.2 录音并发送
|
||
- 首页快捷入口 + 消息页 “录音”按钮，点击进入录音界面。
|
||
- 录音界面：波形动画、计时器、剩余时长指示、暂停/继续、重录功能。
|
||
- 录音完成后提供剪辑（截取前/后3秒）与备注输入，上传时显示进度条。
|
||
- 支持断点续传，上传失败提示重试或离线保存。
|
||
- 历史录音列表按照时间排序，展示发送状态（待上传、已上传、发送失败）。
|
||
- 对应协议 `CMD_VOICE_RECORD (0x51)`；若包过大提示开启更高MTU或自动分包。
|
||
|
||
### 11.3 报警与录音历史
|
||
- 消息中心展示专属分类卡片：报警记录、录音消息。
|
||
- 记录包含时间、类型、处理状态、查看详情/播放录音按钮。
|
||
- 支持重新发送报警或录音，并可添加处理备注。
|
||
|
||
## 十二、消息与通知中心
|
||
|
||
### 12.1 消息列表
|
||
- 顶部切换：全部消息 / 报警 / 录音 / 系统通知。
|
||
- 每条消息含图标、标题、摘要、时间、状态标签（未读、已读、失败）。
|
||
- 支持快捷回复（预设短语）、语音回复、标记已处理。
|
||
- 长按进入批量操作：标记已读、删除、归档。
|
||
|
||
### 12.2 通知推送设置
|
||
- 配置页面可选择接收的通知类型（来电、短信、App通知、健康提醒）。
|
||
- 调整免打扰时段、震动强度、消息预览内容（显示全文/仅标题）。
|
||
- 与协议 `CMD_NOTIFICATION (0x30)`、`CMD_CALL_INCOMING (0x31)` 等命令保持一致。
|
||
|
||
## 十三、通信状态与诊断
|
||
|
||
### 13.1 连接状态提示
|
||
- 顶部状态栏显示当前连接方式：BLE / 2.4G / 离线。
|
||
- 设备卡片展示信号强度、电量、最近同步时间、数据延迟指示。
|
||
- 当连接异常时提供“重新连接”“查看教程”快捷入口。
|
||
|
||
### 13.2 诊断工具
|
||
- 在设备管理页提供“诊断中心”：
|
||
- 蓝牙日志导出（最近100条命令、响应）。
|
||
- 数据包实时监控（CMD、SEQ、CRC是否通过）。
|
||
- 健康数据自检（最近一次心率、血氧包内容是否有效）。
|
||
- 支持上传诊断日志至客服或技术支持。
|
||
|
||
### 13.3 固件与协议版本管理
|
||
- 显示当前手环协议版本、固件版本，检测是否匹配APP最低要求。
|
||
- 若协议不兼容，提示升级手环或降级APP，并列出差异点。
|
||
|
||
## 十四、与手环端的协同设计
|
||
|
||
### 14.1 功能联动
|
||
- APP首页直接映射手环主界面卡片，保持指标排列一致。
|
||
- 设置页同步手环端亮度、震动、表盘、运动模式等配置。
|
||
- 当手环切换通信模式（BLE/2.4G）时，APP实时刷新状态并给出提示。
|
||
|
||
### 14.2 表盘管理
|
||
- 表盘商店：展示经典数字、指针模拟、运动数据、信息聚合、极简艺术、动态、照片等风格。
|
||
- 支持在线预览、下载、安装、应用、删除，显示预计安装时间和进度。
|
||
- 可同步用户自定义表盘（上传背景、字体、配色），与协议 `CMD_WATCHFACE_SET (0x73)` 对接。
|
||
|
||
### 14.3 实时协同操作
|
||
- 运动模式：在APP中选择跑步/骑行等模式自动下发至手环，启动对应传感器采样。
|
||
- 健康监测：APP发起实时监测命令（`CMD_REAL_TIME_START (0x19)`），手环返回实时数据，APP图表立即更新。
|
||
- 紧急情况：APP端可手动触发SOS，与手环物理按键互为备份。
|
||
|
||
## 十五、设计交付与原型建议
|
||
|
||
- 交付物：高保真原型图（Figma/Axure）、交互动效说明、组件库（按钮、图表、卡片、弹窗）。
|
||
- 版本管理：按模块拆分（实时监测、历史数据、设备管理、消息中心、录音报警）。
|
||
- 测试方案：结合蓝牙协议，编写端到端用例（设备连接、实时监测、报警、录音、通知、固件更新）。
|
||
- 可用性测试：邀请真实用户体验SOS、录音、查看睡眠数据等关键流程，收集反馈迭代。
|
||
|
||
---
|
||
|
||
**注：此设计文档基于用户需求和现有蓝牙协议规范制定，如有特殊需求可进一步调整。**
|
||
看到你想把首页、实时监测、历史数据合并成一个界面，我先梳理下：先评估信息架构的可行性，再给出布局/交互建议，最后补充性能与使用体验上的注意点。
|
||
|
||
## 可行性分析
|
||
- **信息密度**：如果屏幕空间允许（例如平板、Web 或需要在手机上上下滚动），这三块内容放到同页是可行的。关键是为实时区保留足够的可视面积，并保证历史区不会喧宾夺主。
|
||
- **操作流顺序**：用户进入页面后通常先看连接状态 → 实时数据 → 再查看历史趋势，这正好是一个单页滚动的自然顺序，可以减少切页。
|
||
- **监测时的专注度**：若实时监测时需要长时间盯图或频繁互动，也可以在同页内通过折叠/全屏模式临时隐藏其他区域，既节省跳转又兼顾沉浸体验。
|
||
|
||
## 推荐布局
|
||
可以把页面拆成三个模块，采用单页滚动或局部 Tab：
|
||
1. **顶部状态栏/卡片**：展示连接状态、设备电量、通信模式等，全局信息固定在顶部，附带“重新连接”“SOS”等快捷入口。
|
||
2. **实时监测区**（核心可视区域）：
|
||
- 默认占屏幕大部分高度，使用 `ak-chart` 叠加多指标曲线。
|
||
- 提供切换指标、时间范围、全屏查看等控件。
|
||
- 略带溢出（sticky header）确保实时指示器可见。
|
||
3. **历史数据区**：
|
||
- 放在实时区下方，可折叠或以“最近一周摘要 + 查看全部”模式呈现。
|
||
- 采用小卡片或迷你图表概览，点击再弹出/跳转到详细分析。
|
||
- 可增加“睡眠得分”“运动总结”等关键指标，避免重复实时区的细节。
|
||
|
||
## 交互方式
|
||
- **局部 Tab / 切换卡片**：实时 vs. 历史用轻量 Tab 控件切换，但保持在同页渲染，减少全局导航。
|
||
- **锚点导航**：顶部提供锚点按钮（例如“实时”“历史”），帮助用户快速定位到对应区域，避免拖拽繁琐。
|
||
- **模块折叠**：允许用户根据使用场景折叠历史区或实时区，特别是在实时监控期间只保留必要信息。
|
||
|
||
## 性能与实现注意
|
||
- 单页承载多段图表时要做好懒加载和可见区渲染，避免一次性绘制所有历史图造成卡顿。
|
||
- 实时图表保持独立刷新，历史数据只在展开时加载，以降低蓝牙数据推送线程与 UI 渲染的竞争。
|
||
- 在文档中可新增“单页仪表板模式”的说明，强调如何配置模块显示/隐藏、响应式策略、以及在 BLE 通信异常时如何保持状态一致。
|
||
|
||
总结：把这三大功能集中到同一页面是可行的，只要通过模块化布局、可折叠结构和恰当的性能优化来控制信息量与响应速度。如果你希望，我可以把这些建议直接补充到 wearable_app_ui.md 的导航或页面结构章节中。 |