工控画面里最容易出问题的往往不是变量绑定而是素材。上周帮一个做水处理项目的朋友看界面他把上位机截图发过来逻辑都对就是看着别扭:离心泵的图标是从某个通用 UI 图标包里抠出来的齿轮形状配色是那种很潮的紫色渐变摆在深灰色管道图中间像贴了张表情包。他说找了两天没找到合适的工控素材网上要么收费、要么风格不统一、要么下载下来发现是位图放大了糊成一片。这个场景我遇到太多次了工业控制界面设计里真正耗时间的不是把点表绑上去而是先攒出一套语义准确、风格统一、能免费拿到手又敢用的素材图片和动画资源。这篇就把我这几年攒库、画图、踩坑的过程完整摊开包括矢量与位图怎么选、动画有哪几种实现路子、以及素材入库后才会暴露的那些问题。不管你是刚接手 HMI 画面的新人还是已经画了几十张图想整理素材库的老手下面这些内容应该都能直接拿去用。1. 拿互联网 UI 图标凑工控画面问题到底出在哪1.1 一个“齿轮”暴露的语义错位通用 UI 语汇和工业语汇之间隔着一整套行业习惯。在手机 App 里齿轮代表“设置”点进去是配置页但在工业现场的画面里齿轮通常指的是传动装置、减速机或者某个机械本体的部位它是被监控的对象不是入口。你要是把齿轮放在画面右上角当设置按钮老师傅第一反应会去看是不是减速机报故障了。类似的错位还有一堆。“扳手”在通用图标里是工具/维护工控画面里更常用“戴安全帽的人”或“检修牌”表示检修状态“闪电”在 App 里是快捷、加速工控里是电气/带电含义完全不同“三角形感叹号”在通用 UI 里是普通警告工控里通常要配合颜色和闪烁频率才能区分提示、报警、联锁。真正合格的工控图标第一要求是一眼可辨且唯一可辨。控制室里操作员扫一眼画面脑子里的识别路径是“形状→设备→状态”文字标签是补充信息不是主要信息。所以离心泵必须画出蜗壳和切向出口不能画成一个圆圈加三条线闸阀要能看出阀体加手轮球阀和蝶阀也得各有特征不能三个阀门共用一个图标靠文字区分。这一点在做素材库的时候是硬指标比好不好看重要得多。我一般的判断方法是把图标缩到 32 像素、去掉所有文字拿给不熟悉这个项目的人看问“这是什么”。答不出来或者答错的直接返工。这个土办法筛出来的问题比任何设计规范都管用。1.2 免费素材的三个硬门槛网上搜“免费工业图标”能搜到的资源大致分三类但真正能落到项目里的不多。我筛素材只看三条缺一条就不用门槛具体要求踩过的坑授权可用明确允许商用、允许修改、允许二次分发有些包写着 free实际只允许个人学习使用项目交付后是隐患体例完整同一套里泵、阀、罐、电机、管道、仪表都有风格一致东拼西凑出来的画面线条粗细和圆角半径全不一样看着廉价可编辑提供矢量源文件或分层文件颜色能改只给 PNG 的深色主题改浅色主题时全部作废等于重画第三条是最容易被忽略的。很多人觉得 PNG 好用扔进去就行等到客户说“我们现场屏幕是浅色的你出个浅色版”一整套图全部重做。这个学费我交过两次现在库里没有矢量源文件的素材一律不入库。1.3 我的实际做法七分自制、三分收集工控这个垂直领域的素材指望找到一套完全贴合的资源不现实。我的做法是拿开源的通用图形做底子改造成工业符号。比如开源图标库里有很多通用设备轮廓拿过来加个出口法兰、改一下比例、统一线宽十分钟就能得到一个新符号。真正需要完全从零画的其实只有那些有明确工艺特征的离心泵蜗壳、列管换热器管束、塔器的裙座、阀门的执行机构。这样做的另一个好处是风格统一。同一套底稿改出来的东西线宽、圆角、视觉重心天然一致不会出现“左边是粗描边扁平风、右边是细线描边风”的尴尬。提示改造开源图形时注意保留原始授权文件和来源链接很多开源协议要求署名或保留版权声明交付时打包在素材说明里最省事。2. 一套能上线的工控素材库实际要分几层2.1 设备本体层泵、阀、罐、管道这四样占七成不管你做什么行业的画面设备本体层里泵、阀、罐、管道这四类能占到七成以上的使用量。所以素材库的优先级也按这个来排先把这四类画齐、画细其他设备边用边补。尺寸上我固定四档24、32、48、64 像素对应画面里的小型状态点、一般设备、主要设备、大屏重点展示。为什么不干脆用一档然后缩放因为工控图标的细节密度和尺寸是绑定的24 像素的泵再放大到 96 像素笔画之间会空得难受反过来 64 像素的图标缩到 24细节全糊成一团。四档分别画工作量大概是画一档的 2.5 倍但用起来省心太多。设备分类我按工艺习惯来而不是按字母顺序assets/devices/ pump/ centrifugal / diaphragm / screw / vacuum valve/ gate / globe / ball / butterfly / control / check tank/ vertical / horizontal / cone-bottom / agitator pipe/ straight / elbow / tee / reducer / flange exchanger/ shell-tube / plate / air-cooler instrument/ pressure / temperature / flow / level motor/ motor / fan / compressor / conveyor这样分的好处是找东西快。画面上要加一个气动调节阀直接进valve/control不用在几百个文件里翻。2.2 状态与动效层状态比形状更值钱设备形状画对只是及格线真正决定画面专业度的是状态表达。同一台泵至少有停止、运行、故障、检修、本地/远程五种状态要表达如果只用一个灰色图标然后靠旁边的文字标签说明画面信息密度就浪费了。我库里的做法是形状只有一套状态用配色和附加符号表达通过图层组合实现状态主色附加视觉元素常见误用运行绿叶轮旋转、出口管道流动用亮绿加发光深色底上刺眼停止中灰静止无附加元素用纯黑深色主题下看不见故障红图标外框加红环或角标整块红色填充盖住设备特征检修/维护黄或橙加检修牌小角标用黄色填充代替角标看着像报警手动/本地蓝加手形或 L 角标和远程状态共用同一种蓝分不清配色这块必须提醒一句红色代表停止还是代表故障、绿色代表运行还是代表安全不同行业、不同现场的约定并不一致。我做过的一个项目里客户现场的操作习惯是红色按钮停止、绿色按钮启动而画面上的设备状态色他们要求红色故障、绿色运行两者并存在同一张画面上一开始把我绕晕了。所以素材库里的颜色不要写死做成可替换的色板变量进场前先跟甲方对一遍颜色语义这半小时能省掉后面两周的返工。2.3 交互与导航层、底图层这两层最不起眼但缺了画面就“不像个系统”。交互层包括按钮普通、按下、禁用、危险操作、导航首页、上一页、下一页、返回、趋势、报警、报表、设置、输入框边框、下拉箭头。底图层包括标题栏、面板背景、九宫格边框、分割线、网格纹理、角落装饰。九宫格这个词值得单独说一下。面板边框如果用一整张图拉伸圆角会被拉成椭圆边框粗细也会不均匀。正确做法是把边框切成九块四个角固定尺寸不拉伸四条边单向拉伸中间区域平铺。多数组态平台支持这种贴图方式做素材的时候直接把边框按九宫格切好导出比在平台里再切一遍省事。我库里的面板边框统一按圆角 8 像素切边宽 2 像素切出来是 24×24 的角块。3. 位图和矢量的账怎么算3.1 缩放这一关从设计稿到现场大屏这是我最想强调的一点。做画面的时候在 1920×1080 的笔记本上看着挺好投到现场 55 寸或拼接屏上位图图标就露馅了——边缘发虚、细线断成虚线、渐变出现色带。算一笔账一个图标在设计稿里按 32 像素设计投到 4K 分辨率3840×2160的屏幕上如果画面做了等比放大实际显示尺寸是 64 像素位图需要 2 倍图才不会糊投到拼接屏通常单屏 1920×1080 拼成 7680×2160就是 4 倍。也就是说按 32 像素画的 PNG最好准备 32/64/128 三档加起来体积是单档的三倍多。而矢量只要一个文件任意缩放都清晰。所以我的原则很简单图标类、线条类、文字类用矢量设备实物图、复杂渐变底图、纹理用位图。设备照片、三维渲染图这类本来就没法矢量的东西按最高目标分辨率的 1.5 倍出图宁可大一点再缩小。3.2 改色成本一次主题切换的对比实验我做过一次实际的对比。同一个罐体图标一套是 PNG64 像素带透明背景一套是 SVG。要求是把运行/停止/故障三种状态色各出一版也就是 3 个颜色变体。PNG 那套要在位图软件里逐个打开、选中主体、替换颜色、导出每个图标大概 3 分钟一套 40 个图标就是 2 小时而且换颜色时抗锯齿边缘容易发灰。SVG 那套改一个 CSS 变量或者直接改填充色批量脚本一跑40 个图标 20 秒出完边缘完全干净。这个差距在需要出深色/浅色双主题的时候会被放大到不可接受。3.3 体积与渲染性能的实测数据矢量不是没有代价。SVG 里包含大量路径节点、滤镜、蒙版的时候解析和渲染开销会明显上升而部分组态平台对 SVG 的支持只到“能显示”的程度复杂特性直接忽略或者渲染错。我在自己的机器上做过一次粗略统计同一台机器同一画面200 个图标对象素材形式单文件平均体积200 个对象加载耗时缩放后清晰度PNG 32px约 1.2 KB约 0.3 s放大后发虚PNG 128px约 8 KB约 1.1 s2 倍内可用SVG 简化路径约 2.5 KB约 0.6 s无损SVG 含滤镜与渐变20 KB 以上3 s 以上偶发卡顿无损但渲染慢结论很明确用 SVG但导出前把滤镜、投影、模糊全部栅格化或去掉把文字转成路径把多余的图层合并。清理过的 SVG 体积比 PNG 大不了多少还省掉了多倍图的麻烦。含滤镜的 SVG 我是绝对不入库的那玩意在某些平台上就是性能杀手。4. 从零画一套图标可复用的六步流程4.1 先定栅格和线宽基准别一上来就画新手最容易犯的错是打开软件直接描形状画到第十个图标才发现前九个的线宽都不一样。正确顺序是先定规矩以 24 像素这一档为基准建立栅格。画布 24×24四周留 2 像素安全边距实际绘制区 20×20。主要线条宽度 2 像素次要细节 1.5 像素。所有水平线、垂直线尽量对齐到 0.5 像素格避免抗锯齿产生灰边。圆形和斜线允许不对齐但视觉重心要落在画布中心。24 这一档定好之后48 和 64 是它的整数倍放大加细节32 是单独调整——因为 32 不是 24 的整数倍直接缩放比例会很别扭需要手动调整笔画位置。这就是为什么我说四档要分别画不能纯靠缩放。4.2 用几何体拼别用自由曲线工控图标的美感来自规整不是来自手绘感。离心泵我用一个正圆蜗壳加一个切向矩形出口加一个小圆吸入口拼出来全是对称几何体闸阀用矩形阀体加一个正圆手轮加三条辐条列管换热器就是一个大矩形里排几行小圆点。好处有三个一是快拼比画快得多二是统一所有图标的圆角半径、笔画收尾都一致三是可维护三个月后要改细节拆开几何体就行不用重新描。具体操作上我会把常用零件做成一个小零件库标准法兰三种口径、标准手轮、标准接线盒、标准支腿、标准仪表表盘。画新设备时复制粘贴修改效率比从零画高好几倍。4.3 转曲、清理、导出三件套导出前有三步固定动作一步都不能省文字转曲。图标里如果有字母比如泵上的 P、罐上的 V-101必须转成路径。不转的话换一台没装这个字体的机器打开就变成方框或者默认字体字号位置全乱。我吃过一次亏交付后客户打开发现所有仪表位号都变成了宋体位置还偏了 5 像素。清理无用节点和空图层。路径节点过多的 SVG文件大、渲染慢还容易出现毛刺。用“简化路径”功能把节点数压到必要程度但注意别压过头直线会变弯。展开描边、合并可见图层。描边如果保留为描边属性某些平台的描边宽度默认值不同会画出来粗细不一。展开成填充后就没有这个风险。4.4 命名和目录三个月后的你还得找得到命名规则我用了很多年一直是这个结构dev_pump_centrifugal_run_64.svg | | | | | 类型 设备 子类型 状态 尺寸类型前缀用dev_设备、ico_交互图标、bg_背景、btn_按钮、ani_动画帧序列。这样在文件夹里按名称排序同类自动聚在一起。状态字段只有需要区分状态的素材才写不区分的留空。动画帧序列的命名要多加两位帧号ani_pump_rotor_run_64_f01.svg帧号补零保证按名称排序时 f01 在 f02 前面而不是 f1 在 f10 后面。这个细节看起来无聊但批量导入的时候能救命。5. 四类高频动画实现方式与性能账5.1 旋转类优先用属性旋转别用帧序列电机、风机、泵叶轮、搅拌器、传送带滚筒这五类旋转是画面里最常见的动效。很多教程教你把一个旋转周期拆成 8 帧或 12 帧导出 PNG 序列然后循环播放。我早期也这么干后来发现两个问题一是帧数少了转动一顿一顿的帧数多了文件体积爆炸二是转速变化时比如变频调速帧序列没法平滑对应。更合理的做法是用平台自带的旋转属性放一张静态的叶轮图绑定一个角度变量运行时变量按时间自增画面就转起来了。这样转速可以通过修改变量步长随意调整从 30 转/分到 3000 转/分都平滑。代价是有些平台对旋转支持不好会出现锯齿或者锚点偏离。锚点偏离是常见问题解决方法是把叶轮的旋转中心做在画布的正中心不要偏。实在只能用帧序列的场景比如做说明书截图、做演示视频8 帧是底线12 帧比较流畅超过 16 帧就没必要了人眼在 1 秒一圈的速度下分辨不出差别。帧图必须是同一画布尺寸、同一中心点导出时用统一裁切框否则播放时会“跳”。5.2 液位类遮罩法比逐帧画靠谱罐体液位是最常被做错的动效。有人把液位画成十张不同高度的静态图用变量切换结果液位变化时是跳变的一格一格往上蹦。正确的做法是三层结构底层罐体的壳包含高光、刻度线、进出口法兰中层液位色块一个矩形高度随液位变量变化顶层罐体前方的遮挡层把液位色块超出罐体的部分挡住这样液位就是连续变化的哪怕每秒刷新一次也很平滑。要做出“波动感”在液位色块上方叠一条正弦波形的高光带让这条带子做几像素的上下位移视觉上就有液体晃动的感觉实际液位高度还是由变量控制的不掺假。提示遮罩层一定要用和罐体同色的填充不要用透明加边框否则液位色块会从边框外面透出来看着像漏水。5.3 管道流动虚线偏移比贴图省事表示介质流动的传统做法是用箭头贴图沿管道平铺然后位移。这个方法能用但箭头密度和管道长度要逐个调管道一改长度全部重做。更省事的做法是虚线偏移把管道画成一条粗描边描边样式设为虚线然后让虚线的起始偏移量随时间变化看起来就是虚线在往前跑非常像流动。颜色、流速、方向都能通过参数控制改起来几秒钟的事。缺点是有些平台的描边虚线只有实线/点线两档不能自定义 dash 长度这时候退回贴图方案。流向的视觉表达还有个细节管道流动的速度不应该和实际流速严格成比例。实际流速从 0.5 m/s 到 3 m/s如果视觉上严格对应慢的时候几乎看不出在动。行业里的普遍做法是设一个下限速度只要在流动就用同一个视觉速度快慢靠旁边的数字仪表体现。这个取舍有点反直觉但现场反馈是这么做好用。5.4 闪烁与报警别让动效变成干扰源报警闪烁是双刃剑。用对了操作员一眼看到异常用错了整屏都在闪等于没有提示。我的经验值闪烁频率 0.5 到 1 秒一个周期也就是每秒闪 1 到 2 次。再快会让人烦躁再慢不够醒目。同屏同时闪烁的元素不要超过两个超过就说明画面信息设计有问题应该用报警汇总条来替代。不同级别的报警不要用不同的闪烁频率来区分因为人眼分辨频率变化的能力很弱用颜色加静态图标区分更可靠。还有一类常见的过度设计设备运行状态也做成呼吸灯效果。运行状态是常态常态不应该有动效动效应该留给“需要立即注意”的东西。我见过一个画面四台泵全部在做呼吸灯操作员看了半天问我哪台在报警。这个教训很值钱。6. 素材入库之后才会暴露的坑6.1 透明背景边缘发黑这个坑几乎每个做深色主题的人都会踩。PNG 的透明区域在深色背景上显示时图标边缘会出现一圈深灰色的毛边看着像描了黑边。根本原因是抗锯齿产生的半透明像素在合成时和背景色混合的方式不同。解决办法有两个一是导出时选择“透明背景”并且不要让边缘带半透明过渡也就是画的时候关键线条对齐像素格减少抗锯齿二是在平台里给图标加一个和背景同色的底板虽然多一个元素但视觉上干净。我现在的习惯是浅色元素放深色底边缘这个问题在 32 像素以下最明显所以小尺寸图标一律手动画对齐像素不靠缩放生成。6.2 SVG 被平台吃掉的功能不同组态平台对 SVG 的支持能力差别很大我在五个平台上测过同一批文件结果是这样几类功能容易出问题功能常见表现规避方式文字不显示或字体替换全部转曲滤镜模糊、投影完全不生效或渲染成黑块不用改用多层色块模拟渐变方向错乱或颜色翻转简单线性渐变可用径向渐变少用蒙版与剪裁内容溢出或丢失展开为实际路径描边虚线不支持自定义 dash展开成路径或用贴图外部链接图片不加载全部内嵌为路径结论是把 SVG 当成“一堆路径的集合”来用凡是超出路径和基础填充的能力一律不依赖。这样导出的文件虽然不是最漂亮的但在任何平台上都能正常显示。多花五分钟清理能省掉现场调试的两小时。6.3 风格混搭带来的廉价感这个问题比技术问题更难治。一个画面里如果出现了三种线宽、两种圆角、两种配色逻辑的素材哪怕每个单独看都不错整体也会像拼贴画。我现在对入库素材有一个强制的“风格检查”步骤把新素材和库里已有的素材拼在一张 1920×1080 的画布上缩放同一比例然后后退两步看整体。如果新素材明显抢眼或者明显单薄就得调整。调整方向通常是收敛统一线宽、统一圆角半径、统一饱和度。具体到参数上我的库固定在这样几组值描边宽度 2 像素48 像素档、圆角半径 2 像素、设备本体用两个明度层主色加一个 15% 暗的同色系做暗部、高光只用一条 1 像素的白色线条不信。这些数字没有权威依据纯粹是多年试下来最顺眼的组合你可以直接抄也可以按自己项目的整体风格定关键是要定下来并且写进文档。6.4 来源记录和授权留档这件事前期嫌麻烦后期救命。我的做法是在素材根目录放一个说明文件每个素材记录四项来源、授权类型、是否修改过、入库日期。格式不用很正式一个 Markdown 表格就行。| 文件名 | 来源 | 授权 | 修改 | 日期 | | dev_pump_centrifugal_run_64.svg | 自制 | 项目内使用 | - | 2024-03-11 | | ico_alarm_bell_32.svg | 开源图标库A | 可商用需署名 | 改色 | 2024-03-11 |项目交付或者换人接手的时候这张表能直接回答问题“这个东西能不能带走”。我见过因为没有来源记录交付前把所有来路不明的图标全部重画的案例两天时间白费。7. 素材库怎么维护才不至于半年后成一团乱麻7.1 用版本号而不是“最终版”“最终版2”素材库和代码一样需要版本管理只是因为多数人不用版本工具就得靠命名。我的命名是v主.次主版本表示整体风格改版比如统一改了线宽次版本表示新增或微调。文件名里带版本比如dev_valve_gate_run_64_v2.1.svg。同时在根目录维护一个CHANGELOG每次批量改动写一行改了什么、为什么改、影响了哪些文件。这一行文字在半年后回看价值极高尤其是“为什么改”这部分能防止你再次犯同一个错。7.2 预览列表让检索不靠记忆素材多了以后光看文件名想不起来长什么样得一个个打开看效率极低。解决办法是自动生成一张预览图把所有图标按分类排列缩放到统一尺寸拼成一张大图标上文件名。用脚本批量处理几十行代码的事每次素材更新后重新生成一次。有了这张图找素材从“打开十个文件看”变成“扫一眼大图”速度快十倍。而且这张图还能直观暴露风格不一致的问题——一眼就能看出哪个图标画风跑偏了。7.3 交接时的三样东西如果这个素材库要交给别人维护需要准备三样预览大图、命名与风格规范文档、来源授权表。少一样接手的人就得重新摸索一遍通常的结果是他不用你的库自己另起一套然后项目里出现两套风格。我自己踩过的最大的坑不是技术问题而是当年没写规范文档换项目后自己都忘了当时的线宽基准是多少只能靠量现存文件反推。从那以后规范文档变成了硬性交付物哪怕只有半页纸也必须有。最后分享一个我一直在用的小习惯每次做新项目第一件事不是画画面而是先花半天把素材库按这个项目的行业和配色调一遍调完再动手。这半天看起来是浪费实际上能省掉后面反复返工的时间。素材库这东西前期多花的时间后期会以几倍的效率还回来。
