331 lines
9.2 KiB
Markdown
331 lines
9.2 KiB
Markdown
|
# 平衡体态检测系统 UI 与交互设计说明
|
|||
|
|
|
|||
|
|
## 总体设计理念
|
|||
|
|
|
|||
|
|
- **以用户为中心**：以康复医生和技术操作员为核心用户，界面简洁直观
|
|||
|
|
- **数据驱动展示**：所有核心模块数据实时可视化，交互响应快速
|
|||
|
|
- **操作流程明晰**：每一步操作清晰可控，避免误操作
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 登录与注册页面
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 页面结构
|
|||
|
|
- 顶部：系统Logo与名称
|
|||
|
|
- 中部：账号输入框、密码输入框、登录按钮
|
|||
|
|
- 底部：忘记密码、注册入口
|
|||
|
|
|
|||
|
|
### 主要功能
|
|||
|
|
- **登录功能**：用户名密码登录，明文匹配
|
|||
|
|
- **注册功能**：手机号、密码二次确认
|
|||
|
|
- **密码管理**：明文密码显示与记住密码
|
|||
|
|
- **密码找回**：显示明文密码（建议后续版本优化为短信验证）
|
|||
|
|
- **修改密码**：支持原密码校验更新
|
|||
|
|
|
|||
|
|
### 交互说明
|
|||
|
|
- 输入框获得焦点高亮
|
|||
|
|
- 登录按钮点击后显示加载状态
|
|||
|
|
- 错误提示信息弹出或红色提示
|
|||
|
|
- 所有操作均本地数据库存储
|
|||
|
|
- 弹窗提示错误、成功状态
|
|||
|
|
|
|||
|
|
### 组件建议
|
|||
|
|
- Input输入框
|
|||
|
|
- Button按钮
|
|||
|
|
- Message提示组件
|
|||
|
|
- Modal弹窗
|
|||
|
|
|
|||
|
|
### 安全建议
|
|||
|
|
- 建议后续版本启用密码加密存储
|
|||
|
|
- 增加验证码机制
|
|||
|
|
- 支持多用户权限（医生、操作员、管理员）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. 实时检测模块
|
|||
|
|
|
|||
|
|
### 2.1 起始页
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 页面结构
|
|||
|
|
- **左侧**：功能快速入口（"检测、人员、系统"）
|
|||
|
|
- **右侧顶部**：用户信息栏、系统Logo
|
|||
|
|
- **右侧中部**：患者列表、选中患者基础信息展示
|
|||
|
|
- **操作按钮**：粉色鲜亮按钮（"查看档案、检测、新患者建档"）
|
|||
|
|
|
|||
|
|
#### 主要功能
|
|||
|
|
- 患者列表管理（支持搜索与滚动加载）
|
|||
|
|
- 基础信息展示与编辑
|
|||
|
|
- 快速进入各功能模块
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 患者列表可滚动显示，可选中，可输入用户名查询
|
|||
|
|
- 选中患者可显示基础信息，可点击编辑图标进行信息编辑
|
|||
|
|
- 按钮高亮显示，点击跳转对应功能页面
|
|||
|
|
|
|||
|
|
#### 组件建议
|
|||
|
|
- List列表组件
|
|||
|
|
- Search搜索框
|
|||
|
|
- Card卡片
|
|||
|
|
- Button按钮
|
|||
|
|
- Avatar头像
|
|||
|
|
|
|||
|
|
### 2.2 新建档案页
|
|||
|
|
|
|||
|
|
#### 页面结构
|
|||
|
|
- 表单区域：患者基础信息录入
|
|||
|
|
- 操作按钮区：退出、保存、保存并开始检测
|
|||
|
|
|
|||
|
|
#### 主要功能
|
|||
|
|
- **信息采集**：*为必填项，实时校验格式
|
|||
|
|
- **数据保存**：本地数据库存储
|
|||
|
|
- **快速检测**：保存后直接跳转检测页
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- **"退出"按钮**：弹窗确认是否保存
|
|||
|
|
- **"保存"按钮**：保存数据并返回列表
|
|||
|
|
- **"保存并开始检测"按钮**：保存数据并跳转检测页
|
|||
|
|
- 必填项校验，错误提示
|
|||
|
|
|
|||
|
|
#### 组件建议
|
|||
|
|
- Form表单
|
|||
|
|
- Input输入框
|
|||
|
|
- Select下拉选择
|
|||
|
|
- DatePicker日期选择
|
|||
|
|
- Button按钮
|
|||
|
|
- Validation校验
|
|||
|
|
|
|||
|
|
### 2.3 患者档案页
|
|||
|
|
|
|||
|
|
#### 页面结构
|
|||
|
|
- 患者基础信息展示区
|
|||
|
|
- 检测记录列表
|
|||
|
|
- 详细数据查看区
|
|||
|
|
|
|||
|
|
#### 主要功能
|
|||
|
|
- **检测记录展示**：所有历史检测记录
|
|||
|
|
- **数据可视化**：测量数据图文并茂展示
|
|||
|
|
- **视频回放**：操作过程视频+录屏回放
|
|||
|
|
- **足底垫片配置**：左右足+多个垫片，记录颜色/编号
|
|||
|
|
- **截图管理**：截图列表（放大预览、删除、查看截图数据、导出/打印）
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 检测记录按时间排序，支持筛选
|
|||
|
|
- 点击记录查看详细数据
|
|||
|
|
- 视频支持播放控制
|
|||
|
|
- 截图支持放大预览和批量操作
|
|||
|
|
|
|||
|
|
#### 组件建议
|
|||
|
|
- Table表格
|
|||
|
|
- Timeline时间轴
|
|||
|
|
- Video视频播放器
|
|||
|
|
- Image图片预览
|
|||
|
|
- Chart图表
|
|||
|
|
- Export导出功能
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 3. 检测页设计
|
|||
|
|
|
|||
|
|
### 3.1 实时检测主界面
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 页面结构
|
|||
|
|
- **左侧**：快捷操作入口
|
|||
|
|
- **顶部信息栏**：患者信息、检测时间、医生名称
|
|||
|
|
- **数据展示区**：
|
|||
|
|
- 身体姿态：深度图动态更新
|
|||
|
|
- 头部IMU：实时Pitch/Yaw/Roll值+最大值记录+清零+抗干扰
|
|||
|
|
- 足底压力：压力云图+数据占比展示
|
|||
|
|
- 视频区：录制+时间戳+最大化播放
|
|||
|
|
|
|||
|
|
#### 主要功能
|
|||
|
|
- **实时数据监控**：三大模块数据同步显示
|
|||
|
|
- **视频录制**：同步录制检测过程
|
|||
|
|
- **数据记录**：实时保存检测数据
|
|||
|
|
- **异常监测**：数据异常自动提示
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 数据实时刷新，响应速度<100ms
|
|||
|
|
- 视频支持最大化播放
|
|||
|
|
- 异常情况弹窗提示
|
|||
|
|
- 支持数据清零重置
|
|||
|
|
|
|||
|
|
#### 组件建议
|
|||
|
|
- Canvas画布（深度图、压力云图）
|
|||
|
|
- Video视频组件
|
|||
|
|
- Progress进度条
|
|||
|
|
- Modal弹窗
|
|||
|
|
- Chart实时图表
|
|||
|
|
|
|||
|
|
### 3.2 操作按钮区
|
|||
|
|
|
|||
|
|
#### 按钮状态管理
|
|||
|
|
- **初始状态**：显示"开始"按钮
|
|||
|
|
- **检测中状态**：显示"截图""结束"按钮
|
|||
|
|
- **结束后状态**：显示"回放"按钮
|
|||
|
|
|
|||
|
|
#### 功能说明
|
|||
|
|
- **开始按钮**：启动检测，开始数据采集和视频录制
|
|||
|
|
- **截图按钮**：保存当前界面+对应数据+截图图片
|
|||
|
|
- **结束按钮**：终止录制，保存检测记录
|
|||
|
|
- **回放按钮**：支持视频同步播放、暂停、最大化、进度条拖动
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 按钮状态根据检测流程自动切换
|
|||
|
|
- 截图操作即时响应，保存成功提示
|
|||
|
|
- 结束检测需二次确认
|
|||
|
|
- 回放支持全屏模式
|
|||
|
|
|
|||
|
|
### 3.3 分屏模式
|
|||
|
|
|
|||
|
|
#### 功能设计
|
|||
|
|
- 提供"分屏"切换按钮
|
|||
|
|
- 支持全显（3模块）/单模块切换
|
|||
|
|
- 单模块模式支持滑动或左右切换按钮
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 分屏切换动画流畅
|
|||
|
|
- 单模块模式数据更大更清晰
|
|||
|
|
- 支持快速切换不同模块
|
|||
|
|
|
|||
|
|
#### 组件建议
|
|||
|
|
- Tabs标签页
|
|||
|
|
- Swiper滑动组件
|
|||
|
|
- Button切换按钮
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 4. 检测中的录屏界面
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 页面结构
|
|||
|
|
- **左侧**：快捷操作入口
|
|||
|
|
- **右侧顶部**：录制状态、时长显示、结束、截图按钮
|
|||
|
|
- **右侧中部**：检测结果实时展示区
|
|||
|
|
- **状态栏**：录制时长、数据同步状态
|
|||
|
|
|
|||
|
|
### 主要功能
|
|||
|
|
- **实时录制**：同步录制检测过程和数据
|
|||
|
|
- **时长显示**：显示录制时长与状态
|
|||
|
|
- **截图功能**：实时截图保存
|
|||
|
|
- **数据同步**：视频与数据时钟同步
|
|||
|
|
|
|||
|
|
### 交互说明
|
|||
|
|
- 录制中按钮高亮显示
|
|||
|
|
- 录制时长实时更新
|
|||
|
|
- 截图操作不影响录制
|
|||
|
|
- 录制结束弹窗确认保存
|
|||
|
|
- 支持录制过程中查看实时数据
|
|||
|
|
|
|||
|
|
### 组件建议
|
|||
|
|
- Timer计时器
|
|||
|
|
- Button按钮
|
|||
|
|
- Notification通知
|
|||
|
|
- StatusBar状态栏
|
|||
|
|
- ProgressBar进度条
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 5. 附加功能模块
|
|||
|
|
|
|||
|
|
### 5.1 截图管理
|
|||
|
|
|
|||
|
|
#### 功能入口
|
|||
|
|
- 检测页面截图按钮
|
|||
|
|
- 患者档案截图列表
|
|||
|
|
|
|||
|
|
#### 主要功能
|
|||
|
|
- **图片管理**：截图列表展示
|
|||
|
|
- **预览功能**：图片放大预览
|
|||
|
|
- **数据关联**：查看截图对应的检测数据
|
|||
|
|
- **导出打印**：支持单张或批量导出/打印
|
|||
|
|
- **删除管理**：支持单张或批量删除
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 缩略图网格展示
|
|||
|
|
- 点击放大预览
|
|||
|
|
- 支持键盘快捷键操作
|
|||
|
|
- 批量操作需确认提示
|
|||
|
|
|
|||
|
|
### 5.2 数据管理
|
|||
|
|
|
|||
|
|
#### 数据分类
|
|||
|
|
- 按患者分类管理
|
|||
|
|
- 按检测时间排序
|
|||
|
|
- 支持标签分类
|
|||
|
|
|
|||
|
|
#### 功能特性
|
|||
|
|
- **历史对比**：多次检测数据对比分析（V2.0实现）
|
|||
|
|
- **报告生成**：自动生成PDF报告（带医生备注）
|
|||
|
|
- **数据导出**：支持多种格式导出
|
|||
|
|
- **备份恢复**：数据备份与恢复功能
|
|||
|
|
|
|||
|
|
#### 交互说明
|
|||
|
|
- 数据列表支持多维度筛选
|
|||
|
|
- 对比分析支持图表展示
|
|||
|
|
- 报告生成支持模板自定义
|
|||
|
|
- 导出进度实时显示
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 6. 设计规范与建议
|
|||
|
|
|
|||
|
|
### 6.1 视觉设计
|
|||
|
|
- **配色方案**：统一黑色科技风格，突出专业感
|
|||
|
|
- **布局原则**：保持页面简洁，突出核心功能区域
|
|||
|
|
- **字体规范**：统一字体族，层次分明
|
|||
|
|
- **图标设计**：简洁明了，符合医疗设备使用习惯
|
|||
|
|
|
|||
|
|
### 6.2 交互设计
|
|||
|
|
- **响应速度**：界面响应时间<100ms
|
|||
|
|
- **动画效果**：简洁流畅，提升用户体验
|
|||
|
|
- **反馈机制**：操作即时反馈，状态清晰可见
|
|||
|
|
- **容错设计**：重要操作需二次确认
|
|||
|
|
|
|||
|
|
### 6.3 技术建议
|
|||
|
|
- **数据同步**：视频与数据录制时钟同步机制需保证精准性
|
|||
|
|
- **性能优化**：大数据量处理优化，确保实时性
|
|||
|
|
- **扩展性**：预留多检测记录对比模块逻辑框架
|
|||
|
|
- **安全性**：密码加密存储，数据传输安全
|
|||
|
|
|
|||
|
|
### 6.4 优化建议（基于V1.2）
|
|||
|
|
- 密码不应明文存储，应采用hash加密
|
|||
|
|
- 注册/找回密码增加验证码机制
|
|||
|
|
- 支持多用户权限（医生、操作员、管理员）
|
|||
|
|
- 后续建议支持远程数据云同步
|
|||
|
|
- 视频与数据录制时钟同步机制需保证精准性
|
|||
|
|
- 多检测记录对比模块应预留逻辑框架
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 7. 开发实施建议
|
|||
|
|
|
|||
|
|
### 7.1 开发优先级
|
|||
|
|
1. **核心功能**：登录、患者管理、实时检测
|
|||
|
|
2. **数据管理**：截图、录制、数据保存
|
|||
|
|
3. **扩展功能**：报告生成、数据对比
|
|||
|
|
4. **优化功能**：性能优化、安全加固
|
|||
|
|
|
|||
|
|
### 7.2 技术栈建议
|
|||
|
|
- **前端框架**：React/Vue.js + Electron
|
|||
|
|
- **UI组件库**：Ant Design / Element Plus
|
|||
|
|
- **图表库**：ECharts / D3.js
|
|||
|
|
- **视频处理**：WebRTC / FFmpeg
|
|||
|
|
- **数据库**：SQLite（本地）+ 云端备份
|
|||
|
|
|
|||
|
|
### 7.3 测试建议
|
|||
|
|
- **功能测试**：覆盖所有用户操作流程
|
|||
|
|
- **性能测试**：实时数据处理性能验证
|
|||
|
|
- **兼容性测试**：多设备、多分辨率适配
|
|||
|
|
- **用户体验测试**：医生和操作员实际使用反馈
|
|||
|
|
|
|||
|
|
如需进一步细化任何模块的详细设计，请提供具体需求。
|