chapter[2] · part 1 / 鉴赏的基础
形式：比例、构图与节奏
上一章结尾你做了一个练习：说出一个 App"哪里好看"，并且发现自己缺词汇。本章开始安装词汇表的第一组，也是最重要的一组：形式（form）——一件作品中与"画的是什么"无关的那部分视觉组织。把一幅画眯起眼睛看到模糊、只剩下大块的明暗和形状，剩下的就是形式。
先记住这个反直觉的事实：对观感的影响，形式通常大于内容。同一份数据，排版混乱时没人想读；同一个故事，构图失衡的电影画面会让人莫名烦躁。本章给你四个分析形式的维度：平衡、比例、路径、节奏。它们适用于一幅油画，也同样适用于一个登录页。
2.1平衡：每个元素都有视觉重量
画面里的每个元素都带着一个看不见的属性：视觉重量（visual weight）。它决定这个元素能吸走多少注意力。影响它的因素可以列成一张表：
| 因素 | 更重 | 更轻 |
|---|---|---|
| 大小 | 大 | 小 |
| 明暗对比 | 与背景反差大 | 与背景接近 |
| 色彩 | 饱和、暖色（红、橙） | 灰、冷色 |
| 位置 | 远离中心、靠上 | 靠近中心、靠下 |
| 密度 | 细节多、纹理复杂 | 平坦、空白 |
| 形状 | 不规则、倾斜 | 规则、水平垂直 |
所谓平衡，就是这些重量在画面中的力矩之和趋近于零。最简单的方案是对称：左右镜像，重量自动相等。对称传达稳定、庄严、权威——所以教堂立面、法院大楼、奢侈品牌官网都爱用它。
但对称是昂贵的：它要求内容恰好能镜像。更通用的方案是非对称平衡——用一个小而重的元素去抵消一个大而轻的元素，就像上一章蒙德里安那个角落里的小蓝块。非对称平衡更有生命力，因为它带着张力："差一点就倒，但就是不倒。"
典型的产品落地页就是一道非对称平衡题：左边一大段标题文案（大而轻），右边一张产品截图（小而密、重）。如果你照抄这种布局却"感觉不对"，八成是两侧视觉重量失衡——文案太弱或截图太空。调平的手段就在上面那张表里：加大字重、提高截图对比度、移动元素离中线的距离（力臂）。Flexbox 的 justify-content 只能对齐盒子，平衡的是重量，不是几何。
2.2比例：黄金分割的真相
没有哪个美学概念比黄金分割（φ ≈ 1.618）被神化得更厉害。先讲清楚它真实的部分：把一条线段分成 a > b 两段，使 a/b = (a+b)/a，解出来的比值就是 φ。它确实优雅——φ 的倒数是 φ−1，平方是 φ+1——欧几里得就研究过它，文艺复兴时期数学家帕乔利为它写了专著《神圣比例》，达·芬奇画了插图。
然后是需要祛魅的部分："鹦鹉螺壳是黄金螺线"（实测不是）、"蒙娜丽莎处处黄金分割"（事后往上套矩形罢了）、"苹果 logo 由黄金圆构成"（设计师本人否认过这种解读的必要性）。心理学实验（自费希纳 1876 年以来多次重复）也没有发现人类对黄金矩形有稳定偏好。
比例的真正规则不是"使用某个魔法数字"，而是：有意识地选定一个比例系统，然后处处坚持它。φ 可以，4:3 可以，1.25 的模数字阶也可以。美感来自系统的一致性，不来自数字的神性。随手 13px、随手 17px 的页面之所以丑，不是因为没用 φ，是因为它根本没有系统。
2.3路径：引导线、三分法与负空间
眼睛看画不是一次"全量加载"，而是沿着一条路径的"流式读取"。好的构图会预设这条路径。上一章结尾我们在《神奈川冲浪里》留了一个钩子，现在兑现它——这次直接把分析线画在画上：
三个术语正式入册：引导线（leading lines）——画面中引导视线移动的线性结构，可以是真实的线（道路、栏杆），也可以是隐含的线（目光方向、动势）；三分法（rule of thirds）——把画面九宫格化，重物上交点；负空间（negative space）——主体之外的"空"，它不是浪费，是给主体让出的呼吸和聚光。
界面同样有视线路径，而且高度可预测：信息密度均匀时，西文/中文用户按 F 形扫描页面（眼动研究的稳定结论）；有明确层级时，视线按"重量排序"跳跃——最大标题 → 高对比按钮 → 图片 → 正文。所以"把 CTA 按钮放哪"不是玄学：放在视线路径的必经之地，并给它全页独一份的视觉重量。而负空间就是 UI 里的 padding 与留白——下次想"这一块好空，塞点什么"时，想想富士山。
2.4节奏：重复，与打破重复
形式的第四个维度是时间性的：节奏（rhythm）——相似元素以可感知的规律重复。柱廊的柱距、窗格的阵列、列表的行高，都是视觉节拍。节奏让画面可预测，从而可理解；但纯粹的重复是单调，节奏的高级用法是用重复建立预期，再用一次精确的变化打破它——音乐里这叫切分音，界面里这叫强调。
所有条目同样大小、同样间距、同样颜色：有节拍，没有音乐。视线无处落脚，每一行都在喊"我不重要"。
同样的列表，第一项被放大并换色：节奏先建立秩序，唯一的变化自动成为焦点。注意打破只发生一次——切分音满地都是时，就没有节拍了。
第〇章的 8px 间距网格（8/16/24/32/48/64）就是界面的节拍器：所有间距都是同一拍子的整数倍，页面就有了稳定的"低音"。代码里你早就懂这件事——一致的缩进就是节奏，gofmt 强制全世界的 Go 代码同一个节拍。而一个 // HACK: 注释之所以扎眼，正因为它打破了格式的均匀——这是你每天都在阅读的切分音。
2.5格式塔：大脑替你做的预处理
前四节都假设了一件事却没点破：为什么把元素"靠近"就成了一组？为什么蓝块和红线"挪一下"整个画面就垮了？答案来自二十世纪初的格式塔心理学（Gestalt psychology），它的一句话总结是：整体不是部分之和，大脑在你意识到之前就已经把零散的视觉信号组织成了结构。这不是审美偏好，是知觉的出厂设置——所以它对每个人都生效，也因此成了设计能依赖的最底层物理规律。下面五条法则，是这套"出厂设置"里对设计最有用的几条：
格式塔是界面设计里"免费的信息架构"。接近：表单里标签贴紧自己的输入框、远离上一组——不画一条线就分好了组（第七章会专门展开）。相似：所有可点击的东西用同一种颜色，用户不用学就知道哪些能点。闭合：卡片不必四边都描边，几个对齐的角 + 一致的留白，大脑自动脑补出"一个容器"。连续：对齐成一条线的元素被读成"一系列"，这就是栅格为什么有效。图底：Modal 压暗背景，就是强行把对话框指派为"图"、其余为"底"。你每天写的每一个 gap 和 border，都在跟这五条出厂设置对话——顺着它写，省一半的分割线。
2.6把这些维度装进眼睛
本章的维度合成一张随身检查单。看任何东西——画、海报、照片、界面——按顺序问：
平衡 Balance
哪里重？哪里轻？重量是否相互抵消？是庄严的对称，还是带张力的非对称？
比例 Proportion
主要的形状之间是什么比例关系？这些比例是一个系统，还是一盘散沙？
路径 Path
视线第一眼落在哪？然后被引向哪？终点是作者想让你看的东西吗？负空间有没有在为主体让路？
节奏 Rhythm
什么在重复？重复建立的预期，在哪里被打破？打破的次数是不是足够少？
分组 Gestalt
大脑把哪些东西自动归成了一组？靠的是接近、相似，还是闭合？这个分组是作者想要的，还是意外的副作用？
两道题。① 看画：在 Wikimedia Commons 或任何美术馆网站随便找一幅你从没见过的画，用 B-P-P-R-G 五问各写一句话——不求"对"，只求每一问都有具体所指。② 看界面：回到练习 1 你截图的那个 App 首屏，同样五问。这次你应该能把上次写不出的"它就是舒服"翻译成至少两条具体观察，比如"所有卡片同一比例（P），唯一的彩色按钮在视线路径终点（P）"。如果界面在某一问上答不出来——比如根本找不到视线路径——恭喜，你发现了它的第一个设计缺陷。