做 HMI 组态这么多年我一直觉得动画是双刃剑。做得好的 HMI 动画能让操作员扫一眼就判断出设备状态做得差的轻则被吐槽“看得眼花”重则误判工况直接影响生产。很多工程师把 HMI 动画当成界面美化的工具结果把工业现场的人机界面做成了带特效的网页这就是“清晰”和“干扰”之间失衡了。所以这篇内容想专门聊一聊 HMI 动画设计的五条原则目标只有一个——让动态效果既清晰又不干扰顺便把实际项目里踩过的坑、排查过的报错逻辑一起整理出来对做组态开发的工程师、SCADA 二次开发的朋友以及从 Web 方向转到 HMI 的 UI 设计师都有参考价值。很多刚从 Web 界面转来做 HMI 的朋友第一反应是把网页里的动效思路搬过来按钮按下去缩一下、页面切换滑入滑出、图标带上弹性动画。但 HMI 的运行环境、使用人群和操作目的和 Web/App 完全不是一回事。你要是理解了这一点再回来看动画怎么做思路会清楚很多。1. HMI 动画和 Web/UI 动效本质上是两种东西1.1 操作员不是“用户”现场也不需要“惊喜感”在 Web 或者手机 App 里动效的目标是让交互有反馈、让界面有层次、让品牌有记忆点。用户愿意花几百毫秒看一个过渡动画因为这是体验的一部分。但 HMI 场景不一样操作员面对的是产线上的实时数据他的核心任务是快速理解当前状态、判断要不要干预。动画在这里不是用来“取悦”的而是用来“编码”的——把设备状态、趋势方向、故障等级这些信息用动态的方式传递出去。我见过一个项目工程师给所有电机都加了旋转动画想着“动起来显得系统在运行”。结果现场操作员根本分不清哪台是正常的、哪台是异常的因为整个画面所有电机都在转真正停转的那台反而成了异类。这种设计就是典型的“为动而动”把 Web 端的“动效丰富”错误地搬到了 HMI 上。操作员不是捧着手机刷内容的用户他是戴着安全帽、盯着设备五六个小时的人动画一旦占用了他的注意力就等于占用了判断力。1.2 动画是状态映射不是装饰想清楚“动画到底在表达什么”比想清楚“动画怎么做好看”重要得多。每一个动画都应该对应一个明确的设备状态或者变量变化阀门开到位了变成绿色停住设备启动了图标由灰变绿、再由静态切到旋转报警产生了闪烁提醒被确认后转为常亮。这里有个很实用的思路就是要给所有动画找一个“状态语义”来背书。你用的每一个动态效果都应该能在技术协议里找到它对应的点位或变量。如果找不到这个动画大概率是多余的。工业现场的 HMI 画面每一帧信息都要经得起追问这个动效告诉操作员什么如果答案是“好看”“高级”“显得在运行”那它就该被删掉。2. HMI 动画设计五原则逐条拆解与参数建议下面这五条原则是我这些年做项目时慢慢总结出来的基本上每次评审画面设计的时候都会过一遍。每一条背后都是踩过坑之后才确认的不是凭空想出来的。2.1 原则一动效必须有“状态语义”先回答“这个动画在告诉操作员什么”一条靠谱的设计流程是先列出画面里所有设备的状态集合再为每个状态选择一种静态表达和动态强化最后才考虑“这个状态要不要动”。不要反过来先做了动画再想它代表什么。以最常见的电机控制为例。停止灰色常亮无动画运行绿色常亮可叠加低速旋转要加“运行”语义故障红色闪烁报警未确认前持续闪烁待机/手动切换黄色常亮或缓慢呼吸频率要更低不能和报警闪烁混淆这里有一个很实际的参数建议报警闪烁频率控制在 1 到 2 Hz也就是每秒钟闪 0.5 到 1 次。低于 1 Hz 会让人感觉是设备在“呼吸”而不是报警高于 2 Hz 会让人焦虑还容易诱发视觉疲劳。颜色变化上也别太省事状态颜色之间的差异要足够大绿色和红色的对比明显黄色和绿色如果同时出现在一个设备的不同状态里就容易看错。我一般建议状态色的色相差至少拉开 20%有条件的话在颜色之外再加一种辅助信号比如文字变化或者图形轮廓变化。也就是说动画方案里最核心的一步不是“怎么动”而是“什么状态才动”。把状态表画清楚动效的预算就花对地方了。2.2 原则二先颜色后形状先状态后动作人眼对颜色和亮度的变化最敏感对形状和位置的变化需要更多注意力来处理。所以在设计一个状态切换动画的时候应该先用颜色/亮度告诉操作员“状态已经变了”再用形状/位置变化辅助表达“怎么变的”。举个例子。如果设计一个阀门关闭动画正确的顺序是阀门由绿色变为红色或由红变绿同时文字由“开”变为“关”这个动作要在 100 到 200 毫秒内完成然后再执行阀门的旋转或位移动画位移动画建议控制在 300 到 500 毫秒不要太慢。600 毫秒以上的位移动画在 HMI 上就会显得“拖沓”现场操作员会以为系统卡了。反过来如果先旋转再变色操作员看到的是“先动了一下然后才变色”。他心里要经历一个疑惑的过程这个阀门到底是在关还是开在工业场景里这种疑惑会直接转化为操作迟疑严重的时候会误判。实际测试下来颜色变化时间超过 250 毫秒就会让人觉得“反应慢半拍”而 100 到 150 毫秒最跟手。动画的时长不是越长越有质感在 HMI 里就是越快越准确但又不能快到让人看不到变化100 到 200 毫秒之间是个合理的区间。2.3 原则三动画必须存在“完成态”只允许短时过渡不允许无限循环这条原则是我自己定义的也是看很多项目出问题最多的地方。一个动效必须有一个静止的“完成态”动画只负责从状态 A 过渡到状态 B 的过程过渡结束后就要停下来不能一直转、一直闪。无限循环的动画有三个问题第一操作员视觉疲劳等到真正的异常出现时反而注意不到第二无法判断状态是否稳定一台在循环旋转的设备操作员会疑惑它是在切换中还是已经运行第三性能和寿命问题老旧的触摸屏长时间刷动态区域会产生明显的卡顿和屏幕残影。例外只有一个报警未确认状态。报警闪烁本身是“需要处理但还没处理”的持续提示所以它必须一直闪直到操作员确认。这个场景下我用的是“未确认/已确认”的状态机来处理未确认报警持续闪烁1 到 2 Hz已确认但未恢复的报警变为常亮故障恢复后自动消失。这样就把“无限循环”限制在一个有明确语义的范围内其它所有动画都要有完成态。给自己做一个自检随便挑一个动画问一句“它什么时候停下来”如果答不上来这个动画就是不合格的。2.4 原则四控制动效画布占比同一屏只允许一个“主角”一个 HMI 画面就是一个视觉场景场景里必须有一个主角。如果所有东西都在动主角就等于没有主角。我给团队的硬性指标是单个画面中动效区域的面积占比不要超过 20%同一时间并行运行的动画数量尽量控制在 2 到 3 个以内同时只保留一个主要动画作为视觉焦点其余动画必须降速、降亮度或者弱化处理。之前提到的 20 台电机全转的例子就是动效占比失控。正确做法是正常运行的设备全部静态显示绿色只有状态切换中的设备使用短时过渡动画异常报警的设备用红色闪烁。这样异常设备会立刻从背景中“跳”出来操作员一眼就能锁定目标。还有一个细节同一个画面上不同动画的运动速度应该尽量统一节奏。如果一个设备用 200 毫秒切换另一个用 800 毫秒整个画面的节奏感是乱的视觉上会非常不和谐。统一动画时长规范比如过渡动画统一 300 毫秒、报警闪烁统一 1.5 Hz画面会清爽很多。2.5 原则五动效必须能降级低配环境要无缝切回静态HMI 的运行环境差异极大。有的项目用的是高端触摸屏有的则是老旧的工控机加远程桌面访问还有的是 Web SCADA 跑在低配瘦客户端上。动画效果在开发机和现场设备上表现完全是两回事。一个常见问题是远程桌面场景。Web SCADA 用浏览器渲染如果页面里有大面积的动画区域CPU 占用会飙升帧率可能掉到 10 到 15 fps。在这种情况下动画就是灾难因为刷新率不够动画看起来就是一顿一顿地跳还不如静态画面表达准确。所以设计动画的时候必须做好“降级方案”动画依赖的时间基准、刷新率、图形资源如果异常系统要能自动回退到静态状态用颜色、文字和形状继续传递信息。换句话说每一个动画都应该是一个“增强层”而不是“必需层”。把动画停掉之后画面依然能完整表达状态才说明这套动画是可降级的。我会在画面里加一个全局开关可以一键关闭所有动画。现场如果出现性能问题或者有操作员反馈干扰直接关掉动画不影响任何状态显示。这个开关救了好几次场。3. 落地实操从状态建模到具体平台实现3.1 动手做动画之前先画“状态-动效映射表”我强烈建议在设计画面之前先建一张“状态-动效映射表”不要直接在组态软件里一边拖元件一边想动画。这张表不复杂但要提前列好。设备/变量状态静态表达动态强化动效时长/频率完成态电机1运行绿色常亮低速旋转持续旋转作为运行态持续但建议用常亮文字电机1故障红色常亮闪烁1.5 Hz确认后常亮阀门2开到位绿色常亮无无静态阀门2开关切换中黄色常亮旋转/位移300ms停止在目标状态这张表里有个细节值得注意电机运行到底要不要加旋转动画我的建议是不要用长时间旋转来表达“运行”除非你同时能把转速和真实设备对应起来。否则就用绿色常亮加文字“运行中”表达把“旋转”留给那些状态切换时的瞬时反馈。如果设备状态变化时必须转动那转动结束后要停下来用颜色继续表达状态。3.2 威纶通、博图、Web SCADA 的动画实现差异不同 HMI 平台的动画机制差别很大。我经常用的是威纶通EBPro、西门子博图TIA Portal和 Web SCADA 这几类每个平台都有自己的脾气。威纶通的动画主要依赖“位状态指示灯”“多状态指示灯”和“元件动画”功能。位状态元件可以绑定点位设置不同状态的颜色和闪烁属性这属于最简单的状态动画。要注意的是使用宏指令或者扩展元件时如果工程文件引用了缺失的元件库容易报“HMI(174)未定义”错误导致工程文件打不开。这种情况大多不是工程本身坏了而是引用了当前 EBPro 版本不支持的旧版扩展元件或未定义的画面编号。解决办法一般是备份后用文本方式检查宏引用或者在另一台装有对应版本软件的机器上打开后另存为新版本格式再重新建立元件库引用。博图的 HMI 动画多依赖“移动”“旋转”“可见性”这些动画属性绑定变量。一个最容易踩的坑是动画变量连接的是内部变量而不是 PLC 变量导致仿真的按钮怎么点都没反应。我在博图仿真里遇到“HMI 仿真按钮无反应”排查步骤一般是先看按钮的“事件”里有没有关联函数列表再看关联的变量是否已真正连接到 PLC 符号最后检查画面上有没有透明的动画层或覆盖图把按钮挡住了。透明覆盖层是特别隐蔽的问题位移动画元件如果范围设置过大会盖住按钮的点击区域。Web SCADA 平台的动画自由度更高CSS/JS 都能用但性能坑也最多。我建议尽量用 CSS transform 和 opacity 实现动画避免频繁触发布局重排闪烁效果不要直接对整块背景做 opacity 动画而是只对前景图形做减少重绘区域。远程访问场景下优先用静态刷新加轮询的方式把动画频率控制在 1 到 2 Hz 以下否则带宽和 CPU 都扛不住。3.3 动画性能调优的几个实测参数动画再好看性能跟不上就是灾难。下面几组参数是我实测下来比较稳妥的值可以作为起步参考具体还要看设备。大屏触摸屏如 15 寸以上整屏重绘区域尽量控制在 300*300 像素以内CPU 占用率峰值别超过 30%。老款触摸屏避免大面积渐变和阴影效果闪烁尽量用位图切换不用透明叠加。Web SCADA动画元素复用同一个 DOM 节点减少创建销毁动画帧率不需要超过 30 fps工业场景 20 fps 以上已经足够反而更省资源。远程访问画面刷新周期一般设置 1 到 2 秒动画如果必须保留频率控制在 1 Hz 以下。4. 常见问题与排查技巧实录做一个“动画排查速查表”这些场景都是实际项目里反复出现过的。问题现象可能原因排查方法画面一直在闪操作员以为在报警动画没有完成态或闪烁规则未按未确认/已确认区分检查所有闪烁元件确认已确认报警转为常亮非报警状态不闪烁动效正常但感觉反应“慢半拍”动画时长过长或使用了大面积渐变/透明叠加过渡动画控制在 300ms 以内颜色变化在 150ms 内完成博图仿真按钮点击无反应变量未连接 PLC、事件函数未关联、有透明动画层覆盖按“事件→函数列表→变量→覆盖层”的顺序逐一排查威纶通工程文件打不开报 174 未定义引用了缺失的元件库或未定义画面编号备份工程在对应版本软件中另存检查宏引用和扩展元件远程画面卡顿动效一顿一顿帧率不足动画区域过大带宽有限降低画面刷新率关闭循环动画使用静态状态色画面动画正常但触摸无响应动画元件范围覆盖了触摸区域检查所有元件的动画范围和触摸热区保持隔离4.1 博图仿真按钮无反应到底卡在哪一步这个坑我印象很深。当时做完一个画面按钮的“按下”事件里关联了一个置位函数变量也连到了 PLC DB 块。结果一仿真按钮按下去完全没反应。后来一步步排查发现是画面上方有一个位移动画元件它的透明热区把按钮盖住了。动画元件在博图里也参与鼠标事件透明区域并不透明它会拦截点击。排查顺序建议这样来先确认按钮的“事件”页签里函数列表不为空再确认函数里引用的变量和 PLC 符号表中的变量是同一个注意地址是否一致最后打开“画面浏览”或图层检查看有没有覆盖在按钮上方的动画元件。博图里这类问题最常见的原因前三名就是事件函数没关联、变量地址指向错误、透明元件覆盖。4.2 威纶通报 HMI(174) 未定义文件打不开怎么处理威纶通的工程报错 174大多数时候不是工程损坏而是“未定义”。我遇到的几例都是老工程里用了某个扩展元件比如旧版 XY 图、滚动条、用户自定义宏而打开工程的电脑上 EBPro 版本较新或较旧元件库不匹配导致系统无法识别。处理办法分几步第一不要反复尝试直接打开原文件先复制一份备份第二装一个和原工程创建时同版本的 EBPro打开后立即另存为新版本格式第三如果备份工程里用了大量宏指令用文本编辑器打开宏文件检查是否存在未定义的标签第四实在不行新建一个空工程把原工程里的画面数据通过导入功能迁移但这个方法工作量很大建议只用在上面的方法都无效的时候。从预防的角度讲我后来都在项目里保留一套“纯基础元件”的备用画面不依赖任何扩展元件库出问题时能快速顶上。4.3 动画带来的“虚假报警”如何避免最常见的场景就是动画和报警状态没有严格绑定。比如一个设备正在手动调试黄色灯在缓慢闪烁结果旁边另一个报警灯也是类似频率的闪烁操作员就把手动状态误认为报警了。解决办法就是把不同状态间的动效差异拉开报警用双色交替闪烁手动状态用常亮黄色或极慢呼吸0.5 Hz 以下并且配上明确的文字标签。让不同语义使用明显不同的动态模式比单纯靠颜色区分安全得多。5. 把五原则固化成评审规范和团队验收清单5.1 每次动画评审都要过一遍的清单整理一个动画评审清单每次画面完成后都拿着它过一遍能省掉很多现场返工检查项是否通过是否有动画找不到对应的设备状态或变量是/否状态颜色之间的差异是否足够大色相差 20%是/否颜色变化是否在 150ms 内完成是/否位移动画是否在 300-500ms 内结束且进入完成态是/否是否有非报警场景的无限循环动画是/否未确认报警闪烁频率是否在 1-2 Hz是/否同一画面动效区域占比是否小于 20%是/否同一画面是否有超过 3 个并行动画是/否是否提供一键关闭全部动画的全局开关是/否关闭所有动画后画面能否通过颜色/文字完整表达状态是/否前六项是设计层面的后四项是工程和安全层面的。如果后四项有一项不过现场多半要出问题。5.2 最后分享一个我自己的习惯动画就是做减法我做 HMI 动画这么多年最大的体会不是“怎么让画面更炫”而是“怎么把没必要的动效删掉”。每加一个动画都要有充分的理由每留一个动画都要考虑它的完成态、频率和区域占用。动画在 HMI 里永远是服务状态识别的工具不是展示设计能力的舞台。如果你在评审画面时觉得“这个动画可有可无”那大概率就是该删掉的那个。还有一个小技巧想分享给正在做组态的朋友做完动画之后自己盯着画面看一分钟不要操作任何东西看会不会感到烦躁。如果你自己都觉得烦现场操作员只会更烦。这个“一分钟测试”虽然不科学但比很多设计规范都实用。
