工控画面里最容易出问题的往往不是变量绑定，而是素材。上周帮一个做水处理项目的朋友看界面，他把上位机截图发过来，逻辑都对，就是看着别扭:离心泵的图标是从某个通用 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 改色成本：一次主题切换的对比实验
我做过一次实际的对比。同一个罐体图标，一套是 PNG（64 像素，带透明背景），一套是 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 s | 2 倍内可用 |
| 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 交接时的三样东西
如果这个素材库要交给别人维护，需要准备三样：预览大图、命名与风格规范文档、来源授权表。少一样，接手的人就得重新摸索一遍，通常的结果是他不用你的库，自己另起一套，然后项目里出现两套风格。
我自己踩过的最大的坑不是技术问题，而是当年没写规范文档，换项目后自己都忘了当时的线宽基准是多少，只能靠量现存文件反推。从那以后规范文档变成了硬性交付物，哪怕只有半页纸，也必须有。
最后分享一个我一直在用的小习惯：每次做新项目，第一件事不是画画面，而是先花半天把素材库按这个项目的行业和配色调一遍，调完再动手。这半天看起来是浪费，实际上能省掉后面反复返工的时间。素材库这东西，前期多花的时间，后期会以几倍的效率还回来。
