3、布局与导航原则：黄金法则、F型与Z型视觉流、导航结构设计、信息层级
各位工程师，咱们今天聊聊HMI的布局和导航。说实话，我见过太多SCADA界面，功能堆得满满当当，但操作员一上手就懵。为什么？布局乱了，导航迷了。
一个好的布局，能让操作员在紧急情况下，0.5秒内找到关键按钮。这不是夸张，是我在多个项目中验证过的。今天我把压箱底的经验掏出来，咱们一条条说。
3.1 黄金法则：少即是多，多即是乱
我刚开始做HMI时，恨不得把所有数据都塞进一屏。结果呢？操作员反馈说「眼花了，找不到重点」。后来我悟了——黄金法则的核心是「信息减负」。
黄金法则三原则：
- 80/20法则：80%的操作集中在20%的功能上。把这20%放在最显眼的位置。
- 3次点击原则：任何关键操作，最多3次点击必须完成。超过3次，操作员会烦躁。
- 一致性原则：相同功能在不同页面，位置、颜色、交互方式必须一致。
举个例子。我在一个电厂项目中，把报警确认按钮从右上角挪到了屏幕中央偏下的位置。为什么？因为操作员右手握鼠标，左手按键盘，中央偏下是手部自然落点。改完之后，报警响应时间缩短了40%。
我的小技巧： 每次设计完布局，自己模拟操作10次。如果哪次犹豫了，说明那个位置不对。
3.2 F型与Z型视觉流：眼睛是怎么扫屏的
你想想看，操作员看屏幕时，眼睛不是均匀扫过的。有规律可循。
F型视觉流，适合信息密集的监控页面。眼睛先从左到右扫第一行，然后往下移一点，再从左到右扫第二行，但扫的范围短一些。最后垂直往下扫。说白了，像写字母F。
我建议：把最重要的状态信息放在左上角，次要的放在右侧，最不重要的放在底部。我在一个水处理项目中，把总流量、总压力放在左上角，操作员反馈「一眼就能看到全局」。
Z型视觉流，适合操作引导型页面。眼睛从左上角开始，沿对角线扫到右下角。适合流程图的展示。
嗯，这里要注意：不要混用两种视觉流。一个页面要么用F型，要么用Z型。混了，操作员会晕。
避坑指南： 我曾经在一个石化项目中，把报警列表放在右下角。结果操作员总是漏看。后来改成左上角，漏报率直接降为零。记住：报警永远放在视觉流的起点。
3.3 导航结构设计：让操作员不迷路
导航结构，说白了就是「我在哪，我能去哪，我怎么回来」。我见过最差的导航，是那种「点进去就回不来」的。
常见的导航结构有三种：
| 类型 | 适用场景 | 我的建议 |
|---|---|---|
| 树形导航 | 设备层级多，如变电站 | 深度不超过3层，否则操作员会迷失 |
| 标签式导航 | 功能模块平行，如多个工艺段 | 标签数量不超过7个，人脑记不住更多 |
| 面包屑导航 | 需要回溯历史路径 | 配合树形导航使用，效果最佳 |
我个人习惯用树形+面包屑的组合。比如一个污水处理厂，导航结构是这样的：
首页 > 生化处理段 > 曝气池 > 鼓风机控制
操作员随时知道自己在哪，也能一键回到首页。我在一个项目中，因为没有面包屑，操作员点错了页面，花了3分钟才找回原位置。从那以后，面包屑成了我的标配。
我的经验： 导航按钮不要用纯文字，加个小图标。人脑对图标的识别速度比文字快60%。
3.4 信息层级：重要的事说三遍，但位置只放一次
信息层级，就是给信息排个优先级。我把它分成三级：
- 一级信息（紧急）：报警、停机、急停。必须放在视觉流起点，用红色或橙色高亮。
- 二级信息（重要）：实时数据、趋势图、关键参数。放在屏幕中央或右侧。
- 三级信息（参考）：历史数据、报表、配置。放在底部或二级页面。
为什么会这样分？因为操作员在紧急情况下，只会看一级信息。二级信息是日常监控用的。三级信息是事后分析用的。混在一起，等于没有层级。
我记得在一个钢铁厂项目中，操作员抱怨「找停机按钮要翻两页」。我一看，急停按钮和报表按钮放在一起。这怎么行？我立刻把急停按钮单独拎出来，放在屏幕左上角，尺寸放大到其他按钮的2倍。改完后，操作员说「这才对嘛」。
信息层级设计口诀：
左上角放报警，中央放数据，底部放配置。
红色是危险，绿色是正常，黄色是警告。
大按钮是急停，小按钮是设置，隐藏的是不常用的。
最后说一句：布局和导航，不是一次就能定死的。我建议做完原型后，找3-5个操作员做可用性测试。看他们操作时哪里犹豫、哪里点错，那就是你改进的方向。
嗯，今天就聊到这儿。下一章咱们讲色彩与视觉编码，那可是让界面「活起来」的关键。