留白与对齐：大多数丑都丑在间距
说不上哪里丑的界面，问题多半在间距。拖动滑块看呼吸感怎么来的，再学 8pt 网格这个偷懒神器
本页解决的问题
先给结论「留白与对齐：大多数丑都丑在间距」要解决的关键问题是什么？
说不上哪里丑的界面，问题多半在间距。拖动滑块看呼吸感怎么来的，再学 8pt 网格这个偷懒神器
把品味变成产品可重复的行为。 有用的结果不是一句“我觉得更好”。它应该是一条看得见的规则、一个小例子，以及判断体验何时低于标准的方法。
记录一个前后对比，让别人不用听解释也能看懂质量线。
表面更精致了，却没有减少用户的不确定感。
间距只有两条规律。亲密性：相关的元素靠近，无关的离远，读者靠距离判断「哪些是一伙的」。一致性：同层级用同间距，卡片和卡片之间是 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、黄金比都行，差不多正方形最伤。差异要么消除，要么明显拉开。
对齐是最便宜的高级感。交付前花两分钟：捋一遍左边缘、图标基线、按钮间距，再顺着左上到右下走一遍视线路径。
内容来源：newwebplay AI「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著）。
从「说不上哪里丑的，先查间距」把感觉变成判断
「间距只有两条规律。」指出，AI 降低了做出“能用”成品的门槛，读者真正需要练的是看出哪里不对，并把感觉说成可以执行的要求。
观察用户的下一步，而不是只看表面
「同一张注册表单，内容一个字不改，只动间距。拖动滑块，从 4px 拉到 32px，感受「挤成一团」到「呼吸感」的过程」可以转成几个可观察的问题：用户是否知道现在发生了什么，是否知道下一步做什么，出错或空白时能否恢复，以及信息层级是否让重要内容先被看见。
漂亮不等于容易用
把「对齐是最便宜的高级感。」用在第二个页面或流程上，记录一个具体犹豫点和一个改动后的用户动作；能被观察到的变化，才是体验改善。
从「说不上哪里丑的，先查间距」走到「拉一拉呼吸感」
「说不上哪里丑的，先查间距」先把问题落在「间距只有两条规律。 亲密性 ：相关的元素靠近，无关的离远，读者靠距离判断「哪些是一伙的」。 一致性 ：同层级用同间距，卡片和卡片之间是 16，就处处是 16。剩下的问题是「具体填几」，答案是 8pt 网格 ：间距只从 8、16、24、32 里挑。不必纠结 13 还是 15，选项少了，一致性反而自动达成。这套网格也是给 AI 下指令的好词汇：跟它说「间距全走 8pt 网格」，比说「好看一点」有效得多」上；到了「拉一拉呼吸感」，讨论继续推进到「同一张注册表单，内容一个字不改，只动间距。拖动滑块，从 4px 拉到 32px，感受「挤成一团」到「呼吸感」的过程」。两段连起来，重点就不只是记住一个结论，而是看清它成立所依赖的条件。
把这条判断带到下一个场景
评估体验时，把抽象的“好看”或“顺手”换成用户动作：他是否看懂状态、找到了下一步、能从错误中恢复，并且愿意继续使用。
- 「说不上哪里丑的，先查间距」：间距只有两条规律。 亲密性 ：相关的元素靠近，无关的离远，读者靠距离判断「哪些是一伙的」。 一致性 ：同层级用同间距，卡片和卡片之间是 16，就处处是 16。剩下的问题是「具体填几」，答案是 8pt 网格 ：间距只从 8、16、24、32 里挑。不必纠结 13 还是 15，选项少了，一致性反而自动达成。这套网格也是给 AI 下指令的好词汇：跟它说「间距全走 8pt 网格」，比说「好看一点」有效得多
- 「拉一拉呼吸感」：同一张注册表单，内容一个字不改，只动间距。拖动滑块，从 4px 拉到 32px，感受「挤成一团」到「呼吸感」的过程
- 「最后的要点」：这三条好处来自《About Face 4》对网格系统的总结。给 AI 下指令时同理：先说定原子（间距全走 8 的倍数），它就少了几十次自由发挥的机会
最后的「最后的要点」把讨论落到「这三条好处来自《About Face 4》对网格系统的总结。给 AI 下指令时同理：先说定原子（间距全走 8 的倍数），它就少了几十次自由发挥的机会」。回看这条线索时，最值得保留的是：当输入、规模或风险改变，哪些判断需要重新做一遍。
我把这篇文章里的一个判断改写成了今天可以验证的小实验。比记住结论更有用的是，知道下一步要观察什么。
读完以后我先回头找它成立的条件，而不是直接把方法搬进项目。这个顺序让后面的取舍清楚很多。
如果把这个判断放到真实工作里，最先需要补的约束是什么？我想知道从阅读到第一次实践之间，哪一步最值得先做。
还没有这篇文章的讨论。