HMI 设计错误：10 个常见问题及纠正方法
大多数糟糕的 HMI 画面都败在同样的十个地方：颜色过多、照搬 P&ID 的画面、3D 图形、在操作台上没人看得清的文字、缺少“无反馈”状态、没有优先级的报警、会动的装饰、过深的导航、同一个对象在每个画面里画法不同，以及操作员看不到的联锁。它们都不需要新软件来解决。每一个都有简单的原因和简单的对策，下面逐条列出，并附上可以深入阅读的指南。
简而言之
- 颜色：一切正常的东西用灰色；颜色只用于状态和报警优先级。
- 内容：显示操作员监视和操作的内容，而不是整张 P&ID。
- 状态：始终画出“无反馈”，并显示反馈，而不是命令。
- 报警：每个报警都有优先级，用颜色加第二种提示来表示。
- 结构：重要的地方两次点击到达，同类对象只有一种外观，命令被阻止的原因直接写在画面上。
十个错误一览
每一行在下面都有详细说明。右边一列给出一句话的对策，以及深入讨论该主题的指南。
| 错误 | 对策 · 深入阅读 |
|---|---|
| 1. 颜色过多 | 默认灰色；颜色只用于状态和报警 平静的配色方案 → |
| 2. 照搬 P&ID 的画面 | 每个画面只做一件事；去掉没人操作的内容 画面层级 → |
| 3. 3D、渐变、拟真效果 | 使用纯色填充的扁平 2D 图形 平静的配色方案 → |
| 4. 文字对观看距离来说太小 | 至少 14 px，并按实际观看距离设计 画面层级 → |
| 5. 没有“无反馈”状态 | 比较命令与反馈；显示两者不一致 9 种电机状态 → |
| 6. 报警没有优先级 | 优先级来自报警合理化；颜色加第二种提示 报警管理 → |
| 7. 装饰性动画 | 只有运动承载信息时才使用 平静的配色方案 → |
| 8. 导航过深 | 重要的地方两次点击到达 画面层级 → |
| 9. 同一对象，外观不同 | 每种对象类型只用一个符号和一个面板 面板设计 → |
| 10. 操作员看不到的联锁 | 在命令旁列出缺失的许可条件 面板设计 → |
颜色与图形（错误 1 至 4）
这四个错误都是让眼睛在读懂画面之前先要过滤掉多余的东西。下图把同样的设备和同样的数值画了两遍。
- 颜色。左边每个元素都有自己的颜色，所以没有一种颜色有意义。右边设备是灰色的，颜色只出现两次：一台因为正在运行而显示绿色的泵，和一个出现在有报警的阀门上的红色 P1 标记。
- 内容。左边那些小的仪表圆圈在 P&ID 上是有的，但当班人员并不操作它们。右边保留了设备和操作员关注的三个数值。
- 位置。两幅图里所有东西的位置都相同。平静不等于空：它意味着眼睛能立刻找到那个唯一不同的地方。
1. 颜色过多
为什么行不通。如果泵因为是泵就画成蓝色，储罐因为装着物料就画成黄色，那么颜色就不承载任何信息。真正出问题时，红色必须和画面上其他一切竞争，操作员也就学会了把颜色过滤掉。
怎么做。把所有设备、管线和标签都画成灰色。颜色只留给会变化的内容：运行、无反馈、手动、故障和报警优先级，并且整个项目中每种颜色只有一个固定含义。平静的配色方案指南中有具体色值。
2. 照搬 P&ID 的画面
为什么行不通。P&ID 是给工程师看的工艺文档：每一条管线、手动阀、排放口、放空口和仪表都在上面。操作员画面则要回答“现在发生了什么，我能做什么？”。把整张图塞进一个画面，就没有任何东西突出，文字缩得很小，找到某个对象的唯一办法是知道工程师把它画在哪里。
怎么做。让每个画面只承担一项任务。显示主流程、操作员要启动、停止或监视的设备，以及少数重要的数值。手动阀、排放口和备用仪表留在 P&ID 上，并让位号与图纸完全一致，方便对照。画面层级指南介绍了各个级别，HMI 符号解释了为什么 HMI 符号不是 P&ID 符号。
3. 3D、渐变和拟真效果
为什么行不通。阴影、斜面和渲染出来的容器，会增加眼睛必须先忽略才能读到关键图形的多余形状。它们还把颜色浪费在装饰上，而且几年内就显得过时，纯色填充则不会。
怎么做。使用扁平的二维轮廓和纯色填充。如果客户想要逼真的总览图，就把它放在操作员的工作画面之外。
4. 文字对观看距离来说太小
为什么行不通。画面是在办公桌前设计的，却要在操作台前站着用，常常还戴着手套、光线不好。在 60 cm 处看着没问题的文字，在 2 m 处就是一团模糊；用鼠标好点的按钮，用手指就很难点准。
怎么做。正文不要低于 14 px，操作员需要一眼读出的内容用更大的字号，并按面板实际的像素间距和观看距离来检查，而不是按你绘图用的显示器。功能不同的按钮之间留出间距。字号对照表见画面层级指南。
状态与报警（错误 5 至 7）
这三个错误关乎画面在出现异常时说了什么，而这恰恰是最关键的时刻。
5. 没有“无反馈”状态
为什么行不通。如果画面只跟随命令，那么收到启动命令却始终没有反馈运行的电机，看起来和正在运行的电机一模一样。操作员以为工艺在进行，其实没有，或者正好相反。
怎么做。把命令和反馈做比较，并给两者不一致的情况单独设一个状态，在平静的配色方案中用黄色。符号显示的是设备正在做什么，而不是别人让它做什么。9 种电机状态指南列出了全部九种状态以及 PLC 映射。
6. 报警没有优先级
为什么行不通。如果所有报警看起来都一样，或者大部分都是红色，操作员就不知道先处理哪一个。一份全是“紧急”的列表没有任何信息量，这往往说明报警从未经过合理化。
怎么做。先确定优先级（后果和响应时间），再给每一级分配一种颜色加第二种提示，例如标记里的数字。把标记放在设备上，并让设备自身的状态仍然可见。报警管理讲解了优先级和 ISA-18.2 生命周期。
7. 装饰性动画
为什么行不通。旋转的风机、流动的管线和闪烁的标签，把操作员的注意力花在不需要关注的地方。如果半个画面都在动，真正的变化就会被忽略，而闪烁恰恰是画面上最强的提示信号。
怎么做。只有当运动承载信息时才使用动画，例如无人确认的新报警，或正在启动的电机。把带动画的含义列在风格指南里，并保持简短。其余一切保持静止。平静的配色方案指南讨论了持续闪烁的问题。
结构与一致性（错误 8 至 10）
这三个错误关乎各个画面如何组合在一起，项目越大，它们越严重。
8. 导航过深
为什么行不通。如果要到达发出报警的那台泵需要在菜单里点五次，每多一次点击都会在最没有时间的时候消耗时间。难以记住的路径，就是没人会走的路径。
怎么做。目标是重要的地方两次点击到达。把导航放在固定区域，始终显示当前所在画面，避免死胡同，也不要在弹出窗口内部再做导航。参见画面层级指南。
9. 同一对象，外观不同
为什么行不通。如果一个画面把泵画成圆圈，下一个画面画成照片，或者一个单元用绿色表示“运行”，另一个单元用绿色表示“可用”，操作员就得在每个画面重新学习。同一含义用不同颜色，是其中最危险的一种。
怎么做。每种对象类型只保留一套符号和一个面板，用模板而不是复制来构建，这样修改只需在一处进行。面板设计指南展示了布局，符号编辑器 (Symbol Builder)可以从一幅图导出每个状态的图片。
10. 操作员看不到的联锁
为什么行不通。一个按下去没有任何反应、也不说明原因的启动按钮，是最糟糕的死胡同。操作员会再按一次，然后到现场或 PLC 程序里去找原因。原因几乎总是缺少某个许可条件：PLC 知道，画面却把它藏了起来。
怎么做。把许可条件显示在命令旁边，每个都有自己的状态，命令被阻止时把按钮置灰。这样操作员同时看到状态和原因。布局见面板设计指南。
错误从哪里来
它们很少是粗心造成的。四种习惯导致了大部分错误：
- 从 P&ID 开始画。照搬图纸是得到第一个画面最快的办法，也是得到一个可用画面最慢的办法（错误 2、4 和 8）。
- 没有风格指南就动手画。如果配色、字号、符号和动画规则在第一个画面之前没有写下来，每个画面都会自创一套（错误 1、7 和 9）。
- 只在办公桌前评审。画面在作者自己的显示器上看起来很好。它必须在操作台的实际距离上，由没有参与绘制的人来评判（错误 3、4 和 10）。
- 把异常状态留到最后。正常画面得到全部关注；“无反馈”和报警优先级要么事后补上，要么干脆没有（错误 5 和 6）。
对这四种情况，对策都一样：在动手画之前写一份简短的 HMI 风格指南，并以它为准进行评审。ISA-101 指南解释了该标准如何看待这件事，ISA-101 vs ISA-18.2 vs ISA-5.1则说明报警和仪表标准在周围的什么位置。
适用于任何 HMI 的 15 分钟检查
请在仿真器或测试台上进行，切勿在运行中的装置上强制信号。
- 眯眼测试。退后一步，对每个画面眯起眼睛。目光是否落在那个唯一的异常点上？如果没有，检查错误 1、2 和 7。
- 数颜色。列出正常运行时用到的所有颜色。除了灰色和运行状态以外的颜色，都是可以删掉的候选。
- 距离测试。在操作员的实际距离上看画面。能读清位号和数值吗？戴着手套的手指能点中最小的按钮吗？
- 故障走查。取一台电机，让它停止、丢失反馈、热继电器跳闸。每种情况在画面上看起来都不同吗？
- 报警走查。每个优先级触发一个报警。不靠颜色能否区分它们？设备状态是否仍然可见？
- 点击计数。从总览画面出发，数一数到达三台随机设备需要点几次。超过两次就值得改进。
- 一致性检查。在三个位置打开同一类对象。符号、面板、颜色是否都相同？
- 被阻止命令检查。找一个此刻被阻止的命令。不离开画面，你能知道原因吗？
先把符号统一起来
一套一致的符号可以一次性消除错误 1、3 和 9。在符号编辑器 (Symbol Builder) 中绘制一次电机、阀门或泵，并把每个状态导出为 PNG 或 SVG。编辑器免费使用，绘制无需账户；下载需要免费账户，Free 计划每月 5 次。
打开编辑器 → 阅读平静配色方案指南 →常见问题
HMI 设计中最常见的错误有哪些？
颜色过多、照搬 P&ID 的画面、3D 图形、对观看距离来说太小的文字、缺少“无反馈”状态、没有优先级的报警、装饰性动画、过深的导航、同一对象在不同画面里画法不同，以及操作员看不到的联锁。本指南开头的表格给出了每一项的纠正方法。
为什么 HMI 应该以灰色为主？
因为颜色是吸引操作员目光最快的方式，而且只有在稀少时才有效。以灰色为默认，绿色的运行电机、黄色的无反馈状态或红色的报警会立刻突出。当一切都有颜色时，就没有什么能突出了。平静的配色方案指南中有具体色值。
HMI 画面应该和 P&ID 长得一样吗？
不应该。P&ID 是给工程师看的工艺文档；画面是为监视和操作的操作员服务的。保留工艺流程和操作员要操作的设备，去掉手动阀、排放口和不用的仪表，让 P&ID 继续作为参考图纸。位号仍应与 P&ID 一致，方便对照。
HMI 上用动画不好吗？
承载信息时没问题。为未确认的新报警或正在启动的电机闪烁，是在告诉操作员一件事。旋转的风机、流动的管线或毫无意义的闪烁标签，只会和真正重要的信号争夺注意力，所以应该去掉。
如何在不全部重画的情况下改进现有的 HMI？
先做改动最少、影响画面最多的事：统一一套配色，每个符号一状态一张图，以及设定最小字号。然后补上缺失的状态和报警优先级，最后再简化导航。先做好一个单元，与操作员确认，再把结果复制到其余部分。
继续阅读
- 平静的 HMI 配色方案 — 颜色的含义，以及破坏它的反模式。
- HMI 画面层级 — 显示级别、导航与文字大小。
- 每个 HMI 都应显示的 9 种电机状态 — 包括“无反馈”。
- 报警管理 — 优先级以及如何在画面上显示。
- HMI 面板（faceplate）设计 — 一致的对象与可见的联锁。
- ISA-101 vs ISA-18.2 vs ISA-5.1 — 哪个标准回答哪个问题。
- 向社区提问 — 你想听听第二意见的 HMI 画面。