# 平衡体态检测系统 UI 与交互设计说明

## 总体设计理念

- **以用户为中心**：以康复医生和技术操作员为核心用户，界面简洁直观
- **数据驱动展示**：所有核心模块数据实时可视化，交互响应快速
- **操作流程明晰**：每一步操作清晰可控，避免误操作

---

## 1. 登录与注册页面

![登录页](登录页.png)

### 页面结构
- 顶部：系统Logo与名称
- 中部：账号输入框、密码输入框、登录按钮
- 底部：忘记密码、注册入口

### 主要功能
- **登录功能**：用户名密码登录，明文匹配
- **注册功能**：手机号、密码二次确认
- **密码管理**：明文密码显示与记住密码
- **密码找回**：显示明文密码（建议后续版本优化为短信验证）
- **修改密码**：支持原密码校验更新

### 交互说明
- 输入框获得焦点高亮
- 登录按钮点击后显示加载状态
- 错误提示信息弹出或红色提示
- 所有操作均本地数据库存储
- 弹窗提示错误、成功状态

### 组件建议
- Input输入框
- Button按钮
- Message提示组件
- Modal弹窗

### 安全建议
- 建议后续版本启用密码加密存储
- 增加验证码机制
- 支持多用户权限（医生、操作员、管理员）

---

## 2. 实时检测模块

### 2.1 起始页

![登录进入的起始页](登录进入的起始页.png)

#### 页面结构
- **左侧**：功能快速入口（"检测、人员、系统"）
- **右侧顶部**：用户信息栏、系统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 实时检测主界面

![姿态检测页](姿态检测页.png)

#### 页面结构
- **左侧**：快捷操作入口
- **顶部信息栏**：患者信息、检测时间、医生名称
- **数据展示区**：
  - 身体姿态：深度图动态更新
  - 头部IMU：实时Pitch/Yaw/Roll值+最大值记录+清零+抗干扰
  - 足底压力：压力云图+数据占比展示
  - 视频区：录制+时间戳+最大化播放

#### 主要功能
- **实时数据监控**：三大模块数据同步显示
- **视频录制**：同步录制检测过程
- **数据记录**：实时保存检测数据
- **异常监测**：数据异常自动提示

#### 交互说明
- 数据实时刷新，响应速度<100ms
- 视频支持最大化播放
- 异常情况弹窗提示
- 支持数据清零重置

#### 组件建议
- Canvas画布（深度图、压力云图）
- Video视频组件
- Progress进度条
- Modal弹窗
- Chart实时图表

### 3.2 操作按钮区

#### 按钮状态管理
- **初始状态**：显示"开始"按钮
- **检测中状态**：显示"截图""结束"按钮
- **结束后状态**：显示"回放"按钮

#### 功能说明
- **开始按钮**：启动检测，开始数据采集和视频录制
- **截图按钮**：保存当前界面+对应数据+截图图片
- **结束按钮**：终止录制，保存检测记录
- **回放按钮**：支持视频同步播放、暂停、最大化、进度条拖动

#### 交互说明
- 按钮状态根据检测流程自动切换
- 截图操作即时响应，保存成功提示
- 结束检测需二次确认
- 回放支持全屏模式

### 3.3 分屏模式

#### 功能设计
- 提供"分屏"切换按钮
- 支持全显（3模块）/单模块切换
- 单模块模式支持滑动或左右切换按钮

#### 交互说明
- 分屏切换动画流畅
- 单模块模式数据更大更清晰
- 支持快速切换不同模块

#### 组件建议
- Tabs标签页
- Swiper滑动组件
- Button切换按钮

---

## 4. 检测中的录屏界面

![开始检测中的录屏界面](开始检测中的录屏界面.png)

### 页面结构
- **左侧**：快捷操作入口
- **右侧顶部**：录制状态、时长显示、结束、截图按钮
- **右侧中部**：检测结果实时展示区
- **状态栏**：录制时长、数据同步状态

### 主要功能
- **实时录制**：同步录制检测过程和数据
- **时长显示**：显示录制时长与状态
- **截图功能**：实时截图保存
- **数据同步**：视频与数据时钟同步

### 交互说明
- 录制中按钮高亮显示
- 录制时长实时更新
- 截图操作不影响录制
- 录制结束弹窗确认保存
- 支持录制过程中查看实时数据

### 组件建议
- 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 测试建议
- **功能测试**：覆盖所有用户操作流程
- **性能测试**：实时数据处理性能验证
- **兼容性测试**：多设备、多分辨率适配
- **用户体验测试**：医生和操作员实际使用反馈

如需进一步细化任何模块的详细设计，请提供具体需求。