4、界面布局规范：黄金分割与栅格系统、信息层级与视觉流、安全区域与触摸热区
好，咱们直接进入正题。界面布局这东西，说白了就是「把信息摆对地方」。我见过太多HMI项目，功能全做对了，但操作员就是觉得「别扭」。为什么？布局出了问题。
这一章，我重点讲三个核心：黄金分割与栅格系统、信息层级与视觉流、安全区域与触摸热区。这三个东西搞定了，你的界面至少能打80分。
4.1 黄金分割与栅格系统
先说说黄金分割。0.618这个比例，在工业HMI里同样适用。我个人习惯把主操作区放在屏幕的0.618位置，也就是从左往右大约61.8%的地方。为什么？因为人眼扫视屏幕时，这个位置最容易聚焦。
我在项目中遇到过一件事：一个老工程师坚持要把急停按钮放在屏幕正中间，说「显眼」。结果操作员反馈说，紧急情况下反而找不到按钮——因为中间区域信息太多，视觉上「淹」掉了。后来我按黄金分割比例，把急停按钮放在屏幕右下角约0.382的位置，配合红色高亮，误操作率直接降了30%。
栅格系统呢？我建议用12列栅格。为什么是12？因为12能被2、3、4、6整除，布局灵活。举个例子：
/* 12列栅格系统示例 */
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px; /* 我习惯用8px的间距，太小了手指容易误触 */
}
/* 主监控区占8列，报警区占4列 */
.main-monitor {
grid-column: span 8;
}
.alarm-area {
grid-column: span 4;
}
你想想看，如果不用栅格，全靠手动拖拽，那每个屏幕的间距、对齐方式都不一样。后期维护起来，简直是一场噩梦。
4.2 信息层级与视觉流
信息层级，说白了就是「什么最重要，什么其次，什么可以忽略」。工业HMI里，信息层级通常分三级：
- 一级信息： 报警、急停、关键参数（如温度、压力）。必须一眼看到。
- 二级信息： 运行状态、趋势图、历史数据。需要时能找到。
- 三级信息： 系统设置、日志、帮助文档。不常用，但要有入口。
视觉流怎么设计？我总结了一个「F型扫描法则」：
- 左上角放品牌或系统名称（不重要，但要有）
- 顶部中间放当前页面标题（让操作员知道自己在哪）
- 左侧放导航或菜单（符合从左到右的阅读习惯）
- 中间偏上放核心数据（一级信息）
- 右侧或底部放次要信息（二级、三级信息）
我曾经在一个化工项目中，把报警信息放在屏幕最底部。结果操作员说：「我每次都要低头看，脖子都酸了。」后来我把报警信息移到屏幕顶部，用红色闪烁条显示，问题就解决了。嗯，这里要注意：报警信息永远不要放在视线死角。
4.3 安全区域与触摸热区
安全区域，指的是屏幕边缘要留出一定的空白。为什么？因为很多工业屏是嵌入安装的，边缘可能被边框遮挡。我一般留10mm的安全区域，也就是大约40px（按96dpi算）。
触摸热区呢？这是个大坑。很多新手设计师把按钮做得很小，觉得「精致」。但工业现场不一样——操作员可能戴着手套，手指比平时粗一圈。我建议：
| 触摸类型 | 最小尺寸 | 推荐尺寸 | 间距 |
|---|---|---|---|
| 手指触摸（裸手） | 10mm × 10mm | 14mm × 14mm | ≥ 4mm |
| 戴手套触摸 | 14mm × 14mm | 18mm × 18mm | ≥ 6mm |
| 笔触（电阻屏） | 6mm × 6mm | 8mm × 8mm | ≥ 2mm |
我个人习惯，所有按钮至少做到16mm × 16mm。为什么？因为现场环境复杂，操作员可能手抖、可能着急、可能光线不好。大一点，容错率就高一点。
最后说一个我踩过的坑。有一次做矿山项目的HMI，我把「确认」按钮放在屏幕最右下角。结果现场安装时，屏幕边框正好压住了那个区域，操作员每次都要使劲戳才能点到。后来我学乖了：所有关键按钮，离屏幕边缘至少留出15mm的安全距离。
嗯，这一章的内容就这些。布局规范看起来是「死规矩」，但每个规矩背后都有血的教训。你想想看，如果操作员因为按钮太小而误操作，导致设备停机，那损失可不是几行代码能弥补的。