这是设计入门系列的第四篇阅读笔记,建议将前三篇笔记阅读完后在来读这一篇哦~

简易设计入门——给大众的设计学通识课

简易设计入门——给大众的设计学通识课 2

简易设计入门——给大众的设计学通识课 3

今天我们来讲一讲四大原则中最后一个原则:对比.


首先要指出,“对比”原则是四大原则中难度最大的,但同时效果也是最好的。如果运用得当,他产生的效果可以比前面三个原则更加强烈。但事实往往是,我们一般的设计中很难有意识地去使用这种原则;即使想要运用,很多时候也给人一种蹑手蹑脚的感觉,无法达到对比所想要的那种效果。

所谓对比,就是突出不同元素之间的不同点。如果两个元素不完全相同,就应当使之不同,而且应当是截然不同.否则,这两个元素就会出现冲突,它们就不应该同时出现!

这句话可能会有点难以让你信服,但它其实揭示了设计中一个更深层次的思想:要足够的大胆,勇敢去尝试,千万不要畏手畏脚!

这也是我觉得对比这个原则比较难掌握的地方。下面我们通过一些例子来让你体会对比带来的震撼。

alt text


对比的形式多种多样,包括颜色、字号、字体、空间等等。

颜色但给人的感觉是最强烈的,字体次之。下面是一份新闻简报,从亲密性、对齐和重复原则来看,它做的很不错,但你第一眼看过去似乎并没有什么能够吸引你的眼球。

alt text

新闻简报我们通过强化它的对比,再看一眼效果:

alt text

这一版将标题大小写修改了一下,这样可以让标题使用更大的字号,更紧致的字体,这个技巧在以后的设计中也会经常用到。

当然,它最大的变化显然是黑色和纸张颜色的对比。黑底白字的标题十分具有吸引力,为了强调这种黑色,标题下方海加了一根细线,这样又形成两种对比,中间白色间隙和上方黑底互相对比,短黑线和标题底色的粗黑线形成对比;

此外,子标题们使用了和标题一样的字体,它和正文细小的字体对比强烈,人们阅读新闻时往往先阅读标题,所以在这里强化标题的表现是明智的。

除了对比之外,这里还强化了“重复”原则的表现,在页面底部多了一条中等粗细的黑线,如果你看过上一篇笔记的话,应该会知道它的视觉引导作用。(不知道就快去补一补![○・`Д´・ ○])

我们可以再看一个例子:

alt text

这张明信片在亲密性和对齐方式上做得还算合格,重复虽然有,但是太弱了。除了标题你或许很难看出它的重点。尤其是这个心形logo的颜色和整张纸的浅紫色太相近了,这就不能算是对比,只能称为“冲突”了。

alt text

我们将背景换为了亮白,这样logo就很明显,而标题部分也用了深紫色的填充,就像前面一个例子一样,两种颜色形成了强烈的对比。而且我们也发现这个标题的字体变为手写字体,和下文的非衬线体又形成对比。还有一些其他细节也可以发掘。

用这两个例子主要是为了说明我们平常在使用对比原则时最容易使用的方法就是改变底色,改变字体。


这里再来谈一谈对比背后的大胆,对比本身的表现效果是最强烈的,甚至可以覆盖前面三种原则,要想表现出这种强烈的效果那设计者本身就要敢于去尝试,在一些细节处理上做得足够勇敢,要让对比足够的强烈!

alt text

这张明信片结构还算分明,但有些细节让人容易疑惑,比如你会发现中间的线条粗细和上下不同,这到底是有意为之还是设计者的疏忽?这个标题我们可不可以让它再显眼一些?

alt text

上面两种设计都有一个特点,就是线条的对比很明显,你不会觉得这是设计师的疏忽,下面那张设计中甚至直接把标题背景填充,像是把线条拉粗了很多倍。此外这两张明信片的标题都做的更加显眼了,不像之前似乎还有点缅甸。所以勇敢一些,突破你自己的想象!

(有人或许会问如果全部做得大胆,那我如何做出那种精致的感觉呢?其实这种精致典雅感也是可以通过对比实现,下文的空间对比会讨论)

再给一个例子,仔细体会吧~

alt text

alt text


除了常见的颜色、字体、字号的对比,还有视觉方向、空间的对比。

alt text

我们看这页宣传单,关于颜色字体就不赘述,我们看一看文字的布局方向:

标题是水平排列的,占据了整个长度;正文分为了五个模块,相当于五个竖直的窄列(其实这也是一种重复);正文又是按照从左到右方向阅读的。—— 一横一竖,也是一种对比。

对比还可以让读者轻松的看出信息的结构,这点本来是亲密性的作用,但对比运用得当,效果往往更好。

alt text

比如上面这张传单(它还是上面那张淡紫色明信片的例子),可以清晰的将信息划分为四层,因为这四层结构之间的对比非常强烈!

alt text

再看看这张(还是同一个例子),你也许也会被它质朴的设计所吸引,甚至想要收藏。其实这种精致典雅就是通过小而优雅的字体和大而连续的空白的对比产生的,你依然可以很明显地看出信息分为三层,尽管内容简洁,但你会忍不住想仔细多看两眼。

这种设计在制作一些字幕时也很受欢迎!(至少我喜欢这种风格)


总而言之,对比是为了增强页面的视觉效果,帮助组织信息。对比突出的是不同元素间的差异,要实现有效的对比,你就得让两个元素截然不同,所以很多时候设计者必须要大胆,要敢于设计。不能在相似的元素间模糊,如果对比不够强烈,那它们就不应该同时出现!

我们平时生活可能用的最多的对比就是颜色、字体、字号了,但空间布局的对比其实也可以有意的设计一下。注意加大对比力度,不要将两根粗细相似的线放一起,不要把深棕色文本和黑色背景进行对比,不要用多种类似的字体。


OK,首先恭喜能够阅读到这的读者朋友们(*^▽^*) ,尤其要感谢从第一篇笔记一直阅读坚持到这的读者,既然你这么信任我,我也会尽力做到每篇文章都带给你们知识。我四篇文章其实主要是对原著的转写,概括和自我阐述,在这个过程中我逐渐理解了设计四大原则的强大之处。如果你在平时有意地使用这四大原则,甚至可以是一个一个原则落实,你都会发现自己平时的一些作品,无论是设计专业学生的作业,还是自己的论文,简历或者文章推送的排版,应该都会发现比较明显的提升。

作为一个非设计专业学生,去学习这些比较基础的设计知识其实是很有趣的一个过程,此外,能够和自己的写作爱好结合起来传播知识更让人有成就感,我在一周之内完成了这四篇文章,看完这四篇笔记的读者基本具备了设计学的一些框架和理论。现在,你们可以多多留意路上的一些广告、宣传册,可以翻翻自己以前的作品,品味一下它的设计,然后心里想:啊,其实这里可以这样修改!······

这四个原则介绍完了,但原著仍有很多内容,我会继续阅读,不过不会像现在这样高强度更新了。也欢迎大家继续订阅我的专栏!

最后贴一张简历的设计样例吧,它综合运用了四个原则,让它从原来的普通变得引人,不妨细细品味它的设计细节吧~

简历(修改前):

alt text

简历(修改后):

alt text


最后一次,臭不要脸地宣传一下我的MAD处女作(*^▽^*)

【利兹与青鸟/蔷薇宴】当樱花色飞舞时

感谢大家阅读!!!