20 KiB
20 KiB
现在需要设计一个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：
- 顶部状态栏/卡片：展示连接状态、设备电量、通信模式等，全局信息固定在顶部，附带“重新连接”“SOS”等快捷入口。
- 实时监测区（核心可视区域）：
- 默认占屏幕大部分高度，使用
ak-chart叠加多指标曲线。 - 提供切换指标、时间范围、全屏查看等控件。
- 略带溢出（sticky header）确保实时指示器可见。
- 默认占屏幕大部分高度，使用
- 历史数据区：
- 放在实时区下方，可折叠或以“最近一周摘要 + 查看全部”模式呈现。
- 采用小卡片或迷你图表概览，点击再弹出/跳转到详细分析。
- 可增加“睡眠得分”“运动总结”等关键指标，避免重复实时区的细节。
交互方式
- 局部 Tab / 切换卡片：实时 vs. 历史用轻量 Tab 控件切换，但保持在同页渲染，减少全局导航。
- 锚点导航：顶部提供锚点按钮（例如“实时”“历史”），帮助用户快速定位到对应区域，避免拖拽繁琐。
- 模块折叠：允许用户根据使用场景折叠历史区或实时区，特别是在实时监控期间只保留必要信息。
性能与实现注意
- 单页承载多段图表时要做好懒加载和可见区渲染，避免一次性绘制所有历史图造成卡顿。
- 实时图表保持独立刷新，历史数据只在展开时加载，以降低蓝牙数据推送线程与 UI 渲染的竞争。
- 在文档中可新增“单页仪表板模式”的说明，强调如何配置模块显示/隐藏、响应式策略、以及在 BLE 通信异常时如何保持状态一致。
总结：把这三大功能集中到同一页面是可行的，只要通过模块化布局、可折叠结构和恰当的性能优化来控制信息量与响应速度。如果你希望，我可以把这些建议直接补充到 wearable_app_ui.md 的导航或页面结构章节中。