返回介绍

3. 对齐

发布于 2024-08-16 20:40:07 字数 9224 浏览 0 评论 0 收藏 0

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

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

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

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

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

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

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

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

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

这个例子的布局很好,文本项都进行了分组,使之具有合理的亲密性。文本本身居中对齐,并在页面上居中放置。尽管这是一种合法的对齐方式,但边界是“软”的;实在看不出那条“对齐线”的强度。

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

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

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

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

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

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

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

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

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

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

勇敢一些!不要畏缩!

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

居中。确实感觉非常乏味。

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

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

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

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

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

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

这里用瘦高的纸强调一种细长条式的居中布局。

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

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

 

这段文本为左对齐。这段文本为右对齐。
有人称之为方形左对齐,有人称之为方形右对
或者就称为左对齐。齐,或者就称为右对齐。

 

 

这段文本居中。

如果想将文本居中,就做得明

显一些。

在这一段中很难区分文本

是有意居中还是无意为之。

每一行的长度不相同,不过

它们并非完全不同。如果

不能立刻区分出文本是否居中,

又何必那么麻烦地将其居中呢?

 

这段文本为两端对齐。有人称之为方形左右对齐,也有人称之为块对齐,因为文本两端均对齐。不论这种对齐方式叫什么,都要尽力避免,除非行足够长,能够避免单词之间出现难看的空隙。

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

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

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

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

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

这里存在两个问题,对不对?首先缺乏亲密性,而且对齐做得不好。

这可能是一个很枯燥的器件表,但并不妨碍让这个页面看上去尽可能好看一些,并尽可能清楚地表达信息。尽管这里的信息理解起来很困难,但正是这个时候才更应该尽可能清晰、有条理地表述信息。

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

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

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

如果我很清楚这个图表是什么意思,可能会让右边的方框离那个较大方框(左上方的方框)更远一些,再向右移一点,并使其顶部对齐。或者,可能会把下面的方框移远一些。我会根据这3个方框相互之间的逻辑关系调整它们之间的间隔。

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

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

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

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

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

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

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

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

在打字机上,缩进为5个空格。对于计算机上使用的均衡字体,标准排版缩进为1个em(em是以点数衡量的字体大小),这更接近于两个空格。

要当心文本的锯齿形边界。对各行进行调整,使右边界尽可能平滑。如果有照片或插图,则按一个边界和/或一个基线将其对齐。

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

有些项本应该对齐,但是没有对齐,你能把它们都找出来吗?找一支彩笔把这一页上没有对齐的地方都圈起来。至少有10处!

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

可以看出这个例子与上一页例子之间的区别吗?如果这是你自己的书,在明确对齐的地方画线。

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

这里文本的左边有一条明确的线。另外沿着“照片”的左边也有一条明确的线。不过,在文本和照片之间“截留”了部分空白,而且空白的形状很难看。由于存在截留的空白,使得这两个元素被分隔开了。

找一条明确的线,并用它来对齐。现在文本右侧的线与照片左边的线相互挨着,使得这两条对齐线更为明确。空白现在漂移到了左边。另外已经根据照片左边明确的对齐线重新设置了标题。

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

尽管嵌入部分插入到文本块的内部,能看出它左边在哪里对齐吗?只要你是有意为之,有时完全可以任意地打破常规对齐。

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文