9.2 KiB
9.2 KiB
平衡体态检测系统 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 开发优先级
- 核心功能：登录、患者管理、实时检测
- 数据管理：截图、录制、数据保存
- 扩展功能：报告生成、数据对比
- 优化功能：性能优化、安全加固
7.2 技术栈建议
- 前端框架：React/Vue.js + Electron
- UI组件库：Ant Design / Element Plus
- 图表库：ECharts / D3.js
- 视频处理：WebRTC / FFmpeg
- 数据库：SQLite（本地）+ 云端备份
7.3 测试建议
- 功能测试：覆盖所有用户操作流程
- 性能测试：实时数据处理性能验证
- 兼容性测试：多设备、多分辨率适配
- 用户体验测试：医生和操作员实际使用反馈
如需进一步细化任何模块的详细设计，请提供具体需求。