4、UI/UX设计规范：工业HMI配色原则、字体选择与触控尺寸
好，咱们进入第四讲。这一章我打算聊聊UI/UX设计规范里最容易被忽视、但又最要命的三件事：配色、字体、触控尺寸。
你可能觉得配色不就是选几个好看的颜色吗？字体随便用个黑体不就行了？触控尺寸？屏幕够大就行？
嗯，我以前也这么想。直到有一次，我在一个钢厂项目里，操作工在强光下盯着屏幕看了八小时，眼睛都快瞎了，还按错了好几次按钮……从那以后，我再也不敢小看这些“基础规范”了。
4.1 工业HMI配色原则：安全色与低饱和度
工业HMI的配色，跟做手机App完全是两码事。手机App可以花里胡哨，工业界面不行。为什么？因为操作工要长时间盯着看，而且现场环境往往很恶劣——强光、震动、灰尘、甚至油污。
核心原则就两条：安全色优先，饱和度压低。
4.1.1 安全色：别让颜色产生歧义
工业现场有国际通用的安全色标准，比如ISO 3864或者GB 2893。这些颜色是有“语义”的，不能乱用。
| 颜色 | 含义 | 典型用途 |
|---|---|---|
| 红色 | 危险/紧急/停止 | 急停按钮、报警状态、故障指示 |
| 黄色 | 警告/注意 | 预警状态、边界条件、维护提示 |
| 绿色 | 安全/正常/运行 | 设备运行中、状态正常、允许操作 |
| 蓝色 | 强制/指令 | 必须执行的操作、安全标识 |
| 黑色/白色/灰色 | 中性/背景/文字 | 界面背景、文字、分割线 |
4.1.2 低饱和度：保护操作工的眼睛
高饱和度的颜色，比如纯红(#FF0000)、纯蓝(#0000FF)，在屏幕上非常刺眼。操作工盯久了，眼睛会疲劳、流泪，甚至出现色觉偏差。
我个人习惯的做法是：把安全色的饱和度降低30%-50%。
举个例子：
- 红色：不用#FF0000，改用#CC3333或#B22222
- 绿色：不用#00FF00，改用#339933或#2E8B57
- 黄色：不用#FFFF00，改用#CCAA00或#DAA520
这样既保留了颜色的语义，又不会刺眼。说白了，就是让颜色“柔和”一点。
4.2 字体选择与可读性
字体这件事，我踩过不少坑。有一次在石化项目里，用了微软雅黑，结果在嵌入式Linux系统上显示不全，部分字符变成了方框。嗯，从那以后，我养成了几个习惯。
4.2.1 字体类型：无衬线字体是首选
工业HMI屏幕分辨率通常不高（很多还是1024x768甚至800x600），而且观看距离远。衬线字体（比如宋体、Times New Roman）的笔画粗细变化，在低分辨率下会糊成一团。
我推荐的无衬线字体：
- 中文： 思源黑体（Source Han Sans）、Noto Sans CJK、微软雅黑（仅限Windows平台）
- 英文/数字： Arial、Helvetica、Roboto、DIN Pro（工业感很强）
为什么不用宋体？因为宋体在像素点阵下，横细竖粗，小字号时横线几乎看不见。操作工看数据，最怕的就是“看不清”。
4.2.2 字号与观看距离
字号不是随便定的。我一般按这个经验公式来算：
最小字号(px) = 观看距离(mm) / 150举个例子：操作工距离屏幕大约700mm，那么最小字号就是700/150 ≈ 4.7mm。换算成像素（按96DPI），大约是18px。
实际项目中我的推荐值：
| 用途 | 推荐字号(px) | 说明 |
|---|---|---|
| 关键数据/报警 | 24-36px | 一眼就能看到 |
| 普通参数/标签 | 18-24px | 正常阅读 |
| 辅助信息/单位 | 14-16px | 不能小于14px |
4.2.3 字重与对比度
工业HMI里，Regular（常规）和Bold（粗体）就够用了。Light（细体）和Thin（极细）在工业场景下就是灾难——屏幕反光一照，字就消失了。
另外，文字与背景的对比度至少要达到4.5:1（WCAG AA标准）。我习惯用5:1以上，这样在强光下也能看清。
4.3 触控交互尺寸标准：最小48px
这一节我要重点讲。很多做惯了PC软件的人，做HMI时直接把按钮做成20px、30px，觉得挺精致。结果到了现场，操作工戴着手套，怎么戳都戳不准。
核心标准：触控目标最小48px（约9mm）。
4.3.1 为什么是48px？
这个数字不是拍脑袋定的。它来自人体工程学的研究：
- 成年人食指指尖宽度约10-14mm
- 戴手套时，有效触控面积会增大到12-16mm
- 触控误差范围约±3mm
所以，48px（约9mm）是最低下限。我个人建议做到56-64px（约10-12mm），这样操作工戴着手套也能轻松点击。
4.3.2 触控间距：别让按钮“打架”
除了按钮本身的大小，按钮之间的间距也很重要。两个按钮贴在一起，操作工一戳，可能同时触发两个。
我推荐的间距标准：
- 相邻按钮间距：至少8px（约1.5mm）
- 推荐间距：12-16px（约2-3mm）
- 危险按钮（如急停）周围：留出20px以上的空白区域
4.3.3 触控反馈：让操作工知道“按到了”
工业HMI的触控反馈，不能只靠视觉。因为现场噪音大，操作工可能听不到声音；光线强，可能看不清颜色变化。
我建议做三重反馈：
- 视觉反馈： 按钮按下时，颜色变化或凹陷效果（变化时间0.1-0.2秒）
- 触觉反馈： 如果硬件支持，加一个短震动（约50ms）
- 状态反馈： 按钮按下后，显示“已执行”或“处理中”的状态文字
4.4 综合示例：一个标准的HMI按钮
说了这么多，咱们看一个实际例子。这是一个“启动”按钮的设计规范：
/* 启动按钮样式 */
.btn-start {
width: 64px; /* 触控尺寸，大于48px */
height: 64px;
background-color: #339933; /* 低饱和度绿色 */
color: #FFFFFF; /* 白色文字 */
font-family: 'Source Han Sans', 'Arial', sans-serif;
font-size: 20px; /* 字号适中 */
font-weight: bold; /* 粗体，提高可读性 */
border: none;
border-radius: 8px; /* 圆角，避免尖锐边缘 */
box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 轻微阴影，增加立体感 */
cursor: pointer;
transition: background-color 0.15s; /* 快速反馈 */
}
/* 按下状态 */
.btn-start:active {
background-color: #267326; /* 颜色变深，表示已按下 */
transform: scale(0.95); /* 轻微缩小，模拟物理按钮 */
}
这个按钮，64px大小，绿色低饱和度，白色粗体文字，按下有反馈。操作工戴着手套也能准确点击，看久了眼睛也不累。
好了，这一章的内容就这些。配色、字体、触控尺寸，这三件事看起来简单，但做扎实了，你的HMI就成功了一半。下一章咱们聊聊交互流程设计，到时候我会讲一个让我印象深刻的“误操作导致整条产线停机”的案例。