用户界面设计原则¶
概述¶
良好的用户界面设计是预防使用错误的关键。本文档介绍医疗器械用户界面设计的核心原则、最佳实践和具体指南。
核心设计原则¶
1. 用户中心设计（User-Centered Design）¶
定义: 设计过程始终以用户需求、能力和限制为中心。
实践方法:
- 了解用户 - 研究目标用户的特征、需求和使用环境
- 用户参与 - 在设计过程中持续邀请用户参与和反馈
- 迭代设计 - 基于用户测试结果不断改进设计
示例:
### 老年患者血糖仪设计
**用户特征**:
- 年龄：65-85岁
- 视力：老花眼、白内障
- 灵活性：关节炎，手指不灵活
- 认知：记忆力下降
**设计决策**:
- 大字体显示（≥18pt）
- 高对比度（黑底白字）
- 大按钮（≥15mm）
- 简化操作步骤（≤3步）
- 语音提示
- 自动记录结果（无需手动记录）
2. 一致性（Consistency）¶
定义: 相似的功能使用相似的界面元素和交互方式。
一致性类型:
内部一致性¶
设备内部界面元素保持一致。
示例:
### 按钮布局一致性
✅ 好的设计：
所有确认操作：右下角绿色按钮
所有取消操作：左下角灰色按钮
所有删除操作：红色按钮，需要二次确认
❌ 差的设计：
有时确认在右边，有时在左边
有时用绿色，有时用蓝色
外部一致性¶
遵循行业标准和用户习惯。
示例:
3. 可见性（Visibility）¶
定义: 重要信息和控制应该清晰可见，用户无需搜索或记忆。
设计策略:
信息层级¶
使用视觉层级突出重要信息。
示例:
### 监护仪显示层级
**第1层（最重要）**:
- 生命体征数值：大字体（48pt）
- 报警信息：闪烁、红色
**第2层（重要）**:
- 趋势图表：中等尺寸
- 参数设置：可见但不突出
**第3层（辅助）**:
- 时间、患者信息：小字体
- 菜单选项：需要时显示
状态可见性¶
系统状态应该清晰可见。
示例:
### 输液泵状态指示
✅ 好的设计：
- 运行中：绿色LED常亮 + 屏幕显示"运行中"
- 暂停：黄色LED闪烁 + 屏幕显示"已暂停"
- 报警：红色LED闪烁 + 蜂鸣 + 屏幕显示报警原因
❌ 差的设计：
- 仅有一个LED，不同状态难以区分
- 无屏幕文字说明
4. 反馈（Feedback）¶
定义: 系统应该及时、明确地反馈用户操作的结果。
反馈类型:
即时反馈¶
操作后立即提供反馈。
示例:
### 按钮按下反馈
**多模态反馈**:
- 视觉：按钮颜色变化、高亮
- 触觉：按钮下沉感、震动
- 听觉：咔哒声、蜂鸣
**示例：除颤器电击按钮**
- 按下：按钮发光、蜂鸣声
- 充电中：进度条、倒计时音
- 准备就绪：持续蜂鸣、"准备电击"语音
- 电击完成：确认音、"电击已完成"
进度反馈¶
长时间操作提供进度指示。
示例:
5. 容错性（Error Prevention & Recovery）¶
定义: 设计应该预防错误发生，并在错误发生时易于恢复。
策略:
错误预防¶
约束设计:
### 示例：日期输入
✅ 好的设计：
- 使用日期选择器（日历控件）
- 限制输入范围（1900-2100）
- 自动格式化（输入"20240315"自动显示为"2024-03-15"）
❌ 差的设计：
- 自由文本输入
- 无格式验证
- 可能输入"2024-13-45"等无效日期
确认机制:
### 示例：关键操作确认
**删除患者数据**:
第1步：点击"删除"按钮
第2步：弹出确认对话框
"您即将删除患者 [张三] 的所有数据（共150条记录）
此操作无法撤销。
请输入患者ID确认：[____]"
第3步：输入正确ID后才能删除
错误恢复¶
撤销功能:
清晰的错误信息:
### 错误信息设计
❌ 差的错误信息：
"错误代码：E-1047"
✅ 好的错误信息：
"电池电量不足
问题：电池电量低于10%，无法启动测量
解决方案：
1. 连接电源适配器，或
2. 更换新电池
详细信息：错误代码 E-1047"
6. 简洁性（Simplicity）¶
定义: 界面应该简洁明了，避免不必要的复杂性。
设计策略:
渐进式披露¶
根据用户需求逐步显示信息。
示例:
### 呼吸机设置界面
**基础模式**（新手用户）:
- 仅显示核心参数（潮气量、呼吸频率）
- 使用预设模式
- 隐藏高级选项
**高级模式**（专家用户）:
- 点击"高级设置"展开
- 显示所有可调参数
- 提供自定义模式
**专家模式**:
- 快捷键访问
- 批量调整
- 自定义界面布局
减少认知负荷¶
示例:
### 药物剂量计算
❌ 增加认知负荷：
"请输入患者体重（kg）、药物浓度（mg/mL）、
目标剂量（mg/kg/h）、输液速率（mL/h）"
用户需要自己计算
✅ 减少认知负荷：
"患者体重：[70] kg
目标剂量：[5] mg/kg/h
系统自动计算：
- 所需药物：350 mg/h
- 建议输液速率：35 mL/h（浓度10mg/mL）"
7. 可访问性（Accessibility）¶
定义: 设计应该考虑不同能力用户的需求，包括残障人士。
设计考虑:
视觉障碍¶
色盲友好设计:
大字体和高对比度:
听觉障碍¶
视觉替代:
运动障碍¶
易于操作:
界面元素设计指南¶
显示屏设计¶
布局原则¶
F型布局（适合信息密集界面）:
┌─────────────────────────┐
│ 重要信息（横向扫描） │
├─────────────────────────┤
│ 次要信息（横向扫描） │
├───┬─────────────────────┤
│导 │ │
│航 │ 主要内容区域 │
│菜 │ │
│单 │ │
│ │ │
└───┴─────────────────────┘
Z型布局（适合简单任务）:
┌─────────────────────────┐
│ Logo/标题 ──────→ 状态 │
│ │
│ ↓ │
│ 主要内容 │
│ ↓ │
│ │
│ 辅助信息 ──────→ 操作 │
└─────────────────────────┘
信息密度¶
避免信息过载:
### 监护仪主屏幕
✅ 适当密度：
- 3-5个主要参数（大字体）
- 1-2个趋势图
- 状态栏（时间、电池）
❌ 过度拥挤：
- 10+个参数（小字体）
- 4个趋势图
- 大量菜单选项
- 用户无法快速找到关键信息
颜色使用¶
颜色编码标准:
| 颜色 | 含义 | 使用场景 |
|---|---|---|
| 红色 | 危险、紧急、停止 | 严重报警、错误、停止按钮 |
| 黄色/橙色 | 警告、注意 | 中等报警、警告信息 |
| 绿色 | 正常、安全、确认 | 正常状态、确认按钮 |
| 蓝色 | 信息、中性 | 一般信息、导航 |
| 灰色 | 禁用、不可用 | 禁用按钮、不可操作项 |
颜色使用原则:
1. **不单独依赖颜色** - 结合形状、文字、图标
2. **限制颜色数量** - 主界面不超过5种颜色
3. **保持一致性** - 相同含义使用相同颜色
4. **考虑色盲** - 避免红绿组合，使用其他编码
5. **考虑环境** - 强光下避免低对比度颜色
控制元素设计¶
按钮设计¶
尺寸标准:
| 用户类型 | 最小尺寸 | 推荐尺寸 | 间距 |
|---|---|---|---|
| 一般成人 | 10mm × 10mm | 15mm × 15mm | 3mm |
| 老年人 | 15mm × 15mm | 20mm × 20mm | 5mm |
| 手套操作 | 20mm × 20mm | 25mm × 25mm | 5mm |
| 紧急操作 | 30mm × 30mm | 40mm × 40mm | 10mm |
按钮状态:
### 视觉状态设计
**正常状态**:
- 边框清晰
- 标签可读
- 适当阴影（3D效果）
**悬停状态**（触摸屏不适用）:
- 轻微高亮
- 鼠标指针变化
**按下状态**:
- 颜色变深
- 阴影减少（下沉效果）
- 触觉反馈
**禁用状态**:
- 灰色显示
- 降低不透明度（50%）
- 鼠标指针显示"禁止"
按钮标签:
✅ 好的标签：
- 动词开头："开始测量"、"保存数据"
- 简洁明确：≤3个字
- 避免术语："确认"而非"OK"
❌ 差的标签：
- 模糊不清："提交"（提交什么？）
- 过长："点击此处开始进行血压测量"
- 技术术语："Execute"、"Commit"
输入控件¶
文本输入:
### 数值输入设计
✅ 好的设计：
┌─────────────────────────┐
│ 输液速率 │
│ ┌─────┐ │
│ │ 2.5 │ mL/h │
│ └─────┘ │
│ 范围：0.1 - 999.9 │
│ 示例：2.5 │
└─────────────────────────┘
特点：
- 标签清晰
- 单位明确
- 显示范围
- 提供示例
- 实时验证
选择控件:
### 单选 vs 多选 vs 下拉
**单选按钮**（2-5个选项）:
○ 成人模式
● 儿童模式
○ 新生儿模式
**复选框**（多选）:
☑ 记录心率
☑ 记录血压
☐ 记录体温
**下拉菜单**（>5个选项）:
语言：[中文 ▼]
- 中文
- English
- 日本語
- ...
报警系统设计¶
报警分级¶
IEC 60601-1-8标准:
| 优先级 | 严重性 | 视觉 | 听觉 | 示例 |
|---|---|---|---|---|
| 高 | 生命威胁 | 红色闪烁 | 连续急促 | 心脏骤停、窒息 |
| 中 | 需要立即处理 | 黄色闪烁 | 间歇 | 血压异常、电池低 |
| 低 | 需要注意 | 黄色常亮 | 单次提示 | 测量完成、提醒 |
报警设计原则¶
1. 可区分性:
### 不同报警易于区分
**高优先级**:
- 音调：高频（500-1000 Hz）
- 节奏：快速（每秒2-3次）
- 音量：大（75-85 dB）
- 视觉：红色大字闪烁
**中优先级**:
- 音调：中频（300-500 Hz）
- 节奏：中速（每秒1次）
- 音量：中（65-75 dB）
- 视觉：黄色闪烁
**低优先级**:
- 音调：低频（200-300 Hz）
- 节奏：单次
- 音量：小（55-65 dB）
- 视觉：黄色常亮
2. 可操作性:
### 报警信息设计
❌ 差的报警：
"报警：E-1047"
✅ 好的报警：
"⚠ 心率过低
当前：45 bpm（正常：60-100）
可能原因：
- 患者状态变化
- 电极脱落
- 信号干扰
操作：
1. 检查患者状态
2. 检查电极连接
3. 如持续，联系医生"
3. 防止报警疲劳:
### 策略
1. **智能报警**:
- 减少误报（提高算法准确性）
- 延迟报警（短暂异常不报警）
- 报警抑制（相关报警合并）
2. **报警管理**:
- 可调节阈值（根据患者情况）
- 报警暂停（有时间限制）
- 报警历史（可查看已处理报警）
3. **分级响应**:
- 低优先级：仅显示，不发声
- 中优先级：声音可暂停
- 高优先级：必须处理才能静音
图标和符号¶
标准符号¶
使用ISO 7000、IEC 60601-1等标准符号：
| 符号 | 含义 | 使用场景 |
|---|---|---|
| ▶ | 开始/播放 | 启动测量、播放 |
| ⏸ | 暂停 | 暂停操作 |
| ⏹ | 停止 | 停止操作 |
| ⚠ | 警告 | 警告信息 |
| ⓘ | 信息 | 帮助信息 |
| 🔋 | 电池 | 电池状态 |
| 🔌 | 电源 | 电源连接 |
图标设计原则¶
1. **简洁明了** - 避免复杂细节
2. **易于识别** - 5米外可识别
3. **文化中立** - 避免文化特定符号
4. **配合文字** - 重要功能同时使用图标和文字
5. **一致风格** - 统一的设计风格
特定场景设计指南¶
紧急情况界面¶
设计原则:
### 除颤器紧急界面
**特点**:
1. **极简设计** - 仅显示必要信息
2. **大字体** - 至少24pt
3. **高对比度** - 黑底白字或白底黑字
4. **语音引导** - 逐步语音指示
5. **视觉引导** - 箭头、高亮指示下一步
6. **防误操作** - 关键按钮需要长按或二次确认
**界面示例**:
┌─────────────────────────┐
│ │
│ ⚡ 准备电击 │
│ │
│ 能量：200 J │
│ │
│ [长按3秒电击] │
│ ▓▓▓▓▓▓▓░░░ │
│ │
│ "确保所有人远离患者" │
│ │
└─────────────────────────┘
家用设备界面¶
设计考虑:
### 家用血糖仪
**用户特点**:
- 可能无医学背景
- 年龄跨度大（儿童到老年）
- 使用频率高但培训有限
**设计策略**:
1. **自解释界面** - 无需查看说明书
2. **步骤引导** - 屏幕显示当前步骤
3. **错误预防** - 强制操作顺序
4. **简化操作** - 尽可能自动化
5. **多语言支持** - 至少支持当地主要语言
**界面流程**:
步骤1: "请插入测试条" → 等待插入
步骤2: "请采血" → 等待血样
步骤3: "测量中... 5秒" → 显示倒计时
步骤4: "结果：5.8 mmol/L 正常" → 显示结果和解释
专业设备界面¶
设计考虑:
### ICU监护仪
**用户特点**:
- 专业医护人员
- 高度培训
- 需要快速访问大量信息
- 多任务环境
**设计策略**:
1. **信息密度高** - 同时显示多个参数
2. **可定制** - 允许用户自定义布局
3. **快捷操作** - 快捷键、手势
4. **趋势显示** - 历史数据图表
5. **多患者管理** - 中央监护站
**界面布局**:
┌─────────┬─────────┬─────────┐
│ 心率 │ 血压 │ 血氧 │
│ 75 bpm │ 120/80 │ 98% │
│ ▁▂▃▄▅ │ ▃▄▃▄▃ │ ▅▅▅▅▅ │
├─────────┴─────────┴─────────┤
│ 心电图波形 │
│ ～～～～～～～～～～～～～～ │
├─────────┬─────────┬─────────┤
│ 呼吸 │ 体温 │ 报警 │
│ 16/min │ 36.8°C │ 0 │
└─────────┴─────────┴─────────┘
设计验证¶
可用性测试¶
测试内容:
1. **可读性测试**
- 不同距离下的可读性
- 不同光照条件下的可见性
- 不同年龄用户的可读性
2. **可操作性测试**
- 按钮按压力测试
- 触摸屏响应测试
- 手套操作测试
3. **可理解性测试**
- 图标识别率
- 错误信息理解度
- 操作流程直观性
4. **效率测试**
- 任务完成时间
- 错误率
- 学习曲线
设计检查清单¶
## 显示设计检查清单
- [ ] 字体大小符合标准（≥12pt）
- [ ] 对比度符合标准（≥4.5:1）
- [ ] 颜色编码一致
- [ ] 不单独依赖颜色传达信息
- [ ] 信息层级清晰
- [ ] 重要信息突出显示
- [ ] 状态可见
- [ ] 提供进度反馈
## 控制设计检查清单
- [ ] 按钮尺寸符合标准（≥15mm）
- [ ] 按钮间距足够（≥3mm）
- [ ] 按钮标签清晰
- [ ] 提供操作反馈
- [ ] 关键操作有确认
- [ ] 提供撤销功能
- [ ] 错误信息清晰可操作
- [ ] 禁用状态明显
## 报警设计检查清单
- [ ] 报警分级明确
- [ ] 报警可区分（视觉、听觉）
- [ ] 报警信息可操作
- [ ] 防止报警疲劳
- [ ] 报警可管理（暂停、调节）
- [ ] 符合IEC 60601-1-8标准
## 可访问性检查清单
- [ ] 色盲友好设计
- [ ] 支持大字体
- [ ] 提供视觉替代（听觉障碍）
- [ ] 提供听觉替代（视觉障碍）
- [ ] 易于操作（运动障碍）
- [ ] 多语言支持
设计工具和资源¶
原型工具¶
- Figma - 协作设计和原型
- Sketch - UI设计
- Adobe XD - 交互原型
- Axure RP - 高保真原型
设计系统¶
- Material Design - Google设计系统
- Human Interface Guidelines - Apple设计指南
- Fluent Design - Microsoft设计系统
可访问性工具¶
- Color Contrast Analyzer - 对比度检查
- Coblis - 色盲模拟器
- WAVE - 可访问性评估
参考标准¶
- IEC 62366-1 - 医疗器械可用性工程
- IEC 60601-1-6 - 医用电气设备可用性
- IEC 60601-1-8 - 报警系统
- ISO 9241 - 人机交互工效学
- WCAG 2.1 - Web内容可访问性指南
下一步: 学习形成性评估，了解如何测试和验证设计。
💬 讨论区
欢迎在这里分享您的想法、提出问题或参与讨论。需要 GitHub 账号登录。