Oh!Coder

Coding Life

UI设计中的文字元素(一)

| Comments

对于每一个优秀 的设计,几乎都用到了下面要提到的四个基本原则,而且它们之间实际上是相互关联的。只应用某一个原则的情况很少。下面就开始介绍这四个基本原则吧。

  • 对比原则(Contrast)

对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。

  • 重复(Repetition)

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。

  • 对齐(Alignment)

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

  • 亲密性(Proximity)

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

下面展开来进行介绍:

1、亲密性原则

亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。

其实,在一个页面上,物理位置的接近就意味存在着关联(实际生活中也是如此)。如果多个项相互之间有很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。就像实际生活中一样,亲密性(即紧密型)意味着存在关联。

如果把类似的元素组织为一个单元,马上会带来很多变化。首先,页面会变得更有条理。其次,你会清楚地知道从哪里开始读信息,而且明白什么时候结束。另外,“空白”(字母以外的空间)也会变得更有组织。

亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单地将相关的元素分在一组建立更近的亲密性,就能自动地实现条理性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。此外还有一个很好的“副产品”,利用亲密性原则,还可以使空白(这是设计者们最喜欢的)更美观(也更有条理)。

2、对齐原则

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

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

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

对齐的根本目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来,并把它们放在一个玩具箱中。不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐(当然,要结合适当的字体)来达到目的。

3、重复原则

重复原则指出,“设计的某些方面需要在整个作品中重复”。重复元素可能是一种粗字体、一条粗线,某个项目符号、颜色、设计要素,某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。

设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一并增强整个作品,否则这些部分知识彼此孤立的单元。重复不仅对只有一页的作品很有用,对于多页文档的设计更显重要(对此我们通常称之为保持一致)。

重复的目的就是统一,并增强视觉效果。不要低估页面视觉效果的威力,如果一个作品看起来很有趣,它往往也更易于阅读。

4、对比原则

对比原则指出:“如果两个项不完全相同,就应当使之不同,而且应当是截然不同。”

对比是为页面增加视觉效果的最有效的途径之一,很容易吸引读者去看一个页面;另外对比还能在不同元素之间建立一种有组织的层次结构。要记住一个重要原则:要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。

如果两个元素不相同,就会产生对比。倘若两个元素存在某种不同,但差别并不是很大,那么你做出的效果并不是对比,而是冲突。这是关键。

要增加有意思的对比,最容易的方法就是实现字体对比。不过不要忘记,还可以利用线、颜色、元素之间的间隔、材质等形成对比。

在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放两个不完全相同的元素(比如有两种不同线宽),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。

对比的目的有两方面,这两方面相辅相成,无法分开。一个目的是增强页面的效果,如果一个页面看起来更有意思,往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误的强调重点(即本不应该是重点的元素)。

Comments