美文网首页
设计四大原则-对齐

设计四大原则-对齐

作者: 子鱼也 | 来源:发表于2019-02-21 22:35 被阅读0次

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

    举个例子:

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

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

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

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

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

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

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

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

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

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

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

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

    对齐小结

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

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

    根本目的

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

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

    如何实现

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

    要避免的问题

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

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

    相关文章

      网友评论

          本文标题:设计四大原则-对齐

          本文链接:https://www.haomeiwen.com/subject/unhkyqtx.html