在排版设计中,几乎所有的设计师都知道有左对齐、居中、右对齐、两端对齐这四种对齐方式,但很少有人能在实际排版的时候,能够说清楚该如何选择。
当设计师拿到需要排版的内容时,即使文字量和使用场景都已经明确,但往往还是在采取怎样的排版对齐方式上犹豫不前。居中是不是更好看?两端对齐是不是更整齐?能想到的判断标准全是视觉感受,确说不清楚选这种对齐而不选那种对齐的理由。
说不出理由,是因为大多数设计师只看到了每种对齐方式的优势,确没有看到伴随优势而来的代价是什么。

打开任意一个阅读类 App,比如微信读书、知乎、Medium,你会发现里面的正文几乎都是左对齐。后台管理系统也一样,表单标签、说明文字、列表内容全部靠左。左对齐之所以出现在这么多地方,是因为它在所有对齐方式里对阅读效率的提升最强。
人在读一段文字的时候,眼睛读完一行会快速折返到下一行的起点。左对齐的段落里,每一行的起点都在同一个水平位置上,所以视线折返之后可以直接落在固定位置开始读下一行,不需要额外的搜索。这个折返过程越清晰,那么阅读就越省力。十行左对齐的文字和十行居中对齐的文字放在一起做比较,阅读舒适度的差距会非常明显。

除了阅读效率,左对齐还能帮助页面建立元素之间的归属关系。当标题、副标题、正文共享同一条左边缘时,读者不需要额外的视觉线索,就能感知到这些元素属于同一个体系。层级感靠字号和字重来区分,归属感靠共同的左对齐来建立,两件事各自完成,互不干扰。

左对齐付出的代价是右边缘。由于每一行的内容长度不同,行末位置也不同,所以右边缘会形成一条不规则的锯齿线。这条锯齿在功能上没有问题,因为读者的视线不会从右向左移动,右边缘是否整齐也不影响阅读。但在视觉上,它会让版面显得不够精致。如果设计需要一种严整的、仪式化的氛围,左对齐就会显得太过平庸。
左对齐在很短的文字上也有局限。一行标题只有四五个字时,左对齐之后这些文字会孤零零地贴在左边缘,右侧留出大片空白,版面的视觉重心因此偏向左侧。这时候居中对齐反而更合适,因为短文字不存在换行找起点的问题,居中的对称感能让这几个字在版面之中更显稳定。
所以左对齐的决策逻辑是:只要内容需要被连续阅读,左对齐几乎都是最优选择。它的代价(右边缘不齐、缺乏仪式感)很小,在绝大多数场景里不构成真正的问题。
居中对齐的文字沿版面中轴线向两侧均匀展开,左右对称,视觉重心落在正中间。由于人对对称有本能的偏好,看到对称的画面时大脑会产生稳定、完整、正式的感受。所以像证书、请柬、海报标题、品牌 slogan 几乎都采用居中对齐方式,因为这些场景下需要的不是阅读效率,而是一种仪式化的展示效果。
居中对齐处理短文字的效果很好。一行标题、两行引言、一个按钮里的文案,这些内容的文字量少,读者不需要反复换行,不存在找起点的问题。所以在这种情况下,居中带来的对称感完全是加分项。
但文字超过三行之后,代价就开始显现。居中段落的每一行内容长度不同,起点位置也不同,所以阅读时,读者的视线在每次折返后,都需要先在水平方向上搜索下一行的起点,找到之后才能继续阅读。这个搜索动作每换一行就要重复一次。三行以内这种摩擦感受不明显,五行以上读者就会开始觉得费力,十行以上阅读体验会明显恶化。

居中对齐的第二个代价体现在元素之间的层级关系上。在左对齐的版面里,标题和正文共享同一条左边缘,读者一眼就能把它们视为一个整体。但在居中的版面里,标题的左端在一个位置,正文的左端在另一个位置,两者在水平方向上没有共同的参照点。读者因此会把它们感知为两块各自独立的内容,而不是一个有层级的结构。版面里的元素越多,这种割裂感就越强。

一种常见的做法是标题用居中、正文用左对齐。这种处理方法是让标题居中显得更重要,同时用左对齐保证正文的阅读体验。但这种做法会导致标题和正文各自遵循不同的对齐逻辑,视觉上的归属关系因此被切断。标题在版面中间,正文从左边缘开始,两者之间的关联只能靠内容语义来建立,视觉结构本身并不传达这种关联。
居中对齐有三个适用条件:文字量少(三行以内)、内容是独立展示而非连续阅读、版面本身需要对称感或仪式感。三个条件需要同时满足,缺少任何一个,都需要我们重新思考是否应该将方案换成左对齐。
右对齐是四种对齐方式里使用频率最低的一种对齐方式,可能很多设计师在自己的整个职业生涯里,只在极少数场合会用到它。
使用右对齐的文字内容,右边缘整齐,左边缘参差,这和中文、英文从左往右的阅读方向截然相反。左对齐顺应了阅读方向,右对齐则逆着来。读者在阅读右对齐的文字时,每一行的起点位置都不同,每次换行都需要向左侧搜索下一行从哪里开始。这种反常规的节奏会让视线放慢,读者不得不花费更多的注意力,才能将文字内容完整读完。
视线放慢在大多数阅读场景下会被定义为不足,但在极少数场景下也会被视为优势。比如右对齐能制造一种刻意感,让读者感知到这段文字是被设计师特意安排过的。这种感知在海报、画册、品牌页面等,特别强调设计感的场景里,有独到的价值。同样是一个展览的时间和地点信息的展示,右对齐放在海报右下角和左对齐放在左下角,传达的信息完全一样,但前者带有一种经过设计的感觉,后者更像是附加的说明文字。
右对齐在界面设计中还有一个功能性用途,那就是对齐数字。表格里的金额、数量、百分比如果采用右对齐排列,个位、十位、百位就会纵向对齐。读者在比较这些数字大小时,就不需要额外做位数换算,因为位值关系已经通过对齐方式直接呈现出来了。财务报表、数据面板、价格列表里的数字几乎都采用右对齐方式,原因就在于此。

右对齐还可以和左对齐搭配使用,形成对位关系。页面左侧的标签文字左对齐,右侧的数值右对齐,两组文字之间拉开距离,就会形成一条从左到右的视觉通道。设置页面、个人资料页、订单详情页经常采用这种布局方式,左边是字段名,右边是对应的值,两组文字各自有整齐的对齐边缘,中间是空白区域,读者会很容易找到对应关系,进而将标签和数值一一配对。
右对齐与人的阅读方向相悖。超过两三行的文字如果用右对齐,阅读体验就会明显变差。右对齐也不适合作为版面的主要对齐方式,如果整个页面的文字排版,都使用右对齐,那么读者就会感到阅读不适。右对齐在排版中的角色定位更像是局部调整工具,适合在特定位置、特定元素上使用,和左对齐形成呼应或对比。
在视觉上,两端对齐是四种对齐方式里最整洁的一种对齐方式。它可以让每一行的文字都刚好撑满内容区域的宽度,左右两侧同时对齐,所以版面上会呈现出一个规整的矩形区块。
当我们阅读一些书籍作品时,它们的正文大都采用两端对齐的的排版方式,报纸和杂志也是如此。这种对齐方式在印刷排版中有长久的历史存在,它带来的秩序感和严整感是其他三种对齐方式无法比拟的。
两端对齐的工作原理是借助排版引擎自动调整间距,以达到每一行内容都可以撑满行宽。如果一行文字的自然长度不够填满行宽,排版引擎就会拉大字与字之间(或词与词之间)的间距来补足差额;如果一行文字太长,就减少字与字之间(或词与词之间)的间距或者选择合适的位置使用断行。
在中文排版中,两端对齐的表现很稳定。由于中文是等宽字符,每个文字所占的空间基本相同,所以排版引擎调整字间距的幅度通常很小,读者几乎感受不到间距的变化。中文书籍和中文正文页面多采用两端对齐,既可以得到整齐的视觉效果,又不会影响阅读体验。不过使用像阿拉伯数字和英文字母这类不等宽的半角字符,则不适合采用两端对齐,如果中文正文中夹杂着大量的数字,比如一些金融类文章中密集出现的金额、百分比、年份等,那么使用两端对齐的间距稳定性也会下降。

在英文排版和中英混排中,间距不均匀的问题会表现得尤为突出。英文单词长短不一,一行能放多少个词取决于单词的长度。当一行里恰好出现几个长单词时,这一行能放下的词就会变少,多出来的空间会被分摊到词与词之间。结果就是某些行的词间距明显比其他行大,文字之间会出现不均匀的空白。
间距不均匀如果严重到一定程度,就会引发「河流效应」。当连续几行的词间距在差不多的水平位置上都偏大时,这些空白会从上到下连成一条蜿蜒的白色通道,看起来像一条河流穿过段落。读者的视线会被这条白色通道吸引,不再是按正常的从左到右、从上到下的顺序阅读,而是不自觉地沿着通道移动。窄栏排版尤其容易出现这个问题:栏越窄,每行能放的词越少,间距的调整幅度就越大,河流出现的概率也就越高。
屏幕排版还会在河流效应之上叠加一个新的风险。印刷品的行宽是固定的,但屏幕宽度是可变的。同一段文字在手机上和在桌面上的行宽完全不同,行宽一变,断行位置就会变,间距分布也会跟着变。一段在桌面上看起来间距均匀的两端对齐文字,换到窄屏手机上就可能出现明显的间距不均,甚至产生河流效应。这种不可预测性让两端对齐在响应式网页和移动端界面中成为一个不够稳定的排版方案。
两端对齐在段落末尾还经常会产生一个视觉上的反差。一段文字的最后一行通常比较短,不够撑满行宽,所以排版引擎一般会把最后一行自动切换为左对齐,让它自然地结束在那里。但如果最后一行只剩一两个词,这一两个词就会孤零零地停在左边,和上面整整齐齐的段落排列形成剧烈的视觉反差。
两端对齐的适用条件有三点:纯中文正文、行宽足够(不是窄栏)、内容长度固定或可控。满足这些条件时,两端对齐能给版面内容,带来最整洁的视觉效果。但如果内容中,英文或数字较多、栏宽较窄、需要适配不同屏幕尺寸、或者内容是动态生成的,那么选择左对齐方案,相对来讲是更安全的。
在实际项目中,面对一块需要排版的内容,逐一比较四种对齐方式的优缺点效率太低。设计师需要一个更直接的判断路径。

最先要判断的是内容的用途:它是要被读者连续阅读的,还是只需要被看到就够了。
如果内容需要被连续阅读(比如文章正文、产品说明、使用指南、通知公告),那么阅读效率就是核心需求。视线换行要顺畅,每一行的起点要稳定,所以左对齐几乎是唯一的选择。如果内容是纯中文且行宽足够,两端对齐也可以,因为中文的等宽特性让两端对齐在不影响阅读效率的前提下还能收获整齐的边缘。
如果内容只需要被展示(比如标题、slogan、引用语、按钮文案、卡片摘要),文字量通常很少,不涉及多行换行。在这种情况下,对齐方式的选择更多取决于版面的视觉需要而非阅读效率。需要对称感就选居中,需要设计感就选右对齐,需要和其他元素共享边缘就选左对齐。
确定了阅读还是展示之后,设计师还需要考虑这块内容和周围元素的关系。对齐方式不只影响单个元素,还影响元素之间的关联感。同一个版面里,共享对齐边缘的元素会被读者感知为一组。如果标题和正文需要被感知为一个整体,那么两者就应该用相同的对齐方式共享左边缘,关联感会因此自动建立。但如果标题居中而正文左对齐,两者的对齐逻辑不同,读者就会在视觉上把二者当成两件独立的事情。
在多元素版面里,对齐方式的一致性比选择哪种对齐方式更重要。一个页面里标题、正文、图注全部左对齐,所有文字元素共享同一条左边缘,版面的秩序感就很强。但如果同一个页面里标题居中、正文左对齐、图注右对齐,每个元素各有各的对齐轴,版面看起来就很散。
如果前面两步已经把选择范围缩窄到两三种,那么版面的视觉氛围通常就能帮助设计师做最终决定。大多数界面设计(App 页面、后台系统、电商详情页)不需要特殊的视觉氛围,左对齐加两端对齐的组合就能解决几乎所有的问题。但在强调视觉表达的场景里(品牌页面、活动海报、作品集),对齐方式本身就是设计语言的一部分。居中传达正式和庄重,右对齐传达刻意和张力,左对齐传达务实和直接。设计师选择哪种对齐方式,就等于向读者传达什么气质。
最后一个约束是纯技术性的,取决于内容的语言。纯中文内容用两端对齐很稳定,字间距的调整幅度小,河流效应几乎不会出现。但如果内容里有大量英文或者是中英混排,两端对齐就会面临词间距不均和河流效应的风险。在这种情况下,左对齐是更安全的选择。
在实际项目里,一个页面往往会同时用到多种对齐方式。正文用左对齐,标题用居中,数字列用右对齐,这种混用本身没有问题。但如果混用缺乏逻辑,版面就会失控。
判断混用是否合理,有一个简单的检验方法:设计师能不能用一句话说清楚为什么在这里切换了对齐方式。如果理由是「正文左对齐保证阅读效率,标题居中是因为版面整体采用对称构图」,那这种混用就有逻辑支撑。如果理由只是「左对齐感觉太普通了」,那就说明这次切换没有依据。对齐方式的切换应该由版面结构决定,而不是由视觉感受驱动。
混用对齐方式的时候,每多一种对齐方式,版面里就会多出一条对齐轴线,读者的视线也就需要在更多轴线之间切换。一般来说,两条轴线(比如左对齐正文加居中标题)是比较舒适的上限。到了三条轴线,就需要很强的版面控制力才能让画面保持整体感。如果超过三条,通常意味着版面的对齐逻辑已经在失控。

选择对齐方式时,设计师容易把它当成一个可以随时切换的独立选项。但对齐方式和行宽、字号、段间距、版面的整体布局方式是紧密关联的,换了其中一个,其他几个都会受到影响。
比如行宽窄的时候,两端对齐的间距问题会被放大,左对齐更安全。行宽宽的时候,左对齐的右边缘锯齿更明显,两端对齐的视觉效果更干净。字号大的标题用居中,对称感会更强烈;字号小的注释文字用居中,反而会显得漂浮。
所以对齐方式的选择不应该留到排版的最后阶段来处理,而应该在确定版面结构的时候就一起考虑。设计师要先确定行宽和栏数,再确定内容的类型和阅读方式,这样对齐方式的选择就能水到渠成了。
有1人收藏了本文