Files
akmon/doc_zhipao/wearable_band_ui.md
2026-01-20 08:04:15 +08:00

10 KiB
Raw Permalink Blame History

运动手环界面UI需求与说明文档

一、硬件与系统基础

  • 屏幕规格1.47英寸 TFT IPS 液晶屏对角线分辨率建议194×368或类似支持多点触控。
  • 主控系统FreeRTOS 实时操作系统。
  • 交互方式:触摸+物理按键(有),支持滑动、点击、长按等手势。
  • 通信模式支持蓝牙BLE和2.4G无线两种通信方式,界面需显示当前工作模式。

二、核心交互与特色功能

1. 一键报警

  • 入口:主界面下方或侧边物理按键,或在主菜单中突出显示“报警”图标。
  • 操作流程
    • 用户长按/双击报警键或图标,弹出确认界面(防误触)。
    • 确认后,手环通过蓝牙/网关/手机App发送报警信号含用户ID、时间、位置信息等
    • UI需有报警状态反馈如红色动画、震动提示
  • 安全性需防止误触建议二次确认或长按2秒以上。

2. 录音并发送

  • 入口:主界面快捷入口或功能菜单。
  • 操作流程
    • 用户点击“录音”图标,进入录音界面,显示录音时长、剩余时间。
    • 支持开始、暂停、结束、重录等操作。
    • 录音完成后,用户可选择发送(通过蓝牙/网关/手机App上传
    • UI需有录音动画、进度条、发送状态提示。
  • 存储与传输:录音文件本地缓存,支持断点续传。

三、常规功能UI设计

1. 运动与健康监测

  • 首页:显示时间、步数、心率、卡路里、天气等信息,支持自定义卡片布局。
  • 运动模式:跑步、骑行、健走、自由训练等,进入后显示实时数据(配速、距离、心率、时长等)。
  • 健康监测:心率、血氧、睡眠、压力、体温等,支持历史数据曲线查看。

2. 消息与通知

  • 消息提醒短文字消息、App通知支持查看和简单回复如快捷短语录音
  • 报警/录音消息:有专属消息列表,显示报警/录音历史及状态。

3. 设备设置

  • 亮度、音量、勿扰、蓝牙、2.4G模式切换、系统信息等设置界面
  • 通信模式显示与切换:主界面/设置界面需有当前通信模式(蓝牙/2.4G)状态显示,支持手动切换(如有权限)。
  • 蓝牙连接管理:设置界面支持蓝牙配对、断开、重连、可见性设置,显示当前蓝牙连接状态。
  • 表盘切换:支持多种表盘风格,长按首页切换。
  • 表盘风格说明
    • 经典数字表盘:大号数字显示当前时间(小时/分钟),下方小字显示日期、星期,适合喜欢简洁、易读时间的用户。
    • 指针模拟表盘:模拟传统手表的时针、分针、秒针,配合圆形刻度,可嵌入步数、心率等小型圆环。
    • 运动数据表盘:主区域突出显示步数、心率、卡路里等运动数据,时间为次要信息,适合注重运动健康的用户。
    • 信息聚合表盘:同时显示时间、天气、步数、心率、电量等多项信息,采用分区或卡片式布局,支持自定义显示项。
    • 极简艺术表盘:以艺术插画、极简线条、色块为主,时间/日期以小字显示,适合追求个性、时尚的用户。
    • 动态/动画表盘:背景或元素有动态效果(如心跳、波浪、运动人物动画),动画可与步数、心率等数据联动。
    • 照片/自定义表盘:用户可上传照片或选择图库图片作为背景,时间/数据以悬浮方式显示,支持自定义字体、颜色。
    • 表盘设置:支持表盘样式、颜色、字体、信息显示项等自定义设置。

4. 其他常用功能

  • 闹钟、秒表、倒计时、查找手机、天气、遥控拍照等

四、UI风格与交互细节

  • 风格:简洁、直观、运动感强,色彩明快,图标大且易识别。
  • 字体:高对比度,适合户外强光下阅读。
  • 动画:交互有反馈(如按钮按下、滑动切换、报警/录音时的动态效果)。
  • 适配所有界面适配1.47英寸长条形屏幕,重要信息优先显示,支持上下滑动查看更多内容。

五、特殊注意事项

  • 低功耗优化UI动画、亮度、刷新率需兼顾续航。
  • 误触防护:报警、录音等关键操作需二次确认或长按触发。
  • 无障碍支持:高对比度模式、大字体、震动反馈等。

六、原型图与界面流程图(文字版)

1. 主界面(卡片式滑动)

  • 每屏为一张功能卡片,内容包括:
    • 时间/日期/电量/蓝牙/2.4G模式(主卡片,需显示当前通信模式及连接状态)
    • 步数/运动量
    • 心率/健康
    • 运动快捷入口
    • 消息/通知
    • 录音/报警(可单独卡片或与消息合并)
  • 左右滑动切换卡片,点击/长按进入详情或功能页。
  • 物理按键可自定义为一键报警、录音等高优先级功能。

2. 运动模式流程(示意图+说明)

┌─────────────────────────────┐
│   运动模式选择卡片         │
│  [跑步] [骑行] [健走] ...   │
└─────────────────────────────┘
      ↓ 选择后进入
┌─────────────────────────────┐
│   跑步模式详情             │
│  距离: 2.1km  心率: 120    │
│  配速: 6'00"/km  时间: 12:45│
│  [暂停] [结束]              │
└─────────────────────────────┘
      ↓ 结束后
┌─────────────────────────────┐
│   运动总结                  │
│  距离、配速、心率曲线等     │
│  [返回] [分享]              │
└─────────────────────────────┘
  • 运动模式入口为卡片或图标,左右滑动选择运动类型。
  • 进入运动后,主界面实时显示核心数据,底部为暂停/结束等操作图标。
  • 运动结束后自动进入总结页,显示本次运动数据和历史对比。
  • 所有操作按钮(如暂停、结束)均优先用图标,必要时下方配小字说明。

3. 健康监测流程

  • 首页 → 健康(图标/卡片)→ 选择心率/血氧/睡眠/压力/体温
  • 进入详情页:显示实时数据与历史曲线

4. 消息与报警/录音流程

  • 首页 → 消息(图标/卡片)→ 消息列表(来电/短信/报警/录音)
  • 报警/录音消息可查看历史、状态、重发

5. 一键报警流程

  • 首页/物理按键/快捷入口 → 长按/双击报警 → 弹出确认界面
  • 确认后报警,显示报警动画与反馈
  • 报警历史可在消息中心查看

6. 录音并发送流程

  • 首页/快捷入口 → 录音 → 录音界面(开始/暂停/结束/重录)
  • 录音完成后可发送,显示发送状态
  • 录音历史可在消息中心查看

7. 设备设置流程

  • 首页 → 设置(图标/卡片)→ 亮度/音量/勿扰/蓝牙/2.4G模式切换/系统信息/表盘切换

8. 其他功能流程

  • 首页 → 更多 → 闹钟、秒表、倒计时、查找手机、天气、遥控拍照等

建议:

  • 可用墨刀、Axure、Figma等工具根据上述流程绘制高保真原型图。
  • 每个流程节点建议配有界面草图(如有美工/交互支持可补充)。

七、表盘风格示意图(文字版)

以下为每种表盘风格的界面布局文字示意,便于设计师或开发参考:

1. 经典数字表盘

┌─────────────────────────────┐
│           12:45            │  ← 大号数字时间
│         2025/05/28         │  ← 日期
│        周三  电量  蓝牙      │  ← 状态栏小图标
└─────────────────────────────┘

2. 指针模拟表盘

┌─────────────────────────────┐
│        (圆形表盘)           │
│      时针/分针/秒针         │
│   步数/心率小圆环/指示灯    │
└─────────────────────────────┘

3. 运动数据表盘

┌─────────────────────────────┐
│   步数:  8,888              │
│   心率:  78 bpm             │
│   卡路里:  320 kcal         │
│   时间:  12:45              │
└─────────────────────────────┘

4. 信息聚合表盘

┌─────────────────────────────┐
│ 12:45   天气: 晴  28℃       │
│ 步数:8888  心率:78  电量:90% │
│ 运动: 跑步  2.1km           │
└─────────────────────────────┘

5. 极简艺术表盘

┌─────────────────────────────┐
│   (插画/色块/极简图形)      │
│         12:45               │
│         05/28               │
└─────────────────────────────┘

6. 动态/动画表盘

┌─────────────────────────────┐
│   (动态心跳/波浪/运动动画)  │
│      12:45   步数:8888      │
└─────────────────────────────┘

7. 照片/自定义表盘

┌─────────────────────────────┐
│   (用户照片/自定义背景)     │
│   12:45   步数:8888         │
└─────────────────────────────┘

以上为文字示意实际UI可根据屏幕比例、品牌风格进一步美化和细化。