总有那么一个时刻,程序员们会因为排版这个差事苦恼不已。我见过一个资深架构师调整设计文档,来来回回半个小时,还在为选多大的字体发愁;也见过高级项目经理做ppt的时候恳请别人帮忙,口里嗫嚅着:我审美不好……
万事讲究唯手熟尔,谈天赋之前,我们先可以看看“套路”。
下面的名片的before和after,你看到了什么?
Before是一种很常见的布局——把每一个角落都给布满。可是,在这样小的空间里你能看到多少个单独的元素?你的眼睛需要停留多少次才能看全着张名片上的所有信息?
After把相关联的信息放在一起,这样你会从哪里读名片?接下来看什么?你还会有什么疑问吗?
仅仅是把相关元素放在一起,就能把你所要呈现的信心从理解上和视觉上条理化。
这里我们要说的,是一个亲密性原则:
亲密性(Proximity)
彼此相关的项应当靠近,归组在一起。如果多个项互相之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。
不信我们再看一个例子🌰:
这个一个舞蹈课的海报。作者原本力图活泼,不过,你看一眼before的版本,你能说出舞蹈课的时间和地点吗?
根据亲密性原则来组织这些信息(如After版本所示),可以清楚地表达关键信息,包括:谁,做什么、时间,地点。这样读者就不会因为需要在杂乱的文本中自己寻找信息而放弃。
接下来我们再看下图的两个封面:
Before是一个很典型的报告封面,是不是?我们经常在各种文档里见过这样的布局。这种标准格式提供了乏味的外观,表现出几乎是一种业务水准,这会影响别人对整个报告的第一印象。
After版本利用了明确的左对齐,可以使这个报告封面给人留下更精美的印象。尽管作者的名字离题目很远,但那条看不见的线提供了强有力的对齐基准,将两部分文本联系在一起。
这就是第二个基本原则——对齐。
对齐(Alignment)
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一种元素有某种视觉联系(比如对齐的准线)。这样能建立一种清晰、轻巧且清爽的外观。
在成为高手之前,有两个小tips:
只选用一种对齐方式。
无论左对齐还是右对齐,都比居中对齐精致得多。
第三个原则就是重复。
重复(Repetition)
让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等。这样既能增加条理性,又能加强统一性。
我们看看图1中的重复元素:
粗字体
细字体
方块项目符号
缩进
间隔
对齐
图2则生动表明重复不必一模一样。卡片中,标题字体一致,颜色各异。这样的重复会让读者觉得有人在负责,因为这显然是经过深思熟虑的决策。
下面两份新闻简报,你会先看哪一份?
它们的基本布局都是一样的,页面信息也相同。这里只有一个区别:第二份简报的对比做的更充分。
这就是基本原则四——对比。
对比(Contrast)
对比的基本思想是,避免页面上的元素太相似。若果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就让它们截然不同。要让页面引人注目,对比通常是最重要的因素。
上面👆的广告如何?
除了居中对齐、缺乏亲密性和重复,以及字体乏味等问题,这则广告最大的问题是缺少对比。
让我们用今天我们学到的四大原则修改一下试试看呢?
把逻辑相关的东西归在一起,建立亲密性
去掉居中对齐
找到可以重复的元素
增加对比,要对比就要截然不同(过于接近的对比,要么读者没看出来这种对比,要么读者以为这是粗心大意出了错呢)
于是,下面👇的广告看起来如何呢?
以上内容出自于写给大家看的设计书(The Non-Designer's Design Book),作者Robin Williams。除了上述排版四大基本原则,书中还涉及颜色、字体等搭配技巧等。
我觉得这本书的定位非常好——给非设计师的设计书。作为一名IT从业者,我做个ppt、文档等也是三脚猫的水准。这本书我在半天就翻遍,没有佶屈聱牙,没有繁文缛节,我能迅速get到作者的要义。书中的案例非常多,生动形象,看完后又忍不住回翻几次,加深印象。
网友评论