chapter[7] · part 2 / 程序员的界面美学
欢迎来到画布的另一边。前六章你是 reviewer，从这一章起你是 author。好消息：不需要学任何新东西。界面设计的全部原则，都是第一部分那些概念在屏幕上的特化——本章把它们编译成七条可执行的规则，每条都给出"违反 vs 遵守"的并置样例。先看映射关系：
| UI 原则 | 源自第一部分 | 一句话 |
|---|---|---|
| ① 层级 | 视觉重量（2.1）· 光的分配（5.1） | 重要的东西必须看起来重要 |
| ② 对齐 | 古腾堡的栅格（4.2） | 每个元素都该有看不见的轴线 |
| ③ 亲密性 | 负空间（2.3） | 距离表达关系 |
| ④ 对比 | 明度管层级（3.1） | 不同就要明显不同 |
| ⑤ 留白 | 万神殿的"空"（5.4） | 空白是功能，不是浪费 |
| ⑥ 一致性 | 设计系统（第〇章）· 光源一致（5.2） | 同类事物同样对待 |
| ⑦ 克制 | 强调 ≤ 10%（3.4）· 切分音（2.4） | 每多强调一处，处处少一分 |
用户不读界面，用户扫界面。层级的任务是让 0.5 秒的一瞥就能回答：这页讲什么？我能做什么？最重要的行动是哪个？做法只有一种：把视觉重量（大小、字重、对比、颜色）按信息的重要性单调递减地分配。
五行字同字号同字重同颜色：标题、正文、时间戳、按钮在视觉上完全平等。用户必须逐行阅读才能找到那个唯一的动作。
同样的五条信息，四级重量：大粗标题 → 灰色正文 → 更小更淡的时间戳 → 全页唯一的色块按钮。扫一眼即知全部。
古腾堡的两栏在五百年后变成了你的 flexbox。规则没变：页面上任何两个元素之间都应该存在可指认的对齐关系——共享左边缘、共享基线、共享中轴。对齐创造的"看不见的线"就是秩序感的最大来源；反过来，每多一条对不齐的轴，页面就多一分说不出的散。
标题居中、两个标签左缘不同、两个输入框左缘也不同、按钮又靠右：五个元素四条轴。每个位置单看都"差不多"，合起来就是散。
所有元素挂在同一条左轴上（虚线是被显形的"看不见的线"）。没有任何元素变得更好看，但整体立刻安定。对齐是免费的美感。
格式塔心理学一百年前就证明：大脑自动把靠近的东西理解为一组。这意味着间距不是空隙，是语法——标签和它的输入框必须比和上一个输入框更近；组内间距必须明显小于组间间距。违反这条语法，用户就得靠读文字来推断结构，而那本该是空间免费提供的。
"收件人"两项和"发票"一项毫无空间区分，三个字段等距排列——结构信息只存在于文字里，空间一言不发。
同样三个字段：组内 8px 级间距，组间 32px 级间距，再加两个小组标题。不画一条分割线、不加一个边框，结构已经清清楚楚——用间距分组，分割线是最后手段。
排版界的老格言：要么完全一样，要么明显不同（don't be a wimp）。两个字号差 2px、两个灰色差 5% 明度、主按钮和次按钮几乎同色——这种"羞怯的差异"最伤层级：用户能察觉有差别，却读不出差别的含义。对比一旦决定使用，就要大到不容误读。
两个按钮明度几乎相同：哪个是危险动作？哪个是安全退路？差异小到无法承载语义，用户只能赌。
实心色块 vs 描边幽灵按钮：主次一目了然，且危险动作占据了全部视觉重量——犹豫的成本被设计转移给了更安全的那个选项。
留白最常死于两种好意："屏幕这么贵，多放点信息"和"这里好空，加个 banner 吧"。回想万神殿：那个空旷的球体空间本身就是体验。界面同理——留白是层级的放大器（被空白包围的元素自动升级为焦点）、是分组的语法（7.3）、也是品质的信号：奢侈品店和折扣卖场的区别，一半是货架间距。
每一寸都被占据，元素之间只剩 4–6px 的缝。没有任何东西是焦点，用户的眼睛找不到入口，也找不到出口——只想关掉。
同一块屏幕只放一件事，四面留足空白：它不需要喊，空白替它完成了全部强调。"少而大声" 永远胜过 "多而嘈杂"。
第〇章讲过：设计系统是界面的类型系统。一致性就是它的运行时检查——所有同类元素（按钮、卡片、间距、圆角、图标线宽）必须长得相同；所有看起来相同的元素必须行为相同。违反前者，界面显得廉价；违反后者，用户被欺骗。每一处不一致都在消耗用户对"这个世界有规则"的信任，和阴影方向乱掉（5.2）是同一种崩塌。
三个"主按钮"：直角、胶囊、带黑描边，红色还各差一点；两张卡片圆角 14px 和 3px、边框粗细虚实不一。每个单看都说得过去，放在一起像五个外包团队的作品。
一个圆角值、一个红、一种边框。第三个按钮的"次要"身份用实心/描边表达，而不是发明新形状。变化只发生在语义需要变化的维度上。
最后一条管住前六条。层级、对比、色彩都是零和资源——强调的预算是固定的，花在越多地方，每一处分到的越少。新手界面的标准死法不是"不会设计"，而是"每个元素都被精心设计过"：标题加粗加大加色加图标，按钮渐变投影圆角动画，于是一切精心相互抵消。
退一步看，前面七条原则有一半其实是同一台引擎在驱动——第二章那五条格式塔法则。层级靠的是图底（让重要的成"图"）、亲密性就是接近、一致性就是相似。把这台引擎单独拎出来用，能解决界面里最常见的两类"说不清的乱"。它们的共同前提是：大脑一定会分组，问题只是按你设计的方式分，还是按意外的方式分。
第一类，相似性 = 可点性的承诺。用户进入一个界面时，会无意识地寻找"哪些长得一样的东西，行为也一样"。如果可点的元素每个都长得不同，这个承诺就破产了：
五个操作用了五种视觉语言：下划线、纯色字、胶囊、加粗带箭头、看不出是不是链接的黑字。用户必须逐个试探，相似性这条线索被彻底浪费。
所有可点的统一用朱砂、所有只读的统一用墨色：相似性把"什么能点"这件事，从五次试探压缩成一次学习。这就是第三章"颜色=语义"在交互层的兑现。
第二类，当接近不够用时，请出"公共区域"。格式塔里还有一条 7.3 没展开的法则——公共区域（common region）：处于同一个圈起来的区域内的元素，会被读成一组，哪怕它们离别的东西一样近。当布局逼着你把间距排得均匀（卡片网格、紧凑工具栏）、接近法则失灵时，一块共享的背景就是最强的分组手段：
字形格式（B I U S）和历史操作（撤销/重做/下载/复制）被排成完全均匀的两行，间距相同——大脑无从知道哪几个是一伙的，只能整片当成"一堆按钮"。
同样八个图标，用三块几乎不可见的浅色底分成三组。公共区域比分割线更安静、比间距更明确——这正是工具栏、设置分区、卡片为什么有效的底层原因。
这两条直接对应你写的 CSS。相似性 = 同一个 .link / .btn-primary 类管所有同类元素（而不是给每个按钮单独调样式——那是在亲手制造"五种方言"）。公共区域 = 一个带 background 或 border-radius 的容器 div，它在语义上声明"我里面的是一组"。下次你纠结"这里要不要加条分割线"，先问格式塔：能不能用接近（调 gap）或公共区域（包一层底色）解决？分割线是最后手段，因为它往画面里加墨水（第九章数据墨水比）；分组本可以免费。
七原则可以压缩成一句话：让每一个视觉差异都携带信息；消灭一切不携带信息的差异。大小不同 = 重要性不同；距离不同 = 关系不同；颜色不同 = 语义不同。当这个等式处处成立，界面就同时拥有了美感和可用性——它们本来就是同一件事的两面（还记得第一章的美即可用性效应吗）。
把它当 lint 规则跑你的界面：① 眯眼测试——眯起眼看模糊的屏幕，还能找到焦点吗（层级）？② 画轴测试——能给每个元素指出它对齐的轴吗（对齐）？③ 间距测试——组内距 < 组间距处处成立吗（亲密性）？④ 误读测试——任何两个不同的样式，差异大到不会被当成"也许一样"吗（对比）？⑤ 删除测试——每块空白被删掉后页面会变差吗（留白）？⑥ 词汇表测试——圆角/颜色/字号的取值集合，能在 10 秒内列举完吗（一致性）？⑦ 预算测试——数一数被强调的元素，超过 3 个就砍（克制）。
找出你自己写过的、最拿不出手的一个界面（每个程序员都有，通常是后台管理页）。先用 6.3 的四步法 review 它，再用上面七条 lint 逐项过。然后只允许做三类改动：调整大小/字重、调整间距、删除元素——不许加任何新东西，不许换配色。改完前后对比截图。绝大多数界面的问题不是缺少设计，是缺少这三类"减法"。