第 3 章 对齐

第 3 章 对齐

设计新手往往很草率,只要页面上刚好有空间,就会把文本和图片放在那里,而全然不考虑页面上的其他项。这样得到的页面会给人一种杂乱无章的感觉,就像是一个略显混乱的厨房,你可以想象出这是一种什么状况:这儿有一个杯子,那儿有一个盘子,门上挂着条餐巾,水池里搁着水壶,门上还有块污渍。清理这样一个有些乱的厨房不用花太大功夫,同样,如果缺乏对齐而导致设计略显杂乱,清理这样一个设计也无需花费太多时间。

Robin 对齐原则是指:任何元素都不能在页面上随意安放每一项都应当与页面上的某个内容存在某种视觉联系。对齐原则要求特别小心,再不能像从前那样,只要页面上刚好有空间就把元素随意“扔”到那里。

如果页面上的一些项是对齐的,这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的,但在你眼里(以及在你的心里),它们之间也会有一条看不见的线把彼此连在一起。尽管你可能通过分开放置某些元素来指示它们的关系(使用亲密性原则),但对齐原则很“神奇”,它会告诉读者,即使这些项并不靠近,但它们属于同一组。

我们经常在生活中遇到缺少对齐的情况,就像这里的售票柜台一样。这里看起来并不舒服,杂乱无章,我们不知道如何才能变得高效。

对齐可以制造出一个安静的中心,它的表达更清晰,我们知道该做什么。

来看下面这张企业名片,它与上一章看到的名片是一样的。这个名片的一个问题是,名片上所有元素都未与其他元素对齐。在这个小小的空间里,存在 3 组对齐方式不同的元素:左对齐、右对齐和居中。上角的两组文本未能沿同样的基线对齐,另外它们与名片底部的两组元素未按左边线或右边线对齐(此外,也没有沿其基线对齐)。

看上去,这个名片上的元素就好像是随意扔上去并被粘住一样。这里所有元素都与名片上任何其他元素没有关联。

养成为元素画线的习惯,用线来明确哪里缺少关联。

花点时间看看哪些项应当分在一组,以建立更近的亲密性,而哪些项应当分开。

把所有元素都移至右侧,使它们按同一种方式对齐,现在信息立刻就更有条理了。(当然,将相关的元素分组以建立更近的亲密性,对于信息的组织也是有帮助的。)

下面这些文本项有了一个共同的边界,这个边界把它们联系在了一起。

在有关亲密性一节的例子中(下面再次显示了这个例子),文本也是对齐的,但那时采用的是居中对齐。不过,如果文本为左对齐或右对齐,让文本联系在一起的那条看不见的线会更明确,因为现在有一条“硬”的竖边。这就使左对齐和右对齐的文本看起来外观更清晰、效果更分明。比较下面的两个例子,后面几页将继续讨论。

这个例子的布局很好,文本项都进行了分组,使之具有合理的亲密性。文本本身居中对齐,并在页面上居中放置。

尽管这是一种合法的对齐方式,但边界是“软”的;实在看不出那条“对齐线”的强度。

这与前面有同样的逻辑布局,不过现在采用右对齐方式。你能看出右边的“硬”边界吗?

尽管这是一条看不见的线,但它很明确,连接了这两组文本的边界。现在确实可以看出边界。正是这个边界的强度为布局提供了力度

你是不是不由自主地就想一切都居中?居中对齐是初学者最常用的对齐方式,这种对齐看起来很安全,感觉上也很舒服。居中对齐会创建一种更正式、更稳重的外观,这种外观显得更为中规中矩,但通常也很乏味。请注意你喜欢的那些设计。我敢保证,大多数看来精巧的设计都没有采用居中对齐。我知道,作为一个初学者,要完全摒弃居中对齐会很难,但你必须从一开始就强制自己避开它。通过充分利用亲密性,并结合明确的右对齐或左对齐,你会惊异于设计的改观。

这是一个很典型的报告封面,是不是?

这种标准格式提供了乏味的外观,表现出几乎是一种业余水准,这会影响别人对整个报告的第一印象。

利用明确的左对齐,可以使这个报告封面给人留下更精美的印象。尽管作者的名字离题目很远,但那条看不见的线提供了强有力的对齐基准,可以将这两个文本块连在一起。

我非常高兴地发现我的硕士毕业证书不是居中对齐,而是左对齐!

信纸的设计选择可谓丰富多彩!不过,最终总免不了趋于一种平淡的居中对齐。如何设置信纸的布局,对此你有充分的自由,不过一定要记住对齐。

这不算糟糕,但这种居中布局有点乏味,而且边框束缚了整个空间,给人一种受限制的感觉。

这种左对齐使页面更为精美。只是在左边留有虚线,这就使页面变得开放,而且突出了对齐。

文本位于左侧,采用了右对齐。为了与布局的右对齐格式保持一致,输入的字体只能是严格的左对齐。

勇敢一些!不要畏缩!

我并不是建议你绝对不要居中!只是要留意这种居中对齐的效果,这真的是你想要表达的效果吗?当然,有时候确实如此,例如,大多数婚礼都很庄重、很正式,所以,如果你想用居中方式设计结婚喜帖,完全可以在营造喜庆的同时有意这么做。

居中。感觉很稳固,甚至感觉非常乏味,就算字体可爱也没用。

如果想让文本居中,至少让它明显一点!

试试看,包含居中文本的块不要居中。

如果想让文本居中,尝试一下用另外某种方式使它更生动。

训练你的设计师之眼:在对页的第 2、3、4 号例子(除了第 1 号)中找到至少 3 个可以让这些例子相比于第一个表意更清晰、视觉效果更有趣的地方。如果看起来更有趣,那么就更有可能被阅读,被记住。(建议在第 221 页。)

有时,你可能会在居中布局上增加一点小技巧,如将文本居中,但是文本块本身不居中。或者将文本放在页面的上方,增加紧张性。或者在一个很正式的居中布局中设置一种非常随意、有趣的字体。但不论怎样,千万不能做的是:设置 12 磅大小的 Times 字体,另加两个回车!

1. 正是这种布局使得“居中”名声不好:不仅字体很乏味,而且也太大了,文本挤在一起,每块之间还有两个回车。不仅如此,双线边框更使这个布局的效果减分。

2. 要想有效地设置居中对齐,需要多做一些工作。这个布局使用了一种经典的字体,而且字体设置得很小(相对来讲)。现在行间有更多空间,文本周围有大量空白,另外不再有边框。

3. 这里用瘦高的纸(可能只有半张信纸大小)强调一种细长条式的居中布局。

4. 用宽而短的纸强调一种宽型的居中布局。在下一个传单设计中可以尝试让文本斜向一边。

我想要强调一下,就算我建议你暂时不要考虑使用居中对齐,

却仍然有很多优秀的作品都是用居中对齐排版的。

但是,你不能随随便便、在没有尝试过其他任何方法的情况下做这样的选择,

这必须是一个深思熟虑的决定。

如上所示,如今非常流行的徽章通常都是居中对齐的。

(在 CreativeMarket.com 上可以找到上百个徽章模板,

拿来摆弄一下吧。)

明显而有意为之的居中对齐效果最好。当对齐经过精心策划而又明确时,

你就可以对其他元素充分发挥创造力,作品看起来仍然显得匠心独具,

而这些元素也不会像是莫名其妙地散落在页面上一样。

你可以看到,在这页的中央有一条很明确的线穿过。这就使得我们

可以在保持一个作品有序而紧凑的前提下,

同时有想象力地利用其他元素。

你可能已经习惯了使用文本对齐。在得到更多培训之前,一定要坚持一个原则:只使用一种对齐方式。页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或者全部居中。

{%}

有时,你可能喜欢在同一个页面上同时使用右对齐和左对齐文本,不过一定要确保让这些文本以某种方式对齐!

在这个例子中,标题和子标题都是左对齐,不过文字介绍是居中的,两个文本元素之间没有共同的对齐方式。它们相互之间没有任何联系。

尽管这两个元素仍然采用两种不同的对齐方式(上面是左对齐,下面是右对齐),但是下面介绍文本的右边界与上方标题的右边界对齐,这就用一条看不见的线把二者连接起来。

训练你的眼睛找到那条隐形的线。

在页面上放其他项时,一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放,则按其基线对齐。如果有多个单独的文本块,则对齐其左边界或右边界。如果有图片元素,将其边界与页面的其他边界对齐。

绝对不要在页面上随意摆放元素!

这是一个典型的广告,设计师被要求在一个小空间里装进很多信息。只要改善一点,这个广告就会有所提高:对齐。

试一试

拿根铅笔在这个广告上画上水平和垂直的对齐线。你会发现所有单元都是居中的,但是单元之间并不对齐。让我们来做一件事:创造水平和垂直的对齐。

同时圈出广告中的空白。这些空白看起来很零乱。

如果文档的外观差强人意,可能最大的毛病就是没对齐。我们的眼睛喜欢看到有序的事物,这会给人一种平静、安全的感觉。此外也有助于表达信息。

作为优秀的设计,都可以在对齐的对象间画出“对齐线”,即使这些设计总体表现为汇集了大量奇特的内容,甚至动感十足,这种“对齐线”也很明确。

只是将各部分对齐就能带来这么大的差异。可以注意到,页面上任何一项都不是随意放置的,每一项都与页面上的另外一项存在某种视觉上的联系。

这个过程打开了广告上方的空间,所以名字和 logo 可以做得更大。

我把电话号码放在了每栏信息的最上端。在上一个广告中,这些号码被平行排放在了最下方,它们在边框中强制留下了空白。

明显,我在底部增加了蓝色带,利用的是重复性原则的技巧,第 4 章中会讨论。

试一试

拿一支铅笔画出这个广告中的对齐线,并在上一页和这页的广告上画出空白。你能看出现在的空白更加规则吗?

训练你的设计师之眼:找到至少 12 个让这幅广告看起来更专业、表意更清晰的不同之处(大多数区别微乎其微)。(建议在第 221 页。)

许多设计新手的作品都存在一个问题,这就是对齐方面稍有欠缺,如在缩进的段落上面居中放置标题和子标题。迅速看一眼,下面这两页上的例子哪一个能给人留下更清晰、更突出的印象?

这是一种相当常见的布局:标题居中,文本左对齐,所以右边的文本参差不齐,段落以“打字机”宽度缩进(也就是说,5 个空格或 0.5 英寸,这一点你应该在学校里学过),另外插图在列内居中。

绝对不要在左对齐的正文或缩进的文本上方将标题居中。如果文本没有明确的左边界和右边界,就无法区分标题是否确实居中,看起来它只是悬挂着而已。

这样一来,没有对齐的部分就造成页面非常杂乱:缩进很大,文本的右边界呈锯齿状参差不齐,居中的标题左右两边都有空白,另外插图也居中。

试一试:在上例中划线,观察不同的对齐方式。

尽管这些未对齐问题本身并不大,但它们加在一起,就会导致页面的外观很杂乱。应当找出一条明确的线,并以它为基准对齐。尽管这里的改变很微妙,也许你的老板根本说不出这个例子与前一个例子之间的差别从何而来,但经过这样修改,确实可以得到更清晰、更精美的外观。

找一条明确的对齐线,并坚持以它为基准。如果文本左对齐,则标题和子标题也设置为左对齐。

按惯例,第一段都不缩进。将一个段落缩进的目的是为了告诉你这里有一个新的段落,不过,你肯定知道第一段当然是一个新段落。

标准排版缩进为 1 个 em(em 是以点数衡量的字体大小)1,这更接近于 2 个空格,而非 5 个。

这些栏足够宽,可以成功地调整其中的文字(和两边对齐),而不会产生中间过大的间隙。

如果有照片或图片,让它们和一边或基线对齐。

训练你的设计师之眼:找到至少 3 个让这个作品看起来更专业的小改动。(建议在第 222 页。)

1如字体大小为 12 磅,则 1em 为 12 磅,如果字体大小改为 14 磅,1em 则为 14 磅。——译者注

即使作品的设计起点本来就很高,在对齐方面稍做些调整也会很有好处。作为更为专业的设计,明确的对齐很关键,但这一点通常被遗漏。请检查每一个元素,确保它与页面上的另外某个元素存在某种视觉联系。

这篇时事通迅开头很好,但是给人的直观视觉印象却有些拖泥带水,这也影响了观者对于内容的印象。

试一试:画下垂直线,看看这里有多少个对齐。

检查有没有稍稍越过边界的插图,有没有在照片下居中的图题,有没有未与文本对齐的标题,有没有没和任何其他元素对齐的线,或者居中文本和左对齐文本是否同时出现。

可以看出这个例子与上一页例子之间的区别吗?

试一试:画出垂直和水平方向上明确的对齐线。

训练你的设计师之眼:找到至少 3 个让这个例子看起来表达更专业的设计细节。(建议在第 222 页。)

重申一句:应当找一条明确的对齐线,并用它来对齐。如果有一张照片或图片(有明确的直边),可以沿着照片的这个直边与文本的平边对齐,如下图所示。

这里文本的左边有一条明确的线。另外沿着“照片”的左边也有一条明确的线。不过,在文本和照片之间“截留”了部分空白,而且空白的形状很难看,从绿色虚线上就能看出来。截留的空白将这两个元素分隔开了。

找一条明确的线,并用它来对齐。现在文本右侧的线与照片左边的线相互挨着,使得这两条对齐线更为明确,正如绿色虚线所示。空白现在漂移到了左边。

训练你的设计师之眼:有的作品中本来有明确的对齐线,但是被其相邻的参差不齐的边缘所减弱。找一找犯下这类错误的作品,相信你一定能够找到。

同时:找出至少 3 个两幅幻灯片之间的差别。(建议在第 222 页。)

如果设计中的对齐很明确,那么可以有意识地打破对齐,而且一定要表现出这是有意的。技巧就在于,打破常规对齐时不要怯懦,一定要干脆一些,要么全部采用一种方式,要么全都不采用这种方式。千万不要保守。

这里有幅调整了角度、嵌入文本块的插图。如果这页的其他对齐很清晰,古怪的元素看起来有意为之,那么效果也会不错。只要你是有意为之,有时完全可以任意地打破常规对齐。

在此我给出了一些规则,不过有一点要记住,规则都是用来打破的。但是必须记住,关于打破规则本身也有一条 Robin 规则:在打破规则之前必须清楚规则是什么

你总是能看出来某个人作品中零乱的元素是有意为之,还是无奈之举。其背后的原因大概就是你会刻意去寻找的一系列小细节,当有意打破规则时,效果总是更强烈,影响也更重要。

到处看看

你大概已经注意到对齐原则有多重要了。就算已经把元素归入适当的亲密性中,却仍然需要在这个作品的整体中强化对齐。

试一试

收集一些你认为不错的广告、宣传册、传单或者杂志拉页,就算你不知道它们为什么出色,或者你认为自己还没有能力创造它们,也没有关系。找到每个作品中明确的对齐,我保证,肯定有。

另外再找一些直觉看来显得有些业余的作品。它们是否缺乏亲密性原则或对齐原则?

到处看看并把优点或弱点描述出来,这样做多了,自然就会更好地吸收这些概念。明白了好的设计之所以出色的原因,这些原因就会反映在你自己的作品中。

你可能会说这张卡片上的信息已经根据亲密性原则被逻辑分组到不同单元了。但是看起来仍然有些业余,为什么呢?

现在你明白了:因为在这张小小的卡片上有三种不同的对齐方式(居中、左对齐、右对齐)。另外,还有人在角落里塞进剪贴画。

明确的对齐可以更加有效地组织信息,而且也为那个可爱的狗狗形象留下了足够的空间。

并且现在空白部分也更有秩序了。

设计师之眼

你能提升这些广告设计吗?每个只需要再多一点点的亲密性和对齐。(建议在第 222 页。)

这个杂志的开头很不错。但是当你仔细看的时候,是否感觉到有个声音在你的脑袋后面回响:也许一个小的改变就能把这些不搭边的东西更好地整合起来?

这个活动广告需要一些帮助。仔细考虑这个小空间中的所有元素然后找到这些问题的答案:(1)是否每个元素都是必要的,(2)每个元素所处的层级合适吗?

所以说,什么才是最重要的呢?倾听你的眼睛——眼睛看向哪里,路线是什么,这是最佳路径吗?重要的信息是否都归入了逻辑亲密性中?对齐是否对清晰的表达有帮助?在这个小空间中画下能表示已有对齐的垂直线。

对齐小结

任何元素都不能在页面上随意摆放。每个元素应当与页面上的另外一个元素存在某种视觉联系

在设计中,统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关,需要在各个单独的元素之间存在某种视觉纽带。尽管这些孤立元素在页面上的物理位置可能并不靠近,但是通过适当放置,可以让它们看上去是有联系而且相关的,并且与其他信息统一。可以看看你喜欢的那些设计。一个精美的设计不论最初看上去多么杂乱无章,总能找出其中的对齐方式。

根本目的

对齐的根本目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来,并把它们放在一个玩具箱中。

不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐(当然,要结合适当的字体)来达到目的。

如何实现

要特别注意元素放在哪里。应当总能在页面上找出与之对齐的元素,尽管这两个对象的物理位置可能相距很远。

要避免的问题

要避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本居中,而另外一些文本右对齐)。

另外,要着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重(通常也更乏味)的表示。并不是完全杜绝使用居中对齐,有时可以有意地选择这种对齐方式,但是不要把它作为默认选择。

目录