3、工控界面色彩与布局：工业环境下的色彩心理学、布局规范与栅格系统、字体与图标选择
各位同学，咱们今天聊点实在的。工控界面不像手机App，用户不会因为界面好看就多夸你两句。但界面要是做得烂，操作工误操作了，那可是要出事故的。我这些年调试过的HMI少说也有上百套，踩过的坑真不少。今天就把色彩、布局、字体这些门道，掰开了跟你们讲讲。
3.1 工业环境下的色彩心理学
先说说颜色。很多人觉得颜色就是好看不好看的事。其实不是。在工业现场，颜色是信息，是警告，是保命符。
3.1.1 为什么工业界面不能花里胡哨？
我见过一个刚入行的工程师，把监控界面做得跟游戏似的，五彩斑斓。结果呢？操作工看了十分钟就眼花了，差点把阀门开反。工业现场的光线条件很复杂——有的车间昏暗，有的强光直射，有的屏幕反光严重。你想想看，在这种环境下，颜色用多了就是灾难。
我个人习惯，工控界面主色调不超过三种。背景色、内容色、警示色。够了。
| 颜色 | 工业含义 | 使用场景 |
|---|---|---|
| 红色 | 危险、报警、停止 | 紧急停机、故障指示、超限报警 |
| 黄色 | 警告、注意、待机 | 参数接近阈值、设备待机、需要确认 |
| 绿色 | 正常、运行、通过 | 设备运行中、状态正常、数据在范围内 |
| 蓝色 | 信息、提示、冷却 | 系统信息、操作提示、冷却系统状态 |
| 灰色 | 禁用、离线、不可用 | 设备停机、功能禁用、数据无效 |
核心原则：红色只能用于报警和急停。千万别把红色用在正常状态上。我在一个项目中见过有人把"运行中"标成红色，结果操作工看到就慌了，直接按了急停。生产线停了半小时，损失不小。
3.1.2 色彩搭配的实战技巧
背景色我建议用深灰或深蓝。为什么？因为工业屏幕长期亮着，浅色背景太刺眼。操作工盯八个小时，眼睛受不了。深色背景配合亮色文字，对比度好，看着也舒服。
文字和背景的对比度，至少要达到4.5:1。这是WCAG的标准，但工业环境我建议更高，7:1以上。你想想看，车间里灰尘大、光线杂，对比度不够根本看不清。
我的小技巧：用HSL调色。饱和度控制在30%-60%之间，亮度控制在40%-70%。这样颜色既醒目又不刺眼。我曾经用纯红色做报警，结果在强光下根本看不清，后来改成暗红色加白色边框，效果好了很多。
3.2 布局规范与栅格系统
布局这事，说白了就是让操作工一眼能找到他想要的信息。工业界面不是艺术品，是工具。工具就得顺手。
3.2.1 工控界面的黄金布局
我总结了一个"三区布局法"，用了十几年，屡试不爽：
- 顶部区域（10%）：系统标题、时间、报警汇总、用户信息。这些是全局信息，操作工抬头就能看到。
- 中间区域（70%）：核心监控内容。流程图、数据仪表、趋势曲线。这是操作工最常看的地方。
- 底部区域（20%）：操作按钮、导航菜单、状态栏。操作工需要操作的时候，手自然就伸过去了。
嗯，这里要注意。操作按钮一定要放在底部或右侧。为什么？因为工业触摸屏大多是水平放置或者稍微倾斜，操作工的手自然下垂，放在底部最省力。你如果把按钮放在顶部，操作工得抬手去够，一天下来胳膊都酸了。
3.2.2 栅格系统怎么用？
栅格系统不是网页设计的专利。工控界面同样需要。我建议用12列栅格，每个模块占2列、3列或4列。这样排列整齐，视觉上不杂乱。
/* 工控界面栅格系统示例 */
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
padding: 8px;
}
/* 仪表盘占4列 */
.gauge-panel {
grid-column: span 4;
}
/* 报警列表占6列 */
.alarm-list {
grid-column: span 6;
}
/* 操作按钮占2列 */
.control-button {
grid-column: span 2;
}间距我建议用8px的倍数。8px、16px、24px、32px。为什么？因为工业屏幕分辨率通常不高，间距太小显得拥挤，太大又浪费空间。8px的倍数好计算，也好对齐。
避坑指南：我曾经在一个项目中，把所有模块都塞进一个页面，间距只有4px。结果操作工点按钮的时候，老是点到旁边的。后来改成16px间距，误触率直接降了80%。间距不是浪费，是安全。
3.3 字体与图标选择
字体和图标，看着是小细节，其实影响很大。操作工年纪普遍偏大，眼神不好使。你选个花体字，人家根本看不清。
3.3.1 字体怎么选？
工业界面，字体就三个要求：清晰、等宽、无衬线。
- 无衬线字体：比如Arial、微软雅黑、思源黑体。衬线字体在低分辨率屏幕上笔画太细，看不清。
- 等宽字体：数字和字母宽度一致，对齐好看。比如Consolas、Courier New。数据显示的时候，等宽字体不会忽宽忽窄。
- 字号：正文至少14px，重要数据至少18px，报警信息至少24px。我见过用12px字体的，操作工得凑到屏幕前看，太危险了。
我的经验：中文用微软雅黑，英文数字用Arial。这两个字体在工业触摸屏上兼容性最好。别用宋体，也别用楷体。宋体在低分辨率下笔画粘连，楷体太花哨，不适合工业场景。
3.3.2 图标设计的门道
图标在工控界面里，是用来快速传达信息的。操作工不需要读文字，看一眼图标就知道什么意思。
图标设计有几个原则：
- 简洁明了：一个图标只表达一个意思。别搞复杂的组合图标。
- 符合直觉：齿轮代表设置，扳手代表维护，喇叭代表报警。别自己发明符号，操作工看不懂。
- 大小统一：所有图标放在同一尺寸的容器里，比如32x32或48x48。大小不一看着乱。
- 带文字标签：图标下面一定要有文字。别指望操作工能记住所有图标的意思。我见过一个界面，图标没文字，新来的操作工完全懵了。
推荐图标库：Font Awesome和Material Icons。这两个库的图标风格统一，而且都是矢量图，缩放不失真。我一般用Font Awesome的Solid风格，线条粗，在工业屏幕上看得清楚。
3.3.3 字体与图标的搭配
字体和图标要协调。图标线条粗，字体笔画也要粗。图标风格圆润，字体也要圆润。别搞混搭，看着不专业。
举个例子：你用微软雅黑字体，图标就用Material Icons的圆润风格。你用Arial字体，图标就用Font Awesome的硬朗风格。这样视觉上统一，操作工看着舒服。
避坑指南：我曾经在一个项目中，用了自定义图标。结果换了一台触摸屏，图标全显示不出来。后来我学乖了，只用标准字体图标库。兼容性好，省心。
好了，这一章的内容就这些。色彩、布局、字体图标，这三样是工控界面的基本功。你把这三点做好了，界面至少及格了。下一章咱们聊聊数据可视化，怎么把枯燥的数据变成直观的图表。到时候见。