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