4、色彩与视觉设计：色彩心理学基础、PIS系统配色方案、高对比度与可读性设计
好，咱们接着聊。前面几章我们把PIS系统的骨架搭起来了，数据怎么来、怎么传、怎么显示，心里都有数了。但有个问题——你做的界面，乘客看着舒服吗？
说实话，我见过不少PIS系统，功能一点不差，但配色一塌糊涂。要么晃眼，要么灰蒙蒙一片。乘客抬头看一眼就不想再看第二眼。这其实是个大问题。PIS系统不是给工程师看的，是给普通乘客看的。他们不会关心你的数据流有多优雅，只关心「这字我看得清吗？」、「这颜色让我难受吗？」。
所以这一章，咱们专门聊聊色彩和视觉设计。说白了，就是怎么让你的界面「好看又好用」。
4.1 色彩心理学基础——别小看颜色
你可能觉得颜色嘛，挑几个好看的就行了。我以前也这么想。直到有一次，我在一个地铁项目里，用了蓝色作为报站信息的背景色。结果测试的时候，好几个乘客反映「看着有点冷，不舒服」。我一开始还不信，后来查了资料才发现——蓝色确实会让人产生冷静、甚至偏冷的感觉。在公共交通这种封闭空间里，大面积用蓝色，容易让人产生压抑感。
这就是色彩心理学。颜色不是随便选的，它会影响人的情绪和认知。
我简单总结几个PIS系统里常用的颜色和它们的心理暗示：
| 颜色 | 心理暗示 | PIS系统中的应用建议 |
|---|---|---|
| 红色 | 紧急、警告、停止 | 仅用于紧急信息、故障报警。别乱用，用多了乘客会紧张。 |
| 橙色/黄色 | 注意、提醒、温暖 | 适合用于换乘提示、到站提醒。比红色温和，但依然有警示效果。 |
| 绿色 | 安全、正常、通行 | 表示正常运行、准点、可通行。乘客看到绿色会安心。 |
| 蓝色 | 冷静、专业、可靠 | 适合作为背景色或次要信息。但别大面积使用，尤其别用在关键信息上。 |
| 灰色 | 中性、低调、辅助 | 用于分割线、次要文字、已过站信息。不抢眼，但很实用。 |
| 白色 | 干净、清晰、开放 | 最适合作为文字颜色（深色背景时）或背景色（浅色主题时）。 |
4.2 PIS系统配色方案——别搞花里胡哨
PIS系统的配色，跟手机App不一样。手机App你可以玩各种渐变色、毛玻璃效果。但PIS系统不行。为什么？因为使用环境太复杂了。
你想想看：
- 地铁车厢里，光线忽明忽暗
- 站台上，阳光可能直射屏幕
- 乘客可能是站着、走着、甚至跑着看屏幕
- 观看时间可能只有几秒钟
所以PIS系统的配色，核心原则就四个字：清晰优先。
我个人比较推荐「深色背景 + 高亮文字」的方案。为什么？
- 深色背景（比如深蓝、深灰、黑色）能有效减少反光
- 高亮文字（白色、亮黄色、亮绿色）在深色背景上对比度极高
- 深色背景对OLED屏幕更友好，省电、寿命长
举个例子，我参与过的一个高铁PIS项目，最终定下来的配色方案是这样的：
| 元素 | 颜色 | 色值（HEX） |
|---|---|---|
| 背景 | 深蓝 | #1A237E |
| 主要文字（车次、到站） | 白色 | #FFFFFF |
| 次要文字（时间、温度） | 浅灰 | #B0BEC5 |
| 强调信息（换乘、提醒） | 亮黄 | #FFD600 |
| 紧急信息 | 红色 | #FF1744 |
| 正常运行状态 | 绿色 | #00E676 |
这个方案用了好几年，反馈一直不错。乘客普遍反映「看着清楚，不累眼」。
4.3 高对比度与可读性设计——让每个字都看得清
好，配色方案定下来了。但还有一个关键问题——对比度够不够？
你可能觉得「白色文字在深色背景上，对比度肯定够啊」。不一定。白色也有不同深浅，深色背景也有不同深浅。如果白色偏灰、深色不够深，对比度照样不够。
这里有个硬指标：WCAG（Web内容无障碍指南） 建议，普通文本的对比度至少达到4.5:1，大号文本至少达到3:1。PIS系统我建议更严格一些——所有文本的对比度都按4.5:1来要求。
怎么算对比度？有个公式：
对比度 = (L1 + 0.05) / (L2 + 0.05)
其中 L1 是较亮颜色的相对亮度
L2 是较暗颜色的相对亮度
相对亮度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B
（R、G、B 需要先做 gamma 校正）
嗯，这个公式看着有点复杂。实际开发中，我一般直接用在线工具测。但你要理解背后的原理——对比度不够，字就看不清。尤其对于老年人、视力不好的乘客，这是个大问题。
除了对比度，还有几个提升可读性的小技巧：
- 字号别太小。 PIS系统的最小字号，我建议不低于24px（在1080p分辨率下）。站台大屏可以更大。
- 字体选无衬线体。 比如思源黑体、Noto Sans CJK。衬线体（比如宋体）在屏幕上笔画太细，远看容易糊。
- 行间距要宽松。 我一般设1.5倍行高。太挤了，多行文字读起来费劲。
- 重要信息加粗。 车次、到站时间、终点站，这些关键信息一定要加粗。次要信息（比如「下一站」三个字）用常规字重就行。
- 避免纯红/纯绿搭配。 大约8%的男性有红绿色盲。你看着很清晰的红色和绿色，在他们眼里可能是一样的。可以用「红色+白色边框」或者「绿色+图标」来辅助区分。
4.4 一个简单的配色示例
说了这么多，咱们来点实际的。下面是一个PIS报站界面的CSS配色示例。你可以参考这个思路去调整自己的项目。
/* PIS系统报站界面配色方案 */
:root {
/* 背景色 */
--bg-primary: #1A237E; /* 深蓝背景 */
--bg-secondary: #283593; /* 稍浅的蓝，用于卡片或分割 */
/* 文字色 */
--text-primary: #FFFFFF; /* 主要文字：白色 */
--text-secondary: #B0BEC5; /* 次要文字：浅灰 */
--text-emphasis: #FFD600; /* 强调文字：亮黄 */
/* 状态色 */
--status-normal: #00E676; /* 正常运行：绿色 */
--status-warning: #FF9100; /* 注意/提醒：橙色 */
--status-error: #FF1744; /* 紧急/故障：红色 */
/* 辅助色 */
--border-color: #3949AB; /* 边框：比背景亮一点 */
--divider-color: #5C6BC0; /* 分割线：用于区分不同信息块 */
}
/* 应用示例 */
.station-name {
color: var(--text-primary);
font-size: 48px;
font-weight: 700; /* 加粗 */
background-color: var(--bg-primary);
}
.arrival-time {
color: var(--text-secondary);
font-size: 28px;
font-weight: 400; /* 常规字重 */
}
.transfer-info {
color: var(--text-emphasis);
font-size: 32px;
font-weight: 600;
/* 换乘信息用亮黄色，一眼就能看到 */
}
.delay-warning {
color: var(--status-warning);
font-size: 36px;
font-weight: 700;
/* 晚点信息用橙色，既醒目又不至于引起恐慌 */
}
这个方案我实际用过，效果不错。当然，你可以根据自己项目的屏幕亮度、安装环境微调色值。但核心思路不变：背景够深、文字够亮、对比度拉满。
好了，这一章就聊到这儿。色彩和视觉设计，说难不难，说简单也不简单。关键是要站在乘客的角度去想问题。你看着舒服的，乘客不一定看着舒服。你看着清晰的，乘客不一定看得清。多测试、多验证，才能做出真正好用的PIS界面。
下一章，咱们聊聊交互设计——乘客怎么跟屏幕「互动」？其实PIS系统的交互，跟手机完全不一样。到时候我跟你分享几个有意思的案例。