★ FEATURED ARTICLE 1. HMI动画设计的本质先弄清楚动效是给谁看的1.1 界面一动操作员就慌动画用错了方向我见过太多HMI画面变成迪厅的案例。泵在转、阀在开、液位在跳、报警在闪、弹窗在飘整个屏幕恨不得每秒动几十个地方。操作员坐在前面不到十分钟眼睛就开始发酸遇到真正的报警反而视而不见——被晃得麻木了。这不是夸张。HMI动画设计的核心命题从来不是怎么动得炫而是动完之后操作员是否更快理解了设备状态。控制界面不是手机App操作员不会带着娱乐心态去看你的动画他们要的是三秒钟内判断现在设备正常吗、哪里不对劲、我要不要干预。任何干扰这个判断过程的动效不管多流畅、多好看都是负资产。这篇内容围绕我这些年做HMI画面设计时沉淀下来的五个原则展开覆盖从组态软件选型、动画参数设计到现场调试避坑的完整链路。无论你用的是西门子博图、威纶通这类常规HMI还是USART HMI串口屏这类嵌入式方案这套判断标准都适用。适合刚入门的电气工程师、上位机开发人员也适合被甲方要求搞得炫一点却不知道怎么平衡的组态设计者。1.2 先看三个反面案例动画是这样毁掉一块屏的第一个案例是我调试一条物料输送线时遇到的。原设计者给每台电机都做了高速旋转动画皮带线用了几十帧位图循环播放。画面动起来确实热闹可操作员根本分不清哪个设备真的在运行、哪个只是动画在跑。更麻烦的是当一台电机过载停机时它的旋转动画停了但在旁边几台还在转的电机衬托下人眼很难第一时间锁定那台停下来的设备。第二个案例发生在配方管理界面。工程师给每个参数输入框都加了数值变化时弹跳一下的动画初衷是提醒操作员数值已更新。实际使用中操作员同时修改七八个参数时整个屏幕的输入框都在跳视觉重心完全抓不住。参数是否写入成功、哪个框还在编辑状态全被弹跳效果淹没了。第三个案例是报警弹窗。设计者给报警窗口加了从底部弹入的动画弹入后整个窗口以2Hz频率闪烁。初衷是让报警更醒目实际上操作员在闪烁的红色窗口面前根本读不清报警文本——视觉系统对高频率、高饱和度的闪烁天生敏感注意力全被闪这个动作吸走了没人去读具体报警内容。这三个案例指向同一个结论没有经过设计的动画会直接破坏HMI最核心的信息传达功能。1.3 为什么控制类界面不能照搬手机App动效很多人做HMI动画时脑子里参考的是手机App的动效规范——Material Design那套东西确实漂亮但把它搬到工业现场之前要先想明白两者场景差异有多大。手机App的使用者是主动操作的人界面上没有机械设备的真实状态映射动画更多承担的是娱乐感官、引导视线这类轻量任务。而HMI的使用者面前是一台可能正在跑着几百千瓦电机的设备画面上的每一个图元背后都有真实的物理量——转速、温度、压力、液位。操作员盯着屏幕时大脑其实在做高频的状态比对画面上显示的内容和现场设备是否一致。这个比对过程对时间极敏感任何在真实世界中不存在的弹性回弹视差滚动都会干扰比对的确定性。我自己刚入行时也踩过这个坑。在一个温控画面里给温度数字加了渐变色过渡数字从120跳到135的过程是平滑递增的。看起来很漂亮但车间老师傅看一眼就问我这个温度是实时的吗还是模拟出来的曲线因为真实传感器数值跳变是有延迟、有阶跃的平滑过渡反而让操作员怀疑数据真实性。从那以后我立了一条规矩HMI动效永远模拟真实物理行为不添加真实世界中不存在的假象。2. HMI动画设计五原则详解2.1 原则一目的驱动——每一个动画都要回答为什么要动判断一个动画该不该加的硬标准只有一个去掉它操作员是否会丢失重要信息或降低判断速度。如果答案是否定的这个动画就是多余的。动画在HMI里的合法目的只有四类状态切换提示、数值变化提醒、流程进度反馈、异常报警强调。状态切换提示对应的是设备从停止变为运行阀门从关闭变为打开这类二元变化动画的目的是帮助操作员在杂乱画面中快速定位到发生变化的设备。数值变化提醒对应的是温度变了压力升了这类连续量变化动画的目的是把变化这个事件本身变为可见信号。流程进度反馈对应的是配方加载中历史数据导出中这类等待场景动画的目的是告知操作员系统还活着、还要等多久。异常报警强调对应的是超温断链急停这类状态动画的目的是把注意力强行拉到异常点上。我在每个动画属性下面都会加一个注释字段写清楚这个动画对应的物理意义。组态软件编译后写进需求文档后期维护的人一看就知道当初为什么加这个动画。好几次项目交接时这套注释帮我省了大量解释成本。如果你在组态时发现某个动画写不出注释——恭喜你这个动画大概率该删了。2.2 原则二语义统一——同一个事件永远只有一种表达方式语义统一是HMI动画设计里最容易被忽视、后期返工成本最高的原则。人在界面上的认知依赖的是条件反射操作员看到绿色旋转就想到运行、看到红色闪烁就想到报警这是长时间训练出来的肌肉记忆。如果同一个事件在不同画面上用了不同动效——这张画面电机启动用旋转那张画面用颜色填充——操作员每次切换画面都要重新学习反应速度会明显下降。我负责过的标准化项目里会专门做一份《动态效果语义表》把全项目所有设备状态对应的动效形式固化下来。以常见的电机状态为例停止状态是灰色静态图标启动过程中是绿色图标缓慢脉动透明度在1秒内从100%到60%循环运行状态是绿色图标匀速旋转故障状态是红色图标以1Hz频率闪烁。这份表里约定了旋转方向、颜色值RGB、脉动范围、闪烁频率全部精确到数值。新画面设计时直接调表取值从源头规避了同一个事件两种动画的问题。这份表不只是内部用还会放进操作员培训手册里。操作员上岗第一天先花十分钟过一遍语义表之后看任何新画面都能快速理解。有两个现场反馈让我很欣慰一是新操作员上手速度明显快了不再需要老师傅在耳边一个个讲这是什么意思二是跨班次交接时的口头沟通变短了大家用同一套语言描述画面状态。2.3 原则三范围克制——让动效待在该待的地方范围克制包含两个维度空间范围和时间范围。空间范围指的是动效占据的屏幕区域时间范围指的是动效持续的时间长度。两个维度都遵循同一句话能小则小能短则短。先看空间范围。我见过最典型的反面设计是一台设备启动时为了让操作员注意到整个画面先闪烁一下白屏或者设备周围的背景区域做一个扩散光圈。这种大面积提醒看似醒目实际副作用很大。工业HMI画面上通常同时运行着多个监控区域大面积动效会覆盖或干扰其他区域的信息读取。正确的做法是把动画限制在设备图标自身的轮廓范围内——比如让图标内部的齿轮旋转、让边框颜色变化、让一个小色块亮起。再看时间范围。持续性动画要比瞬发动效谨慎得多。设备运行时让图标持续旋转这个操作看起来没问题但要注意旋转动画会持续吸引视觉注意力长时间观看容易疲劳。我在做长时间运行的设备状态显示时更倾向于状态确认后动画即停的方案设备启动瞬间播放500毫秒的旋转动画确认状态稳定后停止动画只保留一个静态的绿色运行态图标。操作员需要确认状态时可以看静态图标不需要被持续动画分散注意力。这个方案在长时间运行、无人值守的工况下效果尤其明显。2.4 原则四时长与缓动——快而不急慢而不拖动效时长和缓动曲线决定了动画的手感。太快的动画小于100毫秒人眼几乎感知不到起不到提示作用太慢的动画超过800毫秒会让操作员觉得系统反应迟钝。我实际调试下来的经验区间是状态切换动画200至400毫秒数值变化提示300至500毫秒流程进度类动画可以到800毫秒但不宜再长。缓动曲线方面HMI动效最常用的是先快后慢的缓出曲线ease-out。比如电机图标从停止到运行的过程旋转速度先快后慢直到匀速符合人对启动—稳定的物理预期。反过来如果需要表达设备正在减速停车可以用先慢后快再慢的缓入缓出曲线模拟减速过程。我建议不要把动画做成纯匀速的线性运动线性运动在视觉上显得僵硬缺乏真实设备那种从发力到稳定的质感。还有两个容易被忽略的细节。第一是动画要做到单一变化率同一个动画周期内最好只改变一个属性透明度、位置、旋转角三选一同时改变多个属性会让动画显得杂乱且难以定位变化焦点。第二是循环动画要设置合理次数。闪烁三次以内能引起注意持续闪烁超过十次就会让人烦躁并产生狼来了的脱敏效应。我一般把报警闪烁控制在三到五次后转为常亮既能起到提醒作用又不至于过度刺激。2.5 原则五异常优先——报警和故障状态不容许任何修饰最后这条原则是我在经历过一次安全事故预演后深刻体会到的。正常运行状态下的动画可以谈美学、谈品牌感但报警和故障状态的动画只谈一件事信息传达效率。任何为了好看而牺牲报警可读性的设计都是本末倒置。报警状态的动效设计有几个硬规矩。第一报警弹窗出现时画面内其他动画全部暂停或降级。想象一下操作员正在盯着一条设备运行画面忽然某处报警如果其他动画还在播放人眼会花更多时间才能定位到报警来源。我在组态时会给全局动画加一个报警暂停的PLC变量报警信号一触发就通过变量抑制非报警区域的动画运行。第二报警信息的文本可读性优先于一切视觉强调。报警弹窗的字体、字号、背景色和文本对比度我是在最后阶段才调整的而且调整标准只有一个——退到操作位距离上人眼能在一秒内读出完整的报警描述。如果做不到就加大字号、拉高对比度不换任何花哨的字体。第三报警闪烁频率严格控制在0.5Hz到1Hz之间这是大量相关研究里人眼辨识度最高、又不容易诱发视觉疲劳的区间。频率太高会让人看不清文字太低则起不到提示作用。3. 从静态到动态一个温控画面的动画改造全流程3.1 改造前信息全堆在一起没有任何层次拿一个我实际做过的恒温控制画面来拆解。改造前的画面很朴素一个储液罐的静态轮廓旁边三四个文本框分别显示当前温度、目标温度、加热器输出功率、液位高度底部是一排手动按钮。所有信息平铺没有任何主次。操作员想看当前温度和设定温度差多少时需要自己心算想判断加热器现在到底有没有工作时只能看功率数值没法一眼找到视觉对应物。这个画面的问题不在于静态而在于静态且没有层次。HMI画面完全可以全静态只要信息组织足够清晰。但既然要做动态化就得先想清楚哪些信息值得用动画强调哪些信息保持静态反而更好。我当时列了一份清单液位变化可以用垂直填充动画表现温度数值变化需要提示但不应该打扰持续观察加热器工作状态需要一个明确的状态图标温度趋势曲线用缓慢滚动的折线图表达实时变化报警提示单独做一条顶部横幅。清单里明确写掉了两个不加动画的地方设定温度的输入框和启停按钮。按钮和输入框保持完全静态避免操作员在操作时被多余的动画干扰判断。3.2 改造方案哪些地方加动画加什么动画液位部分用储液罐内部的垂直填充条实现。填充百分比绑定液位传感器数值扫描周期设为100毫秒——这个是下限低于100毫秒的话组态软件和触摸屏CPU就有点吃不消。填充条的变色逻辑按液位区间处理正常区间显示浅蓝色低液位显示浅黄色超低液位显示红色并且以0.8Hz频率闪烁。变色加闪烁的双重编码即使操作员有色觉障碍也能通过亮度变化感知异常。温度数值部分没有用渐变色过渡只在数值变化瞬间做一次短暂高亮大约300毫秒颜色从黄色渐回白色配合一个小的上箭头/下箭头图标表示升降温方向。高亮结束后数值恢复静态保证长期运行时不产生视觉噪音。加热器状态用一个圆形图标停止时灰色加热中橙色且内部有一条圆弧以每秒60度的速度旋转到达目标温度后变为绿色静态。橙色旋转圆弧的含义是正在输出功率绿色静态的含义是已达到温度保持状态语义区分清晰。趋势曲线用的是滚动折线图新数据从右端挤入、旧数据向左滚出。这个动画是持续性的但因为它只在曲线区域里运动范围克制得当不会干扰别的区域。趋势图的核心价值是让操作员看到温度变化的历史轨迹提前判断趋势是否异常持续动画在这里是合理的。3.3 参数设计时长、延迟、循环次数怎么定改造时我把所有动效参数整理成了一张参数表每个项目在组态时直接填表取值。温度数值高亮时长300毫秒延迟0秒循环1次液位填充条动画时长400毫秒——这里注意填充条绑定的实时数据是不断更新的如果动画时长设太长会出现数值还没填充到位又被新数据打断的撕裂感所以400毫秒是个折中方案——循环次数连续加热器旋转动画每圈600毫秒循环连续报警横幅从右向左滑入时间250毫秒滑入后保持静态直到报警复位不做循环动画。循环动画里有个原则能做成匀速连续的不要做忽快忽慢的。加热器旋转我用的是固定角速度旋转而不是带缓动的旋转因为连续旋转动画的目的是表达持续运行中的状态不是表达启动瞬间的过程。反过来启动过程的动画一定要用缓动曲线模拟设备的真实响应。这两种动画的语义完全不同不能混用。参数表沉淀下来之后新画面设计的工作量明显下降。团队里其他人只需要填参数不用每次都从零开始调时长和缓动动效质感也保持了一致性。这也是我在前面原则二语义统一里说的动效参数和动效形式一样都需要标准化。4. 工程落地时绕不开的工具与坑4.1 博图HMI仿真按钮无响应先查动画事件还是变量博图HMI仿真时按钮点了没反应这个问题在社区里被问烂了。我在实际项目里排查过几回发现绝大多数情况跟动画设置没关系而是卡在允许操作这个属性上。组态时按钮默认是启用了操作的但如果你给按钮叠加了可见性动画、透明度动画或者把它放进了某个画面窗口的动画层里按钮的实际热区可能被其他对象覆盖了。排查路径我一般按这个顺序来先确认PLC变量连接是否正确在线监视变量有没有变化再看按钮的允许操作是否被取消然后检查按钮周围有没有透明或不可见的矩形、图片框叠在上面——这种最坑因为画面上看不见但它实实在在地把按钮的点击事件吃掉了最后看画面窗口的层顺序是不是有其他元素把按钮挡在了下层。如果以上都没问题按钮依然不响应试一下装载仿真表和变量表是不是同一个。博图仿真时如果变量值没同步过去画面上的按钮操作变量实际没有真正到达PLC侧看起来就是点了没反应。这个需要用仿真表里的在线监视窗口确认变量值是否联动而不是只看画面。4.2 威纶通HMI报错(174)未定义编译期问题先查标签引用威纶通报错(174)未定义这个报错信息看起来莫名其妙实际原因是工程里引用了未定义的标签或宏指令。最常见的是在动画属性、宏指令、设备写入表达式里写了一个不存在的LW/LB地址别名。比如你在宏指令里调用LW_Storage_Level但标签库里没有定义这个名字编译时就会报174未定义。排查操作用排除法。先在编译信息里看报错定位到了哪个对象或哪条宏双击跳转过去再打开标签库搜索报错里出现的标签名确认大小写是否完全一致——威纶通的标签是区分大小写的曾经有同事把Level写成level排查了大半天才看出来最后看这个标签是否被误删了或者被改名了。项目多人协作时这种未定义问题特别容易出现在一个人改标签名、另一个人不知道的情况下所以我会要求所有标签引用都用交叉引用表做一次全局检查。威纶通项目还有一个常见问题动画连接里用到的标签如果引用了跨窗口的局部变量这个变量要在窗口全局变量里做定义不然也会报未定义。HMI专用工具包下载安装这个热搜词多半是新用户在用威纶通EBPro的扩展功能比如宏指令库或加密工具里面引用的部件未正确注册也可能报类似错误。工具包安装完后最好重启一次EBPro否则部分组件不会正确加载。4.3 串口屏与USART HMI的动画指令单片机侧怎么配合USART HMI这类串口屏和组态软件思路完全不同。它的动画不是拖拽属性配置的而要你在单片机固件里通过串口指令主动控制。比如用CLR指令清屏、用PIC指令切图、用PLR指令控制画面中的进度条数值这些指令组合起来才能实现动态效果。做串口屏动画有个容易踩的坑不要把画面帧刷新全推到单片机侧。我的做法是把动画拆成屏端自运行和主机端按需触发两套机制。周期性动画——比如液位脉动、旋转图标——在屏端用定时器多状态图片切换实现单片机上电后只需下一条启动动画的指令屏自己循环跑不占串口带宽。事件型动画——比如启动瞬间的过渡、报警横幅的滑入——由单片机按需下发指令触发。串口指令的下发频率也要掐好。常见USART HMI屏幕的串口波特率可配到115200但指令之间要有足够的延时特别是连续切换多张图片时帧率跟不上就会有闪烁和残影。我实测下来连续图片切换指令间隔至少留30到50毫秒否则会出现图片切换不同步的现象。如果做逐帧动画帧数宁少勿多——8帧的逐帧动画在视觉上已经能表达旋转语义硬上24帧会让单片机程序写得很痛苦屏端刷新也未必流畅。5. 动画调优与排查技巧实录5.1 调动画的正确姿势用慢放验证节奏动画调试最忌讳直接在真实速度下肉眼微调。我的做法是利用组态软件自带的仿真功能配合慢动作观察。比如西门子博图的仿真模式支持降低模拟速度就可以把1比1的实时仿真降到0.2倍速这时候能非常清晰地看出动画的位移轨迹、缓动曲线是否顺畅以及动画的起始点、终点位置有没有跑出目标范围。慢放习惯帮我发现过很多隐蔽问题。有一回我调一个位移动画1比1速度下看很顺滑放慢到0.2倍速才发现运动轨迹末端带着一个轻微的回弹——就是那种到点之后反弹两三个像素的帧率抖动。真实速度下人眼感知不到但操作员长时间盯屏幕却会隐隐觉得画面不稳。这种细微瑕疵只在慢放下能发现。另一个技巧是关闭所有动画看画面。把所有动效暂时禁用只看静态布局是否依然成立——文字是否完整、层级是否清楚、按钮是否好按。如果静态画面本身就乱那动画只会让乱上加乱反过来静态画面看着清爽加动画时每加一个都能明显感知它带来了什么信息增量。用这个逻辑来检查可以筛掉一大批加了不如不加的动画。5.2 常见动效问题速查表我把这些年遇到的动效相关问题和排查方向整理成了一张速查表放在HMI设计规范文档里每次调试时直接对照查阅。症状可能原因排查方向动画不执行触发条件错误、变量类型不匹配检查动画属性里的变量连接是否为同一数据块动画卡顿扫描周期过短、大图元多帧刷新把位图缓存到内存降低刷新频率按钮无响应被动画对象遮挡、允许操作未勾选查看对象层顺序隐藏其他图层逐个排查报警弹窗文字看不清闪烁频率太高、颜色对比度不足闪烁降到1Hz以内提高背景与文字对比度数值动画与真实数据滞后动画时长过长或扫描周期不匹配缩短动画时长到300毫秒左右和扫描周期对齐动画漂移出设计区域窗口分辨率变化导致坐标错位使用相对坐标和锚点属性避免绝对坐标多动画叠加闪眼同一时间多个区域同时运动用全局动画抑制变量非关键动画让位于报警这张表最大的价值不是对号入座而是强迫每个调试的人先想这个动画为什么会存在再去想这个动画怎么改。排查问题的过程本身就是对动效合理性的二次审视。5.3 迭代经验动画做减法效果反而更好做HMI动画一段时间后我发现一个规律画面上的动画数量一旦超过某个值操作员对每个动画的感知灵敏度就会断崖式下降。一个只有三五个重点动画的画面上任何一处动效都能被快速捕获而一个布满动态效果的画面里操作员反而会选择性无视大部分动画——包括真正重要的报警。所以我在每次画面最终验收前都会强制做一轮动画减法。规则很简单把每个动画依次停掉让操作员在停掉动画的状态下操作一轮如果没人觉得少了什么这个动画就删掉。两轮减下来通常能删掉三分之一到四分之一的动画剩下的则是真正不可省的。有一次删除效果特别明显。某台设备画面原本有七个动画在同时工作我删掉了四个——把一个持续旋转的电机图标改成了静态状态色图标、去掉了一个无意义的背景渐变、简化了两个按钮的悬停效果——剩下的三个动画报警闪烁、启动过程过渡、液位实时填充反而让操作员觉得画面干净多了。操作员原话是终于知道眼睛该往哪放了。这大概就是HMI动画设计最本质的追求。从那次之后我做任何新画面的第一版都只做必要的三五个动画后面根据实际使用反馈逐步微调而不是一开始就堆满。理性克制比炫技更难但在工业现场克制永远比炫技更受欢迎。
阅读完成 · 觉得有帮助？
