凌晨一点交接班刚过十分钟中控台的HMI弹出一条黄色报警。操作员在满屏数据里找了三四秒才看出是A罐液位低——泵已经空转了两分钟。这类场景见多了我就越发确定一个观点HMI的视觉层级设计不是让界面好看是让数据自己走到操作员眼睛里。这件事完全可以拆成三步来做先给数据分级再用布局引导视线最后用对比度做提取。三步做完核心数据不用操作员去找它会在你扫向屏幕的第一瞬间占据视觉焦点。这套方法我陆续用在食品配料、化工小装置、水处理项目上效果都比较稳定。如果你正在组态HMI、被现场同事吐槽“画面乱七八糟找不到数”或者刚开始自学HMI设计这篇内容应该可以直接照着改。1. 为什么信息堆满屏幕反而“没人看见”在组态软件里拖几个变量很容易难的是让这些变量各就各位。先把一个反常识的结论放这儿画面里的数据越多操作员能记住的越少。人的视觉系统处理画面时第一轮是无意识的特征扫描颜色、亮度、运动、形状这些信息先于“仔细看”进入意识心理学叫预注意机制。用大白话说你走进一屋子穿同样深色工服的人要找一个穿红衣服的同事红色会自动跳进眼里如果所有人穿得都一样就只能挨个看脸。视觉层级设计本质上就是把核心数据变成那个“穿红衣服的人”。1.1 人眼只对“有差异”的东西亮灯工业HMI一天要盯八个小时操作员的注意力不是无限额度。长时间盯着屏幕会视觉疲劳疲劳到一定程度人会自动降低对细小变化的感知。如果画面所有区域信息密度相同、亮度相同、字号相同大脑很快会把整块屏幕当成“背景”。报警也好偏差也好都会被背景化——这就是很多事故复盘里“没注意到”的生理基础。而且故障时人的状态更特殊。报警一响肾上腺激素升高注意范围反而变窄人只会死死盯住一两个点其他区域的视觉信息基本被屏蔽。这时候如果报警出现在画面右侧角落操作员左侧找数据漏掉是大概率事件。我们做界面设计本质上是在替操作员规划“注意力的最佳路线”。1.2 工业现场三种常见的“看不见”场景我把现场蹲出来的情况归纳成三类。第一类平稳运行时的监控场景。一切正常的时候操作员最放松也最容易走神对画面边缘的敏感性下降如果核心数据混在边角等于没人看。第二类故障出现时的应激场景。人一紧张就把注意力“隧穿”到某一点报警和信息点不在固定区域反应时间就会明显拉长。第三类快速巡检场景。操作员常常是路过的在屏幕前只有两三秒他只能扫视最熟悉的那几个落点扫不到就等于没显示。这三类场景都说明同一个问题界面必须把最重要的东西放在操作员“每次都会看”的位置而不是放在“理论上存在”的位置。1.3 视觉层级设计不是美工问题是安全功能有些工程师觉得界面好不好看是美工的事能用就行。可漏看一个低液位、误读一个压力数值造成的可能是泵损坏、批次报废甚至安全问题。我在项目里做过一个很粗的测试把同一个报警从画面左上角挪到右下角让现场师傅在仿真画面上定位报警信息反应时间从不到一秒变成两秒以上。紧急时人的决策时间是以零点几秒计的这一两秒就是事故和未遂之间的差距。所以我在项目里把视觉层级当成功能需求对待它直接服务的是人的反应速度和准确率跟安全联锁是同一个逻辑——一个是设备层的最后防线一个是人的注意力的最后防线。2. 第1步把几十个数据按“迟看3秒的后果”分成三级动工之前先做一件最枯燥但回报最高的事给数据分级。后面所有的位置、字号、颜色都由这一张分级表决定。我常年用一句话压舱每个数据都问一遍晚看3秒会怎样很多变量问完这个问题自己就退出了主画面。2.1 三个问题决定数据归属具体操作时我给每个变量过三个问题。第一个离开这个数操作员能不能判断装置现在正常还是异常第二个出了问题它是不是定位问题的最短路径第三个执行下一步操作前它是必须读的还是可读可不读三个问题里有两个以上答“是”就进核心层意思是它要出现在操作员抬眼就能看到的地方。三个都答“否”的基本都是辅助层收进趋势页、参数页或者报表页没必要占用主画面的视觉资源。介于两者之间、需要定期关注但不用秒读的放次要层。判断具体落到工业场景里特别快混合罐的液位操作员判断加料停料离不开它进核心层蒸汽压力平时不用盯膨胀了坏了才查进辅助层瞬时流量操作时偶尔扫一眼进次要层。2.2 分级表组态前的必做清单我会先拉一张Excel分级表列五列变量名、所在设备、量程单位、数据出现时机、建议层级。这张表看似笨重作用有三个一是防止组态时想到哪儿加到哪儿二是评审界面时能拿出依据和业主讨论“这个数到底该不该放在主画面”三是后期增加变量时能查得到之前的判断逻辑。表里我会特别关注一类容易被漏掉的量——开关量状态字比如泵运行中、阀开到位。它们没有模拟量那么“有数据感”但往往是操作员判断流程走没走对的关键不要只丢进报警列表就完事至少要给个醒目的状态指示灯。变量名量程/单位晚看3秒的后果建议层级混合罐液位0-100%溢罐或抽空核心罐内温度0-150℃超温产品报废核心配比偏差±5%比例失衡难追溯核心搅拌电机电流0-50A搅拌空转损坏核心A/B/C瞬时流量0-10m³/h一般不影响安全次要阀门/泵状态开关量判断流程是否走对次要出料累计量0-9999L仅统计参考辅助批次号/时间-事后查询用辅助2.3 核心数据最好控制在“一手之数”人的工作记忆容量约4±1个组块复杂操作时能稳定同时盯住的三到五个已经是上限心理学常引用的7±2算是理想状态实际操作中我按3到7个控。如果工艺上确实觉得十几项都重要那就开“第二屏”把部分做成页签、弹出窗或趋势页。这话在业主审查时经常要反复解释不少业主觉得“变量放得越全越安全”实际恰恰相反放得越全真正重要的越没人看。我一般拿飞机驾驶舱举例飞机仪表比工厂HMI复杂得多但核心飞行参数依然集中在中央最显眼的位置其余的信息都收在辅助屏上因为飞行员和操作员一样注意力是稀缺资源。2.4 分级别自作主张去车间问一句分级这步最容易在办公室拍脑袋拍错。我自己踩过一次自作主张把“当日产量”放到核心监控区想着老板关心产量现场操作员应该也关心。结果操作员一看到就摇头说夜班盯得最多的是液位、温度和压力产量是白班统计的事放主画面只会干扰监盘。后来把它挪到顶部辅助栏大家反馈才正常。所以正式分级之前至少花半天去车间跟着操作员走一圈问三件事上班盯得最多的数字是哪个上次出问题最先想看什么哪些数据看完还要做操作这些问题五分钟就能问完但对界面可用性的提升是决定性的。3. 第2步用位置、字号和留白把视线“引”过去分级完成变量已经分好三六九等第二步就是把核心层的数据放到操作员目光最容易落下的地方。布局这件事没有多少玄学有大量可执行的规律。3.1 屏幕热区与视觉落点人在看屏幕时注视点分布并不均匀。共性最强的规律是几何中心偏左上方的区域注视密度最高横向中线附近次之屏幕底边和四个角落最容易被忽略。中文界面同样如此因为阅读起点天然在左上角。所以主画面布局我习惯把核心数据显示区放在左上到中上的位置右侧固定报警列底部留给操作按钮。常见的问题是公司Logo和设备大图把左上角占掉了——等于把最热的位置让给装饰。Logo挪到右上角或放进标题栏左上角要留给液位、温度这类真正要被日夜盯着的数字。3.2 观看距离决定字号下限字号不能靠“感觉够大”得按操作员的实际观看距离计算。工业上常用一个粗略公式最小字符高度毫米约等于观看距离毫米除以200。例如操作员距离屏幕1米字符高度至少5毫米才能稳定辨认15英寸屏幕1920分辨率下折算成像素约等于29px实际组态我还会往上加核心数字做到40px以上更稳妥。距离1.5米时最小字高要到7.5毫米接近44px再远到两米就需要近60px这时候该考虑的不是继续调大字号而是屏幕尺寸够不够。核心数据我通常会比同屏次要数据放大1.5到2倍让“大小差异”本身传递优先级。数字的字体尽量选等宽数字数字跳动更新时宽度不会左右抖读数会舒服很多。观看距离最小字符高度15寸屏参考字号0.5米2.5mm至少15px建议24px以上1.0米5.0mm至少29px建议40px以上1.5米7.5mm至少44px2.0米10.0mm至少59px建议换大屏3.3 留白与分组告诉眼睛“哪些是一伙的”布局草图出来后还要处理两个常被忽略的细节间距和分组。人的视知觉会把距离近的元素自动归为一组这叫相近性原理。利用这个原理我把温度、液位、电流这类“罐状态”数据放在同一个区域组内间距小这个区域和阀门操作区之间留出明显更大的空隙这样即使不懂工艺的人也能一眼看出“左边这一块是状态下边那一块是操作”。组态软件里我习惯用8像素网格对齐同组组件间距8到10像素组与组之间至少16到20像素功能区块之间可以再加一条浅色分隔线。别怕画面空HMI不是要把每一寸像素都填满空出来的地方是给眼睛喘气的也是给重要信息留出发光的位置。3.4 监控区、操作区、报警区职责分离一个主画面最好想清楚三个区域各自的职责监控区回答“现在怎么样”操作区回答“我要做什么”报警区回答“哪里坏了”。职责不分界面就会乱。我常年用的排布是顶部放标题、当前模式和重要时间左上到中上放核心监控区中部放设备状态简图右侧固定报警消息区底部放操作按钮和参数入口。两个细节要特别留意一是操作按钮如果会呼出软键盘或输入框不要让这个弹窗盖住核心监控区所以需要输入的位置尽量靠下二是报警区条目要按时间顺序固定排列不要每条最新报警都跳到顶部把历史顶掉否则操作员永远没法在固定位置快速找到历史报警记录。4. 第3步用对比度和“安静背景”把核心数据托出来布局决定的是视线落点颜色决定的是这些落点能不能被瞬间识别。第三步的目标是让核心数据在最安静的画面里自动跳出来。4.1 颜色数量三到五种就够工业HMI最怕的就是把画面调成一台高饱和的电视机。全屏主色调我控制在三到五种而且多数是低饱和度的灰、蓝、青高饱和色只留给报警和少数值得强调的核心值。这套思路可以概括成“安静背景主动信号”画面默认状态必须安静红色黄色一出现因为四周没有同类竞争对手它们立刻成为全场焦点。画面平时越花报警的红色就越难突出。我见过不少界面用高饱和紫色做底色再用高饱和红色标报警红色在紫色里根本跳不出来这就是自己给自己设置的视觉噪声。4.2 状态色的行业惯例比你自己的审美重要颜色在工厂里有强烈习惯记忆绿或灰表示正常黄色警告红色故障蓝色或青色表示运行中或自动模式。设计之前先问业主厂内有没有颜色标准有就严格执行没有再套行业惯例。这里还有一个必须考虑的问题红绿色盲在人群中比例不算低操作员完全可能是红绿色盲因此任何关键状态不能只靠颜色区分要配文字、图标或形状一起表达。泵运行状态写“RUN”加转动图标停止写“STOP”加方块图标颜色只做辅助修饰这对所有操作员都友好也不怕屏幕老化偏色。4.3 对比度不是“感觉够不够”是可以算的文字和背景的对比度是硬指标。工程上我放宽到网页无障碍设计的标准再往上提一档核心技术数字与背景的对比度至少7比1次要文字至少4.5比1。白底黑字对比度能做到21比1黑底白字同样但灰色底白字就很容易翻车比如#888888的灰底配白字对比度只有3.5左右远看白字会融进灰底里。判断对比度是否达标最简单的办法是转灰度观察。我组态完成后一定会做一步把画面截图拖进图像软件把饱和度拉到0如果核心数字在灰度图里依然清清楚楚说明层级是靠明暗拉出来的是可靠的如果灰度图一片均匀那颜色方案就得重调。4.4 闪烁是最后手段不是装饰闪烁和动态效果在HMI上必须克制到近乎吝啬。闪烁只留给两种场景一是需要立即响应的报警二是正在执行的不可逆操作确认。频率1到3Hz比较合适面积尽量小一个报警框、一个数字就够了。画面里如果堆满慢慢流动的液体动画、旋转的风机叶片、翻页的报表操作员盯久了眼睛会疲劳接着就会对动态信号脱敏这就是报警疲劳。真正重要的报警信号淹没在动画堆里等于被界面自己的“热闹”掩盖了。我连罐体液位动画都不推荐做液位数字加一条垂直色条就足够表达动态效果应该节约给真正的报警信号。5. 实战复盘一套“三种液体混合”界面的视觉层级改造原则讲完拿我最近经手的一个项目完整过一遍。这套流程可以直接复制到你的项目里。5.1 接手现场一张什么都有但什么都找不到的画面项目是一套小型配料系统三种液体A、B、C按设定比例打进混合罐加热搅拌后出料。接手时业主自带的画面把设备连线、罐体、阀门图标全部铺在一屏上三种液体瞬时流量、累计量、罐液位、温度、搅拌电流、批次号、日期时间全都散落在设备旁边字号几乎一样大深蓝底配彩色管线视觉重点完全不存在。操作员原话是“眼睛不知道往哪放”。之前发生过一次A泵抽空故障报警明明弹了出来但操作员没能第一时间注意到等混合比例偏差大到触发产品报废翻报警记录才发现泵早就空了。5.2 按三步走每一步的实际决策我按前面说的三步重做。第一步分级混合罐液位、罐内温度、搅拌电流、配比偏差、报警横幅进核心层三种原料瞬时流量、阀门状态、泵状态进次要层出料累计量、蒸汽压力、批次信息退到辅助层收进底部页签。第二步布局顶部标题栏放配方名称、当前时间左上核心区放混合罐液位和温度液位用大号百分比加罐体简图配比偏差放在旁边正常时深灰显示右侧固定报警列表底部操作区放启动、停止、出料和模式切换。第三步着色背景浅灰蓝管线统一灰色红色只留给报警配比偏差超过工艺允许值时数字变黄并闪烁。这个案例里没有加任何罐体流动动画因为那只会抢报警信号的眼睛。5.3 组态软件落地画面分层与变量绑定要点落地操作以博图TIA Portal为例先建好分区背景矩形把整个画面在层上安排好背景层、数据层、报警层、按钮层分开画。核心数字用文本域绑定变量格式按工艺要求设置小数位液位显示100.0温度85.0不要出现一长串浮点小数。报警闪烁在“动画”属性里绑定报警变量勾选闪烁并设置颜色。按钮要确保“单击”事件连接了置位位或复位位等动作并且给按钮增加按下时的状态反馈比如按下瞬间颜色变深让操作员明确知道“操作已被接受”。每做完一个画面就编译一次别攒到最后才编译错误定位会轻松很多。5.4 改造后的效果与操作员反馈改完后的画面最直观的变化是站到控室门口1.5米外扫一眼就能看到左上角的大号液位百分比和温度当前报警固定在右侧列表里。操作员反馈说现在不用“找数”了接班扫一眼就知道罐子状态稳不稳。业主还顺着这次改造提出了新需求把配比偏差做成历史趋势曲线放在辅助页批次追溯也有依据了。整体成本大约半天数据分级和布局一天组态加调试换来的是现场人员对界面的真正接受度。这我觉得是HMI改造里性价比最高的投入。6. 验收方法、维护坑位和博图仿真按钮无反应的排查流程走完不是终点界面交付前必须做验收。因为组态和真实使用之间永远隔着一双在现场盯了一晚屏幕的眼睛。6.1 30秒走查让同事说他“第一眼看到什么”我常用的验收方法叫走查。画面切出来后找三五个不同岗位的同事让他们扫一眼就回答三个问题这个画面最重要的数据是什么现在有没有报警哪个设备状态不正常只要有一个人答不上来界面就得改。这个方法比任何规范都直接因为HMI的最终用户不是评审专家就是一双普通人的眼睛。走查时我会特意找不熟悉这套界面的人他们不会按经验脑补目光落点更真实。6.2 灰度测试去掉颜色核心数据还能站C位吗再推荐一个零成本又总能发现问题的招灰度测试。把HMI界面截图丢进任意图片处理软件饱和度归零观察核心数据在黑白画面里是否依然清晰。如果灰度图里核心数字清楚说明层级依赖的是明暗、尺寸和位置是稳健的如果灰度图糊成一片说明层级全靠颜色撑碰上有色觉缺陷的操作员或者屏幕老化偏色就会出问题。我把这招作为所有HMI画面验收的硬指标简单但有效。6.3 博图HMI仿真按钮无反应的可能原因与排查顺序博图TIA Portal组态的HMI在仿真器里按钮无反应新老手都遇到过。按顺序排查绝大多数情况出在三个环节。第一个按钮事件可能是空的。点开按钮属性看“事件”里有没有给“单击”连接“置位位”/“复位位”之类的函数并选对变量很多按钮看上去是按钮实际上是个没有绑定任何动作的静态图形自然点了没反应。第二个变量连接问题。外部变量是否正确连接到PLC地址PLCSIM是否处于RUN状态如果HMI仿真运行而PLC逻辑没运行按钮动作写不进外部变量界面当然“看起来没反应”。想先验证画面逻辑可以用内部变量模拟一下。第三个PLC地址冲突。M区或DB地址被程序其他位置重复使用HMI刚写入的值又被PLC程序覆盖视觉上就是按了没反应。打开变量监控表和程序状态按这个顺序检查基本十分钟能定位。提示如果按钮事件、变量连接、地址冲突都排查过仍无反应大概率是仿真编译缓存异常。清理生成文件、重新编译、完整下载一次往往就好了。这里多说一句和视觉层级相关的按钮没有“按下反馈”也算一种无反应。我见过动作明明执行了但按钮颜色、状态毫无变化的工程操作员以为点击没被接受于是又点一次造成重复动作。所以按钮按下置灰或加状态指示灯不只是为了美观是在做操作确认。这跟整屏视觉层级的思路完全一致任何关键状态变化都要让操作员的眼睛及时抓住。6.4 后期维护界面升级最大的敌人是“顺手加数据”界面交付后的维护阶段才是真正的考验。最容易犯的错是“顺手加一个数”今天加个排气压力明天加个瞬时流量每个都微不足道半年后主画面又变回菜市场。我的规矩很简单新变量想进主画面必须重新走一遍分级流程进不了核心层的就放辅助页别让它动核心数据区的既定布局。另一个常见问题是报警区越来越拥挤报警变量加多了显示不全就滚动吞掉旧消息操作员渐渐养成“有报警就随手清”的肌肉记忆这属于报警管理失控的早期信号。视觉层级设计本质上是在做减法减到最后剩下来的东西才是真正值得操作员日盯夜看的。最后聊一点个人体会。我做了几年HMI相关项目最深的感受是界面不是做给自己评审爽的是给现场每天盯它八小时的人用的。所以每次改完画面我都会约操作员一起去控室让他用手机在1.5米外给屏幕拍张照片然后问他能不能一眼说出核心数据是多少。这个土办法比任何设计规范都更能检验界面的真实可用性。如果你现在正被“画面不好看、操作员老抱怨找不到数”困住不妨按这套三步走重新拉一遍先分级再布局再把颜色收着点用。你会发现画面安静了核心数据反而更醒目了。