两年前看完《给大家看的设计书》之后写的读书笔记,
发布在了锐普论坛,
旨在帮助新手快速理解排版四原则。
如果想看一下整本书讲什么,
随意搜索一下,就可以搜到PDF电子书
当然,有能力购买的童鞋,请支持正版。
OK,让我们进入正题
(简单解释一下什么是排版四大原则)
对比(Contrast)
对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、
大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注
目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。
重复(Repetition)
让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、
空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以
加强统一性。
对齐(Alignment)
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素
有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。
亲密性(Proximity)
彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密
性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减
少混乱,为读者提供清晰的结构。
——(摘自《给大家看的设计书》P1)
亲密性
(Proximity)
亲密性就是指信息关联,自然中,越发有联系的东西越是靠在一块儿,所以不知不觉我们的潜意识会将依靠在一起的东西认为是关系紧密的。当然,现实中多也如此。
让我们看下书上的两个例子
左图中的每行英语文本之间的间隔都是相同的,第一眼看过去,我们会分不清楚他们之间的逻辑联系,认为大家之间的关系都是差不多,需要动用我们的大脑去思考之间的关系,如果在一个PPT里面,观众只会觉得内容不清晰。右图则是经过了一些小小的改变,将有联系的内容通过摆放和间距进行调整,使我们很自然的感受到它们之间的逻辑关系。
所以,我们在排版时,不妨大胆的将一些联系较为紧密的内容文本放置在相对靠近的位置作为一组,每组之间做一些明显的间隔作为区分。
看个应用的例子
大家第一眼看见这个图片,可能第一感觉是乱。
我们无法感受到这个宣传单之间的逻辑关系,找不到视觉中心,不知道把目光该往哪里放。
想象一下你就是眼球,你在图片上面游移是不是觉得很没有目标?
再看一下修改之后的例子
是不是感觉舒服了很多?
对齐
(Alignment)
这是很重要但是却是很容易让人遗忘的一点内容。
我分两个角度跟大家分享一下。
角度①:视觉联系
这是指我们在排版中,一定要让读者感受到内容的某种视觉联系。
还是我们的眼球法则,第一眼看到视觉中心,我们会知道这个公司的名字,但是我们自然而然的观察名片中的几个角落,是不是感受不到设计者安排的原因?个人把这种让迫使眼球移动的感受称为排版的“力度”.
这种强硬的力度让人很难受。
修改之后
视觉感受第一点被台头吸引,然后自然往下,获得到了其他信息。力度很自然,柔和。
这就是对齐的奇妙之处。
这张图对齐让人感受到的边界很松散。
修改之后的边界很强硬。让人感受到了内容之间的联系。这种联系来自于明确的右对齐。
对于对齐,书上有几句话总结得很是精辟。
①如果文本为左对齐或右对齐,让文本联系在一起的那条看不见的线会更明确,因为现在有一条“硬”的竖边。这就使左对齐和右对齐的文本看起来外观更清晰、效果更分明。
②通过充分利用亲密性,并结合明确的右对齐或左对齐,你会惊异于设计的改观。
③找一条明确的线,并用它来对齐。
——(摘自第二章对齐)
珞珈个人总结一句话,除非很严肃庄重的场合,强迫使用居中对齐,否则尽量使文本左对齐或右对齐。
角度②:留白
留白是个很神奇的东西,它被设计师认为是视觉休息区,如果留白设计的足够好(有规律可循),会给人轻松愉悦的视觉感受,它与对齐是相辅相成的。
这是一个满足于我们上述所有要求的一副设计。
第一幅让人感觉留白过于松散,左边的文本和右边的图片没有紧密的联系。
第二幅的感受明显比第一幅要好。原因在于第二幅的留白漂移到了左边,我们认为内容之间联系更加的紧密。让人一眼便抓住了重点。
重复
(Repetition)
在我们做PPT封面和内页的时候,为了让人觉得他们是统一的,整体的,我们会在封面和内页之间添加一些重复性的元素,看到这些元素,让人感受到他们的联系。
这是魁哥上传的一部教程视频所做的PPT模板封面。
这是所做的模板内页。
让我们圈出几个明显的重复的元素。
正是这些与封面相重复的元素让这个内页和封面变成一体。
不单单在PPT中是如此,在任何设计作品中也是。
“设计的某些方面需要在整个作品中重复”
——(摘自P44)
我们可以把重复认为是“一致性”
依旧是老的例子
书上解释得很到位,我就不需要多说了。
重复有助于组织信息。这可以帮助读者浏览各个页面;它有利于将设计中单独的部分统一起来。即使在一个只有一页的文档中,重复元素也可以建立一种连续性,将文档“整个捆在一起”。如果在创建一个包括多页的文档,它要作为一个精美包装的一部分,充分地使用重复就很关键。
这里包含一些明显的重复元素,从而清楚地指出它的主要内容,除此以外,设计者可能还会在其附信设计中采用其中一个或多个元素。
设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一并增强整个作品,否则
这些部分只是彼此孤立的单元。重复不仅对只有一页的作品很有用,对于多页文档的设计更显重要(对此我们通常称之为保持一致)。
重复的目的就是统一,并增强视觉效果。不要低估页面视觉效果的威力,如果一个作品看
起来很有趣,它往往也更易于阅读。
——(摘自P56)
对比
(Contrast)
从字面很好理解这个词语,核心语句只有一句话
如果两个项不完全相同,就应当使之不同,而且应当是截然不同。
任何元素都有对比,颜色,大小,粗细,形状,风格。
我们先用字体来玩玩
在第一行字中,我只是在加入了一个字体倾斜的效果,对比非常不明显,但是又不是没有,这种不够彻底和明显的对比会让人觉得是一种失误。有时候会很轻易地被人无视掉。
然而在后面我依次添加了加粗,大小,形状块,不同的字体,便可以越来越清楚地表达我想突出的重点。
再记住一句话,不彻底的对比是一种失误。
再来看几个书上的例子
有重点,但是不够明显。
是不是清楚多了?
对比就是让不同更大化,但是,我们要有轻重之分。正文是多数的,标题是少数的需要吸引人。
如果没有轻重分量多少之分也就没有对比了。
这要突出什么?
不要害怕让一些项很小,这样不仅可以与更大的项形成对比,还能留出更多的空白!一旦
读者把握住重点,只要他们感兴趣,自然会去读这些较小的文字。如果他们不感兴趣,不论你把这些文字设置得多大他们也不会去读。
——(摘自P65)
这一点最后给出一个个人的小技巧。中文文本排版时可以使用不同的明度去对比。
正文可以稍微比标题颜色更加浅(明度大)一些,字体更加小一些,这样我们就有了对比突出。
如果您喜欢这篇文章,不妨关注一下我
珞珈Carlos
“我说的都是干货”
当然,如果您对运营者感兴趣
也欢迎您加我聊聊
么么哒
(元宵节快乐,汤圆别吃太多哟~)