三、界面布局与信息架构：黄金分割与网格系统、信息层级与视觉流、导航设计模式

好，咱们接着聊布局。说实话，PIS系统的界面布局，我踩过的坑比走过的路还多。早期做地铁PIS项目时，我总觉得把信息堆上去就行，结果现场测试时，乘客根本找不到下一班车的时间。嗯，那会儿我才真正意识到——布局不是画画，是信息架构。

3.1 黄金分割与网格系统

先说说黄金分割。0.618这个比例，在PIS界面上特别好用。我个人习惯把主信息区放在黄金分割点上。比如一个1920x1080的屏幕，主显示区放在约1185像素的位置，视觉重心最舒服。

网格系统呢？说白了就是给信息「画格子」。我在项目中用过12列网格，也用过24列。对于PIS这种信息密集型的界面，我推荐用8px为基准的网格系统。为什么是8px？因为大多数屏幕分辨率都能被8整除，对齐起来特别省心。

/* 一个简单的8px网格系统示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  padding: 8px;
}

.info-card {
  grid-column: span 4; /* 占4列，约33.33%宽度 */
  padding: 16px; /* 2个网格单位 */
  margin-bottom: 8px;
}

你想想看，如果没有网格系统，每个信息块都自由摆放，那画面得多乱？我曾经在一个项目中接手过这样的烂摊子——每个模块的开发人员都按自己的喜好布局，结果拼在一起就像打翻了的调色盘。

3.2 信息层级与视觉流

信息层级，这是PIS界面设计的灵魂。我记得有一次做高铁PIS系统，运营方要求把「列车晚点信息」放在最显眼的位置。但实际调研发现，乘客最关心的是「当前站」和「下一站」。这就是信息层级没搞清楚。

我总结了一套「三秒法则」：乘客在屏幕前停留不超过3秒，必须在这3秒内传递最关键的信息。怎么做？

• 第一层级（视觉焦点）：当前站、下一站、时间。字号最大，颜色最醒目。
• 第二层级（次要信息）：列车编号、终点站、途经站。中等字号，辅助色。
• 第三层级（补充信息）：温度、速度、广告。小字号，低饱和度。

视觉流呢？说白了就是引导眼睛怎么「走」。我习惯用「F型」和「Z型」两种视觉流。对于PIS这种信息展示型界面，F型更实用——左上角开始，横向扫过，再向下移动。你看地铁站台上的PIS屏，是不是都是这个规律？

视觉流类型	适用场景	典型布局
F型	信息展示型（PIS主屏）	左上角关键信息，横向展开
Z型	操作引导型（触摸查询机）	左上到右下，对角线流动
倒L型	紧急信息型（告警屏）	顶部和左侧集中关键信息

3.3 导航设计模式

导航设计，嗯，这里要注意。PIS系统的导航和手机APP不一样，用户没有「点击返回」的习惯。我见过最糟糕的设计是——乘客在触摸屏上点了一层又一层，最后找不到回家的路。

我个人推荐三种导航模式：

1. 扁平式导航：所有主要功能都在同一层级。适合信息量不大的PIS屏，比如站台信息屏。
2. 标签式导航：顶部或底部固定标签栏。适合功能切换频繁的场景，比如综合信息查询机。
3. 渐进式导航：按步骤引导用户操作。适合购票、查询路线等流程性操作。

还有一个细节——导航的「当前位置」指示。很多PIS系统只显示功能按钮，不告诉用户「你在哪」。我建议在每个页面顶部加一个面包屑导航，或者至少用高亮色标出当前所在位置。

/* 面包屑导航示例 */
.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  padding: 8px 0;
}

.breadcrumb-item {
  margin-right: 4px;
}

.breadcrumb-item.active {
  color: #0078D4; /* 高亮当前项 */
  font-weight: 600;
}

.breadcrumb-separator {
  margin: 0 4px;
  color: #999;
}

最后说一句，导航设计要「容错」。用户点错了怎么办？我习惯在每个操作页面都放一个「返回首页」的按钮，位置固定，颜色醒目。别小看这个按钮，关键时刻能救场。

下一章咱们聊聊色彩与字体，那又是另一个大坑。嗯，到时候我给你们讲讲我当年用错颜色差点导致运营事故的故事。