第 6 章 · 第 33 讲 · 15:12
本内容改编自小山学堂《学 AI 产品，从入门到精通》，为二次演绎配音版。
模块：M6 产品手感 · 第 6 章 · 素材来源 xueai.miyang.cn（小山学堂 · 洛小山）
「说不上哪里丑，反正就是丑」是一句很常见的界面评价。它听起来主观，实际上八成指向同一件事：间距。本集把「审美」这件看似靠天赋的事，拆成四条可以被写下来、被执行、被检查的工程规则——留白与对齐、克制、一致性，以及一套交付前的验收动作。
这四条规则的现实意义，在于界面生产已经不再是设计师的专属领地。当你用一句话让 AI 生成一整张页面时，速度快得让人上瘾，但每一处间距、每一个圆角、每一种颜色，都是模型当场随手决定的。随手决定的次数越多，散装味越重。所以本集真正要解决的不是「怎么变好看」，而是「怎么让好看这件事不再依赖某个人的临场发挥」。
四个抓手是递进关系：
需要强调的是，这套规则并不要求你有美术功底。它要求的只是把原本靠感觉的判断，翻译成可以被量出来、被写下来、被机器执行的数字与表格。审美在这套体系里不是天赋，而是纪律。
学完这一集，你应该具备下面这些可被检验的能力：
| 能力 | 具体表现 | 检验方式 |
|---|---|---|
| 间距诊断 | 拿到一张界面，能在两分钟内指出间距问题 | 说出左边缘、图标基线、按钮间距三处是否对齐 |
| 分组设计 | 能用距离而非边框完成分组 | 工具栏组内四像素、组间八像素，不用画一条线 |
| 网格落地 | 能把全站间距收敛到一个原子的整数倍 | 页面内不出现非八倍数的间距取值 |
| 比例判断 | 能识别「差不多」的比例并给出处理方案 | 统一成同一个数，或拉开成八和二十四 |
| 预算控制 | 能给颜色和字体做预算并守住它 | 主色一种、字重两档、圆角一套 |
| 减法执行 | 能用「删到破坏为止」定位筋骨元素 | 删掉六件装饰中的五件，页面仍成立 |
| 变量化 | 能把散装样式收编成设计变量 | 改一个变量，五种控件同步变化 |
| 指令化 | 能把上述规则写成给 AI 的变量表 | 表外取值视为未完成 |
亲密性回答「哪些是一伙的」。相关的元素靠近，无关的元素离远。一个输入框上方紧贴着三个像素的标签，标签就属于这个输入框；往上挪到二十四像素，它立刻变成上一组的尾巴。
一致性回答「同层级有没有被同等对待」。卡片之间是十六像素，就处处是十六；标签与输入框之间是八像素，就处处是八。
两条规律有分工，很多人只做对一半：组内亲密性做得不错，组与组之间却忽宽忽窄，看上去像一群人排队，队形忽紧忽松。
《About Face 4：交互设计精髓》里有一笔清楚的账：工具栏同组图标相距 4px，组间留 8px，分组即成立，一条边框都不用画。作者同时点名了反面做法——很多界面入目之处边框充斥，有时一两个元素也围上一圈，那是笨拙的分组方式，还制造视觉噪音。
网格的底层是原子网格单位：界面里那个最小间距。元素之间、组与组之间的距离都取原子的整数倍。原子定为八，间距就只会是 8 / 16 / 24 / 32。
网格换来三样东西：
书里给了两个久经验证的比例候选：黄金比（约 1.61）与 √2（约 1.41，即常见办公用纸比例）。但更关键的一条是比例必须干脆——差不多是正方形不行，几乎是黄金矩形也不行。差异要么消除，要么明显拉开，卡在中间最伤。
逻辑路径讲的是眼睛的惯性：从左上走到右下。顺应惯性的布局让视线从标题走到内容再到按钮，一路不回头。同时要记住，完美对称反而缺层次，平衡的不对称才能给屏幕一个视觉入口。
预算制三条：一个主色 + 中性色、两种字重、一套圆角。
每多加一种颜色，已有的每种颜色都在贬值。
颜色的价值在于稀缺。只有一处玫红时它是全场焦点，有六种彩色时谁也当不了焦点。
饱和度是颜色的音量键。预算管「几种」，饱和度管「多响」。高饱和的颜色个个都在喊，凑在一起就是嘉年华效应。工作界面的舒适区在 35% 上下：分得清轻重，又不吵。
觉得界面廉价时的排查顺序：先数彩色有几种，再数字重有几档，最后看圆角统不统一。
「不必要的差异是一致设计的大敌」。两个间距几乎一样，就调成同一个数；两种颜色几乎一样，就用同一个。每处差异的存在都要有理由，找不出理由就消除它。
删到破坏为止：删减东西，直到删掉某件破坏了设计为止，再把最后删掉的那件加回来。促销卡上堆了六件装饰，逐件点掉，哪一件删了页面就破，你自然会知道——六件里未必都是装饰，总有一两件是筋骨。
散装感的来路很具体：按钮高 36 与 40 并存、卡片圆角 8 与 16 并存、主色深浅不一。每处都是当时随手写的，单看都说得过去，拼起来就露馅。
解法是变量先行：先定主色、圆角、控件高度、间距档位，所有样式从变量取值。
本站课程列表页的样式表里就有两行真实变量：
:root{
--xa-ctl-h: 36px;
--xa-ctl-r: 10px;
}
顶栏的分享、主题、交流群、语言、账号按钮共用这一档，脚本注入的那几个也读这里，避免各写各的尺寸拼出一排高低不齐的按钮。删掉这两行让每个按钮各写各的，散装立刻现形；要全站换风格，改这两行就够。
一致性的收益是实打实的：统一的界面标准靠可预见性提高产出、减少错误，用户在一个地方学会的规律换个页面还管用。苹果和微软乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学。
边界也要说清楚：标准管的是「外观和感觉」这层语法，管不了更深的逻辑。把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。
单看每一条规则都好懂，难的是把它们串成日常动作。建议按固定顺序执行：先定原子与网格，把间距的取值集合锁死；再定比例与逻辑路径，把骨架和视线走向锁死；然后给颜色和字体做预算，把数量锁死；最后把前面三项全部写进变量表，交给工程师或者交给 AI 去执行。
顺序不能反过来。如果先写页面再补变量表，你会发现每一处都要回头改，成本远高于一开始就立好变量。变量表的价值不在于它多漂亮，而在于它把「写样式的人要做的决定」从几十次压缩到零次——风格是变量的取值，系统感是变量的存在。取值可以争论，变量必须先有。
交付前逐项打勾：
| 误区 | 为什么错 | 正确做法 |
|---|---|---|
| 觉得不好看就换字体、换配色 | 廉价感八成来自数量失控，不是质量不够 | 先数彩色几种、字重几档、圆角是否统一 |
| 用边框做分组 | 边框是噪音，一两个元素也围一圈最笨拙 | 先用四像素与八像素的距离差 |
| 间距随手填十三、十五 | 每处重新纠结一次，一致性必然崩 | 全部收敛到八的整数倍 |
| 比例差不多就行 | 卡在中间的比例会让读者觉得不稳 | 要么精确到位，要么明显拉开 |
| 加一个新元素来解决问题 | 元素越多，一致性越难守 | 优先让已有元素多干几件事 |
| 把变量表当成存量治理方案 | 已上线的散装样式不会自动回到变量 | 先盘点样式欠债、分批合并，再下发变量表 |
| 认为标准能解决一切 | 标准只管外观与感觉这层语法 | 逻辑与信息架构仍需独立判断 |
另外一个高频误区，是把「一致性」理解成「所有东西长一样」。恰恰相反：行为不同的元素，就该在视觉上明显区分——删除按钮做成红色是对的，长得一样却干不一样的事才坑人。一致性要求的是同层级同等对待，不是抹平差异。
content-slices/pm33-m6.md，不跨集取材、不虚构案例、不引入素材外的产品数据。下面六条提示可以直接抄进你的日常流程，建议按提示三、提示四、提示六的顺序先用起来，这三条的即时收益最明显，也最容易被团队接受。
拿到一张觉得别扭的界面，先别动颜色也别换字体。花一分钟把间距全部量出来，写成一列数字，看它们是不是同一个数的倍数。多数时候，丑的来源就在这列数字里——十三、十四、十五混着用，比用错颜色杀伤力大得多。
想表达「这三个是一组、那两个是另一组」时，先试试四像素与八像素的距离差。这条来自《About Face 4》的像素账是亲密性最便宜的用法：一条线都不用画，分组就成立了。画框是退而求其次的方案，边框用多了就是视觉噪音。
跟 AI 说「间距全走 8pt 网格」，比说「好看一点」有效得多。因为前者把开放的审美判断换成了一道有限选项的选择题：选项少了，模型自由发挥的机会就少了。你还可以在设计说明里补一句「本页所有间距取八的整数倍，不在此列的取值一律视为笔误」，替自己挡掉相当一部分返工。
行距一处十二一处十五、两枚标签的粉一深一浅、字号十三和十五混用——单独看每处都说得过去，叠在一起就是一股说不出的松散。处理办法只有两条：统一成同一个数，或者干脆拉开成八和二十四，让差异变得明显。记住，差异要么消除，要么明显拉开。
拿不准某件装饰该不该留时，动手删。逐件点掉，直到删掉某件页面塌了一块，再把最后删掉的那件加回来。这个方法能帮你分清哪些是装饰、哪些是筋骨——六件里总有一两件是筋骨，删到它们的时候你会立刻感觉到。
第一分钟，捋一遍左边缘、图标基线、按钮间距；第二分钟，顺着左上到右下的视线路径走一遍，数一数折返了几次。这两分钟是整集里性价比最高的两分钟，对齐也是最便宜的高级感。
全站样式先遵守这张变量表，再动手写页面：
// 颜色：一个主色 + 中性色，语义色只给状态用
主色 #2563eb（悬停加深为 #1e40af，禁止出现第二种蓝）
中性色 文字 #111827 / 次要 #6b7280 / 边框 #e5e7eb
语义色 成功 #16a34a / 危险 #dc2626，只用于状态，不做装饰
// 尺寸：全部读档位，禁止随手写数
圆角 一律 10px（头像例外，用圆形）
控件高度 一律 36px
间距 只允许 8 / 16 / 24 / 40 四档
字号 只允许 13 / 15 / 18 / 24 四档，字重只用 400 和 700
// 验收：交付前自查
按钮、圆角、蓝色、图标风格、行距五项逐屏核对，
出现表外取值视为未完成。
--xa-ctl-h: 36px 与 --xa-ctl-r: 10px