审美工程 · 4 / 12 留白与对齐：大多数丑都丑在间距 「说不上哪里丑，反正就是丑」，这句评价八成在说间距。颜色字体一处没动，只把间距捋顺，界面就能上一个档次。这一节给你两条规律和一张现成的数字表。 亲密性 一致性 8pt 网格 一句话速览 说不上哪里丑的界面，问题多半在间距。拖动滑块看呼吸感怎么来的，再学 8pt 网格这个偷懒神器 说不上哪里丑的，先查间距 间距只有两条规律。 亲密性 ：相关的元素靠近，无关的离远，读者靠距离判断「哪些是一伙的」。 一致性 ：同层级用同间距，卡片和卡片之间是 16，就处处是 16。剩下的问题是「具体填几」，答案是 8pt 网格 ：间距只从 8、16、24、32 里挑。不必纠结 13 还是 15，选项少了，一致性反而自动达成。这套网格也是给 AI 下指令的好词汇：跟它说「间距全走 8pt 网格」，比说「好看一点」有效得多。
拉一拉呼吸感 同一张注册表单，内容一个字不改，只动间距。拖动滑块，从 4px 拉到 32px，感受「挤成一团」到「呼吸感」的过程。
呼吸感滑块 拖动滑块
signup.workhub.example.com
创建账号 邮箱地址 设置密码 密码至少 8 位，需包含字母和数字 注 册
间距
12px
能用了：元素之间有了边界，但还谈不上舒展。继续往右拉。
分组用间距，别急着画框 亲密性在《About Face 4》里有一笔算得清清楚楚的像素账：工具栏里同组图标相距 4px，组和组之间留 8px，分组就成立了，一条边框都不用画。Cooper 顺带点名了反面做法：很多界面入目之处边框充斥，有时一两个元素也围上一圈。这是笨拙的分组方式，还制造视觉噪音。同一条工具栏，两种分法，自己切换感受。
边框 vs 留白 点击切换
八个命令分三组：文件、编辑、视图。切到「边框分组」，数数凭空多了几条线。
editor.workhub.example.com
留白分组 边框分组
一条线都没画： 组内 4px、组间 8px，距离差一倍，分组一眼成立。这笔像素账出自《About Face 4》，也是亲密性最便宜的用法。
好间距都是一个数的倍数 8pt 网格听着像行业黑话，出处其实很朴素。《About Face 4》讲网格系统时给了一个概念： 原子网格单位 ，界面里的最小间距。精心设计的网格里，元素和组之间的距离都取原子的整数倍。定了原子是 8，页面上的间距就只会是 8、16、24、32。间距彼此成倍数，眼睛就能读出秩序，这正是上一个滑块里呼吸感的骨架。
原子间距滑块 拖动滑块
这张卡的间距都读同一个原子：内边距是原子的 2 倍，段落间隔 1 倍，区块间隔 3 倍。拖动滑块，整卡联动。
okr.workhub.example.com
季度目标
新签客户 120 家 82% NPS 提升至 60 分 64% 上线 3 套行业模板 78%
保存 取消
原子单位
8px
标准档： 原子 8px，间距落在 8 / 16 / 24 上，这就是 8pt 网格。留意一件事：不管你怎么拖，没有一处间距失调，因为它们全锚在同一个原子上。
网格换来什么 怎么换来的 可用性 元素位置变得可预期，读者不用每屏重新找一遍标题和按钮在哪 美感 间距互为倍数产生秩序感，说不出好在哪，但看得出有人管过 效率 「这里空多少」不再逐处争论，间距决策从几十次减到一次
这三条好处来自《About Face 4》对网格系统的总结。给 AI 下指令时同理：先说定原子（间距全走 8 的倍数），它就少了几十次自由发挥的机会。
找茬：这张设置页藏着三处错位 下面的设置页乍看还行，细看有三处没对齐。觉得哪里别扭就点哪里，点中会亮出来并解释。
对齐找茬 0 / 3
提示：一处在图标上，一处在卡片边缘，一处在按钮之间。
settings.workhub.example.com
设置
消息通知
深色模式
隐私设置
账号安全
保存 取消 重置
比例要干脆，差不多最伤 卡片和分栏定什么比例？《About Face 4》先给了两个久经验证的候选：黄金比（约 1.61）和 √2（约 1.41，A4 纸的比例）。但它更强调另一条： 比例必须干脆 。差不多是个正方形，不行；几乎是黄金矩形，也不行。要么精确到位，要么明显拉开，卡在中间的比例会让读者隐隐觉得不稳，还说不出为什么。
比例调音台 拖动滑块
高度锁定 120px，拖动滑块改宽度。路上有三个干脆的停靠点：1.00、1.41、1.61。
ratio-lab.example.com
1.00
宽高比
1.00
精确正方形： 1:1 说一不二，安定、对称，图标和头像的老家。
给视线修一条路 眼睛读屏有惯性：从左上走到右下。《About Face 4》管顺应这个惯性的布局叫 逻辑路径 ：让视线从标题走到内容再走到按钮，一路不回头。它还补了一条容易被误会的原则：完美对称的布局反而缺层次， 平衡的不对称 才能给屏幕一个视觉入口。下面的注册页，两种铺法。
视线路径切换 点击切换
玫红数字标出视线要走的顺序。切到「乱路」，数一数视线折返了几次。
join.workhub.example.com
1 创建你的账号 2 邮箱地址 设置密码 3 注 册
3 注 册 2 邮箱地址 设置密码 1 创建你的账号
顺路 乱路
一条下坡路： 标题在左上迎住视线，表单顺流而下，按钮在右下收尾，读完即走到出口。右下收尾还带来一个副产品：布局左重右轻，平衡的不对称给了屏幕一个入口，比完美对称多一层活气。
找茬：两张价格卡，差距全在数字里
找茬：哪边更好 点选一边
同一张价格卡，文案与颜色一字不差，只有间距不同。点选更好的一边。
方案 A
pricing.workhub.example.com/a
专业版 ¥49 / 月
✓ 不限项目与协作成员 ✓ 100GB 云端存储 ✓ 工单优先响应
开始试用
方案 B
pricing.workhub.example.com/b
专业版 ¥49 / 月
✓ 不限项目与协作成员 ✓ 100GB 云端存储 ✓ 工单优先响应
开始试用
本节要点
✓ 说不上哪里丑，先查间距。 亲密性管分组（相关的靠近），一致性管秩序（同层级同间距）。 ✓ 分组先用间距： 组内 4px、组间 8px 就能分清，一条边框不用画。边框留给非围不可的场合。 ✓ 8pt 网格的底层是原子单位： 定一个最小间距，处处取它的倍数，一致性自动达成。这个词也能直接写进给 AI 的指令里。 ✓ 比例要干脆： 1:1、√2、黄金比都行，差不多正方形最伤。差异要么消除，要么明显拉开。 ✓ 对齐是最便宜的高级感。 交付前花两分钟：捋一遍左边缘、图标基线、按钮间距，再顺着左上到右下走一遍视线路径。
内容来源： 小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著）。