第 18 章 亲密·对齐·重复·对比：四条原则的来历
“我照着这四条做了啊。”
老哥把屏幕转过来，语气里有点委屈。
“你看，亲密性——相关的东西我都放一起了；对齐——我专门拉了参考线，左边缘全在一条线上；重复——标题全用同一个字号同一个颜色；对比——标题 28，正文 14，够大了吧。”
我看了大概十秒。
“版面确实规矩了。”
“但就是不好看。”
“对，就是不好看。”
他等着我往下说。我知道他在等什么——等我说”你这里还差一点”，然后他回去再改一版，再来，我再挑一点毛病。这个循环可以转一年。
“我先问你一个问题。“我说，“这四条，你是从哪儿学的？”
“就那本……写给大家看的……”
“对，那本。那本书把这四条归纳成了四个英文单词的首字母缩写——对比、重复、对齐、亲密。它卖得极好，因为它把设计里最容易被新手犯的错，压缩成了四条能背下来的话。”
“那不是好事吗？”
“是好事。但你要搞清楚一件事：它压缩掉的是什么。“
一、这四条是底线，不是上限
我给你打个你一定懂的比方。
你写 Go。团队里有 gofmt，有 golangci-lint，有 CI 里跑的那套检查。这些工具会告诉你：这个变量声明了没用、这个 error 没处理、这个分支可以合并、这个 import 顺序不对。
你现在写完代码，跑一遍 lint，全绿了。
我问你：你的代码好不好？
”……不知道。lint 全绿只能说明没犯错。”
“对。lint 全绿只能说明没犯错。它不会告诉你函数抽得对不对，不会告诉你这个接口是不是过度设计，不会告诉你这个并发模型在十万连接下会不会退化。这些它一条都说不出来。”
“所以那四条……”
“那四条就是设计里的 lint。”
记住这句话，这是本章的第一块地基：
亲密、对齐、重复、对比，是一组”错误检测器”，不是一组”质量生成器”。
你按它们做，能消掉的是明确的错误：信息分组错了、元素没对齐、字号乱七八糟、层级拉不开。消掉这些错误之后，你的版面会从”业余”变成”及格”。
而从”及格”到”好”，这四个字一个忙都帮不上。
“那还要不要学？”
要学，而且必须先学。原因有两层。
第一层很实际：新手的作品里，绝大部分的丑，就是这四种错误。 你不是缺个性，你是错误太多，多到个性根本没机会露出来。就像你代码里全是未处理的 error、全是复制粘贴的五十行函数，这时候谈”架构的优雅”没有任何意义。先把 lint 跑绿。
第二层更重要：这四条会帮你养成一个习惯——把版面当成”关系”来看，而不是当成”东西”来看。 新手看版面，看到的是”这里有个标题、这里有个按钮、这里有张图”。老手看版面，看到的是”这个标题属于这个段落、这个按钮和那个输入框是一条线上的、这三个卡片是同一类东西”。
这个视角转换，比这四条本身值钱得多。
“那我先问一个。“老哥说，“这四条凭什么成立？我不是说我不信，我是说——凭什么是这四条？为什么不是五条、不是三条？为什么是’靠近’和’对齐’，而不是’对称’和’居中’？”
这个问题问得好。这也是本章真正要讲的东西。
我一条一条给你拆。每一条我都讲两件事：它背后的机制是什么（它凭什么成立），以及它在实战里真正的威力在哪（大多数人对它的理解都太浅了）。
二、亲密性：靠得近，就是有关系
机制：一句话带过
亲密性背后的机制是格式塔的接近性（proximity）——空间上挨得近的元素，会被大脑自动归为一组。这个第 03 章已经讲透了，我不重复。
这里只补一句第 03 章没展开的：接近性的判定发生在”前注意”阶段。
什么意思？就是说，你的大脑在”认出这是个标题""读懂这行字”之前，就已经把”哪些东西是一伙的”这个分组做完了。你不是先读后分组，你是先分组后读。分组错了，后面的阅读全部建立在错误的结构上。
所以亲密性的第一条结论是：
亲密性决定的不是”好不好看”，是”读者能不能正确理解信息结构”。
它不是审美问题，是正确性问题。就像你代码里的括号打错了位置——不是风格问题，是语义错了。
本章重点：亲密性是分组手段里最优雅的那一个
老哥你知道大多数人想表达”这几个东西是一组的”的时候，会怎么做吗？
加个框。
加条线。
垫个色块。
这是最直觉的做法，也是最笨的做法。为什么笨？我给你算笔账。
你的画面上本来有 N 个元素。你想把它们分成三组。
用框/线/色块的做法：你加了 3 个新元素（三个框），可能还有分割线，可能还有底色。现在画面上有 N+3 个以上的元素，而且这 3 个新元素本身还得跟别的东西对齐、还得配色、还得决定线宽。
用亲密性的做法：你什么都不加。你只是把组内的间距缩小，把组间的间距拉大。元素数量没变，一个都没多。
“就这个区别？”
“就这个区别，但它导致的后果非常大。”
第一，画面上的元素越多，越难做对。 每加一个元素，就多一个需要跟全场对齐的对象、多一个需要跟全场统一风格的对象。加框是最典型的”为了解决问题而制造更多问题”。
第二，加框是在”说”，亲密性是在”做”。 一个框在说”请注意，这几个是一组的”——它是一条显式的指令。而亲密性不说话，读者自己就感觉到了。这两种体验完全不同：被显式告知，和自己感觉到，后者高级得多。
你去看那些真正做得好的名片、说明书、仪表盘，它们之间的共同点不是”框加得好看”，是框特别少。分组全靠间距。
第三，加框会切断关系。 这个最隐蔽。一个元素被框住之后，它跟框外元素的关系就被削弱了。但现实里，一个元素经常同时属于两个组——比如一个”价格”，它既属于”这个商品的详情”，也属于”全场的价格列表”。框只能表达一个维度，间距可以表达多个维度（东西方向亲近、南北方向疏远）。
亲密性的实用判据
讲完威力，讲怎么判断自己做没做到。
判据一：组内间距必须明显小于组间间距。
注意”明显”两个字。组内 10 像素、组间 14 像素，这不叫明显——这叫”差一点点”，第 14 章讲过，差一点点比不做还糟，因为大脑会把它读成”失误”。
经验数字：组间间距至少是组内间距的 1.5 到 2 倍。组内 8，组间就要 16 到 24。
判据二：一个元素到两个组的距离不能差不多。
最典型的翻车现场是这样：标题下面跟一段正文，正文下面又跟一个副标题。结果这三块的间距是 16、16、16。
读者会怎么读？他会觉得”上面那块和下面那块到底是一起的还是分开的？“——他不知道，因为设计没告诉他。
改法有两种，取决于真实关系：标题属于上面的内容，就让它是 24、8；标题属于下面的内容，就让它是 8、24。但绝不能是 16、16。
这个 16、16 我在评审里见过太多次了。做的人会说”我统一了间距啊，很整齐”。整齐个鬼。你统一的是数字，不是关系。
判据三：数一数你的画面上有几个”团”。
眯起眼睛（第 01 章教的那个动作），或者倒过来看。你应该能数出画面上有几个明显的”元素团”。团之间有明确的空白带隔开。
如果你数不出来——所有东西均匀铺开，或者整片糊在一起——亲密性就是失败的。
亲密性最大的敌人：居中
为什么居中的排版特别容易出问题？
因为居中会制造参差的软边缘。左对齐的文本，左边缘是一条硬线，右边缘是参差不齐的；居中对齐的文本，左右两边都是参差不齐的。
而亲密性靠的是”间距”说话。当边缘是参差的时候，你看到的”间距”是视觉上的平均距离，不是几何距离——一行短的文本和上一行之间的距离，看起来会比一行长的文本更大。这会干扰分组判断。
所以你会发现：越是居中排的版面，越需要靠线、靠框、靠色块来补分组——因为间距这个手段被削弱了。这就是为什么那么多居中排版的作品看起来”花里胡哨加了一堆装饰”。不是作者爱装饰，是他把最有力的分组工具给废了，只能用装饰来补。
“那我以后一律左对齐？”
“不。我的意思是：居中是有代价的，你要知道你付了什么。” 短标题、请柬、海报主视觉，居中完全成立。但凡是需要承载多组信息的版面，居中都会让你更难做。
三、对齐：没有元素是”随便放”的
机制：为什么人对”没对齐”这么敏感
老哥，你有没有过这种体验：走进一个房间，什么都没看清，但就是觉得”有点乱”。然后你看了半天，发现是墙上那幅画挂歪了两度。
两度。你没量过，你也不知道是两度，但你就是感觉到了。
反过来：那幅画挂正了之后，房间还是那么乱，但你不觉得难受了。
这就是对齐的力量，也是它的诡异之处——它的效应远超意识层面。
凭什么？
第一层解释是生理的。人的视觉皮层里有大量专门响应”边缘”和”朝向”的细胞，它们对线条的位置和角度极其敏感，精度远超你对”大小”和”颜色”的判断。你可以看不出两个色块差了 5% 的明度，但你一定能看出一条线歪了 2 度。这两件事在神经层面根本不是一个量级的精度。
第二层解释是认知的，我认为这个更要紧。
还记得第 03 章的简洁律吗——大脑在所有可能的解释里，永远选最简单的那个。
现在想象你的画面上有五个元素，它们的左边缘分别在五个不同的位置。
对大脑来说，这意味着什么？意味着它有五条竖线需要解释。五条线，五件事。
如果这五个元素左对齐，大脑看到的是一条竖线。一条线，一件事。
未对齐的代价不是”难看”，是”大脑要处理的对象变多了”。 而大脑最恨的就是这个。它会在你意识到之前就产生那种”有点乱”的不适感。
所以对齐的本质不是”整齐”，是：
让多个元素的边缘共用同一条看不见的线，从而减少画面上”需要被解释的东西”的数量。
这个定义你记住，它比”要对齐”这三个字有用一百倍。因为它给了你判断标准：不是”齐不齐”，是”线够不够少”。
判断方法：数线
具体怎么做体检？第 17 章讲网格的时候给过你一个练习——把所有元素的左边缘画成竖线，数有几条。这里我再把它精化一下，因为对齐这一条的诊断就靠它：
- 把你画面上每一个元素的边缘都算上——包括每张图、每段文字、每个按钮、每个图标、甚至色块的边界。新手最容易漏的是”文字的真实边界”（一个字块的左边不等于它的视觉左边，尤其中文标点会缩进）。
- 把所有左边缘画成竖线，看它们聚成了几条。
- 同样的事对上边缘做一遍。
- 看这寥寥几条线之间有没有数值关系（30、30、15 是有关系的；30、37、18 是没有的）。
合格的版面：竖线通常只有两三条，而且它们之间的距离有明确的倍数关系。
不合格的版面：竖线七八条，彼此距离毫无关系。
“那如果我的内容本身就复杂呢？一张图上就是有二十个元素。”
“二十个元素，不等于二十条线。二十个元素应该共用两三条线。元素的数量和线的数量是两回事，这正是网格存在的意义（第 17 章讲过）。如果你有二十个元素，数出来二十条线，那说明你每个元素都是凭手感摆的。“
对齐的三种常见错误
错误一：混用对齐方式。
一个页面上，标题居中，正文左对齐，落款右对齐，图片居中。看起来”每种都有道理”，实际上这个画面没有任何一条线是被共用的。
对齐方式不是装饰选项，它是一个全局约定。一个页面有一个主对齐方式（通常是左对齐），其他元素都必须挂在它的线上。
允许有例外，但例外必须是有意的、且只有一处。第 15 章讲变异的时候说过”一次只变异一处”，这里同理。
错误二：视觉对齐不等于几何对齐。
这个坑很深。举个例子：一个圆形图标和一个方形卡片，你把它们的中心点对齐了。几何上对齐了，视觉上圆形看起来偏了——因为圆的视觉重心比几何中心更”满”，而方的边缘是硬的。
再比如：一段以引号开头的文字，你把左边缘对齐了，但引号的左边有一大块空白，看起来整段缩进了一截。
规则：对齐要用眼睛来验收，不能用数字来验收。 数字对齐之后，眯眼再看一眼，问自己”看起来齐了吗”。这两个答案经常不一样，不一样的时候听眼睛的。
错误三：跟错误的参照物对齐。
最常见的是”跟父容器对齐”和”跟兄弟元素对齐”混着来。一个卡片里的标题，跟卡片的内边距对齐；卡片里的按钮，跟卡片的内边距对齐——这是跟父容器对齐。但页面上有三个这样的卡片，三个卡片的标题是不是也互相对齐了？如果卡片高度不一样，标题就对不齐了。
规则：先对齐兄弟，再对齐父级。 跨元素的对齐优先于容器内部的对齐，因为观众看到的是全场，不是单个卡片。
四、重复：你重复的应该是”关系”，不是”形状”
机制：一句话带过
重复的机制是模式识别——大脑会本能地寻找规律，找到规律之后就会把符合规律的东西当成一个系统，从而大幅降低处理成本。这个第 15 章讲得很透，我不重复。
本章要讲的是第 15 章没展开的角度：到底该重复什么。
大多数人的理解是错的
你问一个新手”重复是什么意思”，他会说：“就是同样的元素多次出现嘛。同样的形状、同样的图标风格、同样的圆角。”
这个理解不能说错，但它是最浅的那一层，而且照这个理解去做，做出来的东西会很糟。
我给你看一个典型的现场。
有人做一组”三大优势”的卡片。为了”重复”，他给每个卡片都做了：同样的圆角矩形底、同样的投影、同样大小的正方形图标底座、同样颜色的图标、同样的标题字号、同样的”了解更多”箭头。
然后他问我：“为什么看起来这么啰嗦？”
因为他重复的每一处都是”加法”。
三个卡片，每个都加了底、加了投影、加了图标底座、加了箭头。三个卡片加起来，画面上多了十二个纯装饰元素。这些元素一个都不承载信息，它们全都在喊”看我看我”。
而”重复”真正该做的事，恰恰相反——重复应该是让画面上”需要被解释的东西”变少，不是变多。
重复的正确对象：关系
那该重复什么？答案是：重复关系。
什么叫关系？三样东西：
第一，字号比例。
不要记”标题 28 号、副标题 20 号、正文 14 号”这种死数字。要记”1.5 倍”这个比例关系。
一个版面里的字号，应该是一个有明确比例的序列，比如 48 / 32 / 21 / 14（每次除以 1.5）。这个序列本身就是重复——每一级和下一级的关系是一样的。
好处是什么？第一，你永远不会出现”24 和 26 同时存在”这种”差一点点”的灾难（第 14 章）。第二，你把版面搬到另一个尺寸（从 A4 到手机屏到户外大牌），只要整体缩放，关系不变，版面就不会散。
这跟你写代码里的常量是一个道理：你不该在二十个地方写 3.14159，你该定义一个常量。不是因为打字少，是因为改的时候只改一处，而且关系不会走样。
第二，间距比例。
同样的逻辑。所有间距取自一个序列：4、8、16、32、64。这就是重复。
你会发现，遵守这个序列的版面，看起来”有一种说不出的整齐”。说不出来的原因是：观众的大脑识别到了间距之间的倍数关系（虽然他说不出来），于是判定”这是有意为之的系统”，而不是”随手摆的”。
反过来，间距是 30、37、18、22 的版面，观众说不出哪里怪，但会判定”没排好”。
第三，颜色角色。
这一条最容易被忽略，也最见功力。
不要记”主色是 2e7cf6”。要记”主色的角色是：只用于可点击的东西”。
一旦你把颜色定义成角色而不是数值，重复就有了意义：
- 主色 = 可交互（按钮、链接）
- 强调色 = 全页最多出现一次的东西（当前选中、最关键的那个数字）
- 中性色的深中浅 = 文字层级（一级、二级、三级）
- 功能色 = 状态（成功、警告、错误），且只在状态出现时才出现
这样定义之后，你的整个作品里，颜色是自解释的。观众看三次就学会了这套语言：蓝色的字能点，红色的字是出错，最大的那个数字是重点。
“这不就是设计系统吗？”
“对，就是这个。你写后端的时候，不会在每个 handler 里手写一遍鉴权逻辑，你会抽一个中间件。颜色角色就是设计的中间件。
一个诊断动作
怎么知道自己有没有做好重复？
列出你画面里所有的字号、字重、颜色值、间距值（真的列，写在纸上或者贴在旁边）。
- 如果某个值只出现一次——它多半是多余的。要么把它归到已有的某一级，要么给它一个非出现不可的理由。
- 如果出现的值超过四五种——层级大概率失控了（下一章讲层级的时候会详细讲这个诊断）。
- 如果所有值之间找不到数值关系——你是在凭手感做，不是在按系统做。
一个成熟的版面，这张清单通常很短：三四种字号、两三种字重、两三种颜色、四五种间距。
“这么少？那不就单调了吗？”
“单调是对的。单调是重复的代价，也是重复的目的。 至于怎么在单调之上做出变化——那是变异的事，第 15 章讲过。你不能用’避免单调’当理由去破坏重复，那等于因为怕代码无聊就拒绝抽象。“
五、对比：在版式语境下的三个具体表现
对比是几乎所有设计问题的解药，第 14 章已经把它的八个维度全讲完了，我不重复。
本章只讲它在版式这个具体语境下，长什么样。版式里的对比，主要落在三个地方。
表现一：字号比
规则：相邻两级的字号比，至少 1.5 倍。
为什么是 1.5？因为面积感知。一个 28 号字和一个 14 号字，线性的字号是两倍关系，但面积是四倍关系。人眼对”大小”的感知更接近面积而不是线性尺寸（虽然不是严格的平方，但比线性陡得多）。
常见的错误数字：
- 标题 18，正文 14 —— 完全看不出层级，读者会觉得”这俩差不多”。
- 标题 24，正文 16 —— 勉强能看出，但不够有力。
- 标题 36，正文 16 —— 明确了。
- 标题 60，正文 16 —— 强烈，适合海报不适合正文页。
中文要比英文更夸张。 这一点很重要。中文字是方块字，笔画密度高，字面（一个字实际占的黑色面积）比拉丁字母饱满得多。同样 14 号，中文看起来比英文”实”很多。所以中文排版里，相邻层级的字号比建议拉到 1.6 到 2 倍，否则”差一点点”的效应会更明显。
表现二：字重比
规则：光靠字重，撑不起中文的层级。
这是一条很多人踩过的坑。西文有 Regular、Medium、SemiBold、Bold、Black 一整套字重，跨度极大，光靠字重就能做出三四级层级。
中文呢？绝大多数中文字体只有两三个字重，而且 Regular 和 Bold 的差别，远没有西文那么戏剧化。更要命的是：中文 Bold 之后，笔画会糊在一起，小字号下一加粗就成了一团黑。
所以中文字重的正确用法是：
- 用两档就够了：常规 + 粗。不要试图用四个字重做四级层级。
- 字重必须和别的维度组合使用。想让标题跳出来，光加粗不够，要”加粗 + 放大 + 变深”三者一起上。这三个维度叠加，才是真正的对比。
- 一个反直觉的做法：用”细”做对比。一大段常规字重里，一个超大号的细体标题，往往比粗体更有力。因为观众对”大 + 细”这个组合不熟悉，反差更大。你去看很多高端品牌的画册，大标题都是细体。
表现三：色彩角色比
规则：强色只给一处。
一个版面里的色彩，应该有一个明确的”谁最强”的回答。最饱和、最跳的那个颜色，只能出现在一个地方（或者一类东西上，但这类东西全场不超过三处）。
一旦你把强色给了两个地方，观众就要做选择题：“这两个哪个更重要？“——这个问题他答不上来，于是两个都不看。
反面教材：那种”全场都是红色”的促销页。标题红的、价格红的、按钮红的、标签红的、边框红的。红色在这里已经不是强调，是背景噪音。
灰度测试是个好东西。 做完之后把画面去色，看它还有没有层级。如果去色之后所有东西糊成一片灰，说明你的层级全靠颜色撑着——这是很脆弱的，因为：约 8% 的男性有不同程度的色觉障碍（这不是我编的，是个很稳的常识数字）；很多人会在强光下看手机（屏幕饱和度被冲掉）；很多东西会被黑白打印。
颜色应该是层级的加强，不是层级的唯一来源。
六、四条打架的时候，谁说了算
好，四条单独讲完了。现在讲本章最值钱的部分。
“这四条会打架吗？“老哥问，“它们不是互相配合的吗？”
它们天天打架。你之所以没感觉到，是因为你还没遇到过”两条原则指向相反做法”的局面。等你真的开始做东西，你会发现这种局面才是常态。
我给你四个真实场景，一个一个讲。
冲突一：亲密性 vs 对齐
场景：一张商品卡片。上面是商品图，中间是商品名和价格，下面是”加入购物车”按钮。
按亲密性：商品名和价格是一组，它们要靠在一起。
按对齐：卡片里的所有文本元素应该左对齐在同一条线上。
这俩不冲突啊？——在简单情况下确实不冲突。现在加个条件：商品名是一行，价格是”¥199 起”这仨字，而且你想让价格视觉上更重一点。
有人会这么解决：把价格右对齐，顶到卡片右边缘。理由：“价格很重要，放在右边显眼。”
结果是什么？价格和商品名之间的距离，变成了”卡片宽度减去商品名长度”——一个由内容长度决定的随机数。内容一变，这个距离就变。亲密性被彻底破坏。
裁决思路：亲密性优先。
为什么？因为分组错了，后面全白搭。如果观众把”¥199 起”理解成了”下一个商品的价格”或者”某个独立的信息”，那你把它对得多齐、做得多大都救不回来。信息结构是第一位的，形式秩序是第二位的。
那对齐就不要了吗？不是。正确的做法是寻找不破坏亲密的对齐方式：
- 价格和商品名左对齐（跟商品名同一条线），价格的强调靠字号和字重来做，不靠位置。
- 或者：价格跟在商品名后面同一行，作为行内强调。
- 或者：整个”商品名+价格”这一组作为整体，跟图片、按钮对齐，而组内部用亲密性。
结论：先定分组，再在分组不被破坏的前提下找对齐。 当你发现”要对齐就必须拉开距离”的时候，说明你选错了对齐方式，不是说明亲密性该让步。
冲突二：重复 vs 对比
场景：一个表单，下面有三个按钮：“保存”、“取消”、“删除”。
按重复：三个按钮应该长得一样，同一套样式系统。
按对比：“保存”是主操作，必须突出。
这个冲突比上一个温和，但它更常发生。
新手的常见做法有两种，两种都错：
做法 A（只要重复）：三个按钮一模一样。结果是用户不知道点哪个，或者误点”删除”。这是”原则执行得很彻底，功能做废了”。
做法 B（只要对比）：把”保存”做成大红渐变加阴影，“取消”做成灰色小字，“删除”做成幽灵按钮。结果是画面上出现了三种完全不同的按钮语言——这已经不是对比，是混乱。
裁决思路：重复建立基线，对比在基线之上做一次变异。
具体说：
- 先用重复，定出”按钮长什么样”——尺寸、圆角、字号、内边距、字体。三个按钮全部遵守。
- 然后只改一个维度来做主次。最优选择是改填充（主按钮实心，次按钮描边，危险按钮只用红色文字）。尺寸和字号不动。
- 变异只有一处。你不能既改填充又改大小又改圆角——那就是三种东西了。
这个思路第 15 章讲变异的时候立过规矩：变异的力量来自”它是唯一的例外”。 你把三个按钮做成三种样式，等于没有基线，也就等于没有变异。
冲突三：对齐 vs 对比
场景：一个整齐的左对齐列表，你想让其中一条特别突出。
按对齐：所有条目左边缘在同一条线上。
按对比：把这条放大、或者往右挪一点、或者给个背景色。
如果你把它往右挪——对齐破坏了。
裁决思路：这个冲突里，对比可以赢，但代价很高，所以只能用一次。
第 17 章讲过”什么时候该打破网格”。打破网格之所以有效，恰恰是因为网格在。观众感知到了”这条不在队伍里”，这个感知本身就是对比的来源。
但注意代价：
- 全场只有一条被打破，它是焦点。
- 全场有三条被打破，它们是一个新的（更乱的）系统。
- 全场有十条被打破，网格不存在了。
所以裁决是：对比优先，但打破的数量必须严格控制在”一”。如果你发现需要突出三条，那不该用打破对齐的方式，该用别的手段（比如给三条同样的背景色，让它们作为一个新组整体突出）。
冲突四：亲密性 vs 对比
场景：一个数据看板上有四个核心指标。你想让其中两个”特别重要”。
按亲密性：四个指标是一组，应该等距排开。
按对比：两个要突出，另外两个要弱化。
如果你把重要的两个放大、另外两个缩小，同时保持等距——观众会把”两个大”看成一组，“两个小”看成一组。四个指标被读成了两组。
裁决思路：这次亲密性还是赢，但你要用另一种方式做对比。
正确做法：要么明确地分组（重要的两个放一起，不重要的两个放一起，两组间距拉大），让形式和信息结构一致；要么保持等距，用明度和饱和度做对比（重要的两个是深色大字，不重要的是灰色小字），不破坏”四个是一组”这个判断。
关键在于：你要先想清楚”这四个到底是不是一组”。 如果它们逻辑上确实是一组（同类的四个指标），就不要用尺寸去暗示它们是两组；如果它们逻辑上就是两组，就不要摆成等距的四个。
很多版面的丑，根源是”形式的分组”和”内容的分组”不一致。 而观众永远相信形式。
默认优先级的四条口诀
把上面四个案例抽出来，是这个顺序：
先保证亲密性，再保证对齐，再用对比拉开层级，最后用重复统一。
为什么是这个顺序？不是拍脑袋，是有依赖关系的：
- 亲密性先：它决定信息结构。结构错了，后面做得再漂亮也是把错误包装得更好看。这是正确性问题，优先级天然最高。
- 对齐第二：它是全局约束，会限制后面所有的位置选择。如果先做对比再回来对齐，你会发现对不齐，得推倒重来。
- 对比第三：它是在正确的结构、正确的秩序之上，做的加强。加强是最后才做的事——你不会先把字加粗，再决定哪句是重点。
- 重复最后：它是抛光和收口。你把结构、秩序、层级都定完了，最后检查一遍：有没有哪个值只出现一次？有没有哪个颜色没被定义角色？统一掉。
但我要马上给这个顺序加个注脚：
这个顺序是”默认优先级”，不是”律法”。 它可以被推翻，但推翻必须满足两个条件：
- 你能说出推翻的理由（不是”这样更好看”，是”因为这里的信息结构是……所以……”）。
- 你能说出代价（比如”我为了突出这条打破了左对齐，全场只打破了这一次”）。
说不出这两句话的推翻，就是在瞎搞。
七、四条共同的局限：它们保证”不出错”，不保证”有个性”
现在回到开头那张图。
老哥的四条全做到了，为什么还是不好看？
因为他以为这四条是”通往好看的路径”。它们是通往不难看的路径。这是两个不同的目的地。
我把这个局限讲透，因为它直接决定了你怎么用这四条。
局限一：这四条全是减法
你有没有注意到，这四条实际在做的事，全是减少：
- 亲密性：减少组数（把散的收拢）
- 对齐：减少线条数（把分散的边缘合并）
- 重复：减少值的数量（字号、颜色、间距的种类）
- 对比：减少层级数（把”都差不多”变成”明确的几级”）
四条全是”少”。
而”个性”从哪来？个性从来不来自”少”。个性来自一个具体的、非常规的决定：这个反常的留白比例、这个不常见的字体搭配、这个有点过分的字号反差、这个故意的不对称。
一个只做减法的人，最后做到极致就是”什么都没有”。这不是个性，这是寡淡。
局限二：这四条全是关于”关系”的，不是关于”内容”和”情绪”的
这四条能告诉你：这两个元素该靠近、这条边该对齐、这个字号该统一、这两个层级该拉开。
它们一个字都不会告诉你：这个画面该传达什么情绪？这个品牌该是热的还是冷的？这个留白该留得让人舒服还是让人不安？这个反差该做到让人惊喜还是让人紧张？
而后者，恰恰是”好看”和”只是不难看”的分界线。
这不是这四条的问题，这是它们的定位。它们是语法，不是文章。语法全对的文章，可以是废话。
局限三：这四条追求”无摩擦”，而个性来自”恰当的摩擦”
第 01 章的心法里我讲过一个词：认知摩擦。大脑对熟悉的东西走捷径，直接跳过；只有出现一点点”不对劲”，它才会从省电模式切回精细模式，真正”看见”。
这四条原则的目标是什么？是消除所有摩擦：位置有规律（不摩擦）、边缘有秩序（不摩擦）、样式有系统（不摩擦）、层级清晰（不摩擦）。
读者看完这样的版面，体验是：顺畅，且毫无记忆点。
他读完了，他理解了，他三分钟后忘了。因为他的大脑全程在省电模式里，什么都没存下来。
这就是为什么很多”按四条做的”版面专业但无聊——它们完美地完成了”让人读懂”这个任务，然后没有做任何别的。
那怎么办
三条出路，我只点一下，后面章节会展开：
- 在四条做对之后，主动加一处”有理由的越界”。 打破网格（第 17 章）、变异（第 15 章）、故意的不对称（第 13 章讲张力与平衡）。
- 把力气从”关系”转到”内容”。 画面上真正被看到的是什么？那个东西本身有没有力量？一张平庸的图上，四条做得再对也没用；一张有力量的图，四条做得粗糙一点也能救。
- 接受”有些项目就只该做到及格”。 一个后台管理页面，专业但无聊是对的——它的目标是让人高效干活，不是让人记住。你要能判断”这个东西该不该有个性”，这本身就是判断力。
八、跨场景：四条原则在不同地方长什么样
案例一：一张技术大会的讲师海报（印刷）
改前的画面：一张深色背景的海报。正中间是一位讲师的照片，照片下面并排挤着：讲师姓名（36 号，白色）、职位（20 号，灰色）、公司（20 号，灰色）、演讲主题（28 号，黄色）、时间地点（16 号，白色）。所有元素居中，间距都是 20。右上角有个论坛 logo，左下角有个二维码。
问题在哪：
- 亲密性：五个信息块等距排列，观众分不清”姓名+职位+公司”是一组、“演讲主题”是另一组。最糟的是”公司”和”演讲主题”之间也是 20 的间距，观众会把公司名和主题读成一句。
- 对齐：全部居中，每条文本左右都是参差边缘，形成七八条模糊的竖线。
- 重复：字号有五种（36、28、20、16，还有 logo 和二维码里的字号），颜色有四种，找不到任何比例关系。
- 对比：36 和 28 差不了多少，两个层级在打架；20 和 16 更是几乎一样。
改后：亲密性——明确分成三组，「姓名 / 职位·公司」一组（组内间距 8）、「演讲主题」独占一组（上下各留 48）、「时间·地点 / 二维码」一组，组间间距 40 到 48；对齐——全场改左对齐，所有文本左边缘落在同一条竖线上（距左边 80 像素），照片右移成独立块，与文本块之间留 40 的沟；重复——字号压到三级（56 / 32 / 16，比例约 1.75），间距只剩 8、24、48 三个值；对比——姓名 56 号粗体白、主题 32 号常规黄、其余 16 号浅灰，明度差、字号差、字重差三者叠加。
改完第一眼看到姓名，第二眼主题，第三眼时间地点。信息结构一目了然。
但它够好吗？ 还不够——它现在”专业”，但仍然中规中矩。要加个性，可以做一处越界：把演讲主题里的一个关键词放大到 72 并换成 accent 色，让它压过姓名成为主角——如果这场大会真正要卖的是”议题”而不是”人”。这个决定不来自四条原则，来自你对这场大会的理解。
案例二：一个后台系统的告警面板（界面）
改前的画面：顶部一排四个指标卡，每个卡片里有：一个图标、一个数字、一行说明文字、一个”同比 +12%“的标签。四个卡片等宽等距排开。卡片里，图标在左上，数字在图标右边，说明在数字下面，标签贴在右下角。每个卡片的数字都是 32 号粗体，说明都是 12 号灰字，标签都是 12 号，颜色按涨跌是红/绿。
问题在哪：
- 亲密性：卡片内部的四个元素，间距分别是 12、8、20——几乎一样，四个元素看起来是四个独立的东西，不像”一个指标”。
- 对齐：图标、数字、说明三者左边缘不对齐（图标有内边距，数字跟在图标后面）；标签右对齐到卡片右下角。卡片里有四条不同的竖线。
- 重复：四个卡片重复了”形状”——同样的圆角、同样的投影、同样的图标底座。但关系没重复：卡片内边距有的是 16 有的是 20，“同比”标签的位置因为数字长度不同而上下乱跳。
- 对比：四个数字一样大。也就是说，报警的严重程度和数字大小完全无关。运维看到这个面板，第一件事不是看哪个最严重，而是从左到右读一遍。
改后：亲密性——每个卡片内部只留两个间距，数字和标签之间 4（标签是数字的补充，属同一组），组与组之间 16；图标直接删掉（纯装饰，不承载信息）。对齐——卡片内所有元素左对齐到同一条线，四个卡片的这条线彼此也对齐；四个数字的上边缘在同一条水平线上，让它们可以横向扫读比较。重复——间距序列定为 4 / 8 / 16 / 24，内边距统一 16。对比——这是本例的重点：只有”当前最严重的那一个”是大数字（48 号）加深色底，其余三个 24 号常规，且三者保持完全一致，只变异一处。
这里出现了本章讲的冲突：你想让两个”警告级”的指标都突出，怎么办？
裁决：不要做两个大的。要么只突出最严重的一个（用打破重复的变异）；要么给两个警告级的卡片同一种背景色（它们作为一个新组整体突出，而组内保持一致）。二选一。不能两个都放大又给不同颜色——那样就出现了两种”强调语言”，观众不知道哪个更高级。
案例三：一页简历（文档）
改前的画面：一页 A4。顶部居中的姓名（小二，加粗），下面居中一行联系方式（五号）。然后是”教育经历”、“工作经历”、“项目经验”三个大块，每个大块的标题是小四加粗，下面每条经历是：起止时间左对齐，公司名紧跟着时间，职位在下一行，职责描述再下一行。行距 1.5 倍。段落之间空一行。
问题在哪：
- 亲密性：致命伤。“2020.03 - 2022.06”和”某某科技有限公司”在同一行，中间只隔两个空格——它们看起来是一句话。而职位和职责在下面，中间却空了一行。观众会读成”2020 到 2022 在某某科技有限公司”（对），然后”职位 + 职责”这一坨跟下一段经历的时间又挨得比较近（错）。
- 对齐：所有内容左对齐到页边距，看起来”对齐了”。但起止时间长度不一（“2018.07 - 2019.02” 和 “2019.03 - 2023.11” 一样长，但如果是”2018.07 - 2018.09”就短一截），导致后面的公司名起点参差不齐——形成了四五条竖线。
- 重复：字号有三种（小二、小四、五号），但”职位”和”公司名”用了同一个字号，读者分不清哪个是重点。
- 对比：几乎为零。整个页面是均匀的一片灰。
改后：亲密性——一条经历 = 一个明确的组。组内是”公司名（最重）/ 职位（次重）/ 时间（最轻）/ 职责（正文级）“，组内间距 4 到 6，组间 20 到 24。对齐——把时间单独拎出来右对齐到页面右边距，这样所有公司名的左边缘在一条线上、所有时间的右边缘在一条线上，竖线从四五条减到两条。这里时间被拉到最右边，离公司名很远，亲密性被破坏了吗？ 没有——“时间属于这条经历”靠的是它和公司名在同一水平带上（垂直方向亲近）以及与下一条经历之间的垂直间距。这就是”间距能表达多个维度”：水平疏远、垂直亲近。重复——三级字号且角色明确：公司名 14 号粗、职位 12 号常规深色、时间与职责 10.5 号灰色。对比——姓名放大到 24 号，联系方式缩到 9 号灰色。很多人舍不得把联系方式做小，但招聘方不看你的电话号码，他们看你的经历。
案例四：一家小面馆的菜单（纸质）
这个案例我想让你看到四条原则在”没有设计师参与”的场合是怎么被违反的。
改前的画面：一张塑封的 A4，上面密密麻麻排了四十个条目，每行是”菜名 + 价格”，价格用空格顶到右边。分了”面食""饭类""小菜""饮品”四个区，区标题是菜名加粗再加一条下划线。字号全部一样，行距紧凑。右下角贴了个二维码。
问题在哪：
- 亲密性：四十行等距排列，行距略大于字距。分行是对的，但区和区之间没有更大的间距，读者看不出”哪里是小菜的结束、饮品是开始”。
- 对齐：价格用空格顶到右边——这是最典型的假对齐。不同长度的菜名导致空格数不同，价格的小数点其实在四五条不同的竖线上。
- 重复：四十个条目重复得很好（这倒是做到了），但重复的是”形状”不是”关系”——所有条目一样重，也就意味着没有一个是招牌。
- 对比：完全没有。老板最想卖的那道”招牌牛肉面”，跟”矿泉水”一个待遇。
改后：区与区之间留 24，区内条目之间留 8，条目名和价格之间用点线连接（点线在这里是合理的，它解决的是”横向扫读时对不上行”的真实问题，不是装饰）；价格改为右对齐且小数点对齐，不靠敲空格；间距序列只有 8 和 24 两个值；招牌菜给一个深色底反白的小标签，或者单独放进顶部”店长推荐”区，只有三到五个，其他全部弱化。
冲突处理：招牌菜要突出（对比），但它们又是”面食”区的一部分（亲密性）。裁决——在面食区内用背景色块突出，保留它们在区内的位置；或者复制一份到顶部推荐区。但不要为了突出把它们全部挪到顶部，那样”面食”这个分类就被破坏了。
案例五：玄关的那一小块台面（家居）
最后一个案例，证明这四条不是”平面设计专用”。
改前的画面：进门处一个窄柜，柜面上放着：装钥匙的塑料盒、一叠没拆的快递、三个不同样式的充电头加缠在一起的线、一小盆多肉、一张写着”记得带门禁卡”的便利贴、一副墨镜、半包纸巾。
用四条诊断：亲密性——所有东西等距散开，钥匙和门禁卡提醒本该是一组，却离得最远；对齐——每件东西离柜沿一个随机距离，没有任何两条边有关系；重复——容器款式三种、材质四种；对比——没有主角，眼睛扫一遍什么都看到了，什么都没记住。
改后：亲密性——分成「出门组」（钥匙、门禁卡、墨镜）和「回家组」（拆快递工具、充电），两组之间留空，便利贴直接贴到钥匙盒上（它属于出门组）；对齐——所有物品前边缘对齐到距柜沿 5 厘米的一条线，线的数量从七八条减到一条；重复——小物全部用同材质同色的两个托盘收纳，重复的是”容器关系”不是”容器形状”；对比——多肉是唯一的高物件，移到柜子一端，周围留空，用孤立让它成为主角。
改完没有增加任何东西，反而少了两样（塑料盒、纸巾移走）。但台面从”杂物堆”变成了”有安排的角落”。
这跟排版是同一件事：你不是在摆东西，你是在定义东西之间的关系。
心法
这一章我想说的核心，不是那四条本身，是你应该用什么态度对待任何一条设计原则。
我把结论放在最前面：
原则保证下限，判断力决定上限。而判断力，恰恰来自你知道原则会在什么时候失效。
这句话有三个部分，我一个一个拆。
第一部分：原则保证下限。
这不是贬低原则。下限很重要。
一个团队里如果每个人的代码都格式混乱、命名随意、错误不处理，这个团队写不出可靠的东西。等他们把 lint 跑绿了，他们的代码从”不可维护”变成了”可维护”。这是巨大的进步，是从负分到零分。
设计同理。大多数人做的东西，问题不在于”缺少个性”，在于错误太多。信息分组是错的、边缘是乱的、字号是随手填的、层级是没有的。这些错误会掩盖一切——你加的任何”设计感”，都会被这些错误稀释掉。
所以学原则的第一个价值是：它让你有资格进入下一轮。 不是让你赢，是让你不被第一轮淘汰。
第二部分：判断力决定上限。
零分以上怎么往上走？
走不上去的人，通常卡在同一个地方：他们以为规则是可以累积的。 学会了四条，再学十条，再学二十条，总有一天就全知道了，就厉害了。
不是这样的。
你写五年 Go 的经验应该告诉你：真正让你变强的，不是又记住了多少个 API，而是你开始能判断”这个场景下，这个惯用法其实不合适”。比如所有人都说”用 channel 通信”，但你知道在某些场景下，一个加锁的共享变量既简单又快，channel 反而把逻辑绕复杂了。
这个判断从哪来？从你知道 channel 在什么情况下会变成负担而来。
也就是说：你对一条规则的理解深度，等于你掌握它失效边界的准确度。
只会用规则的人，遇到规则适用就照做，遇到规则不适用就茫然或者瞎搞。真正懂的人，手里有一张地图——他知道这条规则的适用范围画到哪，边界之外是什么地形，边界附近有哪些例外。
第三部分：为什么判断力来自”知道原则为什么会失效”。
这是最反直觉的一点，我展开讲。
大部分人学习设计原则的方式是：记住它 + 找例子证明它是对的。
看到”亲密性”，去找十张好作品，验证它们确实用了亲密性。看到”对比”，去找十张好作品，验证它们确实用了对比。
这个学习方法有一个致命缺陷：你永远只能找到支持它的证据。 因为你是带着”它是对的”这个预设去找的。这叫确认偏误，你写代码的时候对这个东西应该很熟——你觉得自己写的 bug 不可能在那个模块，于是你只检查别的模块，查了三天。
正确的学法是什么？是反过来：
去找那些”违反了这条原则，但依然很好”的作品。
你去找一张没对齐但很好看的海报。找到了之后别急着说”哦这是例外”，你要往下问：
- 它具体违反了哪一条？
- 违反的程度有多大？
- 它用什么补偿了这个违反？（第 01 章的参考答案里我给过这个判断法：看错位有没有被别的手段补偿）
- 如果把背景换掉——比如这张海报是给一个律师事务所做的，还成立吗？
- 如果我照抄这个”违反”放到我的场景里，会不会直接变成”没排版好”？
把这五个问题答完，你对”对齐”的理解，会比背一百遍”要对齐”深十倍。
因为你第一次真正看见了这条规则的边界在哪里。
我再给你一个更狠的说法：
规则的价值，不在于它告诉你要做什么，在于它给了你一个”有理由违反它”的起点。
没有规则的人违反规则，那叫乱来。他甚至不知道自己在违反什么。
有规则的人违反规则，那叫决策。他知道正常做法是什么、他知道自己在偏离、他知道偏离的代价、他知道用什么来补偿。
这就是”从心所欲不逾矩”的真实含义——不是不守规矩，是规矩已经内化到你随时可以判断”这次要不要守”的程度。
回到那四条。
你现在知道：亲密性管信息结构，对齐管全局秩序，对比管注意力分配，重复管系统一致性。你也知道了它们打架时的默认裁决顺序，以及这个顺序可以被推翻的条件。
那么下次你做一张图，你面对的就不是”我有没有遵守这四条”，而是：
- 这次的信息结构是什么？我有没有用间距把它表达清楚？
- 如果我想让这个元素突出，我该打破哪一条？打破的代价我付得起吗？
- 我这个版面”不够好”，是因为违反了某条原则（那是错误，改掉），还是因为四条都做到了但没有主张（那不是原则能救的）？
最后这个问题，是这一章真正要留给你的。
四条原则能让你做出”没有错误”的东西。而”好”这个字，从来不是”没有错误”的同义词。
代码也是一样。lint 全绿、测试全过、覆盖率 90%——这些都不能证明这段代码是好代码。好代码是你读完之后说”哦，原来这件事就该这么建模”。这句话里没有一个字跟 lint 有关。
所以，学完这一章，你要做的不是把那四条贴到显示器上每天检查。你要做的是：从今天开始，每次看到任何设计（好 的坏的都算），问自己一句——它的信息分组和它的形式分组一致吗？
这一个问题的答案，能解释你在生活里见到的大部分”说不出哪里怪”。
小结
这一章我讲了四句话，外加一句警告。
四句话：
-
亲密性——靠得近就是有关系。它的真正威力不是”把相关的放一起”，而是它可以完全替代线条、边框和色块来做分组，而且更优雅，因为它只做减法不做加法。判据：组间间距至少是组内间距的 1.5 到 2 倍，绝不出现”差不多”的间距。
-
对齐——没有元素是随便放的。它凭什么成立？因为每一个未对齐的边缘，都是一条需要被大脑单独解释的线。所以对齐的本质是减少画面上”线”的数量。判据：把所有边缘画成线，数一数有几条，看它们之间有没有数值关系。
-
重复——你重复的应该是关系（字号比例、间距比例、颜色角色），不是形状。重复形状是加法，会变成噪音；重复关系是抽象，会让画面上需要被解释的东西变少。判据：列出所有值，只出现一次的值多半是多余的。
-
对比——在版式里具体表现为三件事：字号比（中文建议 1.6 到 2 倍起步）、字重比（中文光靠字重撑不起层级，要和字号、明度叠加使用）、色彩角色比（强色只给一处，灰度测试下仍要有层级）。
外加一句警告：
这四条全是减法，全是关于”关系”的，全是为了消除摩擦。所以它们能保证你的版面”不出错”，但不能保证它”有主张”。 专业但无聊，就是只做减法不做决定的必然结果。
还有一条裁决顺序，请记住它，因为它每天都会用到：
亲密 → 对齐 → 对比 → 重复。
先保证信息分组正确，再建立全局秩序，再拉开层级，最后统一系统。这个顺序可以被推翻，但推翻时必须能说出理由和代价。
你真正要带走的不是这四句话，是那句心法：原则保证下限，判断力决定上限，而判断力来自你知道原则什么时候会失效。 所以从今天起，别再只找”证明规则对”的例子了——去找那些违反规则却依然好的作品，把它们的”补偿手段”拆出来。那才是你真正会长本事的练习。
下一章我们讲视觉层级。你会看到，那四条原则里最容易被糊弄过去的那一条——对比——在”读者按什么顺序读”这件事上，到底有多决定性。
【思考题】
-
找一个你天天在用的界面（外卖 App、打车 App、你公司的内部系统都行），数一数它的首屏上有多少条不同的”左边缘竖线”。然后问自己：这些线里，有几条是”有理由的”（属于不同的栏或者不同的层级），有几条是”随手放的”？如果你数出来的数量超过五条，试着说出：这个界面是不是因为内容本身就复杂，还是因为设计的时候每个模块各自为政？
-
本章说”亲密性可以完全替代线条和边框”。请你找一个反例：有没有哪种情况下，必须用线条或色块来做分组，光靠间距是不够的？想不出来的时候，往这两个方向试：信息非常密集的时候（比如一份火车时刻表）；以及元素本身在动的时候（比如一个实时刷新的数据列表）。
-
我举过”三个按钮：保存、取消、删除”的例子，说要”重复建立基线，对比做一次变异”。现在换一个场景：一个页面上有五个并列的入口（比如首页的五个功能图标），它们地位完全相同。这时候重复和对比的关系该怎么处理？如果五个完全一样，是不是就”没有重点”？这个”没有重点”，是错误还是正确？
-
本章的裁决顺序是”亲密 → 对齐 → 对比 → 重复”。请你构造一个具体的场景，让这个顺序明显不成立——也就是说，在那个场景里，把某一条排后面会做出明显更差的结果。写清楚画面上有什么、按默认顺序做出来是什么样、换顺序做出来是什么样。
-
找一张你觉得”专业但无聊”的设计（很多企业官网的页面、很多政府/机构的宣传册、很多软件的用户协议排版都是好素材）。用本章的框架分析它：四条原则它做到了几条？它缺的是什么？如果你要给它”加个性”，你会动哪里？动完之后，它会不会变得”不够专业”？这两者的边界在哪？
-
本章说”重复该重复关系，不该重复形状”。请你检查自己：你做过的东西里，有没有哪一处的”重复”其实是在做加法（每重复一次就多一个装饰元素）？如果有，把它减掉之后，画面是变好了还是变空了？这个”空”是真的空，还是你习惯了那个装饰？
【参考答案】
-
这道题的重点不在数的结果，在你数的时候被迫做的那个判断——这条线有没有理由。
一般来说，一个成熟界面的首屏，左边缘竖线应该在两到四条之间：页边距一条、内容区一条、可能的侧栏一条。超过这个数，通常有两种成因，它们的解法完全不同。
第一种：真的复杂。 首屏上有十几个不同性质的模块，每个模块的信息密度、交互方式都不同，它们确实需要不同的缩进。这种情况下，解法不是强行合并竖线，而是分栏——把这些模块归到两三个栏里，每个栏有自己的左边缘，栏间有明确的沟。竖线的数量没变，但它们之间的关系变清楚了（这些属于 A 栏，那些属于 B 栏）。
第二种：各自为政。 这在大型团队里极其常见：这个模块是 A 组做的，那个模块是 B 组做的，两边的内边距一个是 16 一个是 20，谁也没跟对方对过。识别方法很简单——看差值是不是”零头”。16 和 24 是有关系的（1.5 倍），16 和 20 也有关系，但 16 和 19 一定是各做各的。
零头出现的地方，就是协作的接口没对齐的地方。这在软件工程里叫”模块间的契约没定”，在版式里叫”没有网格”。本质上是同一件事：缺少一个所有人都得遵守的、外在于个人判断的约定。
顺带说一句，这也是为什么设计系统里”间距 token”这么重要——它不是为了让设计师少想，是为了让两个不相干的人做出来的东西能拼在一起。跟你定接口规范是一个道理。
-
光靠间距不够的情况，我给你三个，你自己还能找出更多。
第一，信息密度极高、且需要横向跨行追踪的时候。 火车时刻表、航班大屏、股票行情表。这类东西的共同点是：读者的眼睛要横向扫过一行，并把这一行的不同字段对上。这时候如果只有间距没有线，眼睛在长距离横扫时会”跳行”——读到第三个字段的时候，已经不知道自己在第几行了。
所以这类设计必须加线，但线的用法有讲究：加极浅的横向斑马纹（一行浅一行深），而不是给每个字段加竖线。斑马纹解决的是”横向追踪”的问题，而且它不增加竖直方向的视觉噪音。
第二，元素在动、在变的时候。 一个实时刷新的数据列表，如果分组靠间距，那么当某一行的数据变长、把整行撑高的时候，间距关系就变了，分组判断随之失效。这时候需要一个不随内容变化的结构——背景色块、或者固定的行容器。这是”结构要稳定”的要求压过了”少即是多”的要求。
第三，需要表达”嵌套”的时候。 间距能表达”这两块近、这两块远”，但它表达不了”这一块属于那一块”。一个二级评论属于一级评论、一个子任务属于一个父任务——这种层级嵌套，光靠间距会糊，需要一个左缩进加一条竖引导线（或者至少一条浅色的左边界）。
这三个例子的共同点是什么？都是”信息结构比二维平面更复杂”的情况。 间距是一种平面的、靠距离说话的手段，它能表达的拓扑是有限的。当你的信息结构超出了”平面上的远近”能表达的范围，就得引入更硬的结构。这不是原则失效，是你选错了手段——就像你不会用数组去实现一个需要频繁按键查找的东西。
-
五个地位相同的入口，没有重点是正确的。
我猜你答这道题的时候会犹豫，因为我们被灌输”要有视觉重点”太久了。但”要有重点”这句话是有前提的：重点服务于目标。
如果这五个入口确实地位相同（用户可能点任何一个，业务上也没主次），那让它们绝对一致，就是最诚实的设计。你要做的不是制造一个假的”主推入口”，而是：
- 让五个入口作为一个整体从周围的环境里跳出来（用位置、用留白、用和背景的明度差）。这叫组级对比——对比发生在”这一组”和”画面上其他东西”之间，而不是组内。
- 组内保持绝对一致：同样的尺寸、同样的图标风格、同样的字号、同样的间距。
这正好是第 15 章讲的”重复给对比铺路”的反向印证：正是因为组内重复得彻底，这一组才能作为一个整体去跟别的东西对比。
那什么时候五个里面该有一个突出？当业务上真的有主推的时候——比如这个月要把”新人专区”的转化做起来。这时候才做变异，而且变异只有一处。
判断标准只有一个：这个”重点”，是业务真实存在的，还是你觉得”没重点不好看”而加上去的？ 后者是设计里的一种常见病，我管它叫”重点焦虑”。它是把”对比是好东西”这条技巧，用在了不需要对比的地方。
再给你一个延伸：有没有五个入口、业务上有主次、但依然不该做视觉重点的情况？有。比如一个工具栏，五个按钮里”新建”最重要，但用户一天点一百次，早就形成肌肉记忆了——这时候给”新建”加视觉重点反而是干扰。这又是”每个手段都有情绪代价”的那一课（第 01 章心法）。
-
我给你一个我真实遇到过的场景，你可以拿它当参照来检验你自己的例子。
场景：一张 A4 的产品单页，内容是一张产品图、一个产品名称、一句 slogan、三段卖点文字、一个价格、一个二维码。
按默认顺序做（亲密 → 对齐 → 对比 → 重复）：先把”名称 + slogan”定为一组、“三段卖点”定为一组、“价格 + 二维码”定为一组；然后全场左对齐；再把名称放大、卖点缩小；最后统一字号和间距。做出来是一张标准的、合格的产品单页。
现在换一种内容：同样的版式，但这次是一张演唱会海报，内容是艺人名字、演出时间地点、票务信息、六个赞助商 logo。
这时候默认顺序里的”对比”就该提前了。为什么？因为演唱会海报的第一任务是在两米外被认出来。如果你先按亲密性把艺人名字和时间地点排成一组，再对齐，最后才去考虑对比——你做出来的会是一张”信息很清楚的海报”，但它没有远距离的冲击力，混在十张海报里没人看第二眼。
正确的顺序是：先定对比（艺人名字要做到多大？大到什么程度？），再围绕这个决定去安排亲密和对齐。 也就是说，当”注意力分配”是作品的首要目标时，对比的优先级会超过亲密和对齐。
这说明什么？ 说明那个默认顺序的适用前提是”信息传达优先”。当作品的首要目标变成”吸引注意”（海报、封面、广告牌、缩略图），对比的优先级就要往上提。
你在构造自己的例子时，可以从这个角度入手：找出一个”首要目标不是传达信息，而是别的什么”的设计场景，然后看默认顺序在哪一步失效。能想到的场景越多，你对这四条的理解就越接近”能自己做裁决”。
反过来也成立：如果一个场景里”信息绝对不能被误读”（药品说明书、法律合同、飞行检查单），那亲密性的优先级会高到压倒一切，甚至可以为它牺牲对比和美观。这时候”专业但无聊”不是缺点，是职业伦理。
-
这类”专业但无聊”的东西，用四条去套，你会发现一个很有意思的结果：它们通常四条全做到了。
对齐做到了（甚至过度：所有的框都严丝合缝）、重复做到了（全场只有两种字号、两个颜色）、亲密性做到了（信息分组清清楚楚，绝不误读）、对比做到了（标题和正文层级明确）。
也就是说，你挑不出它的错。而它依然无聊。
它缺什么？三样东西，你对照着看：
第一，缺一个”决定”。 这类版面里，每一个选择都是”最安全的那个”：标题居中因为居中不会出错、用蓝色因为蓝色最稳妥、分三栏因为三栏最标准。整张图里找不到一个”作者在这里冒了点险”的痕迹。而没有冒险，就没有风格。
第二，缺”关系”之外的东西。 四条原则只管元素之间的关系，不管元素本身。这类版面上的元素本身——那张配图、那个图标、那句文案——往往是通用素材库里随便挑的。关系排得再对，内容是空的。
第三，缺”留白的主张”。 你去看这类版面，留白通常是”剩下的地方”，而不是”我要在这里留一块空”。前者是被动的，后者是主动的。主动的留白会让人感到”作者知道自己在干什么”（第 16 章会专门讲这个）。
好，现在说你会怎么改，以及边界在哪。
我的改法通常只动一处：把某个比例推到极端。 比如把页边距从标准的 20 毫米推到 50 毫米，把正文栏宽压到很窄，把标题从 36 号推到 72 号然后让它出血（伸出页边距之外）。只动一处，其余全部保持原样。
这么改完，它会不会”不够专业”？会，有风险。 极端比例会挤压信息容量——页边距一大，能放的字就少了；标题一大，正文就得让位。如果这个版面必须承载那么多信息，这次冒险就失败了。
所以边界在这里：个性来自”有余量的地方”。 一个信息塞得满满的版面，没有任何余量可以做个性，它只能做到专业。个性是拿空间、拿数量、拿注意力换来的——你必须有东西可以换。
这也是为什么很多”看起来高级”的设计，信息量都很少。不是设计师懒，是留白和余量本身就是成本。你要能区分”我的版面塞不下，所以平淡”和”我选择平淡”——前者是能力问题，后者可能是业务约束下唯一正确的选择。
-
这道题我希望你真的去翻自己的旧文件，因为”发现自己一直在做加法”这个体验，比我说一百遍都管用。
你大概会发现这么几类”假重复”：
第一类：每个条目都带一套完整装饰。 每个卡片都有底、投影、圆角、图标底座、分隔线、箭头。你把六个卡片放在一起，画面上出现了三十六个装饰元素，而真正的信息只有六条。这类”重复”的实质是：你把一个装饰做成了模板，然后复制了六份。 复制不等于抽象。
第二类：为了”统一”而给不需要的东西加统一的外衣。 比如为了统一，给所有图片都加了同样的边框；给所有段落都加了同样的首行缩进；给所有标题都加了同样的小方块前缀。这些东西单独看都说得过去，加在一起就成了噪音。
第三类：把”重复”理解成”每个元素都要出现在结构里”。 比如一个三栏布局，其中一栏内容不够，就硬凑一个元素放进去，理由是”三栏才整齐”。这是最隐蔽的一种加法——你为了维护形式而制造了内容。
减掉之后变空了怎么办？
先分清两种”空”。
一种是真的缺东西：信息没说全、层级断了、读者走到一半不知道下一步看哪。这种空要补，但不是用装饰补，是用内容或者用明确的结构补。
另一种是你不习惯的空：信息全都在、层级也清楚，只是没有那些你已经看习惯的装饰了。这种空不要补。你要做的是给它三天时间——三天后再看，你会觉得原来的版本很啰嗦。
这个”不习惯”的感觉值得警惕，它是设计学习里最大的陷阱之一：你把”熟悉”误认为”完整”。 就像你第一次看没有 Javadoc 的干净代码会觉得”是不是缺了点什么”，看习惯了才发现那些注释大部分是废话。
【动手练习】
-
四条体检：给三个你身边的东西做一次全面诊断
找三样东西：你自己做过的一张图或一页 PPT、一个你常用的 App 的某个页面截图、以及一件实物（一本书的封面、一张菜单、一个快递柜的操作面板、你家玄关的照片）。
对每一件，按四条逐一写下来（真的写，不要只在脑子里过）：
- 亲密性：上面有几个”元素团”？团之间的间距是团内间距的几倍？有没有哪个元素到两个团的距离差不多（这是硬伤，必须写出来）？
- 对齐：把所有左边缘画成竖线，有几种？上边缘呢？有没有”看起来对齐了但其实没有”的？
- 重复：列出所有字号、所有颜色值（可以目测描述，不用精确取色）、所有间距。有没有只出现一次的值？这些值之间有没有倍数关系？
- 对比：眯眼看，最重的是哪一块？它是不是作者（或你）最想让人看的？去色之后还有没有层级？
自评标准：三样东西做完，你应该写出至少九条具体的、可改的问题（每样至少三条）。如果你的清单上全是”挺好的""没什么问题”，那不是说明东西好，是说明你还没真的在数——回去把每条边缘都画出来，包括图标、标点、色块的边界。合格的清单里，至少要有一条是”我数出来七条竖线”这种让你意外的发现。
-
冲突训练：同一个内容，两种裁决
用同一组内容做两个版本。内容建议：一个”限时优惠”的卡片，包含商品图、商品名（一行）、原价（带删除线）、现价、剩余时间、一个”立即抢购”按钮、一行小字说明（比如”每人限购两件”）。
版本 A：亲密性优先。 把”原价 + 现价”作为一组，跟商品名靠近；“剩余时间”单独一组，跟价格之间留出明显的间距（即使这让它在视觉上显得孤立、打破了对齐）。小字说明紧贴按钮。
版本 B：对齐优先。 所有文本元素左边缘严格对齐到同一条线；价格放到按钮的同一水平线上；小字说明放到卡片最底部，与按钮之间留出大间距（即使这让”小字属于按钮”这个关系变弱了）。
做完之后，把两个版本给三个人看，问同一个问题：“这张卡上最想让你做的事是什么？”
自评标准：版本 A 的读者应该更快说出”抢购”并注意到”限时”（因为亲密性把紧迫感做出来了）；版本 B 的读者更可能说出”这是个什么商品”（因为对齐让整体更好读）。如果两个版本的回答没有差别，说明两个版本的差距不够大——检查：A 版里价格和时间的间距是不是真的拉开了（至少是其他间距的两倍）？B 版里是不是真的只有一条左边缘线？
最后自己回答：这个商品卡片，到底该用 A 还是 B？理由不能是”哪个好看”，必须是”这个卡片的首要目标是什么”。
-
减法训练：把一个版面减掉 30%，看它会不会垮
找一张你觉得自己做得”还行”的图（或者上一题的版本 A）。你的任务是：删掉画面上 30% 的元素，但不删任何信息。
允许的操作只有三种：删掉纯装饰元素（线条、边框、底色、图标底座、投影）；把两条信息合并成一条（比如”时间：周六下午两点”改成”周六 14:00”）；把某个元素从”显式”变成”隐含”（比如三个并列的条目，如果能靠间距分组，就删掉它们之间的分隔线）。
删完之后，做两个检查：
- 信息检查：找个人看三秒，问他记住了什么。如果他能说出你想让他说的，信息没丢。
- 结构检查：倒过来看（第 01 章教的），看画面还有没有清晰的几个”团”。如果糊成一片，说明你删掉的是结构，不是装饰——把那个元素加回来。
自评标准：合格的标准是——删完之后你觉得”好像缺了点什么”，但别人说”挺清楚的”。那个”缺了点什么”的感觉，就是本章说的”不习惯的空”，给它三天。
加分项：如果你删完之后发现”删无可删”（画面上已经没有一个纯装饰元素了），那说明你的原图其实已经很克制了——这时候把练习改成”把剩下的元素间距关系全部重排成 4/8/16/24 的序列”，看画面是不是更整了。