第 03 章 格式塔：大脑为什么非要”补全”
先别管理论。我给你描述一个你肯定经历过的场面。
你下班出地铁，走那条走了两年的小路。天已经半黑，路两侧的路灯刚亮，光线是那种发黄发钝的橙。前面大概三十米，梧桐树底下有个东西。
我说的”有个东西”，是按你视网膜上真实收到的信息来说的——一截橙色，大约十厘米宽，被一根树干从中间切成两段，断口很齐；橙色下面压着一小片深色，形状不规则，左半边完全被冬青灌木挡住；再往下，是两个更暗的小块，跟地面的沥青几乎一个颜色，边界糊在一起。
这就是全部证据。三段橙色，一片被挡住一半的深色，两个看不清边界的暗块。
你看到的是什么？
你看到的是：一个穿橙色背心的环卫工人，蹲在地上捡东西。
然后你走过去。走近了才发现——一个橙色的塑料路锥倒在地上，旁边堆着一只黑色垃圾袋，袋子被风吹得鼓了一半。根本没有人在那儿。
我要你注意的不是”你看错了”。我要你注意三件事。
第一，从”收到那几段橙色”到”看见一个人”，中间过了多久？不到零点二秒。第二，这零点二秒里，你没有任何一个瞬间是”我先看到橙色的一截，再看到深色的一片，然后推断这大概是个人”。你是直接看到一个人的。第三，等你走近、证据足够推翻结论的时候，你还愣了一下——“那是个人”这个知觉太结实了，它不是轻飘飘的猜测，它是言之凿凿的断言。你的大脑不仅补全了，还压根没告诉你它在猜。
这一章要讲的，就是这个补全。它为什么非要补全不可，它按什么规则补全，以及——你作为做设计的人，怎么顺着它、怎么跟它打架、打输了又该怎么办。
一、你先看到的是”人”，不是”三段橙色”
我们先把这个现象本身掰清楚，因为它违反直觉的地方比你想的多。
“导师，这不就是脑补吗？我知道人会脑补。”
“脑补”这个词太轻了，它暗示这是个偶发的小毛病。它不是。让我把它说得再狠一点：你的视觉系统默认认为”有东西在那儿”，而不是”有像素在那儿”。 它拿到一堆碎片的第一反应不是”我看看这些碎片是什么”，而是”我猜一个能解释这些碎片的最合理的世界，然后我就活在那个世界里”。
这不是视觉系统的 bug，这是它的基本工作方式。你回想一下第一章那个流程：视网膜上只有中央凹那一小块是高清晰的，眼球每秒跳三次去采样，大脑把碎片拼起来给你一个”完整清晰的世界”。拼的时候有大量信息是它自己填的。格式塔讲的就是”它按什么规则填”。
现在我把这个现象推到更极端的地方，你感受一下这个补全有多不讲理。
你看这段：
▄▄▄ ▄▄▄ ▄▄▄
▄▄▄ ▄▄▄
你可能什么都没看出来。换一个：
── ── ── ── ── ──
你立刻看到一条线。尽管这条线在物理上根本不存在——它是六个短横，中间是断的。你把断的地方填上了。而且你关不掉这个填充，你不可能通过”努力不去看成一条线”来实现它。
再来一个更狠的。你闭着眼想一想你家的门。好，现在回答我：你家门的把手，是横的还是竖的？门是往里开还是往外开？门框上方那条边，离天花板有多远？
大部分人答不全。但你每天开那扇门。为什么答不全？因为你的大脑从来没有”存过”这些信息——它对门只保存了一个”够用的模板”，也就是一个能让你顺利推门通过的最简结构。细节被扔了。
这就是补全的代价：补全不是免费的，它是用”牺牲细节”换”快速得到整体”。
记住这句话，后面每一条法则都会回到这里。
“那这么说，我们看到的世界岂不是半真半假？”
比半真半假还严重。但我要在这里踩一脚刹车，免得你滑到”一切都是幻觉，那就没法谈设计了”那边去。
补全不是随机的，它是有规则的。而且规则相当稳定，稳定到可以预测。你给一群人看那六个短横，所有人都会看成一条线，不会有人看成六个方块。你给一群人看你家小区的照片，所有人指出”这里有个垃圾桶”的地方都是同一个地方。
因为规则稳定，所以它可以被设计。 你控制不了观众看到什么，但你能极其精确地影响他们的大脑怎么补全。这就是这一章对你最有用的部分。
二、格式塔：一场针对”整体等于部分之和”的反叛
现在讲来历。我尽量讲短，但来历里有这个学科真正的脾气，跳过可惜。
格式塔（Gestalt）是个德文词，大致意思是”形状""形态""一个完整的样子”。它不好翻，中文常译作”完形”，取”完整的形”这层意思。
二十世纪初，心理学界的主流想法是这样的：想知道人是怎么认识世界的，就把认识过程拆成最小的零件，研究每个零件，然后把零件加起来，就得到了整体。这套思路叫元素主义，跟冯特（Wilhelm Wundt）那一脉的实验心理学关系很深。它背后的假设就一句话：整体等于部分之和。
这个假设听着很自然，对吧？像常识。而且它在很多领域都好使——你把一台机器拆成零件，研究每个零件，再装回去，机器还是那台机器。
格式塔学派说：在知觉这件事上，这个假设是错的。
导火索是 1912 年马克斯·韦特海默（Max Wertheimer）做的一个关于似动现象的实验。实验本身很朴素：在暗室里，让两条竖线先后快速闪现，中间隔一个很短的时间。
你看到什么？你看到一根线在移动。
请注意这个结果里藏着的炸弹。
“先后闪现的两条线”是物理事实。“一根线在移动”是你的知觉。而关键在这里：“运动”这个属性，不存在于任何一条单独的线里。 你把第一条线研究到分子层面，它不动；你把第二条线研究到分子层面，它也不动。你把两条线加在一起——如果你真的按”部分之和”来加——你得到的是”两条静止的线先后出现”。
可是你看到的是运动。
运动是从”整体”里冒出来的，它不是任何一个部分的属性，也无法由部分相加得到。 这就是对”整体等于部分之和”最直接的一次证伪。
后来韦特海默、考夫卡（Kurt Koffka）、苛勒（Wolfgang Köhler）三个人把这条线往下推，形成了格式塔心理学。苛勒还做过另一个著名的实验：把香蕉挂在猩猩够不到的地方，笼子里散着几根木箱。猩猩在一段看起来是”发呆”的时间之后，突然把箱子叠起来爬上去够到了香蕉。苛勒用这个说明：学习不是靠一点一点试错累加出来的，而是一次结构上的重新组织——一旦”看见”了箱子和香蕉之间的那个关系，行为就整体变了。
（顺带说一句，这个”突然看见关系”的瞬间，你肯定有过。你盯着一段看不懂的代码，看了一小时，突然某一秒整个结构在你脑子里亮了。那不是你多读了一行代码，那是你的内部模型重排了。）
好，现在到关键问题：“整体大于部分之和”这句话，在视觉上到底是什么意思？
我猜你听过这句话一百遍，但从来没人给你讲清楚过。它常被当成一句文艺的赞美——“哎呀整体大于部分之和嘛，所以团队很重要”。这是滥用了。它在知觉领域的含义是一个很硬的、可验证的技术命题：
整体具有部分所不具有的属性。
不是”整体更大""整体更好""整体更重要”。是：整体身上有一些性质，你在任何一个零件身上都找不到，你把零件怎么加都加不出来。
运动就是这种属性。我再给你两个你马上能验证的：
第一个，旋律。一段旋律，你把它的每个音单独放出来，没有一个音里含着”这段旋律”。你把 C、E、G 分开弹，你听不到那个大三和弦的”感觉”。而且更狠：你把整段旋律整体移高三个调，每个音都变了，但旋律还是那段旋律，你一耳朵就认出来。这说明旋律这个东西存在在一个”音之间的关系”的层面上，而不是在单个音的层面上。
第二个，湿。一个水分子不湿。你把一亿个水分子摊成一个单分子层，还是不湿。“湿”是大量分子集体行为的产物，它不存在于任何一个分子里。
第三个，给你一个程序员能一秒懂的：死锁。单个 goroutine 没有”死锁”这个属性。你把一个 goroutine 的代码从头读到尾，读不出死锁。死锁是若干并发单元之间关系的属性——它存在于系统的层面，不存在于任何一行代码里。所以你 debug 死锁的时候，永远不能只看一个 goroutine 的栈，你得看它们的等待图。
好。现在回到视觉。
“整体大于部分之和”在视觉上意味着：你看到的”东西”，和你眼睛接收到的”光线分布”，是两层不同的东西。 前者是大脑对后者做了一次组织之后的结果，而组织这件事会凭空产生新的属性——边界、形状、物体、深度、运动、语义。
这就直接推出格式塔学派那句最狠的宣言，也是这一章真正的地基：
知觉不是被动的接收，是主动的组织。
你的大脑不是一台扫描仪，它是一台建模机。它拿到一堆杂乱的输入，要在一个几乎无穷多的可能解释里，选出一个它认为最合理世界结构，然后把那个结构交给你，让你以为那就是现实。
再往下推一步，就到了这一章我最想让你接受的那句话：
这些法则是大脑的底层算法，不是设计师总结的规矩。
这一点必须讲死，因为它决定了你怎么用这些法则。
设计师没有发明接近性。韦特海默那帮人也没有。人类在几亿年的演化里，早就按这套规则在看世界了——只是没人给它命名。格式塔学派做的事情是观察、命名、验证，就像林奈给植物分类：植物本来就在那儿长着，不是他种的。
我给你一个类比，你应该立刻就通了。你写网络程序，你知道 TCP 有慢启动、有拥塞控制、有队头阻塞。这些性质不是谁”规定”的，它们是”分组交换网络 + 有限带宽 + 不可靠链路”这个物理现实推出来的必然结果。你可以不喜欢队头阻塞，但你不可能通过写一份规范来取消它。你只能顺着它设计，或者绕开它（用 QUIC 的多路复用重新组织一层）。
格式塔法则就是视觉系统的”队头阻塞”。你不能立法取消它。你只能顺着它，或者——在极少数你真心想制造摩擦的时候——故意跟它对着干，但那需要你知道你在干什么。
所以后面我讲的每一条法则，你都不要用”这是设计师定下的规矩”这个心态去记。你要用这个心态：这是我的观众脑子里已经跑着的一段代码，我得知道它怎么跑，因为我的所有作品都要在它上面运行。
三、六条法则，以及每一条凭什么存在
现在讲法则。
我要提前打个招呼：接下来你会觉得这些东西”太简单了”。接近性？不就是挨得近的看成一组吗？三岁小孩都会。
会，但不知道为什么。而”为什么”才是你能用它的前提。因为只有知道它为什么成立，你才能判断它在什么情况下会失效、跟别的法则打架时该让谁赢、以及怎么人为地加强或削弱它。
这就是为什么我每一条都要讲它”凭什么存在”——不是从书本上抄的定义，是从演化压力上往下推。
1. 接近性（proximity）：空间上挨得近的元素，被看成一组
法则本身：一堆元素里，彼此距离近的，会被知觉归为同一组。
它凭什么存在：因为真实世界的物体，它在视网膜上投下的各个片断，几乎总是相邻的。
你想想这个物理事实。一只老虎蹲在草丛里，你能看见的是它身上从草缝里露出来的七八块黄黑条纹。这七八块一定是挨着的，因为它们属于同一只老虎的表面。而旁边另一只老虎（如果有的话）露出来的那几块，在另一个位置。
所以大脑可以下一个极其划算的赌注：视网膜上相邻的像素，大概率来自同一个物体。 这个赌注的命中率高得离谱，因为空间是连续的、物体的表面也是连续的。
再换个角度：如果这个世界不是这样的——如果物体的各个部分是随机撒在空间里的——那接近性就没用了，大脑也就不会进化出这条规则。规则之所以存在，恰恰是因为世界恰好长这样。
生活里的验证：地铁站台上，二十个人散着等车。你扫一眼就知道哪几个是一伙的——不是因为他们在说话，是因为他们站得近。三个人贴在一起，隔一米五再站两个人，再隔两米站一个人。这个分组你一秒就完成了。
再看一个反过来的：一支队列走过来，如果每个人之间都严格保持一米二，你会把他们看成一个整体（“一支队伍”）而不是”二十个独立的人”。间距的绝对值不重要，间距的相对关系才重要。这一点等下会救你的命。
设计上怎么用：接近性是所有分组手段里最便宜、最不容易出错、也最强的一个。你什么都不用加，只要把间距调对，分组就成立了。
具体一点：一份表单，标签和输入框之间的距离如果是 6 像素，而两组字段之间的距离是 28 像素，那么”标签＋输入框”会牢牢地抱成一组。你把间距改成标签和输入框 24 像素、组间 28 像素——几乎一样了——分组立刻崩溃，观众看到一个混乱的字段流。
常见的坑：很多人调间距是靠”看起来差不多舒服”。这是错的。间距必须满足一个可检查的条件：组内间距要显著小于组间间距，最好差三倍以上。 你拿尺子量一下你做过的东西，八成不合格。
2. 相似性（similarity）：长得像的元素，被看成一组
法则本身：颜色、形状、大小、方向、纹理相似的元素，被归为一组。
它凭什么存在：同一个物体的不同部分，材质、颜色、纹理几乎总是一致的。斑马的整身都是条纹，一只鸟的羽毛颜色是成片的，一块石头表面的灰度是渐变的。反过来也成立：视觉特征相同的区域，大概率属于同一个物体。
这条法则最有力的证据，不是支持它的例子，而是人类为了破坏它花了多大力气。
我说的就是迷彩。
军队研究了一百多年怎么让士兵不被看见，而迷彩的核心手法之一，恰恰是系统性地破坏相似性：把人体表面切成一块块互不匹配的颜色区域，让”袖子上的这块绿”和”躯干上的那块褐”不被归成一组；再让其中某些色块跟周围的灌木在颜色和纹理上相似，于是身体的局部被”吸”进背景的组里。
你想想这件事的分量：如果相似性不是一条极硬的底层规则，人类根本不需要花一个世纪去逆向它。我们之所以要费力破坏它，正因为它强到不讲道理。
生活里的验证：超市货架。你远远走过去，能在两秒内找到那个你常买的牌子，靠的不是读完包装上的字，是那一整排包装都是同一个颜色。二十个品牌的洗发水挤在三层货架上，其中一家的瓶子全是白底蓝盖，那一整条蓝色就”跳”出来成为一组，你的眼睛直接被吸过去。
反过来，一家品牌如果每个口味都换一套完全无关的配色，它在货架上就”不存在”——因为没有任何一块区域能被归成一组，它散掉了。
设计上怎么用：列表里同类的条目用同一种处理；正文里的强调文字用同一套样式；图表的同一条数据系列用同一个颜色。
但要记住两个限制。第一，相似性弱于接近性——它们打架时的裁决规则我在下一节讲。第二，相似性很容易被”用滥”：一个界面里如果你用六种颜色区分六个类别，等于没区分。人眼在同一时刻能稳定追踪的”颜色组”数量很少（有研究指出工作记忆对这类并行分组的容量非常有限），超过四五个，你的颜色编码就变成了噪声。
3. 闭合性（closure）：断开的轮廓，会被自动补上
法则本身：不完整的图形，只要缺口不是太大，就会被知觉成一个完整的、封闭的形状。
它凭什么存在：因为遮挡。
这是我要重点讲的一条，因为它的”为什么”最漂亮。
你活在一个物体互相遮挡的世界里。你从来没有看全过任何一个东西——桌子挡住了椅子的下半截，前面的人挡住了后面的人，树叶挡住了树干。如果大脑坚持”只承认我亲眼看见的那部分”，那你每时每刻看到的都是一地碎片，你连”这是一把椅子”都说不出来。
所以大脑下了一个赌注：一条轮廓如果在某处断了，那多半不是它真的断了，而是有东西挡在前面。 于是它把断开的地方按原来的走向延长的趋势补上。
注意这个赌注有多划算。它出错的代价极小（偶尔把路锥看成人的背心，你走近就知道了，不会死），而它不这么做的代价极大（你每看一样东西都要走近确认，你活不下去）。演化会毫不犹豫地选这个赌注。
生活里的验证：栅栏后面趴着一条狗，栅栏挡住了它的身体，你只看到头、尾巴和四段被切开的腿——你不会认为这是一条狗被切成了六段。你知道那是一条完整的狗，只是被挡住了。
再看一个每个人都有的经验：微信头像被人挡住一半，你照样认得出是谁。残缺的霓虹灯字，三个笔画掉了两个，你照样读得出来。甚至一篇被撕掉一角的文章，你读的时候几乎不会卡壳。
设计上怎么用：闭合性是”用最少的笔画讲最多的东西”的技术基础。
最常见的手法：用四个角标代替一个完整的矩形边框。你画一个相机的取景框——只在四个角各画一个小 L 形，中间全空——观众百分之百会看到”一个矩形”。而且这个矩形比真画出来的更好，因为它没有用实线把画面封死，空气能进出。
闭合性还送你一份额外的礼物：因为观众参与了”补完”这个动作，他们对这个图形的记忆会更牢，而且还附带一点点成就感。这是所有”藏一半”的设计手法讨喜的深层原因。
它的边界在哪：缺口太大就补不上了，你会看到一堆碎片而不是一个形状。这个”太大”的临界点没有固定数值，取决于形状的熟悉度和复杂度——熟悉的形状（一张脸、一个圆）能容忍大得多的缺口，陌生的形状稍微缺一点就碎了。
同时也有反向的坑：如果你几乎把它画完整了，只留一丁点缺口，观众不会觉得”哇好巧妙”，只会觉得”你没画完”。闭合的乐趣在于”刚刚好差一点”。 这个度，只能靠你自己拿眼睛校准。
4. 连续性（continuity）：沿着平滑路径走的那两条线，属于同一个东西
法则本身：当线条交叉或被打断时，知觉倾向于把它们解释成”沿着原来方向平滑延续”的路径，而不是突然拐弯的路径。
它凭什么存在：因为自然界物体的边缘，绝大多数是平滑连续的曲线，很少突然折成直角。
一条河、一根树枝、一根脊椎、一道山脊、蜗牛壳上的螺旋——全都是平滑延伸的。机械的直角是人类的发明，出现得极晚。所以大脑的默认假设是：两条线在交叉点相遇时，沿着平滑路径配对的那一对，属于同一个物体。
这个假设的正确率高，是因为”一个物体的边缘在这个点突然拐了个九十度的弯”这种事，在自然界里几乎只发生在人造物上。
生活里的验证：抬头看天上交错的电线，你看到的是”几根长长的线彼此交叉”，而不是”一堆 V 形和 X 形”。立交桥上两条路交叉，你不会认为上了桥之后突然拐去了另一条路。一群人从你身边走过，你顺着每个人的行进方向，能准确地预判他会不会撞到你——你做的是连续性的 extrapolation（外推）。
它跟闭合性有什么区别：新手最容易把这两条混起来。我给你切一刀——
闭合性处理的是同一个轮廓上的”断开”：这条线本来是一条，中间缺了一段，补上。
连续性处理的是交叉点上的”走向”：好几条线撞在一起了，谁跟谁是一家人？答：平滑延续的那两个。
一个是补缺口，一个是判归属。
设计上怎么用：连续性是引导视线最有效的手段之一。一条被几个色块反复打断的斜线，观众的眼睛还是会顺着斜线走下去，因为大脑把它接起来了。
这个性质在第五章讲视觉动线的时候会回来找你——你以为你在用箭头引导观众，其实你只要让几个元素”排成一条隐含的平滑路径”，观众的眼睛就会自己走过去，比你画个箭头高级得多，因为它不动声色。
一个警告：连续性也会帮倒忙。你排了两列元素，但因为对齐稍偏，第二列的头三个字跟第一列的尾三个字在视觉上连成了一条斜线，观众的眼睛就被这条根本不存在的斜线勾走了。这种”意外的连续性”是版面里最常见的隐形杀手之一，它让你觉得画面”有点乱”但说不出乱在哪。
5. 共同命运（common fate）：一起动的东西，是一伙的
法则本身：朝同一方向、以同一速度运动的元素，被知觉为同一个整体。
它凭什么存在：这一条我要多讲几句，因为它是六条里最硬的一条，也是最被低估的一条。
先看物理事实：同一个物体的各个部分，必然同时、同向、同速运动。这条近乎是一条几何定理——如果一个物体的左边往左走、右边往右走，那它就不是”一个物体”了，它散架了。
于是大脑得到一个命中率极高的判据：一起动 = 同一个东西。
为什么这条特别硬？因为运动是从背景里抠出物体的最强信号。
你想象一个场景：一只鹿站在灌木丛后面，一动不动。它的毛色和灌木几乎一样，轮廓被叶子切碎。你看见它了吗？多半没有。它现在完全靠”相似性被破坏 + 闭合性被破坏”隐身——这是它的策略。
现在它抖了一下耳朵。
一瞬间，你整个人都看见了它。不是”看见了一只耳朵”，是整只鹿从背景里被整块抠了出来。因为那部分一动，共同命运立刻把”跟它连在一起、一起动的那整个区域”归为一组，那个组就是那只鹿。
这个能力对生存太关键了——无论是找猎物还是躲捕食者，“从运动里分割出物体”都直接关系到死活。所以它在视觉系统里被实现得非常靠前、非常自动化，几乎不受意识控制。
生活里的验证：演唱会的观众席，一片星星点点的手机灯。突然有几盏灯以同样的速度朝同一个方向平移——你立刻知道”有个人举着手机从那儿走过去了”，尽管你根本看不见那个人。
一群鸟在天上飞，几千只突然一起转向，你看到的是”一整片”在动，这个”整片”作为一个单一物体在你脑子里存在了几秒钟。
地铁到站，站台上一起起身的那几个人，被你看成”一组要上车的人”。
在静态设计里怎么办：你做平面设计，没有动画，是不是就浪费了这条最硬的法则？不是。
静态画面里，共同命运有它的静态投影，主要有三种：
第一种：相同的朝向。 一组元素如果都朝同一个方向倾斜、都指向同一个方向、都有同样的”动势”，它们就会被看成一伙。三张照片都朝右倾斜 8 度，中间夹一张正的——那张正的就被踢出去了，尽管它颜色形状可能跟它们一样。
第二种：一起构成一个趋势。 一列图标沿一条弧线排列，它们”一起沿着这条弧线走”，于是被绑成一组。这条其实跟连续性是近亲，但连续性讲的是”线的走向”，这个讲的是”元素们一起共享一个运动趋势”。
第三种：一起变。 在界面里，一起出现、一起消失、一起变灰、一起抖动的元素被归为一组。一个表单提交失败，三个出错的字段一起抖了一下，哪怕它们分散在页面的不同位置，你也会把它们理解成”这三个有问题”。这个在动效设计里威力巨大——同步性是分组的核武器。
6. 良好图形 / 简洁律（Prägnanz）：在所有可能的解释里，选最简单的那个
法则本身：知觉倾向于把模糊的输入，组织成”最稳定、最简单、最规则、最对称、最封闭”的那个结构。
德语词 Prägnanz 常被译作”简洁""完形趋向""良形律”。它不太好翻，我想让你抓住的是这个意思：大脑在很多种解释都讲得通的时候，会挑那个”最干净”的解释。
它凭什么存在：两个层面的理由，一个比一个深。
第一层：带宽。 从视网膜到视皮层的通道是个瓶颈，而高级认知的算力更是稀缺。把输入压缩成”能解释它的最简结构”，是最省算力的做法。就像你不会在内存里存原始日志，你会存聚合后的指标——不是因为原始日志没用，是因为存不起。
第二层：记忆。 有研究指出，人的工作记忆容量非常有限，同时能握住的东西只有几个。一个复杂的、不规则的结构，要占掉好几个”槽”；一个简单规则的结构，只占一个。你把看到的东西简化成”一个圆""一条线""一个三角形”，你才记得住它、才来得及在下一步思考里用它。
这一条跟前五条的关系：它是元法则，前五条是它的具体招式。
接近性、相似性、闭合性、连续性、共同命运——这五条每一条都是在说”大脑倾向于这样组织”。而简洁律回答的是：当没有一条能一锤定音的时候，大脑按什么原则选？ 答：按”哪个解释最好”选。而”好”= 简单、稳定、对称、封闭、连续、规则。
生活里的验证：奥运五环，你看到的是五个环，不是九个交叠的弧段。你会自动把那些弧段”归”给五个完整的圆，因为五个圆比九个弧段简单得多。
你在云里看到一只狗，在插座上看到一张脸，在墙上的水渍里看到一幅地图。所有这些，都是大脑在强行找一个”最简单的可解释结构”塞给那些乱七八糟的形状。而且它宁可塞一个错的（狗、脸、地图），也不愿意承认”这就是一团随机的形状”——因为随机形状没法压缩、没法记忆、没法命名，对大脑来说是纯粹的成本。
一个必须澄清的误解：简洁律是解释大脑为什么会补全的原理，它不等于设计师的审美律。
很多新手从这条推导出”设计要越简单越好”，然后做出一堆空洞无聊的东西。这是误读。
简洁律说的是”大脑在解释模糊输入时偏向简单”，不是”观众喜欢简单的画面”。观众喜欢的是能被顺利组织的画面。一个丰富、复杂但有清晰结构的画面，大脑组织起来毫不费力，观众会觉得”丰富、有料”；一个简单但没有结构的画面，大脑还得自己找结构，反而累。
简单是手段，不是目的。目的是让观众的组织过程不出错。这个区别，是你将来能不能从”会做减法”走到”知道该减哪里”的分水岭。
四、当法则互相打架：谁说了算
现在到了我认为这一章最有价值的部分。因为前面那六条，你在任何一本设计书里都能看到；而接下来的东西，大部分人是从自己的失败里慢慢磨出来的。
先做一个思想实验。
想象一个六行六列的点阵。现在我做两件事：
第一，我把行间距压得比列间距小。行与行贴得很近，列与列离得远。
第二，我给这些点上色：每一列用一种颜色，第一列全红，第二列全蓝，第三列全绿，以此类推。
现在你告诉我：你看到的是”六条横排”，还是”六条竖列”？
”……我好像两个都看到了，来回跳。”
对。这就是冲突。
接近性在喊：行间距小，这六个横排是一组一组的，看到的是行。
相似性在喊：每一列颜色相同，这六个竖列是一组一组的，看到的是列。
两条法则都成立，都生效，但它们的结论相反。于是你的知觉会在两个组织方式之间来回翻转——你看一会儿是行，看一会儿是列，而且你越盯着看，翻得越频繁。
这个现象本身就是一条重要情报：当法则冲突时，知觉不稳定。 观众会感到”有点别扭""说不上来”——这就是那个”怪怪的”的来源之一。你的版面让他翻了两次，他自己不知道，但他就是觉得不舒服。
好，那到底谁赢？
一个大致的优先级，以及它背后的理由
经验上，大致是这样：共同命运 > 接近性 > 相似性 > 闭合性/连续性。
但我不想让你背这个顺序。我要你理解它凭什么是这个顺序，因为理解了你就不用背，而且你能判断什么时候这个顺序会失效。
为什么接近性通常压过相似性？
因为位置是比颜色更可靠的证据。
你想：颜色这个信号会撒谎。同一张白纸，在正午的阳光下和傍晚的阴影里，射到你眼睛里的光完全不同——但你仍然知道那是同一张白纸。你的视觉系统早就学会了给颜色打折，因为它不稳定，它依赖光照。
位置不会撒谎。两个像素在视网膜上的距离，就是它们的距离。这个信号来自视觉通路里非常古老、非常靠前的部分，它经过的加工少，也就意味着被扭曲的机会少。
所以大脑给位置证据更高的权重。这不是偏好，这是信噪比的计算结果。
（这个判断在视觉系统里还有解剖层面的证据：处理”是什么”和处理”在哪里”的通路在大脑里是分开走的两条路，位置相关的加工发生得更早、更自动化。这里不展开，你只要记住结论：位置证据更硬。）
为什么共同命运几乎总能赢？
因为运动是所有证据里假阳性率最低的。两个东西位置靠近，可能只是碰巧；两个东西颜色一样，可能只是巧合；但两个东西以完全相同的速度朝完全相同的方向运动——这不可能是巧合，除非它们真的是同一个东西。
所以运动证据一旦出现，它就是压倒性的。这也是为什么在界面里加一点点动效，往往比调半天颜色更能让人看懂分组。
相似性什么时候能反杀接近性？
当相似性的差异极大，而接近性的差异极小的时候。
比如点阵里是纯黑和纯白的点——黑白的明度差异是人类视觉能感知的最强差异之一——而行间距只比列间距小那么一点点。这时候你会看到列。
注意这个结构：决定胜负的不是”哪条法则更高级”，而是”哪条法则手里的证据更强”。 法则没有等级，证据有强度。这句话是这一节的题眼。
设计师该怎么裁决：三条实操
好，原理讲完了，落到手上。当你遇到法则冲突，按这个顺序处理。
第一步：先决定”我想让观众怎么读”，再决定形式。
这是最重要也是最多人搞反的一步。
很多人是先排完版，然后看一眼，发现”咦，这里好像可以分组”。这是本末倒置。你必须先决定：这一屏信息，我希望观众的第一反应是”这是两组”还是”这是三组”？是希望他竖着扫还是横着扫？是先看到价格还是先看到标题？
这个决定是意图，不是审美。它来自内容，来自你想传达的东西。
意图定了，形式才有的选。想让人横着读，就把行间距压小；想让人竖着读，就把列间距压小。你是在用间距实现一个已经存在的决定，不是在做完之后再看看”这样分组好不好看”。
第二步：让多条法则投同一票。
这是最实用的一招，也是高手和新手的真正差距。
新手做分组，通常只用一种手段——比如只用间距。这就像你的服务只有一个副本。
高手的做法是：同一个分组意图，用三四种手段同时表达。
你要让这五个元素成为一组？好，同时做这几件事：
- 把它们之间的间距压到很小，组外间距拉到三倍以上（接近性）
- 给它们同一个颜色或同一块底色（相似性）
- 让它们左对齐，或者让它们围成一个规整的形状（连续性/良好图形）
- 如果它们是同类信息，给它们完全相同的字号和字重（相似性）
- 如果可以动，让它们一起出现（共同命运）
四票对一票，接近性就算输了也翻不了天。
我给你一个检查方法：你看着你的版面，指着你认为”这是一组”的那几个元素，问自己：除了”它们挨得近”之外，还有第二个理由吗？ 如果没有，你的分组是脆弱的——任何一个外来元素插进来，它就散了。
第三步：当必须让它们打架时，明确告诉观众哪边赢。
有时候你没法让所有法则统一。最典型的情况：物理位置是别人定的，分类是你定的。
比如一个商品列表，六行商品，行与行必须等距（这是网格的要求，也是”看起来整齐”的要求），但你要按”已上架/已下架”分成两组。这时候接近性给不出答案（间距全一样），相似性独自支撑分组，它只有一票，很容易被内容的差异盖过去。
怎么办？加一个独立的第三方信号，专门用来表达分组：
- 加一条分隔线（这是用”一条连续的边界”强行切断连续性）
- 给其中一组加一块极淡的底色（加强相似性，而且给它一个封闭的轮廓）
- 在两组之间插入一个更宽的空白带（制造一个”间距断层”）
- 给每组加一个小标题（用语义而不是形式来分组——这是降维打击）
核心原则就一句：分组信号不够强的时候，不要去”解释”它，去”加固”它。
三个常见误区
误区一：以为”用上了格式塔法则”就等于好设计。
这是最大的一个。我要说得直接一点：法则只保证”组织得清楚”，不保证”组织得对”，更不保证”组织得好”。
一条垃圾短信的页面，也可以把验证码和输入框排得整整齐齐，接近性用得完美无缺。一个骗人的钓鱼页面，也可以把按钮做得非常醒目。它们”清楚”，但它们不是好设计。
清楚是及格线，不是优秀线。法则帮你跨过及格线，跨过去之后决定你高度的，是你组织的内容、你的意图、你的取舍——那些东西不在这一章里，但整本书都在讲它们。
误区二：只盯着元素，不盯着元素之间的空。
很多人调间距，是在调”元素和元素挤不挤”。但真正决定分组的，是相对关系。
我再说一遍因为这点太重要了：接近性看的不是间距的绝对值，是间距的比值。 两个元素之间 20 像素，是多还是少？不知道，要看别的地方是多少。如果组内间距 20、组间间距也是 20，那就是没分组；如果组内 8、组间 24，分组成立。
所以你调间距的时候，脑子里必须同时装着两组数字。这也是为什么我建议你给自己定一套固定的间距刻度（比如 4 / 8 / 16 / 24 / 40），而不是随手拖——用刻度表，比值天然就是清楚的。
误区三：不敢用”留白”来分组。
新手总觉得分组得”画点什么”——加个框、加条线、加个底色。这些都能用，但它们是加法，加法是有代价的：加的每一样东西都会成为新的视觉元素，需要被组织，可能跟别的东西打架。
而留白是免费的分组手段。你什么都不加，只要把该分开的分得足够开，分组就成了，而且画面更干净。
记住这个顺序：先试留白，不够再加线，还不行再加底色。 能靠留白解决的，绝不要加框。这是所有成熟设计师的共识，也是新手版面”总缺点什么”和”太满了”的分界线。
五、跨场景：同一套法则，不同的画面
法则讲完了。现在我把它们放进具体画面里，你看看它们在不同场景下长什么样。我尽量把画面写清楚——谁在哪、什么颜色、多大、什么形状。
案例一：一个后台管理系统的服务器列表页（界面）
这个例子我特意挑了你能立刻对上号的场景。
画面是这样的：页面顶部横向排着四个筛选按钮——“全部""运行中""已停止""异常”，四个按钮挨得很紧，间距 6 像素，整个按钮组离下面的列表有 40 像素。按钮下面是列表，每行显示一台服务器：
- 左边是主机名，深灰，14 像素，字重中等，比如
bj-node-07 - 主机名下面紧贴着（间距 4 像素）一行 IP，11 像素，浅灰
- 中间是三个状态标签，圆角小方块，绿、绿、蓝，间距 8 像素
- 右边是两个文字按钮，“重启”和”下线”，深蓝色，靠右对齐
- 行与行之间间距 28 像素，有一条 1 像素的浅灰分隔线
现在用格式塔拆它。
哪里对了：主机名和 IP 之间 4 像素，行与行之间 28 像素 —— 差了七倍，接近性非常结实，“主机名＋IP”牢牢抱成一行，不会被隔壁行抢走。三个状态标签彼此 8 像素、离主机名很远，它们自己成一组。四个筛选按钮 6 像素间距、离下面 40 像素，也是一组。
哪里出了问题：你看右侧那两个操作按钮。“重启”在第一行，“下线”在第一行；第二行也有”重启""下线”，第三行也是。因为它们是右对齐的一列，垂直方向上，六个按钮形成了一条规整的竖列，列内间距（行高 28）远小于它们到左侧主机名之间的距离吗？——不是，主机名离它们可能只有 60 像素，而行间距 28 像素。
糟了。这时候出现了冲突：接近性和连续性说”右边这一竖列是一组”，而你的意图说”每行是一组”。
结果就是：观众第一眼看过去，会先看到”右边有一列操作按钮”，然后才看到”哦这是一行一行的”。更糟的是，当某一行没有操作按钮（比如已停止的机器只显示”启动”），那一列就断了一块，整列的规整性被破坏，视觉上会有一个”坑”。
怎么改：把操作按钮这一列整体右移，让它离左侧信息区的距离明显大于行高（比如拉到 120 像素以上），同时把行高从 28 压到 24。或者更狠一点：干脆不要用规整的竖列 —— 让操作按钮紧贴着主机名的右侧，跟着每一行走；只有当鼠标移到某一行时，该行的操作按钮才浮现。
第二种做法动用了共同命运（一起出现、一起消失的一行元素），而且彻底消除了”竖列”这个意外的分组。顺带，界面还变干净了——你少画了十几个按钮。
从这个案例里带走什么：凡是”规整的一列”或”规整的一行”，都会自己成为一个组，不管你想不想要。 你做表格、做列表、做卡片墙的时候，要时刻检查：有没有一个”意外的组”正在跟你的意图抢观众？
案例二：一包挂耳咖啡的正面（包装）
货架上的包装，是格式塔法则被用得最密集的地方，因为它的工作环境最恶劣——顾客给你 0.3 秒，而且旁边有三十个 competitor。
想象这包咖啡。尺寸大约 12 × 15 厘米，立在一排同类产品中间。
- 底色：米白，几乎没有任何图案
- 上方三分之一：一行手写体的字，深棕色，字号很大，写着产地名，字与字之间略挤
- 中间：三个并排的方块，每个大约 3 × 3.5 厘米，方块之间是 8 像素的细缝，三个方块整体离上面的产地名有 32 像素，离下面的底边有 40 像素
- 每个方块里：第一行是一个小标签（“烘焙度""风味""建议水温”），11 像素，浅灰；第二行是具体内容，13 像素，深灰
- 三个方块的边框：只有极细的 1 像素浅棕线，几乎看不见
- 最下方：一个小小的条形码和一行 8 像素的合规文字
拆它。
第一层分组：三个方块，间距 8 像素，而它们到上方产地名 32 像素、到下方条形码 40 像素。接近性立刻把三个方块捆成一个整体——“这是一组规格信息”。同时，它们形状相同、尺寸相同、内部排版结构相同（相似性再投一票），而且三个方块一起构成一条水平带（共同命运的静态投影：共享同一个水平趋势）。
三票投一个方向，这个组结实得拆不开。
第二层分组：上方那行手写体的产地名。它字号大（对比）、字形不同（相似性缺位）、单独占据上方（位置）、离三个方块很远。它从下面的那一组里被干净地剥离出来，成为一个独立的、更高层级的信息。
于是观众在 0.3 秒里看到的是：一个产地名 + 一组规格。两层，不多不少。这就是包装设计里说的”两级信息”，而它是靠间距 + 相似性 + 共同趋势三票叠出来的，不是靠画了三个框。
如果做错了会怎样：假设设计师把三个方块的间距改成 24 像素，跟它们到上方的距离差不多。那么”三个方块是一组”这个判断就崩了，观众会看到”三个独立的小块 + 一个大字”，信息层级从两级变成平铺的一堆，包装在货架上的辨识度会掉一半。
顺带注意一个细节：那三个方块为什么用”极细的边框”而不是实心色块？因为实心色块会引入三个新的强视觉元素，它们会跟产地名争夺”图”的地位（这个话题第四章会接着讲）。而细边框只提供”边界”不提供”重量”，它把三个方块组织起来，又不让它们变得抢眼。分组信号可以用很轻的手段表达，这是包装设计的一个高级技巧。
案例三：斑马线上的五个人（摄影）
一张街头照片。傍晚六点，天还有余光，路面是湿的，反射着路灯。
画面里：一条斑马线横穿画面下三分之一，上面有五个人在走，全部朝右，速度差不多。五个人都穿深色衣服——黑、深灰、深蓝、深灰、黑。其中左起第三个人撑着一把伞，伞是饱和度很高的亮黄色，伞面在画面里大概占百分之五的面积。
没有伞的那四个人，深色，轮廓在傍晚的光线里已经有点糊了。
共同命运说：五个人同向、同速移动 → 他们是一组，是”一群过马路的人”。
相似性说：四个深色的人是一组 → 那个撑黄伞的不是，因为颜色完全不同。
冲突了。 结果是什么？
结果是你会先看到那把黄伞，然后——大约零点几秒之后——才看到”哦，那是一群人里的一个”。
这个先后顺序非常关键。摄影师要的就是这个：先用相似性把一个人从群体里”抠”出来，再让观众意识到他其实是群体的一部分。 这个”先分离、后归属”的两拍节奏，让这张照片有了一个故事：人群中的一个人。
如果五个人里有两个人撑黄伞呢？那这两把伞会因为相似性自己结成一组，画面就变成”两个人 vs 三个人”，故事变了，张力反而弱了——因为没有了”孤立的个体”。
从这个案例里带走什么：法则本身没有方向，方向是你的意图给的。 相似性既能用来”合并”（同一品牌用同一颜色），也能用来”分离”（人群里一个人穿红）。它在两个方向上威力一样大。你不要问”我该不该用相似性”，要问”我想让它合并还是分离”。
案例四：一身搭配里切了几刀（日常穿搭）
这个例子最日常，也最能让你当场验证。
一个人：上衣是藏青色，裤子是卡其色，鞋子是白色，背包是黑色，帽子是红色，围巾是灰色。
用相似性一数：身体从上到下被切成了六段，每段颜色都不一样。每一段各自成为一个”组”，结果是——这个人被拆成了六个零件。
在视觉上的后果是什么？观察者看到的是一个”由六个色块拼起来的东西”，而不是”一个人”。这个人会显得碎、矮、乱。因为整体感被破坏了——还记得吗，整体是具有部分所不具有的属性的，当整体被拆成六个组，“人”这个层面的属性就没了。
改法一（合并）：让上衣和裤子同一个色系（比如都是深浅不同的藏青），相似性立刻把上下半身并成一大组。现在身体被切成三段而不是六段，人”整”了，而且因为上下连成一整块，视觉上会显高。
改法二（分离）：在一身同色系的基础上，加一个唯一的亮色配件——一条橙色的围巾，或者一双亮色的鞋。相似性把其余部分合并成一大组，把这个配件单独分离出来，于是它成了整身搭配的”视觉重心”。
注意这两种做法用的是同一条法则的两个方向，而且通常一起使用：用相似性做大面积的合并，再用一个例外做焦点。
这也是为什么穿搭建议里那句”全身不超过三个颜色”是有道理的——它的格式塔版本是：你的身体最多只能被分成三到四组，再多就散了。
顺带一提，为什么”上浅下深”或者”上深下浅”会显矮？跟这个也有关：高对比的上下分割会在腰线那里形成一条极强的”分组边界”，把人从中间硬切成两段，而这两段各自都不够长。
案例五：客厅里那个”不存在的房间”（家居）
最后一个，讲空间。
一间五米宽、七米长的长方形客厅。房东把家具全靠墙摆：沙发靠左墙，电视柜靠右墙，两把单椅分别靠上下两面墙，茶几在正中间。每样家具之间隔着两三米的空地。
走进去什么感觉？像走廊，像展厅，像”还没摆完”。为什么？
因为所有家具各自孤立，没有一个组。接近性没被使用（间距全都差不多大），共同命运的静态版也没被使用（朝向全都不同——沙发朝右，椅子朝上，电视柜朝右）。大脑面对六个分散的物体，只能一个一个数，它没有得到一个”结构”。
改法：不要加家具，重新分配它们的位置和朝向。
把沙发和两把单椅拉到相距 80 厘米以内，围成一个半圆，全部朝向中间；中间放茶几，茶几上放托盘；下面铺一块地毯，地毯的边缘刚好把这几件家具的腿都圈进去。
现在发生了什么？
- 接近性：几件家具之间的间距（80 厘米）远小于它们到墙的距离（两米以上）→ 它们成组
- 共同命运的静态版：三件坐具朝向同一个中心 → 它们共享一个”朝向”→ 再投一票
- 良好图形：地毯提供了一个封闭的、规整的形状，把这一组”框”起来 → 第三票
三票之后，这个客厅里凭空长出了一个不存在的房间——一个”会客区”。它没有墙，但每个走进来的人都”看得到”它。你的眼睛会先看到”这一组”，然后才看到客厅的其他部分。
这就是用格式塔法则在空间里造结构。 你没砌墙，你只动了间距和朝向。
顺带说一个反向的错误，也是最常见的：很多人把沙发靠墙放，然后在沙发前面放一个茶几，茶几离沙发 40 厘米，再往前 40 厘米放电视柜。间距全都一样。结果：一条”等距的家具链”，从沙发一眼望到电视柜，整个客厅被读成”一条线”，没有纵深，也没有聚气。
差的不是家具，是间距的比例。
心法
这一章的心法，我想讲一件比六条法则本身更重要的事。
规则是从观察里长出来的，不是从教科书里抄下来的。
你可能觉得这是句废话——不是，它有三个非常具体的后果，一个比一个扎手。
第一个后果：这些法则不是一份完整的清单，也不可能是。
韦特海默、考夫卡、苛勒那帮人做的事情，不是坐在书房里设想”人类应该怎么组织视觉信息”，然后颁布六条标准。他们是先看见了一些奇怪的现象（明明是两条静止的线，为什么我看到运动？），然后去设计实验验证它，最后给它取了个名字。
法则是事后命名，不是事前立法。
这意味着什么？意味着这份清单本来就没打算穷尽。后人还在往里加东西——后来的研究者提出的”连通性”（被一条线连起来的元素是一组）、“同步性”、“共同区域”（处在同一个封闭区域内的元素是一组），都是在这六条之后补上的。将来还会有第七条、第八条。
所以你千万不要把六条法则当成一个”检查表”，做完了逐条打勾。任何宣称自己完整的法则清单，都已经被现实超过了。
第二个后果：法则之间的优先级，是统计倾向，不是定理。
我上一节给了你一个大致顺序，也给了你理由。但我现在要亲手把它拆掉一半：那个顺序随时可能失效。
“位置证据比颜色可靠，所以接近性压过相似性”——这个推理在大多数情况下成立。但如果颜色的差异是黑白级别的（人类视觉能感知的最强明度对比），而间距的差异只有百分之十，那么相似性会赢，而且赢得毫无悬念。
所以我给你的那个顺序，真正的用法不是”背下来照做”，是**“当我不确定时，从这里开始猜，然后用眼睛验证”**。
每一次法则冲突，都是一个新的具体情境。你必须回到那个具体情境里，重新问一遍：在这个画面里，哪一条手里的证据更强？
第三个后果，也是最狠的一个：你的判断依据永远是”我实际看到了什么”，不是”这符合第几条”。
我见过太多次这种场面。一个人做了一版设计，我告诉他”这两个元素看起来不是一组的”。他说：“不对啊，我把它们的间距调得很近了，接近性应该成立啊。”
这句话的问题在哪？
他在用法则跟观众的眼睛讲道理。
法则说它们该是一组，可观众看到的就是不是一组——这时候错的是谁？是观众的脑子吗？不，是你的分组信号不够强，或者被别的更强的信号（也许是上面那个元素的颜色跟它们中的一个更接近）盖过去了。
观众的眼睛是终审法院，而且不受理上诉。
所以我给你一个具体的动作，我建议你把它变成习惯：
每当你想引用一条法则为你的设计辩护之前，先去验证它。
怎么验证？三个办法，都不难：
退后三步看。 或者把图缩小到手机屏幕那么大。很多分组在小尺寸下会崩溃，因为细节消失后，剩下的大关系跟你以为的不一样。你在近距离精调的间距关系，在缩小之后可能完全不成立。
眯眼看。 第一章教过你的。眯眼之后颜色变淡、细节消失，剩下的就是大块的位置和明暗关系——这恰恰是接近性在工作的层面。眯眼之后如果分组还在，说明它结实；如果没了，说明你的分组靠的是颜色和细节，是纸糊的。
给别人看三秒。 然后问他：“你看到几个部分？“不要问”你觉得这几个是一组吗”——这是诱导性问题，他会顺着你说。问”你看到几个部分”，让他的大脑自己数。他数出来的数字，就是你的分组真实生效的结果。
这三个动作的成本都很低，低到你没有任何借口不做。而它们的效果，比你在脑子里把六条法则过三遍强得多。
好，最后我要说一个可能让你不太舒服的观察。
法则给你的是”解释权”，不是”豁免权”。
什么意思？学完这一章，你会获得一种能力：看到任何一个版面，你能说出”这里用了接近性""那里是共同命运在起作用""这两个法则在打架所以观众会觉得别扭”。这个能力是真实的、有价值的，它让你从”说不出”走到了”说得清”。
但它有一个危险的副作用：有些人学会解释之后，就不改了。
他做了一个让人读错的版式，你指出来，他能头头是道地跟你讲五分钟为什么会产生这个错误——共同命运把那几个元素绑走了，相似性把观众的眼睛吸到了别处。讲得非常对。然后他说：“所以这就是个取舍。”
不。讲得出原因不等于可以不改。能准确诊断病因但不开药方，是最体面的一种半吊子。
法则的价值不在于让你事后解释，在于让你事先预判、当场识别、立刻修正。你看到一个版式发闷，你能在三十秒内说出可能的原因（“间距比值不够”或”有个意外的组在抢”），然后动手改——这才是把法则变成了能力。
所以这一章真正的产出，不是那六个名词，是一个习惯：
每看到一个版面，先问自己：我的大脑把它组织成了什么？然后问：这个组织，跟作者的意图（或者跟我自己的意图）一致吗？
这个动作做上一百次，你就不需要背法则了。因为你会直接从观察里长出你自己的法则——那些甚至可能比这六条更适合你正在做的那个具体项目。
规则从观察中长出来。 那么你要练的就不是背规则，是练观察。观察力长一分，你能看见的规则就多一分。等你练到能看见别人还没命名的规则时，你就不是在用规则的人了，你是能定规则的人。
小结
这一章从一个路锥开始：三段断开的橙色，你看见了一个人。
我把这件事拆到了三层。
第一层是现象：你的视觉系统默认”有东西在那儿”，它拿碎片建模，而且不告诉你它在猜。补全不是偶发的小毛病，是视觉系统的基本工作方式，代价是牺牲细节。
第二层是来历：格式塔是对”整体等于部分之和”的一次反叛。“整体大于部分之和”在视觉上的硬含义是——整体具有部分所不具有的属性，运动、旋律、湿、死锁，都是这种属性。基于此，格式塔给出的地基是：知觉是主动的组织，不是被动的接收。
第三层是法则：接近性、相似性、闭合性、连续性、共同命运、简洁律。每条我都给了它”凭什么存在”——来自遮挡、来自物体表面的连续性、来自运动分割物体的生存压力、来自带宽和记忆的双重限制。请记住：这些不是设计师定的规矩，是你观众脑子里已经跑着的代码。 你只能顺着它，或者知道代价地逆着它。
我还讲了法则打架时怎么办：先定意图，再挑形式；让多条法则投同一票；实在不行就加固信号，而不是解释信号。以及三个误区——用法则等于好设计、只看绝对值不看比值、不敢用留白分组。
你带走的一句话：法则描述的是大脑会怎么组织，不是告诉你该组织成什么；而判断一个组织成不成立的，永远是你实际看到了什么，不是它符合第几条。
下一章我们接着讲组织的结果——当大脑把画面组织完，总有一个东西被推到前面当主角，其余的退到后面当背景。那个”谁当主角”的争夺，就是图与底。第三章讲闭合性时留了个尾巴：一个封闭的轮廓凭什么更容易成为主角？第四章从那里接上。
【思考题】
-
回忆一个你”看错”的经历——远远看到以为是人／是动物／是某个东西，走近才发现不是。请描述你当时实际接收到的视觉碎片有哪些（颜色、形状、被什么挡住），以及你的大脑补上了什么。然后回答：它补全的时候，用到了这一章的哪几条法则？
-
接近性和相似性打架那个点阵实验，如果我改成这样：行间距远小于列间距（接近性强烈支持”看成行”），但每一列的颜色是黑／白／黑／白交替（相似性强烈支持”看成列”）。你猜会发生什么？再改一下：如果点阵整体以每秒一次的频率整体左右平移 2 像素（共同命运），又会怎样？
-
打开你手机里任意一个你常用的 App，找一个列表页（消息列表、订单列表、文件列表都行）。数一数：这个列表用了几种手段来表达”这一行是一组”？除了间距之外还有别的票吗？然后找一找：有没有一个”意外的组”在跟它抢注意力？
-
简洁律说大脑偏好最简单的解释。但你去看看那些公认的经典海报，很多并不简单——元素不少、层次挺多。“大脑偏好简单”和”好作品可以复杂”这两件事矛盾吗？如果不矛盾，中间那条线在哪？
-
有人说：“我把所有元素等距排列，是最公平的做法，读者可以自己决定怎么分组。“请评价这个说法。如果等距真的”公平”，那它实际上把什么工作推给了观众？这个代价是什么？
-
找一个你做过的东西（PPT、海报、界面、甚至一份 Word 文档），用”退后三步看”和”眯眼看”两种方法各看一遍。写下：你原本想让观众看到的分组，在两种看法下分别还成立吗？如果不成立了，是哪个信号不够强？
【参考答案】
-
这类经历几乎人人都有，我随便举几种典型的：把倒在地上的路锥看成蹲着的人、把衣架上挂的外套看成站着的人、把树影里的一块石头看成趴着的狗、把远处的一个消防栓看成小孩。
我拿”衣架上的外套”拆给你看，你可以照这个结构拆你自己的例子。
实际接收到的碎片：一个大致呈梯形的暗色区域（肩膀的轮廓），下面连着一个更宽的、边缘不规则的暗块（衣摆），上方有一小截更亮的细长形（挂钩或者领子），整个东西离地大约一米二到一米五，背后是墙。
大脑补上了什么：它补上了”头”（尽管那个位置可能只是领口的暗影）、补上了”两条腿”（尽管下面什么都没有，只有衣摆的垂坠）、补上了”这是一个面朝我站着的人”（尽管没有任何朝向的证据）。
用到了哪几条？
闭合性：那个不规则的暗块，轮廓在下方是断开的、模糊的，大脑把它当成”被什么东西挡住了”，于是补成一个完整的人形。相似性：整片暗区颜色一致，于是被归成一个物体而不是几块污渍。良好图形：在”一件外套挂在衣架上”和”一个人站在那儿”这两个解释之间，大脑选了后者——因为在它的模型库里，“直立的人形”是一个更简单、更常见、更”值钱”的结构，而且这个结构的先验概率更高（你在这里遇到人的概率，大于遇到一件挂着的衣服的概率）。
最后这一点值得多想一层：补全不是纯几何的，它带有先验概率。 大脑选的不是”几何上最简单的解释”，是”综合来看最可能的解释”。这就是为什么在容易遇到人的地方（楼道、地下车库）你更容易把东西看成人，而在别的地方不会。
-
第一问：行间距远小于列间距，但每列颜色黑白交替。
这里的关键是，两种证据都非常强：间距比值可能达到了四倍以上（接近性极强），而黑白是明度对比的极值（相似性极强）。
真实的结果是——你会看到强烈的翻转，而且翻转得很快、很难受。 这一版比我在正文里描述的那个温和版本要糟得多。因为两个信号都太强，谁也压不倒谁，知觉系统会在两个组织方式之间高频切换。你会觉得这个图”刺眼""晃""看不稳”。
这个状态在设计上有个重要的启示：当两个强信号给出相反答案时，观众的体验不是”选一个”，是”被撕扯”。 这种撕扯会消耗注意力，让人迅速疲劳并移开视线。所以如果你的版面里有两处强烈但矛盾的组织信号，观众不会”随便理解一种”，他会放弃阅读。这是比”理解错”更糟的结果。
第二问：加入整体平移之后，共同命运会瞬间终结这场争斗。
因为整个点阵是一个刚体在运动，“一起动”这个证据把所有点都归进了同一个物体——“这是一整块东西在动”。这时候行和列的争论被提升到了另一个层面：你先看到”一整块”，然后才在这一整块内部去分辨行或列。
而且更妙的是：一旦整体运动起来，那个黑白的列分组会被大幅削弱，因为运动带来的”这是一个整体”的证据压过了颜色的分组证据。你看到的是”一块带条纹的板在左右晃”。
这个结果对动效设计有直接价值：同期性（一起动）是极强的”合并”信号，强到可以压过颜色和间距的”分离”信号。 所以如果你想让几个元素被当成一组，让它们同时入场，比给它们同一个颜色有效得多。反过来，如果你不想让它们被看成一组，千万不要让它们一起动——错开哪怕 100 毫秒，分组就弱一大截。
-
这题我要你自己动手，但我可以告诉你通常会发现什么，你拿去对照。
大多数成熟的列表页，表达”这一行是一组”的手段通常有这些：
间距：行内元素间距（头像到文字 12 像素）远小于行间距（16 到 24 像素）。这是第一票，也是最便宜的一票。
对齐：整行元素共享一条左基线或垂直中心线。这是连续性在投票——它们”排成了一条线”。
容器：有些列表给每一行加了极淡的底色，或者只在行与行之间加一条 1 像素的分隔线。这是”共同区域”和”边界”在投票。
共同命运（静态版）：每一行内部的排版结构完全相同——头像在左、标题在上、摘要在下、时间在右。这种”结构上的一致”本身就是一种强相似性。
你会发现一个好的列表通常用了三到四票，所以你从来不会误读它。
至于”意外的组”，最常见的三种是：
竖列：所有头像垂直对齐，形成一条规整的”头像列”；所有时间右对齐，形成一条”时间列”。如果这两个竖列在视觉上比”行”更强（比如头像都很大很醒目），观众会先看到两条竖带，而不是一行一行的信息。
同色块：如果状态标签用了高饱和的颜色（红、绿、橙），那么”所有红色的标签”会自己结成一组，跨行地把观众的注意力连成一条虚线。这在扫描状态下非常干扰——观众在看”哪些异常”，而不是在”逐条处理”。
重复图形：如果每一行的右侧都有一个形状相同的图标（比如一个箭头），那六个箭头会形成一个规整的竖列，把观众的视线一直往下拽，导致他跳过中间的内容直奔底部。
找到之后怎么判断”它是不是真的在抢”？眯眼看。眯眼之后如果那条竖列还在（因为颜色的饱和度或明度差异很大），它就在抢；如果它消失了，说明它只在仔细看的时候存在，可以不管。
-
不矛盾。这两件事说的根本不是同一个”简单”。
简洁律里的”简单”，是”解释的简单”，指的是结构的可压缩程度。 一个形状，如果你能用”五个交叠的圆环”来描述它，它就比”九个交叠的弧段”简单——哪怕画出来的像素一样多。这里的简单是描述长度的短，不是元素数量的少。
而观众嫌弃的”复杂”，是”组织的困难”，指的是大脑找不到结构。 一堆元素摆在那里，没有分组、没有层级、没有主导，大脑只能一个一个数——这种画面元素可能只有十个，但它比一百个有结构的元素累得多。
所以那条线在这里：观众能容忍极大的”元素数量”，但几乎不能容忍”结构缺失”。
你去看看那些经典的复杂海报——比如那些信息密集的音乐节海报，上面可能有几十个乐队名字、插画、日期、赞助商 logo。它们之所以成立，是因为：每一层元素内部有清晰的分组（接近性 + 相似性），层与层之间有明确的层级（大小、明度、位置），并且有一个无可争议的主导元素。观众的眼睛知道先去哪、再去哪，所以它不累。
反过来，一张只有三个元素的海报，如果这三个元素大小接近、间距均匀、明度相同，观众会觉得”不知道看哪”——它元素极少，但它没有结构，所以它比那张音乐节海报更难受。
这也直接推出了一个实用的自检问题：我的画面里，有没有一个地方是”观众必须主动决定该看什么”的？ 凡是有这种地方，就是结构缺失的地方。你的目标不是减少元素，是消灭”观众需要自己决定”的时刻。
-
这个说法听起来很民主，实际上是把设计师的工作转嫁给了观众，而且转嫁的是最贵的那部分。
“等距排列”确实没有偏向任何一种分组。但”没有偏向”不等于”公平”，它等于没有提供结构。而观众拿到没有结构的信息，必须自己做这两件事：
第一，他得自己找出分组。这意味着他要逐个扫描所有元素，在脑子里尝试几种组织方式，选一个。这需要时间和注意力。
第二，更糟的是——不同观众可能选出不同的分组。你觉得”公平，大家自己看”，但实际结果是十个人看出了八种结构，其中一半跟你的意图相反。你以为你在尊重观众，其实你在放弃传达。
所以这个代价是什么？是注意力和准确率。观众多花了三倍的时间，还可能理解错。
而且这里有个更深的问题：观众根本不会意识到自己在做这个工作。他只会觉得”这个东西看着有点累”，然后关掉。他不会想”哦，作者把分组工作交给我了”，他会想”这个设计不行”。你省下的那点力气，最后算在了你的头上。
正确的理解是：分组不是一种”偏向”，是一种”服务”。 你提供结构，是在告诉观众”我是这么组织的，你按这个来，省力”。这不是限制他的自由，这是给他省事。
什么时候可以真的”不提供结构”？只有当任意一种分组都同样合理、且同样符合你的目的的时候。这种情况极少。比如一组并列的、无优先级的图标（比如一排社交平台入口），等距是合适的——因为观众随便按什么顺序看，结果都一样。但一旦信息有了优先级、类别、或者阅读顺序，等距就是失职。
-
这道题的价值在于”两种看法给出的答案不一样”的那一刻。
我预判你会遇到两种情况：
情况 A：退后三步看，分组崩了。
这通常意味着你的分组依赖细节。比如你靠”这三个元素的字号相同”来暗示它们是一组——字号这种细节在缩小之后就看不清了，分组随之消失。
解决方向：分组信号要建立在”大尺度”上，尤其是位置和间距，因为它们在任何尺寸下都还在。你靠颜色、字号、图标形状建立的分组，只在中近距离有效；你靠间距和对齐建立的分组，在缩略图上也成立。
一个实用的检验标准：把你的图缩到 200 像素宽，还能不能看出分组？ 能，说明信号结实；不能，说明你把分组建在了沙子上。这个检验对头像、缩略图、 favicon 这类小尺寸场景特别重要。
情况 B：眯眼看，分组变了（但不是消失，是变成了另一种）。
这更有意思。眯眼之后颜色变淡、细节消失，剩下的主要是明度的大块关系。如果这时候你看到的分组跟你正着看时不一样——比如正着看时”A 和 B 是一组（同色）“，眯眼之后变成了”A 和 C 是一组（同一块亮区）“——那就说明你的画面里存在两套冲突的分组系统。
一套建立在颜色/细节上，一套建立在明度/位置上。观众在仔细看的时候用第一套，在不经意扫一眼的时候用第二套。而绝大多数观众在绝大多数时候是不经意扫一眼的。
所以这时候你的判断应该是：明度那一套才是真正生效的那一套，因为它是”扫一眼”时生效的。你有两个选择：要么改颜色去迎合明度（让两套统一），要么改明度去迎合颜色（比如给 A 和 B 一块共同的浅灰底，让它们在眯眼时也是一伙的）。
如果你发现自己做过的东西里，很多都存在这种”两套系统”，别太难过——这恰恰说明你的观察力已经启动了。以前你根本看不见这个问题，现在你能看见，这本身就是进步。剩下的只是动手改而已。
【动手练习】
-
点阵冲突实验：亲手制造一次法则打架
打开任何你能画方块的软件（PPT、Keynote、Figma、甚至 Word 的表格都行），做三张图：
- 图 A：8 × 8 的点阵，行间距明显小于列间距（比如行距是列距的三分之一），所有点同色
- 图 B：同样的点阵，行列间距完全相同，但每一列用一种颜色
- 图 C：同样的点阵，行距小（同图 A），但每一列用一种颜色（同图 B）——让接近性和相似性对着干
做完之后，把三张图缩小到名片那么大（或者把窗口缩到 30%），对着每张看 10 秒，写下你看到的是”行”还是”列”，以及有没有发生翻转、翻转了几次。
自评标准：三张都做了，且你对图 C 的描述里出现了”翻转""晃""两个都看到""看不稳”这类词——说明你真的观察到了冲突，实验成功。如果你对图 C 只写了”看到了行”或”看到了列”其中之一，说明你看得太快或者图做得不够极端（把行距再压缩一半、颜色对比再拉大一档，重做一次）。另外，注意图 C 在缩小之后和图 C 在放大之后，你的感受是不是不一样——如果不一样，记下来，这是你自己的一手发现。
-
三票分组改造：把你的一页旧作改成”四票投一个方向”
翻出你以前做过的一页东西（PPT 一页、一张海报、一个界面、一份文档的首页都行），找出其中”你希望观众把它们看成一组”的一组元素（至少三个）。
然后检查：这一组现在有几票？逐项核对——
- 接近性：组内间距是否小于组外间距的三倍？
- 相似性：它们的颜色／形状／字号／字重是否一致？
- 连续／对齐：它们是否共享一条明确的对齐线？
- 良好图形：它们是否共同构成一个规整的形状（矩形、圆、一条带）？
把缺的票补上，改造到至少三票。改造前后各截一张图，放在一起对比。
自评标准：把改造后的图给一个没看过原图的人，问他”你看到几个部分”，不要给任何提示。如果他说出的数字跟你的意图一致（比如你想让他看到”三组”，他说”三个部分”或者”三大块”），改造成功。如果他数出来的数字跟你的意图不一致，说明还有一票没投上——回去找那张反对票在哪（多半是某两个元素因为同色或对齐，意外地结成了另一组）。
-
街头观察：一天之内收集五个”意外的组”
挑一天，在你日常通勤或者逛超市的路上，专门找”意外的分组”——也就是那些设计者大概没想要、但你的大脑自动组织出来的组。
每个例子记下：画面里有什么（具体位置和颜色）、你的大脑把它组织成了什么、这个组织是不是设计者的意图。
几个容易找到的方向：超市货架上跨品牌的一整条同色包装；地铁里并排的几个广告灯箱（它们常常被看成”一组内容”而不是”三个广告”）；一排店面招牌里，字体或颜色相似的那两家被看成一家；App 里因为同色而跨行连成一串的标签；会议室里因为几把椅子朝向一致而”存在”的那个讨论区。
自评标准：五个例子里，至少要有两个是你能说出”这大概不是设计者想要的”的——比如两个不相干的品牌因为包装同色而被看成一家，或者两则完全无关的广告因为排版一致而被读成上下集。能找到这种”意外”，说明你已经在用分组的眼睛看世界了，而不是在套法则。如果五个例子全是”设计者明显有意为之”的，说明你还在找正确答案，而不是在找有趣的现象——再走一圈。