# 一页看起来乱，不是缺装饰，是缺一条看不见的线

页面乱多半不是审美问题，而是每块元素都停在“哪里有空就放哪”；先定一条贯穿全篇的对齐基准线，正文统一左对齐，再用间距层次把“谁和谁是一伙的”说清楚。

> 幻灯片排版 · 对齐与留白 · 视觉层次 · 约 6 分钟 · 10 月 16 日

## 本篇要点

1. 页面显得乱，通常不是因为缺装饰，而是因为每块元素都停在“哪里有空就放哪”的位置，彼此之间没有关系。
2. 之所以会“乱”，是因为眼睛会把共享边缘的元素自动读成一组；一页里承载元素的“看不见的竖线”越多，观众越要不断重新找起点。
3. 定对齐基准的做法是先定线再放内容：用一条主左线承载标题、正文、图表和页脚，整份幻灯片共用这一条线（在母版里固定比手动拖可靠），一页的对齐轨道控制在三到五条以内。
4. 正文统一用左对齐，因为每行左端落在同一起点，眼睛换行时知道跳回哪里；居中的每行起点都不同，两端对齐靠拉伸字距制造“白色河流”，两者都增加阅读负担。
5. 居中并非错误，它的基准线在中轴上，适用于整页围绕一条中轴对称的场合（封面大标题、一句引语），错的是在一页里和左对齐混用；表格里的数字列则用右对齐或小数点对齐。
6. 留白和对齐是同一件事的两半：对齐管“贴在同一条线上”，留白管“隔多远”，两者都在回答“谁和谁是一伙的”。
7. 做法是让间距分层次：以 8 点这类基础单位为准，关系最近的 8 到 16 点，组内 16 到 24 点，组与组之间 32 到 64 点；只有间距有对比，观众才看得出结构。
8. 边界：对齐只保证“读得清”，不改变内容对错；有目的地打破基准线是能用的手法，但要少而显眼，处处差一点就成了杂音。

---

上一篇你花了半小时，把“竞品对标”改成了“竞品交付快 4 天，但返修率是我们的两倍”。可发给主管，他说的是：“内容我懂了，就是看着有点乱。”

很多人的下一反应是加点配色、图标、圆角框。先别加。页面乱，多数时候不是因为东西太少，而是因为这页上十几块元素，每一块都停在“哪里有空就放哪”的位置——它们互相之间没有关系。

## 乱在哪：每个元素都在找空位

设计入门书里有条很硬的规定：页面上没有任何东西可以被随便摆放，每一件都要和页面上别的东西产生视觉联系[1]。说这话的 Robin Williams 打了个比方：乱放的页面像一张没收拾的厨房台面——杯子在这、盘子在那、纸巾摊在另一头。它不需要重新装修，只需要各自归位。

你在 PPT 里也是这样“放”的：这段文字往左挪一点，因为右边空；图标拖到右上角，因为那儿没人。每块单独看都合理，合起来就是没收拾的厨房。

为什么眼睛觉得乱？因为**眼睛会自动把边缘对齐的元素当成一组**。左边缘在同一条竖线上的两块，大脑读成一个整体；差几个像素，就读成两块各自为政的东西。一页里有十来个元素、每个停在不同横坐标上，观众的眼睛每扫到一处都要重新找起点。

问题的核心是：这页上有几条“看不见的竖线”在承载元素。三条，页面就有结构；十五条，页面就是撒上去的。

## 第一步：先定一条基准线，再往里放东西

**对齐基准线**，就是你在页面上认下的一条看不见的线，凡是愿意的元素都把边缘挂上去。顺序不能反——先定线，再放内容，而不是放完再拖。

1. **定一条主左线。** 比如左侧留出约整页十分之一的页边距，画一条竖线。这一页的标题、正文、图表、页脚、注释，左边缘全部落在这条线上。宁可让图表小一点，也别让它的左边缘飘出去。
2. **全套幻灯片共用同一条线。** Williams 强调的不只是单页内部对齐，而是“整套幻灯片的对齐保持一致”[1]。观众翻页时视线不用重新适应，页面就“稳”了。实操上把标题和正文的位置在幻灯片母版里定好，每页自动继承，比一页页手拖可靠。
3. **一页的对齐轨道控制在三到五条以内。** 主左线一条，可能再加一条右边缘线或一条中心轴。超过这个数量，多半是你又在找空位了。
4. **别用肉眼拖。** 选中多个对象用“对齐”命令，或者打开参考线（视图里打开参考线，按住 Ctrl 拖出新的）让元素吸附上去。差两三像素，恰恰是那种“说不上哪里不对”的来源。

```mermaid
flowchart LR
  subgraph BAD["各自找空位"]
    direction TB
    b1["标题开始于 x=30"]
    b2["正文开始于 x=52"]
    b3["图表开始于 x=15"]
  end
  subgraph GOOD["共享一条基准线"]
    direction TB
    g1["标题开始于 x=60"]
    g2["正文开始于 x=60"]
    g3["图表开始于 x=60"]
  end
```

## 第二步：正文统一用左对齐

定好了那条线，正文自己怎么对齐？答案很干脆：**左对齐**。

它给了眼睛一个稳定的起点：每行文字的左端落在同一条线上，眼睛读到头往回跳时，知道该跳到哪个横坐标。行数一多，这就是实实在在的负担[3]。

两种看着“整齐”的做法反而更碍事：

- **居中**：每行起点都不一样，眼睛每次换行都要重新找起点[4]。
- **两端对齐**：为凑齐右边缘强行拉开字距，页面里出现贯穿数行的竖白缝（“白色河流”），公认最干扰阅读[4]。

有个例外要说清：**居中不是错的，它的基准线在中轴上**。当整页内容真的围绕一条中轴左右对称时——封面大标题、一句引语——居中是对的。真正的错误是混用：一个居中的小标题，下面跟着左对齐的段落，两者起点完全不同，看着就像歪了。

表格里的数字是另一套规矩：一列数字右对齐（或小数点对齐），位数才能纵向对上。这不违背“统一左对齐”，因为数字列的对齐基准是右边缘，整列一致就成立。

## 第三步：留白和对齐是同一件事

到这里你可能以为，对齐讲“贴着哪条线”，留白讲“空多少地方”，是两回事。不是。它们回答的是同一个问题：**这一堆东西里，谁和谁是一伙的。**

邻近性原理说得很直白：元素之间**靠得越近，看起来关系越近**；距离拉开，它们在理解上就被分成两组[2]。也就是说，两个元素之间的空隙大小本身就是一条发给观众的信息，和对齐那条基准线一样，都在告诉观众页面的结构。对齐管“贴在同一条线上”，留白管“隔多远”——两者都是让位置承载意义，而不是让位置由“哪里还有空”决定。

反面案例很典型：一页上所有间距都一样大，标题和副标题之间 20 点，副标题和下一组内容之间也是 20 点。结果什么都连在一起，又什么都没分开。

做法是给间距分层次。选一个基础单位（PPT 里用 8 点这种能被整除的小单位最省事），所有间距从这个单位翻倍得来[5]：

- 关系最近的两行（标题和它的补充说明）：8 到 16 点；
- 同一组内部的几项（一个论点和它的三条证据）：16 到 24 点；
- 组与组之间、上下两大块之间：32 到 64 点。

一句话记：**要分组的，拉开到远大于组内间距；要归在一起的，压到明显小于组间间距。** 只有间距有对比，观众才看得出结构。

留白还有一层用处：页面四周要留得住边。内容往边缘挤得太紧，整页显得局促，读起来也更费劲[4]。主左线本身就自带一份页边距。

## 别指望对齐救内容

一是**对齐不改内容对错**。排版书里有句话很准：把难看的东西对齐到网格上，它还是难看的[6]。对齐解决“读得清”，不解决“说得对”。如果这页的问题其实是论点没立住，回到前两篇。

二是**对齐不是为了消灭所有不规则**。有意识地打破基准线是能用的手法——故意让一张关键数据图越出主左线压到边上，让目光先落上去。区别在于：有意的打破是例外，没意的错位是杂音。一页里 90% 都对得整齐、只有一处跳出来，是设计；处处差一点，是没收拾。

下次页面被说“乱”，先别调颜色。问三句：这页有几条看不见的竖线？标题、正文、图表的左边缘是不是都落在同一条线上？组内和组间的距离有没有明显差别？做完这三件事，你多半会想删掉一半装饰。

## 术语表

- 对齐基准线（alignment rail）：页面上一条看不见的竖线或横线，多个元素把边缘挂在同一条线上，从而被观众读成一组；一页里这种线越少，页面越有结构。
- 左对齐：每行文字的左端落在同一条起点线上，让眼睛换行时知道回到哪个位置；对成块的正文是默认选择。
- 两端对齐：为了把左右两边都撑平而拉开字距和词距，会在文本中留下贯穿数行的白缝（“白色河流”），比居中更干扰阅读。
- 邻近性（proximity）：靠得近的元素被当成一组、隔得远的被当成两组，所以元素之间的空隙大小本身就是一条发给观众的结构信息。
- 基础间距单位：所有间距都从一个固定小单位（如 8 点）翻倍得来，用间距大小的层次区分“同一组”和“不同组”。

## 来源

1. [Chapter Nine: Alignment — Robin Williams, The Non-Designer’s Presentation Book：对齐要求每件元素都与页面上别的东西相连，且整套幻灯片保持一致](https://www.oreilly.com/library/view/non-designers-presentation-book/9780134685939/ch09.html)
2. [Chapter Ten: Proximity — Robin Williams, The Non-Designer’s Presentation Book：元素越靠近看起来关系越近，距离拉开就在理解上被分成两组](https://www.oreilly.com/library/view/non-designers-presentation-book/9780134685939/ch10.html)
3. [WebAIM: Text/Typographical Layout — 左对齐几乎总是最好读的，整块居中会让每行从不同位置开始](https://webaim.org/techniques/textlayout/)
4. [Clemson University Digital Accessibility: Text — 左对齐给眼睛自然起点，两端对齐产生的“白色河流”最干扰阅读，文字离边缘太近会显得拥挤](https://www.clemson.edu/accessibility/digital/concepts/text.html)
5. [Spacing, grids, and layouts — Design Systems：用 8 点这类基础单位派生所有间距，用间距大小表达元素之间的亲疏关系](https://www.designsystems.com/space-grids-and-layouts/)
6. [Grids — Butterick’s Practical Typography：网格的价值在于促成一致性，把难看的东西对齐到网格上它仍然难看](https://practicaltypography.com/public/grids.html)

---

原文：https://pangzhengboyin.com/articles/slide-alignment-baseline-and-whitespace-5ce1f18f

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