2、用户界面设计原则：医疗UI设计规范、用户认知模型、色彩与对比度在急救场景中的应用、字体与图标选择

好，咱们进入第二章。这一章聊的是UI设计的底层逻辑，说白了就是「怎么让医生在抢救时一眼看懂、一碰就对」。我做了这么多年嵌入式UI，最深的体会是：医疗UI不是做漂亮，是做安全。你想想看，除颤仪上按错一个按钮，可能就是一条人命。

2.1 医疗UI设计规范：不是摆设，是底线

医疗设备UI设计，有硬性标准。不是你觉得好看就行，得符合IEC 62366和FDA的人因工程指南。我当年第一次接触这些规范时，头都大了——密密麻麻几百页。但后来发现，核心就几条：

• 操作路径要短：急救场景下，用户没时间翻菜单。核心功能（除颤、监护、起搏）必须在两步之内到达。
• 防误触设计：关键操作必须二次确认。比如「放电」按钮，不能点一下就触发。我见过一个原型，工程师把放电按钮做成了普通按钮大小，结果测试时医生一紧张就误按了——还好是模拟环境。
• 状态可见性：设备当前处于什么模式（手动除颤、AED、起搏），必须一目了然。我习惯在屏幕顶部用高对比色块显示当前模式，比如红色代表「准备放电」，绿色代表「监护中」。
• 错误恢复：用户操作错了，能不能快速撤销？比如误选了能量等级，能不能一键回到默认值？

2.2 用户认知模型：别让医生动脑子

什么叫认知模型？就是用户拿到设备后，脑子里自然形成的操作预期。举个例子：你看到红色按钮，会想到「停止」或「危险」；看到绿色，会想到「启动」或「安全」。这就是认知模型。

在除颤仪上，我们要利用这种直觉。我个人的做法是：

• 一致性优先：所有界面上的「确认」按钮都在右下角，「取消」在左下角。别今天放左边，明天放右边。医生在抢救时没空找按钮。
• 减少短期记忆负担：不要要求用户记住上一页的参数。比如设置能量等级时，当前等级和推荐等级要同时显示。我曾经见过一个设计，用户选完能量后要翻页才能看到确认信息——结果有人选错了。
• 反馈要即时：每次触摸或按键，100毫秒内必须有视觉或听觉反馈。超过这个时间，用户会怀疑「我按到了吗？」然后可能再按一次——这就出事了。

2.3 色彩与对比度：急救场景下的生死时速

急救现场什么环境？光线可能很暗（救护车内部），也可能很亮（户外阳光下）。屏幕反光、眩光、视角偏移，都是常态。所以色彩和对比度不是美学问题，是功能问题。

我总结了几条实战经验：

• 高对比度是王道：文字和背景的对比度至少达到7:1（WCAG AAA标准）。别用浅灰配白底，那在阳光下根本看不清。我习惯用黑底白字或深蓝底白字。
• 颜色编码要谨慎：红色只用于警告和危险状态（如「准备放电」「电池电量低」）。黄色用于注意（如「导联脱落」）。绿色用于正常状态。别把红色用在装饰上——会误导。
• 考虑色盲用户：大约8%的男性有红绿色盲。所以不要只靠颜色传递信息。比如「电池电量低」除了变红，还要加一个闪烁的电池图标。我踩过这个坑——早期版本只用颜色区分，结果测试时一位色盲工程师完全没注意到警告。

场景	推荐配色	对比度要求	备注
正常监护	深蓝背景 + 白色文字	≥7:1	减少视觉疲劳
报警状态	红色背景 + 白色/黄色文字	≥7:1	闪烁频率2-4Hz
户外强光	黑色背景 + 白色/亮绿文字	≥10:1	自动亮度调节
夜间模式	暗红/暗蓝背景 + 低亮度白字	≥4.5:1	不刺眼

2.4 字体与图标选择：清晰比好看重要一万倍

字体这块，我踩过的坑最多。医疗UI的字体选择，有几个硬性要求：

• 无衬线字体优先：比如Arial、Helvetica、思源黑体。衬线字体（如宋体）在低分辨率屏幕上笔画会糊在一起。我早期用过一个带衬线的字体，结果在320x240的屏幕上，「能量」两个字看起来像「能里」——这能忍？
• 字号要够大：核心数据（心率、能量等级）的字号至少24px以上。辅助信息（时间、日期）可以小到16px。但别小于14px——医生可能戴着老花镜。
• 图标要带文字标签：别只放一个心电图图标，下面必须写「心电」。为什么？因为图标可能被误解。比如一个闪电图标，有人觉得是「放电」，有人觉得是「电源」。我见过最离谱的误解是，有人把「电池」图标当成了「除颤」按钮。

嗯，这里还要提一下字体渲染。嵌入式系统的屏幕分辨率通常不高（480x272、800x480很常见）。所以字体要提前做抗锯齿处理。我一般用FreeType库做字体渲染，配合LCD的灰度显示，效果会好很多。代码示例：

// 字体初始化示例（基于FreeType）
FT_Library library;
FT_Face face;

FT_Init_FreeType(&library);
FT_New_Face(library, "/fonts/NotoSansSC-Regular.ttf", 0, &face);
FT_Set_Pixel_Sizes(face, 0, 24);  // 设置字号24px

// 渲染时开启抗锯齿
FT_Load_Char(face, '能', FT_LOAD_RENDER | FT_LOAD_TARGET_LCD);

最后说一句：图标的大小也要统一。我习惯把所有功能图标放在32x32的网格里，关键操作图标（如放电）放大到48x48。这样视觉上整齐，用户也容易定位。

好，这一章就到这里。下一章咱们聊具体的交互流程设计，包括状态机怎么搭、触摸手势怎么处理。到时候见。