# 版面为什么看着“乱”：用四个原则读懂一张设计

亲密性、对齐、重复、对比各自解决什么问题，以及怎么按顺序用它们改一张海报

> 排版 · 视觉层级 · 版面设计 · 约 7 分钟 · 09 月 25 日

## 本篇要点

1. 版面让人觉得“乱”，通常不是审美问题，而是元素之间的关系没有被表达清楚。
2. 亲密性、对齐、重复、对比四个原则分别处理四类关系：谁和谁是一组、分开的元素怎么还像一套、哪些东西属于同一系统、先看什么。
3. 亲密性的关键是制造疏密差别，让组内距离明显小于组间距；各处间距均匀时，读者只能逐条猜。
4. 对齐要求每个元素都跟另一条边对齐，整张版面只留很少几条对齐线；全部居中不出错但缺少力量。
5. 重复不只是保持一致，而是让某个显眼元素反复出现，成为识别记号，这决定了一整套物料是否像同一个人的作品；重复过头会变成噪音。
6. 对比要求不一样就明显不一样；只差一两个字号会让读者觉得是失误，而不是主次。
7. 四个原则可以按“先分组、再对齐、再重复、最后对比”的顺序依次使用，但修改一处会牵动别处，需要回头复查。
8. 这套原则只解决结构清晰度，不负责配色、字体气质和图片质量；它也是检查工具，不是审美判决。

---

你大概有过这种经历：自己排好一张海报或者一张封面，盯着看半天，总觉得“差点意思”，但要你说哪里不对，又说不上来。别人的东西一看就专业，自己的东西一看就零散，中间像是隔着某种说不清的东西。

这四个原则的价值，就是给那团模糊的感觉起名字。它们是亲密性（proximity）、对齐（alignment）、重复（repetition）、对比（contrast），由 Robin Williams 在《The Non-Designer's Design Book》（中译本《写给大家看的设计书》）里整理成一套专门给非设计师用的框架[1]。学会之后，你仍然说不出“高级感”到底是什么，但你能指出“这几块内容的关系没表达清楚”，然后动手改。

## 先把“好看”翻译成“关系”

人的眼睛看一张版面，并不是从左上角开始一个元素一个元素地读，而是会先把画面自动切成几块，再决定从哪一块读起。格式塔心理学在二十世纪初就记录过这件事：靠得近的东西会被看成一组[4][5]。

所以版面让人觉得“乱”，多半不是因为它丑，而是因为读者看不出关系：哪几个字属于同一件事、哪些信息是一起的、先看哪个、哪些东西是一套的。四个原则恰好各管一类关系。它们管的是结构，不是风格，所以即使你还没有品味的判断力，也能靠它们作出可执行的修改。

| 读者心里的疑问 | 用哪个原则 | 具体动手做什么 | 没做到时的症状 |
| --- | --- | --- | --- |
| 哪些信息是一件事？从哪读起？ | 亲密性 | 把相关的靠紧，用更大的空白把不相关的隔开 | 各处间距差不多，像一堆碎片堆在纸上 |
| 分开的元素怎么还像同一张图？ | 对齐 | 让每个元素跟另一条边对齐，整张图只留很少几条对齐线 | 元素各自为政，边缘参差不齐 |
| 哪些东西属于同一个系统？ | 重复 | 让字体、颜色、线条、形状、间距在整份物料里反复出现 | 每块内容都像是不同的人做的 |
| 第一眼该看什么？ | 对比 | 让该突出的东西明显不一样，而不是只差一点 | 所有文字一样重，读者从标题平着读到落款 |

## 亲密性：谁和谁是一伙的

亲密性解决的是分组问题。相关的信息要放得近，不相关的要离得远，让眼睛一眼看出这是三组而不是八个孤立元素。

它的做法常常和直觉相反：不是把所有东西都挤到一起显得整齐，而是**主动制造疏密差别**。如果每个元素之间的距离都差不多是一厘米，读者的眼睛得不到任何提示，只能逐条去猜哪些信息属于同一件事——这就是“乱”的主要来源。

举个具体的例子。一张活动海报上有主题、讲者、时间、地点、主办方五项信息。主题和讲者是一类（讲什么、谁来讲），应该挨得近；时间和地点是另一类（怎么参加），也应该挨得近；主办方是第三类（谁办的），可以和前两组之间留出明显的空白。这样不画任何线条，读者也能自动分成三堆。

距离是眼睛最敏感的分组信号。下面这组圆点大小形状完全相同，你几乎无法阻止自己把它们看成一小簇一小簇：

![间距变化让同样的圆点被看成若干组](https://en.wikipedia.org/wiki/Special:FilePath/Gestalt_proximity.svg?width=960)

要注意：分组靠的是**对比出来的距离差**，不是绝对距离。同一组内距 4 毫米、组间距 12 毫米，就能分开；如果组内 4 毫米、组间距 6 毫米，眼睛就会犹豫。改版面的第一步通常不是换字体，而是把该分开的地方拉开。

## 对齐：分开了，还看得出是一伙的

亲密性会把元素推远，可推远之后它们还是得让人看出属于同一张版面。这就是对齐要解决的：让每个元素都跟画面上另一条看不见的线对齐，形成秩序。

对齐的底线是“不要随手放”。位置要么出于对齐，要么出于刻意的打破，不能是“看着差不多放这儿”。新手最常见的选择是把所有东西居中，因为居中几乎不会出错；但每个元素各自围绕自己的中心，缺少一条硬边，整体显得平淡[2]。把元素统一到一条左对齐线或右对齐线上，版面会立刻显得更有力量。

这里有个容易踩的坑：一张图里对齐线越少、越一致，看起来越干净；每条线都对齐一点、又都差一点，反而更乱。实操上先定两三条线就够，比如主内容一条左对齐线、页边一条右对齐线，所有元素都往这两条线上靠。

## 重复：怎么让人看出这是一个系统

重复解决的是“这些东西是不是一套”的问题。可重复的东西比你想的多：字体、字号层级、颜色、线条粗细、图标风格、图片的圆角或方角、段落之间的间距节奏。

重点在于：重复不只是“保持一致”，而是**刻意让某个显眼元素反复出现**，成为读者识别这套东西的记号。你以后要做一整套物料——海报、朋友圈图、封面、名片——它们看起来是不是同一个人的作品，主要就靠这里。这也是后面建立品牌视觉套件的种子。

但重复有边界。同一个元素重复得太多、太大、太频繁，它会从“统一”变成噪音，甚至抢走本该属于焦点的注意力[3]。判断标准很简单：这个反复出现的东西是在帮读者认路，还是在占地方。

## 对比：决定先看什么

对比解决的是顺序问题，也就是视觉层级——读者先看什么、后看什么，主要由对比决定。做法只有一句话：如果两样东西不一样，就让它们**非常不一样**。

标题和正文如果只差一个字号（14 磅和 16 磅），读者看不出有主次，只会觉得是排版失误。要么改成一样大，要么让它们差到一眼就能分开——把标题做到正文的两三倍大，或者同时拉开字号、字重和颜色。模糊的差异是新手版面最典型的病灶。

对比有两个作用：一是制造兴趣点，让页面有人愿意看下去；二是组织信息，让读者立刻知道先看什么、再看什么[2]。第二个作用更重要，也更容易被忽略。对比其实是在**指定焦点**，所以如果强调的不是最该先看的东西，读者就会先看错地方。

## 四个原则怎么配合：一张海报的四步修改

把上面四件事串起来，一个自然的操作顺序是：先分组，再对齐，再重复，最后对比。

还是那张讲座海报，文字只有主题、讲者、时间、地点、主办方。第一步用亲密性分组：主题和讲者靠紧，时间和地点靠紧，主办方单独放远。第二步对齐：所有文字统一对齐到同一条左对齐线。第三步找重复：标题和副标题用同一种字体，时间和地点前的“小圆点”或“竖线”样式保持一致。第四步做对比：主题字号拉到最大，讲者次之，时间和地点用常规字号，主办方用最小的灰色文字。

改完之后你会发现一件事：这几步互相牵动。拉开距离之后，原来的对齐线可能被破坏，得重新检查；把标题放大之后，原本合适的位置又要调整。所以稳妥的做法是按顺序走一遍，再回头复查一遍，而不是一次只调一个元素直到自己看着舒服。

## 这套原则的边界

四个原则能帮你解决“不清楚”“没秩序”“不像一套”“没有主次”，但它管不了另外一些事：配色是否协调、字体气质是否贴合主题、图片选得好不好。这些都在后面几篇里。

还有一点要记住：这四个原则不是审美的判决书，而是**沟通效率的检查工具**。判断标准始终是同一个——读者能不能快速看懂你想让他先知道什么。你的版面可以打破某条原则，但前提是你知道自己在打破什么，以及这样做的代价是让谁读起来更费劲。

## 术语表

- 亲密性（proximity）：把相关的元素放得近、不相关的放得远，让眼睛自动把它们看成一组。
- 对齐（alignment）：让元素彼此共享一条看不见的边线，使分散的内容仍显出秩序。
- 重复（repetition）：让某种字体、颜色、线条或形状在整份物料里反复出现，让人看出这是同一套东西。
- 对比（contrast）：让该突出的元素明显不同于其他元素，从而决定读者的阅读顺序。
- 视觉层级：读者看到版面时先看什么、后看什么的顺序，主要由对比决定。
- 分组：眼睛自动把靠得近的东西看成一块的机制，来自格式塔心理学的邻近原则。

## 来源

1. [The Non-Designer's Design Book 第四版样章 — 四原则各章目录与摘要](https://ptgmedia.pearsoncmg.com/images/9780133966152/samplepages/9780133966152.pdf)
2. [Robin Williams' four basic design principles for non-designers — 逐条解释四原则，含居中对齐偏弱与对比的两个作用](https://wiredcraft.com/blog/robin-williams-four-basic-design-principles-for-non-designers/)
3. [The Non-Designer's Design Book 读书笔记 — 含重复过度会干扰焦点等要点](https://github.com/mgp/book-notes/blob/master/the-non-designers-design-book.markdown)
4. [Principles of grouping — 格式塔分组原则总览，邻近与相似原则如何形成视觉层级](https://en.wikipedia.org/wiki/Principles_of_grouping)
5. [Scholarpedia: Gestalt principles — 邻近原则的经典描述与图示](http://www.scholarpedia.org/article/Gestalt_principles)

---

原文：https://pangzhengboyin.com/articles/four-basic-layout-principles-755f13b6

> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具。说出想学什么，它会先了解你的基础，再把主题写成一篇篇 5–10 分钟能读完的文章；边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com