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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

同样的文字,开启光学边距对齐前后,边缘的整齐程度不同

四、什么时候该相信尺子

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

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

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

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

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