开场：「说不上哪里丑」八成在说间距
「说不上哪里丑，反正就是丑」，这句评价八成在说间距。颜色字体一处没动，只把间距捋顺，界面就能上一个档次。
一句话速览：说不上哪里丑的界面，问题多半在间距。两条规律 + 一张现成的数字表（8pt 网格）。
一、间距只有两条规律
- 亲密性： 相关的元素靠近，无关的离远，读者靠距离判断「哪些是一伙的」。
- 一致性： 同层级用同间距，卡片和卡片之间是 16，就处处是 16。
剩下的问题是「具体填几」，答案是 8pt 网格：间距只从 8、16、24、32 里挑。不必纠结 13 还是 15，选项少了，一致性反而自动达成。这套网格也是给 AI 下指令的好词汇：跟它说「间距全走 8pt 网格」，比说「好看一点」有效得多。
二、分组用间距，别急着画框
亲密性在《About Face 4》里有一笔算得清清楚楚的像素账：工具栏里同组图标相距 4px，组和组之间留 8px，分组就成立了，一条边框都不用画。Cooper 顺带点名了反面做法：很多界面入目之处边框充斥，有时一两个元素也围上一圈。这是笨拙的分组方式，还制造视觉噪音。
八个命令分三组（文件、编辑、视图），组内 4px、组间 8px，一条线都没画，距离差一倍，分组一眼成立。这是亲密性最便宜的用法。
三、8pt 网格的底层：原子网格单位
8pt 网格听着像行业黑话，出处其实很朴素。《About Face 4》讲网格系统时给了一个概念：原子网格单位，界面里的最小间距。精心设计的网格里，元素和组之间的距离都取原子的整数倍。定了原子是 8，页面上的间距就只会是 8、16、24、32。间距彼此成倍数，眼睛就能读出秩序。
网格换来什么：
| 好处 | 怎么换来的 |
|---|---|
| 可用性 | 元素位置变得可预期，读者不用每屏重新找一遍标题和按钮在哪 |
| 美感 | 间距互为倍数产生秩序感，说不出好在哪，但看得出有人管过 |
| 效率 | 「这里空多少」不再逐处争论，间距决策从几十次减到一次 |
给 AI 下指令时同理：先说定原子（间距全走 8 的倍数），它就少了几十次自由发挥的机会。
四、比例要干脆，差不多最伤
卡片和分栏定什么比例？《About Face 4》先给了两个久经验证的候选：黄金比（约 1.61）和 √2（约 1.41，A4 纸的比例）。但它更强调另一条：比例必须干脆。差不多是个正方形，不行；几乎是黄金矩形，也不行。要么精确到位，要么明显拉开，卡在中间的比例会让读者隐隐觉得不稳，还说不出为什么。路上有三个干脆的停靠点：1.00、1.41、1.61。
五、给视线修一条路
眼睛读屏有惯性：从左上走到右下。《About Face 4》管顺应这个惯性的布局叫逻辑路径：让视线从标题走到内容再走到按钮，一路不回头。它还补了一条容易被误会的原则：完美对称的布局反而缺层次，平衡的不对称才能给屏幕一个视觉入口。
一张注册页的正确铺法：标题在左上迎住视线，表单顺流而下，按钮在右下收尾，读完即走到出口。右下收尾还带来一个副产品：布局左重右轻，平衡的不对称给了屏幕一个入口。
本节要点
- 说不上哪里丑，先查间距。 亲密性管分组（相关的靠近），一致性管秩序（同层级同间距）。
- 分组先用间距： 组内 4px、组间 8px 就能分清，一条边框不用画。边框留给非围不可的场合。
- 8pt 网格的底层是原子单位： 定一个最小间距，处处取它的倍数，一致性自动达成。这个词也能直接写进给 AI 的指令里。
- 比例要干脆： 1:1、√2、黄金比都行，差不多正方形最伤。差异要么消除，要么明显拉开。
- 对齐是最便宜的高级感。 交付前花两分钟：捋一遍左边缘、图标基线、按钮间距，再顺着左上到右下走一遍视线路径。