第四章：视觉语言系统

色彩体系、字体规范、图标风格、间距网格——这四个东西，说白了就是多屏系统的「通用语言」。

我见过太多项目，每个屏幕各搞一套视觉风格。结果呢？用户在不同设备间切换时，就像在逛不同的产品。嗯，这其实是个很糟糕的体验。

4.1 色彩体系：别让颜色「各自为政」

色彩是视觉语言里最敏感的部分。我个人习惯把色彩体系分成三层：

• 品牌色：主色 + 辅助色，控制在3-5种以内
• 功能色：成功、警告、错误、信息提示色
• 中性色：背景、边框、文字层级色

我在项目中遇到过一个问题：同一个「确认按钮」，在车载屏上是蓝色，在手机App上变成了绿色。用户反馈说「感觉不像同一个系统」。后来我们统一了色彩映射表，才解决这个问题。

举个例子，车载屏的亮度通常比手机高，所以车载屏上的品牌色饱和度可以降低10%-15%，避免刺眼。但色相值必须保持一致。

色彩属性	手机端	车载屏	智能手表
主色 H值	210°	210°	210°
主色 S值	85%	72%	80%
主色 L值	50%	45%	55%

4.2 字体规范：别让文字「变形」

字体这块，我踩过不少坑。最典型的是：同一个字号，在不同屏幕上的物理尺寸完全不一样。

为什么会这样？因为屏幕的PPI（每英寸像素数）不同。车载屏通常PPI较低，手机屏PPI较高。如果都用「16px」，车载屏上看着刚好，手机屏上就小得可怜。

我的解决方案是：用物理尺寸（pt）而不是像素（px）来定义字号。

/* 错误做法：直接用px */
.button-text {
  font-size: 16px;  /* 在不同PPI下物理尺寸不同 */
}

/* 正确做法：用pt或rem */
.button-text {
  font-size: 12pt;  /* 物理尺寸固定 */
}

/* 或者用rem配合基准字号 */
:root {
  font-size: calc(12pt * (100vw / 1920));  /* 根据屏幕宽度动态调整 */
}

另外，字体族的选择也要统一。我建议使用系统原生字体，而不是加载自定义字体。原因很简单：加载字体需要时间，而且不同系统对字体的渲染效果不同。

4.3 图标风格：统一「语言」的视觉符号

图标是跨屏幕的「通用语言」。但前提是——这套语言必须统一。

我记得有一次评审，设计师在手机端用了线性图标，在车载屏上用了面性图标。用户说「感觉图标不像是同一套」。嗯，这其实是个很常见的坑。

图标风格统一，我总结了三个要点：

• 线面统一：要么全线性，要么全面性，要么统一混合（比如填充+描边）
• 圆角统一：所有图标的圆角半径保持一致，比如统一用2px或4px
• 视觉重量统一：不同图标的线条粗细、面积占比要接近

举个例子，如果你在手机端用1.5px的线条，车载屏上建议用2px。因为车载屏的观看距离远，细线条会看不清。但图标的「骨架结构」必须完全一致。

4.4 间距网格：让布局「有迹可循」

间距网格，说白了就是让所有屏幕上的元素间距遵循同一套「节奏」。

我个人习惯用8px网格系统。为什么是8？因为大多数屏幕的像素是整数倍，8px能整除大多数常见尺寸（比如16、24、32、40、48）。

但这里有个坑：不同屏幕的物理尺寸不同，直接用8px会导致小屏上间距太大，大屏上间距太小。

我的做法是：定义一套「间距等级」，每个等级对应一个物理尺寸。

间距等级	手机端	车载屏	智能手表
xs	4px	6px	3px
sm	8px	12px	6px
md	16px	24px	12px
lg	24px	36px	18px
xl	32px	48px	24px

你想想看，如果所有屏幕都用「md」这个等级，手机上是16px，车载上是24px，手表上是12px。虽然数值不同，但视觉比例是统一的。这就是「间距网格」的核心思想。

4.5 统一设计的关键：建立「视觉语言规范文档」

说了这么多，最后我想强调一点：所有规范必须文档化。

我见过太多团队，规范都在设计师脑子里。结果设计师一离职，新来的设计师完全不知道该怎么画。嗯，这其实是个管理问题。

一份好的视觉语言规范文档，至少应该包含：

• 色彩体系：色板、使用场景、禁用场景
• 字体规范：字号等级、行高、字重、字体族
• 图标规范：风格定义、尺寸规范、使用示例
• 间距网格：等级定义、计算公式、适配规则

而且这份文档要放在团队都能访问的地方，比如Confluence或者Notion。每次更新都要通知所有人，避免出现「各用各的版本」的情况。

下一章我会讲交互模式的一致性设计，包括手势、动画、反馈机制。到时候再聊。