企业官网建设流程全解析

组态画面这东西，做自控的朋友都懂：一个项目从头到尾，最耗时间的往往不是逻辑和点位，而是画图。尤其是楼宇自控和暖通专业，组合式空调、新风机、送排风机这些设备，几乎天天出现在画面上，可每做一个新项目就得重新画一遍，画完还总被业主嫌弃“太丑了”“不像实际设备”。我整理了一套专门针对组合式空调、新风机、送排风机的组态图库，格式就是png和gif，从工艺段拆分到动态效果都做了归类，用了好几个项目，效果挺稳，今天把里面的门道和实际用法系统地聊一遍，希望能帮到同行的朋友。

这套内容适合做组态画面的工程师、暖通自控的调试人员、以及那些刚入行还在为画图发愁的新人。先别急着下载一堆素材，你得先搞清楚一套好图库应该长什么样，png和gif到底怎么用，以及为什么你的画面总是不好看——问题往往不在你的美术能力，而在底层素材和工程逻辑。

1. 组态图库的价值与项目背景

1.1 为什么暖通设备图库是刚需

很多刚入行的朋友以为组态画面就是把设备画得像一点、好看一点，其实完全不是这么回事。组态画面是给运行人员看的，它的核心任务是让值班员一眼看懂当前设备的运行状态、故障报警、阀门开度、温度湿度这些信息。设备图形只是载体，真正值钱的是图形上面挂着的那些数据。

以组合式空调为例，一套完整的监控画面至少要包含：混风段、过滤段、表冷段、加热段、加湿段、风机段，每个段里又涉及到温度传感器、压差开关、水阀、风阀、变频器这些点位。你要是每次都从零开始画，光一个AHU的侧视图就得折腾半小时，画完还不一定符合工艺逻辑。图库的价值就在这里——把最常用的设备形态提前做好，把连接点、透明背景、状态切换这些都处理好，项目里直接拖进来用，改个颜色、接上变量就能跑。

这就像装修房子，你不必从烧砖开始，找一套靠谱的柜体板材，按尺寸裁切安装就行。组态图库就是那套“板材”，你得保证它规格统一、能切割、能拼接，而不是一堆风格各异的大理石。

用图库还有一个被忽视的好处：画面风格统一。一个项目里所有设备都用同一套图库，线条粗细一致、配色逻辑一致、视角一致，整个操作画面出来就是整齐的。混用网上乱七八糟的图片，单看每个都行，放一起就露馅，业主验收时一眼就能看出不专业。

1.2 这套图库适合谁、用在什么场合

这套图库主要面向的是暖通空调自控和楼宇自控项目。具体来说，组合式空调机组的图库用在净化车间空调系统、医院手术室恒温恒湿系统、办公楼宇的中央空调监控、地铁站通风空调系统这些场景；新风机组的图库多用于住宅小区的新风系统、学校教室新风系统、地下车库的通风系统；送排风机的图库更加通用，任何需要监视风机启停、手自动状态、故障报警、变频反馈的场合都用得上。

适合使用的平台也很广泛，主流的组态软件都能用。组态王、力控、WinCC、杰控这些老牌桌面组态软件，Web组态、IoT平台的网页组态系统，以及部分触摸屏组态软件，都对png和gif有兼容性。只要你的软件能接受图片控件、能设置透明色、能播放gif动画，这套素材就能直接复用。

需要提醒的是，如果你做的是DCS系统的组态画面，或者是某些比较封闭的专用组态环境，对图片格式和透明通道的支持可能有限，用之前最好先小范围测试一下。我最早在组态王里放png，就踩过透明背景变白的坑，后来摸索出了解决办法，这些后面细说。

2. 组合式空调、新风机、送排风机的图形工艺要点

2.1 组合式空调（AHU）图形怎么画才专业

组合式空调是暖通组态画面里最复杂、也最考验素材质量的设备。这设备的工程图形不是简简单单画个长方形就完事的，业内专业的画法一定有“段式结构”。何谓段式？就是从左到右按气流方向，把混风段、初效过滤段、表冷段、加热段、加湿段、风机段逐一表现出来，你能在图上一眼看清气流的流向和处理过程。

做图库时，组合式空调我一般给出两种版本：一种是整机图，适合总体概览画面里用，显示整机的启停、送回风温湿度、风机频率；另一种是拆分段的部件图，适合用在需要细分控制的画面里，每个功能段可以独立变色、独立闪烁报警。这就像CAD图里的块定义，你既要能整体引用，也要能局部编辑。

绘图细节上，要特别注意过滤段两边的压差表示。工程上画过滤网就是一条带筋的斜线或者细虚线组，两侧各画一个压差传感器的测点，运行人员看到这部分就知道要观察压差报警了。很多新手图库存在的问题，是把过滤段画成一堵墙，完全没有可读性。

还有表冷段和加热段的表达。表冷段一般用密集的波浪线或者一排小竖管表示盘管，加热段类似，但习惯上用暖色调来区分。如果图库里没有区分冷热盘管，画出来的系统图就少了工艺信息。别小看这些细节，业主方的工程师看图非常专业，你要是把表冷画成了加热，他们一眼就看得出来，轻则改图，重则影响验收印象。

2.2 新风机组与送排风机的图形表达差异

新风机组（PAU/MAU）和组合式空调长得像，但工艺上有重要差异。新风机没有回风，也就没有混风段，风路是单向的：新风入口、过滤段、表冷/加热段、风机段、送风出口。所以在图形表达上，新风机组的图不能简单地从空调图里删个回风管，而应该把箱体尺寸比例调整得更瘦长一些，强调“直通风路”的感觉。

这里有一个经验：图库里的新风机最好做出两种风阀状态图，一种是新风阀全开、排风阀关闭的正常运行模式，一种是风阀故障或冬季防冻的模式。做组态画面时，阀门的开度往往是实时联动的，你至少要在素材里给出阀门全开、全关、中间开度这三个状态图，配合脚本做平滑切换。全套图库里如果全是静态的阀门全开图，那画面做出来就生硬得很。

送风机和排风机相对简单，但也有讲究。送风机图通常用离心风机的侧视轮廓——蜗壳形状、进风口在侧边、出风口在顶部；排风机则用轴流风机的正视图——圆形筒体加叶片。这两个风机的形态差异，恰恰对应了工程上送风多用离心机组、排风多用轴流风机的常见配置。你要是把图画反了，运行人员看多了会形成错误的设备认知，调试时更容易出问题。

风机图形的动态表达也不能忽略。静止不动的风机图形不直观，工程惯例是给风机叶轮配上旋转动画，运行人员一看就知道风机在转，比看文字指示快得多。GIF格式在这一场景下就非常合适，后面会重点讲。

2.3 图库设计中的行业惯例与配色逻辑

组态图库不是美术创作，它的背后有一套约定俗成的工程语言。这套语言的核心是：颜色承载状态，形状承载设备，布局承载工艺。

先说颜色。图库里必须有一套严格的状态色规范：正常运行用绿色，停止用灰色，故障用红色闪烁，手自动切换用黄色标识，报警确认后的保持状态用橙色。这不是个人喜好，是行业共识，也是业主操作的肌肉记忆。一套图库里如果状态色不统一，比如有的设备停止用蓝色、有的用灰色，运行人员在紧急情况下会看错状态，这是安全隐患级别的错误。

设备本体的配色也要遵循“默认灰白、功能段用色区分冷暖”的原则。组合式空调的箱体外壳画成浅灰色，表冷段底色偏蓝，加热段底色偏红，加湿段用淡紫色或浅蓝色蒸汽符号。这样整个画面色彩有节奏感，也不至于花花绿绿影响监控。记住，组态画面的底色永远是深色为主，图库的颜色要能在深蓝或深灰背景下保持辨识度，这是画图时就要考虑到的。

视角问题也很关键。我的图库统一使用侧视视角，因为组合式空调的段式结构只有侧视才能完整表达。送排风机里面，送风机用侧视离心式，排风机用正视轴流式，这也是工程图纸最常见的表达习惯。一套图库里绝对不能今天侧视明天正视，那画面就彻底乱了套了。

3. PNG与GIF格式的选择：从工程角度看两张图

3.1 PNG：透明背景是组态画面的命根子

PNG格式在这套图库里是绝对的主力。原因很简单：它支持透明通道（Alpha通道），而且是无损压缩，图形边缘光滑，不会像JPG那样出现难看的锯齿和白底。组态画面大多数是深色背景，图片如果带了白色底框，直接就会被业主吐槽成“补丁”一样难看。

但PNG在组态软件里的应用有一个必须注意的坑：很多组态软件对PNG的透明通道支持并不完美。表现就是图片导入后透明区域变成纯白或者纯黑，有些还变成品红色。这不是图片文件坏了，是软件在解析Alpha通道时出的问题。

我的做法是：图库里每个设备图都额外提供一个“无透明通道、纯黑背景”的版本。在组态王这类软件里，你把纯黑背景的PNG导进去，然后在软件里设置黑色为透明色，这样比依赖PNG的Alpha通道更稳。这个方法我用了很多年，在WinCC和杰控里也能用，强烈建议大家试试。关于透明通道更详细的排查方案，后面专门有一节来说。

图库的PNG文件还要注意尺寸和位深。普通显示分辨率下，一张设备图控制在200乘200到600乘600像素之间就够了，太大会拖慢组态画面的加载速度；但如果你的项目上的是高清拼接大屏，图库最好额外准备一套2倍图，否则画面放大后会模糊。

3.2 GIF：动态状态为什么离不开GIF

GIF格式在这个行业里虽然老，但地位无法替代。原因在于它是少数能在几乎所有组态软件里稳定播放动画的格式。风扇旋转、水流动、蒸汽冒出、报警闪烁，这些动态效果用GIF做最简单——直接放一个gif图片控件，帧动画自己循环播放。

做风机旋转GIF时，我通常用1到2个风机的正帧和反帧，做成4帧循环。转速不能太快，运行人员只要看到在转就行，没必要搞得跟风扇实物一样快。一个经验参数：4帧循环，每帧间隔控制在80到120毫秒，做出来的旋转速度比较自然。帧数太多会导致文件体积大，在远程访问组态画面时会严重拖慢加载速度。

GIF的256色调色板是天然限制，做动态图时要避免用渐变色。风机叶轮用两种灰色就够了，叶片转起来的视觉效果靠帧切换实现，而不是靠色彩渐变。我见过有人用真彩色软件做了个渐变风机的GIF，结果转出来色彩断层得非常厉害，这在工业画面上是不允许出现的。

还需要注意GIF动画在组态软件里的“心跳”问题。有些组态软件在画面不刷新时会把GIF冻结，运行时会有卡顿感。解决方法是把GIF帧数控制到最少，同时在软件里设置该控件始终刷新。另外，别让一个画面上同时跑超过5个GIF动画，尤其是Web组态，浏览器性能会明显下降。

3.3 格式选型的工程决策表

整理一个我实际用的格式选择逻辑。这个表格是我做了这么多年项目后总结下来的，直接照着选就行：

看到这个表格你可能会问：既然SVG这么好，为什么图库主力还用PNG和GIF？答案很简单，兼容性。你手里的项目可能用组态王，也可能用别人定制的Web组态，SVG在一些老组态环境里导入后容易变形、丢图层，而PNG和GIF是“到哪都能用”的万能格式。做图库首先要保证普适性，其次才谈效果。

关于BMP我多说一句，很多工业现场的触摸屏和老的监控主机只支持BMP格式，且不支持透明设置。我的图库里专门有一个“BMP备用”文件夹，都是纯黑底的BMP图。不要等到现场才发现格式不支持，那会把你逼到拿画图板重画图的地步。

4. 实操：把图库真正接入组态项目

4.1 图库文件的管理规范

一套图库好不好用，文件管理占了很大权重。我见过太多人把几十上百个图片随手堆在一个文件夹里，找一张图要翻半天，最后干脆重新画一张。图库再全，没有规范的管理等于零。

我的图库目录结构是三层：第一层按项目类型分，比如暖通空调、给排水、电气动力；第二层按设备类型分，组合式空调、新风机组、送风机、排风机、水泵、冷却塔；第三层再按图片用途分，静态图、动态图、报警图、备用BMP图。这样哪怕图库里存了上千个文件，找起来也是清晰明确的。

文件命名也得讲究。推荐格式是“设备类型—部件/状态—编号”，比如“AHU_整机_01.png”“SF_离心风机_静.png”“EF_轴流风机_动.gif”。文件夹命名和文件名都不要用中文特殊字符，原因很简单：有些工控机上的组态软件对中文路径支持不好，在Web服务器上更是可能乱码，直接用拼音或英文缩写是最稳妥的。

文件名里的编号是防重用的关键。同一类设备有多个图形变体时，用序号区分，改动一张图时别覆盖原文件，新存一个编号。这样项目多了以后你可以追溯哪个图用了哪个版本，不会出现改坏了找不回原图的尴尬。

4.2 常见组态软件中的接入方式

先说组态王。组态王里有图库管理器，你可以把png图片导入自定义图库，也可以直接在画面上插入图片控件。我的建议是导入图库管理器，因为这样可以复用图库的连接点定义。把图片拖到画面上之后，双击图片进入动画连接，把对应的变量关联上即可。组态王的动画连接里，图片的“显隐”功能依赖图库精灵的属性，如果你把图片当普通控件用，就只能做整体显隐，没法做局部变色。

WinCC的做法又不一样。WinCC的画面对象里有一个“图形对象”或者直接插入图片文件，你可以在对象属性里关联变量，通过变量变化切换图片。在WinCC里用GIF动画要注意，老版本WinCC对GIF的支持比较弱，建议用多状态图片切换代替：把一个风机旋转周期拆成4到6帧静态图，用变量或脚本循环切换对象，效果不输GIF，而且更可控。

Web组态平台上就简单了，直接把png文件放到项目的images目录下，用img标签引用。透明背景天然支持，GIF动画浏览器自己会播放。但要特别注意图片的文件大小：Web组态是通过网络传输图片的，单张超过1M就会明显卡。我的图库里所有Web用图都经过压缩处理，尺寸控制在300KB以内，换来的加载速度是质变。

接入方式虽然不同，但底层逻辑一样：静态图挂变量显示状态，动态图用动画表现运行逻辑。你只要把图库素材准备好，剩下的就是软件操作问题了。

4.3 二次改图与动画制作的常用技巧

再好的图库也不可能百分百匹配现场，掌握改图的技巧能让你事半功倍。先说最常用的换色。用Photoshop打开PNG图片，用“颜色替换工具”或者“色相/饱和度”调整图层，可以把设备本体的颜色整体替换。记住一个原则：改颜色时不要用“油漆桶”直接涂，那样会破坏边缘的抗锯齿，导致图形发毛边。正确做法是选中颜色范围后调整色相，保持边缘过渡自然。

抠图也是高频操作。有些现场照片或者客户提供的PDF图纸，需要转成组态可用的透明素材。我的经验是先用钢笔工具把轮廓抠出来，然后强制转换为单色剪影，再去掉多余的杂边。组态画面上的设备图不需要太多细节，轮廓清晰、色块干净就是合格。

做GIF动画不建议在Photoshop里一帧一帧地画。更好用的办法是：用Flash或者Animate软件做帧动画，导出GIF；或者用专门的GIF工具从视频片段提取帧。做风机旋转动画时，我通常直接旋转叶轮图层，每隔15度保存一帧，4到6帧就够用。帧间隔统一，最后导出时选择“不抖动”模式，色彩过渡会干净很多。

还有个小技巧：给图库里的静态图和动态图做一套“暗夜模式”。有些项目的组态画面切换日间夜间显示，夜间模式下背景更深、设备图需要降低亮度。做图库时提前做好一套低亮度版本的图片，比现场用脚本调整要省事得多，也不会影响画面的整体观感。

5. 组态画面用图排障实录：常见问题挨个说

5.1 透明背景变成白底或黑块

这个问题我在组态王项目里遇到得最多。表现是图片导入后，原来透明的部分全部变成了白色方块，把整个画面的底色都挡住了。原因前面提过，组态软件对PNG的Alpha通道解析不到位。

解决的兵器是“透明色方案”。分两步走：第一，把PNG用工具转成带纯黑底的版本；第二，进组态软件，找到图片控件或画面背景的属性，把透明色设为黑色。这样出来的效果和真正的透明背景几乎一样。WinCC里叫“透明颜色”，组态王里在“图片属性—显示—透明”中设置，Web组态一般不用管，浏览器原生支持。

还有一种情况是PNG本身没问题，但组态软件的“图片格式”设置为了低色彩模式，比如256色或者16位色，导致含透明通道的图片被强行降级。遇到这个，去软件的画面属性里把显示色彩调成真彩色32位，透明就恢复了。如果现场主机显卡只支持16位色，那只能改用透明色方案，别的没辙。

5.2 图片发灰、变色、失真

图库里图片单独看很正常，放进组态画面后颜色发灰发暗，这大概率是色彩空间的问题。现在很多图片处理软件默认导出sRGB，但组态软件可能按Windows的旧色彩管理来渲染，导致整体偏灰。解决办法很简单：在Photoshop里“编辑—转换为配置文件”，把图片转为“显示器RGB”或“sRGB IEC61966-2.1”，重新导出就正常了。

失真问题多出现在GIF转PNG时。有时候你在网上找到一张不错的动态图，想把它改成静态PNG用，直接把GIF里的某一帧截出来保存，结果发现图片上有明显的色斑和横条。这是因为GIF是256色调色板，直接截帧会保留调色板的“后遗症”。正确做法是新建一个PNG文件，把GIF的某一帧复制粘贴过来，在新文件里重新建立颜色信息，再手动清理色斑。

还有一个小众但实际的情况：在Web组态里，PNG图片如果超过一定尺寸，浏览器可能会自动压缩导致失真。解决方法是CSS里强制设定图片的宽高，或者在服务器端配置图片不压缩。这个坑不常见，但遇到了会让人排查半天。

5.3 风机动画不转、转速不对

GIF动画在组态软件里不动，是高频问题。首先要区分是播放器不识别还是图片本身有问题。把GIF用浏览器打开，如果浏览器里转动，说明GIF文件正常，问题在组态软件的控件上。WinCC老版本需要用“画面窗口”或者“OLE控件”嵌入，直接放图片控件是播放不了的。组态王有些版本需要勾选“播放GIF动画”选项，具体位置在画面属性里，不同版本略有差异。

转速不匹配是另一个常见问题。GIF的帧间隔设置得太快，动画看起来像电风扇高速旋转，反而看不清状态；太慢，看起来像卡住了。我的经验值前面提过：4帧循环，每帧间隔100毫秒左右，出来的视觉效果是缓慢匀速旋转，正好适合监控画面。如果实际运行觉得转速不合适，用GIF工具批量调整帧延迟就行，不用重新画。

还有一种情况是Web组态中GIF动画第一帧加载慢。GIF文件的头部信息如果不包含全局颜色表，浏览器会先显示灰色再加载颜色，观感很差。导出GIF时务必选择“保存全局颜色表”，这样首帧加载就正常。

5.4 图库混用导致画面风格不统一

画面风格不统一这个问题的隐蔽性很强，因为单个图片都“不难看”，但放在一起就是违和。具体表现有：有的设备是粗黑描边，有的是细灰描边；有的设备有投影，有的没有；有的偏写实，有的偏简笔。这种问题在验收时最容易被挑刺，但恰恰是最难返工的——得把所有图片全部替换一遍。

所以选图库时必须坚持“成套使用”原则。判断一套图库是否成套，先看三个细节：描边粗细是否统一、阴影方向和强度是否一致、状态颜色（启停故障）定义是否相同。这三个点全部满足，基本可以放心混用；有一个不满足，坚决不混合。

我自己用的这套图库，在最初整理时就定死了规则：线宽1像素、无投影、设备外壳统一浅灰、故障闪烁统一红色。后来加新图时，即使换了设计工具，也要对照旧图逐项校准，保证视觉一致。这件事靠的是纪律，不是技术。

6. 组态图库的选型、维护与长期价值

6.1 怎么判断一套图库好不好用

很多人找图库只看“全不全”，我主张先看“规不规范”。一套图库哪怕只有10个设备，但每个设备的拆分状态都做齐了、格式也正、透明背景干净，那它就是一套好图库。相反，一个文件夹里塞了500张素材，但视角混乱、状态缺失、格式五花八门，你用了就知道有多痛苦。

判断具体标准我列几个，拿去对照验证：设备图有没有整机和拆分段两套；静态图和动态图是否分开保存；是不是统一了透明背景方案；有没有备用BMP格式；naming规则是否统一。这几条都符合，说明图库的创建者自己是做工程的，不是随便从网上扒图的。按这个标准筛选，你踩坑的概率能降低八成。

还要看授权问题。商用项目里用图库素材，如果来源不明，后期可能有版权麻烦。自己整理、自己画的图库最踏实，哪怕画得糙一点也是干净的原创。我的图库中凡是参考了外部资料的，都会二次重绘，确保没有版权隐患。

6.2 图库是长期工程资产，不是一次性消耗品

踩过几次坑之后我有个很深的体会：图库这种东西，真的不是做完了扔到网盘就完事。每一次项目做下来，总会有新的设备类型、新的客户要求，我的习惯是每个项目结束后花半天时间，把画面里新画的设备图归类整理进图库，同步更新文件清单。这样积累两三年后，你再接什么项目几乎都能找到现成素材，新项目画图时间能省下一半以上。

整理过程中也别忘了维护多版本。同一个设备，不同项目可能用不同配色，我在图库里会有“标准版”和“变体版”，变体版单独存目录，不混放。这样既保持了标准图库的整洁，又保留了定制化案例备查。

这套图库后续还可以继续扩展的方向，我个人已经在着手了：一是按行业细分，比如洁净室专用的层流送风、手术室恒温恒湿空调的建筑设备图；二是做一套冷热源系统的图库，把冷水机组、冷却塔、水泵、板式换热器都补上；三是给Web组态做一个SVG动态版本。做图库这件事，越往后越觉得价值大，因为你每投入一小时，后续省下的是十倍百倍的画图时间。