设计四大原则-对齐

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

举个例子:

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

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


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

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

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

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

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

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

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

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

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

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

对齐小结

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

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

根本目的

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

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

如何实现

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

要避免的问题

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容