# 对齐：线该定在哪里，以及为什么“排齐了还是别扭”

怎么为一张海报选定对齐基准线并在全图坚持它，以及软件对齐后看着别扭时该怎么用眼睛修正

> 排版 · 版面设计 · 约 5 分钟 · 09 月 25 日

## 本篇要点

1. 对齐的起点是先找画面里本来就有的硬边：页边距、大图或色块的直边、文字的左对齐线，再把元素往这些线上靠，而不是先画网格再塞内容。
2. 整张图的对齐线控制在两三条，线越少越强；每个元素要么出于对齐，要么刻意打破，不能随手放。
3. “差一点”比完全不对齐更糟，因为读者会怀疑这是失误而不是风格。
4. 标题居中和正文左对齐同时出现，会让读者找不到可参照的边；居中应当是有意的选择，不是默认动作。
5. 文字边缘紧贴图片边缘时会压出狭窄的“被夹住的空白”，把两个元素往两边推，换个边缘去贴就能让空白流到画面外缘。
6. 软件按外接框（形状最宽最高位置框出的矩形）做几何对齐，而眼睛判断的是视觉重量，两者不一致时就会出现“排齐了却别扭”。
7. 同宽高的圆比方块显得小，需要放大；指向右侧的三角形在圆里几何居中会显得偏左，要往尖的方向推；图标与文字并排时应与文字的 x-height 对齐。
8. 补偿值没有唯一正确答案：圆按面积补齐要放大到约 1.128 倍，而界面实践里放大 3%–5% 就够看，具体取决于形状和尺寸。
9. 悬挂标点和圆字母的 overshoot 是同一类做法：让标点或弧顶略微越过版心或字形线，边缘反而看起来更齐。
10. 需要重复使用、写进模板或交给别人的对齐用固定数值；只在当前这一张里出现一次的微调用眼睛；尺寸放大缩小后要重新检查补偿量。

---

上一篇把四个原则过了一遍，其中对齐只讲到一句话：每个元素都跟另一条边对齐，整张图只留很少几条对齐线。真动手时，这句话会卡住两次——线凭什么定在那几个位置？还有，软件里明明对得整整齐齐，为什么看着还是别扭？

这两个问题是一件事的两半：前半段靠尺子，后半段要靠眼睛。

## 一、先找“强边”，让它们来决定线在哪里

对齐不是先在画面上画几条网格线，再把东西塞进格子。顺序是反的：先看画面里本来就有哪些硬边，再把元素往这些边上靠。Robin Williams 的说法是“找一条强线，然后用它”[1]。

一张自己做的海报，能当强线用的通常只有三种：

**页边距。** 设计软件打开时默认就给四条边线，先把它们当最外层的秩序用。海报这类大幅面物料，四周常留出一英寸左右的空白，这是最不容易出错的做法[2]。

**大图或色块的直边。** 图片、色块、色带的外边缘是天然的强线，相当于画面上已经有人替你画好了一条。

**你自己规定的文字对齐线。** 把标题、副标题、正文全部设成左对齐（flush left），它们就共享同一条看不见的竖线。这条线是整张图里最有价值的一条，因为它能跨越很远的距离把信息连起来。

选好之后只剩一条行动规则：能靠就靠，不要随手放。每个元素的位置，要么是出于对齐，要么是刻意打破对齐，不能是“大致摆在这儿”。

线的数量控制在两三条就够：一条左侧文字线、一条页边或右边界，最多再加一条横向的（比如标题区和正文之间）。线越多，每条线越弱，最后看起来像谁也没对齐。

检查方法很简单：眯起眼睛，或者退后两步看整张图，还能不能一眼看出文字站成一条竖线？看得到，就对上了。看不到，说明位置出现了“差一点”——差一点比完全不对齐更糟，因为读者会怀疑这是失误，而不是风格。

## 二、几种会让线失效的做法

**同一个页面上不要随意混用文字对齐方式。** 标题居中、正文左对齐是最典型的乱源。居中看不到一条可见的边，读者无法判断它跟谁对齐[1]；尤其不要让居中的标题压在左对齐的正文上，那样连标题有没有真的居中都看不出来。

**居中本身不是错，但不能是默认动作。** 它显得正式、庄重，也容易乏味；应该是刻意选择的结果，而不是不知道放哪儿时的保险选项[1]。

**小心“被夹住的空白”。** 如果文字的左边缘紧贴图片的右边缘，两块之间的空白会被压成一个又窄又别扭的形状，反而把两个元素往两边推开。这时换一边贴：让文字的右边缘去对图片的左边缘，把空白让到画面外缘去[1]。

## 三、“排齐了还是别扭”：软件算的和眼睛看的是两回事

软件的居中和分布用的是外接框（bounding box）：先把形状最宽最高的位置框起来，再把这个框的中心对到容器中心。计算没有错，但人的眼睛不看外接框，看的是视觉重量——哪一块看起来更重、更实。

三个你一定会碰到的例子：

**方块和圆。** 边长和直径同为 120 像素的方块和圆摆在一起，圆看起来明显小一圈，因为方块的四个角给了它更大的面积。要让两者看起来一样重，圆就得做大：严格按面积补齐的话，直径要放大到约 1.128 倍，也就是 135 像素左右[3]；界面设计里的常见做法只放大 3%–5%，也就是 126 像素[4] 就够看了。两个数字相差不小，说明补偿值并不是一条固定公式，它取决于形状和尺寸。

**播放键。** 指向右边的三角形放进圆里，软件居中之后它看起来往左偏。因为三角形的重量压在左边那条平的竖边上，右边只有一个尖点伸进空白里。要让它看起来居中，得手动往尖的方向推一点[4][5]。

**图标配文字。** 图标和文字垂直居中对齐时，图标常显得偏高。因为文字有上伸部分（b、d）和下伸部分（g、y），外接框比视觉上的字面大一圈。正确的做法是让图标和文字小写字母的高度对齐，也就是 x-height[5]。

这一类修正有两个通行的名字：optical alignment（视觉对齐）和 optical compensation（视觉补偿）。规则只有一条——当数字和眼睛冲突时，改数字。

排版里还有一处同样的补偿。引号、句号、逗号落在行首行尾时，会在版心边缘上咬出一个豁口，一段文字的左边缘看起来就毛糙了。专业排版软件的做法是让这些标点，以及 W、A、V 这类斜边字母稍微伸出版心一点点，边缘反而更齐，这个功能叫悬挂标点（hanging punctuation）或光学边距对齐[6][7]。字体设计本身也一直在做同样的事：O、C 这类圆字母的上下弧会略微越过顶线和基线（overshoot），否则它们看起来会比 H、L 矮一截[4]。

![同样的文字，开启光学边距对齐前后，边缘的整齐程度不同](https://creativepro.com/wp-content/uploads/2024/11/indesign-optical-margin-fig1.png)

## 四、什么时候该相信尺子

“相信眼睛”必须有边界，否则就成了永远调不完的手感。一个够用的判断标准：

**要重复出现、要交给别人的，用数值。** 整份物料里反复使用的间距、字号、页边距、跨页标题的位置，都用具体数值固定下来。理由是数值可复制、可写进模板、可交给别人执行；手感不行，隔一天再调就变了。

**只在这一张里出现一次的微调，用眼睛。** 一个图标往右推两像素，不影响别处，改了就是。

**放大或缩小之后，重新看一遍。** 在小尺寸上修好的两像素补偿，等比放大之后会被一起放大，看起来就过头了[5]。

所以对齐的目标不是“把元素放在看起来整齐的坐标上”，而是“让读者能看出一条边”。先用尺子把该对齐的都对齐，再用眼睛去修尺子看不见的地方——这个顺序不能反。接下来几篇会继续讲字体、颜色，以及怎么把这些规则固化成一整套可以反复用的模板。

## 术语表

- 强线（strong line）：画面上真实存在的一条硬边，例如页边距、图片的直边或文字的左对齐线，其他元素靠它确定位置。
- 外接框（bounding box）：软件框住形状最宽最高位置的那个矩形，几何对齐和居中都以它为准。
- 视觉重量（visual mass）：眼睛感觉一块形状有多“重”，与面积、边角、形状朝向有关，不等于外接框的大小。
- 视觉对齐 / 视觉补偿（optical alignment / optical compensation）：发现几何对齐看起来不对时，手动把元素推离数学中心，直到眼睛觉得平稳。
- overshoot：圆字母的上下弧略微越过基线或顶线，用来抵消圆形看起来偏小的错觉。
- x-height：小写字母（如 a、x）的高度。图标与文字并排时，对齐到这条高度比几何居中还稳。
- 悬挂标点（hanging punctuation）：让引号、逗号、句号以及斜边字母稍稍伸出版心，使整段文字的边缘看起来更整齐。

## 来源

1. [Robin Williams 对齐原则讲义：找一条强线、混用对齐方式的问题、居中的弱点、被夹住的空白](https://www.witty.ca/uploads/4/7/6/4/4764474/_alignment_handout.pdf)
2. [UNC 图书馆海报版式指南：对齐栏目与图形、四周留出约一英寸白边](https://guides.lib.unc.edu/posters/design/layout)
3. [Bjango: Formulas for optical adjustments — 圆按面积补齐需放大到 112.84%，三角形的重心而非外接框中心](https://bjango.com/articles/opticaladjustments/)
4. [Marvel: Optical Adjustment — Logic vs. Designers — 120 像素方块对应 126 像素圆、播放键三角形偏左、圆字母 overshoot](https://marvelapp.com/blog/optical-adjustment-logic-vs-designers/)
5. [Pixso: Optical alignment in UI design — 三角形朝尖的方向微调、图标与文字按 x-height 对齐、缩放后重新检查补偿](https://pixso.net/articles/alignment-icon/)
6. [Wikipedia: Optical margin alignment — 光学边距对齐的定义与适用范围](https://en.wikipedia.org/wiki/Optical_margin_alignment)
7. [CreativePro: Hanging Punctuation with Optical Margin Alignment — 悬挂标点如何让正文边缘看起来更齐](https://creativepro.com/hanging-punctuation-with-optical-margin-alignment-in-indesign/)

---

原文：https://pangzhengboyin.com/articles/alignment-strong-line-and-optical-compensation-a3c796a8

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