《写给大家看的设计书》笔记整理
这是一本实用性书籍,阐述了设计中的四大原则:亲密性、对齐、重复和对比,并介绍了如何运用颜色、字体,以及针对各种体裁的设计注意事项。
共分为四个部分:
第一部分:介绍四大原则,每个原则都会举例,并有小结
第二部分:介绍如何运用颜色,涉及色轮、颜色关系、暗色和亮色、色质、暖色和冷色等
第三部分:介绍不同体裁,如名片、信封等的设计原则,如何使用四大原则
第四部分:介绍字体的六大类型及如何产生协调、冲突、对比的效果
第一部分 四大设计原则
对比:避免相似,让元素截然不同
重复:让元素重复出现
对齐:元素不能随意安放,要与另一个元素有某种视觉联系
亲密:彼此相关的元素要归组在一起
元素:字体、颜色、大小、线宽、形状、空间等
一、亲密性原则:
1)诀窍:物理位置的接近就意味着关联;进一步,了解各元素之间的关系,充分利用
2)手段:调整文本的大小or字体的粗细or图片的大小or图片的摆放位置
3)误区:亲密性≠一切都要靠近,亲密性=有关联的元素靠近
4)小结:要有意识的引导阅读者的视线
①根本目的:实现组织性,更易于被阅读、被记住
②如何实现:统计眼睛停顿次数来数一数页面上有多少个元素,如果页面上的项超过3~5个,就可以看看哪些可以归拢在一起
③要避免的问题:
不要仅仅因为有空白就把元素放在角落或中央。
避免一个页面上有太多孤立的元素。
不要在元素之间留出同样大小的空白,除非各组同属于一个子集。
标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。
不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。
二、对齐性原则:
1)诀窍:物理位置的接近就意味着关联;进一步,了解各元素之间的关系,充分利用;
2)手段:文本左对齐或右对齐;将文本居中,但文本块不居中;按基线对齐
3)误区:不要中对齐,太乏味(庄重、正式如婚礼除外)
4)小结:任何元素都不能在页面上随意摆放
①根本目的:使页面统一而有条理
②如何实现:要特别注意元素放在哪里,在页面上找出与之相对齐的元素
③要避免的问题:
避免在页面上混合使用多种对齐方式
避免居中对齐
三、重复性原则:
1)诀窍:有一些一致性的元素,可以当重复性的元素。比如“粗字体,细字体,方块项目符号,缩进,间隔,对齐”
2)手段:如果那个元素很有意思,就可以用来做重复元素。如果很简单,就可以指定不同的大小、颜色或角度(下面例子里的茶壶);也可以添加与页面主题没有任何关系的重复元素(调查表单上放入一些石刻字符、报告中增加一些奇模怪样的鸟)
3)小结:对多页文档设计很重要
①根本目的:统一,增强视觉效果。
②如何实现:利用页面上现有的一致性元素,做重复设计;如果没有一致性元素,可以创建新的重复元素。
③要避免的问题:
避免太多的重复一个元素
四、对比性原则
对比就必须强烈,千万不要畏畏缩缩
①根本目的:增强页面的效果;有助于信息的组织
②如何实现:可以通过字体的选择等一系列方式
大字体与小字体的对比——————这是最容易的
典雅的oldstyle字体与粗体sans serif字体产生对比;
细线与粗线的对比;
冷色与暖色的对比;
平滑材质与粗糙材质的对比;
水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的对比;
间隔很宽的文本行与紧凑在一起的文本行形成对比;
小图片与大图片的对比。
③要避免的问题:
千万不要犹豫,如果两个项不完全相同,就应当使之不同,而且应当是截然不同。
五、总结——千万不要畏畏缩缩
这四个原则凝结成一个最基本的原则:千万不要畏畏缩缩。
①不要害怕在设计中留有空白;
②不要害怕设计是不对称的;
③不要害怕把单词设置得非常大或非常小;
④不要害怕让图片太大或太小。
第二部分 颜色运用
一、色轮
二、颜色关系
1、互补色
2、三色组:
3、分裂互补三色组:
4、类似色:
5、暗色与亮色:
三、如何建立亮色与暗色:
四、注意色质
色质是指某种颜色的特定明暗度、深浅度或色调。
如果色质很接近,看上去会有些模糊不清,对比太过微弱。
如果设计要求使用有类似色质的色调,一定要尽力避免它们挨在一起,另外每种色调的用量也不要完全相同。
五、暖色与冷色
颜色往往要么是暖色(这说明,其中包含红色或黄色),要么是冷色(说明其中包含蓝色)。
不过,我希望你记住更实用的一点,冷色总趋于后退,而暖色是趋进型的。
六、如何取舍
如何选择颜色?
①项目有季节性吗?
也许可以使用类似色来暗示季节,火热的红色和黄色表示夏季;冰冷的蓝色表示冬季;不同色度的橙色和棕色代表秋天;明亮的绿色象征春天。
②公司有没有制定一些官方颜色?
③你的项目是否包含一个照片或其他图像?
可以选择照片中的一个颜色,再根据这个颜色选择一组其他的颜色。
④如果项目会定期反复,可以自建一个调色板,供所有项目一致的使用。
七、CMYK与RGB,印刷与Web
CMYK代表Cyan(一种蓝色)、Magenta(一种红/粉红色)、Yellow(黄色)和一个Key色(通常是黑色)。利用这4种墨色,可以打印出成千上万种颜色,正是因为这个原因,这也称为一种“4色处理”。(专业印刷作业可能还会用到其他颜色的油墨)。
RGB表示Red(红色)、Green(绿色)和Blue(蓝色)。我们在计算机显示器、电视、iPhone等等上看到的就是RGB。
需要印刷的项目应当使用CMYK。
需要在屏幕上看的内容则应使用RGB。
第三部分 不同体裁的设计原则
涵盖企业名片、信笺、信封、传单、新闻简报、宣传册、明信片、报纸广告和网站。
一、企业名片
除了主色之外,如果还使用了第二种颜色(辅色),则用量一定要少。大多数情况下,第二种颜色只需稍稍用一点(不要在名片上通篇覆盖辅色),这样效果会更好。只需稍稍点缀,你会得到更大的回报。
ps:名片上没有必要写上email和web site等字眼,人们一眼就能看出来这些项是什么。
①格式:是水平的or垂直的
②字体大小:有时,把字体设置的足够大,足以使老人都能很容易看清楚,不如强调名片设计的整体、精美效果。
③创建名片、信笺和信封共有的一致图像
二、信笺和信封
从你选择的纸张质量,到设计、颜色、字体和信封,其中暗含的内容应该能够提升企业的形象。
①信笺和信封应当与企业名片一起设计。它们看上去应该同属一体,如果你给别人一张企业名片,随后又给他寄了一封信,肯定希望这两样能互相强调。
②创建中心点
应该有一个最突出的主导元素,而且在信笺和信封(以及企业名片)上都应当同样有这个主导元素。一定要避免信笺使用乏味的顶部居中布局!
③对齐
为信纸选择一种对齐方式
④第二页
如果有条件增加第二页信纸,可以取第一页上出现的一个小元素,第二页上只使用这个小元素而不放其他内容。
⑤传真与复印
如果计划通过传真或复印机发送你的信笺,不要选择深色或者带很多小点的纸张。
三、传单
传单是最适合使用不同有趣字体的地方之一,而且使用有趣的字体也是让人注意标题的一种最佳方法。
如果所有一切都很大,那么什么也不会突出,任何部分都无法吸引读者的注意。要有一个明显的中心点,并使用对比来组织信息,引导读者的视线浏览页面。
①创建一个中心点
②使用有对比的子标题
③重复
④对齐
四、新闻简报
多页出版物最重要的特性之一就是一致性,或重复。每一页看上去应当是属于整个出版物的一部分。可以通过颜色、图片风格、字体、空间布局、重复某种格式的项目列表、照片周围的边框、图题等等来实现这一点。
新闻简报最大的问题是缺乏对齐、缺少对比,另外使用了太多的Helvetica字体(Arial是Helvetica的一个别名)。
①对齐
②段落缩进
第一段不要缩进,即使跟在子标题后面也是如此。如果确实要缩进,应当使用1 em的标准排版缩进(em是字体大小点数)。
③不要使用Helvetica
应当采用一种同时包括粗黑版本和细版本的sans serif字体系列(如Eurostile、Formata、Syntax、Frutiger或Myriad)。可以尝试对标题和引用文字使用这种粗黑字体。
④正文应当可读
为了得到最佳阅读性,可以使用一种经典的oldstyle serif字体,或者使用一种比较细的slab serif字体。
五、宣传册
读宣传册中各个面的顺序应该就是读者打开这个宣传册的顺序,也就是说,你希望读者按什么顺序读宣传册中的各个面?
六、明信片
由于明信片直观而直接,不需要信封,也不需要信纸,所以明信片是吸引人注意的一种极佳的办法。出于同样的原因,如果明信片设计得很丑陋,很乏味,那它只会浪费每一个人的时间。 所以,为了避免这种浪费,要记住以下几点:
与众不同
成“系列”。
明确具体。明确告诉收明信片的人,他们会得到怎么样的好处
力求简练。
尽可能使用颜色
七、报纸广告
报纸广告的最大问题之一是太过拥挤。许多花钱在报纸上登广告的客户和企业都认为要把每一块空间都填满,因为每一块版面都是花了钱的。
空白!
机敏。没有什么能比一条机敏的标题更能吸引人了。
清楚。一旦你的标题吸引了读者的注意,接下来你的广告就要具体告诉读者该做什么。
简洁。
尽可能使用颜色
八、网站
一个好的web设计中,最重要的两个因素就是重复和清晰。
重复:在每一个页面上重复某些视觉元素。
可读性:网页上的行宽要更短。
第四部分 字体的六大类型
一、怎么样使用字体
1、协调
如果选择只使用一种字体,页面上的所有元素都采用同样性质的字体,这种设计就是协调的。
2、冲突
如果在同一个页面上设置了两个或多个类似的字体,它们并非完全不同,但也不完全相同,这个设计就是冲突的。
3、对比
强烈的对比能吸引我们的视线。要在设计中增加对比,最有效、最简单而且最让人满意的方式之一就是利用字体。
二、字体六大类型
1、Oldstyle
Oldstyle字体几乎没有什么显著的特征会影响阅读,它们本身不会分散人的注意力。如果你希望人们具体去读某些文字,可以选择设置为Oldstyle字体。
2、Modern
由于有剧烈的粗/细过渡,在显示大量正文时,大多数Modern字体都不是很好的选择。细线几乎会完全消失,而粗线太过突出,在页面上这种效果称为“眩目”。
3、Slab serif
因为它们的笔画比较粗,而且粗细相对单一。由于其简洁直接的外观,Slab serif常在儿童图书中使用。
4、Sans serif
Sans serif字体的粗细几乎总是单一的,笔画中几乎没有可见的粗/细过渡,字体的粗细都一样。
Tabitha的活力四射与Optima的古典美正好形成鲜明的对比。
5、Script
Script字体就像是奶酪蛋糕,要少用,这样才不会让人觉得恶心。
6、Decorative
很易于使用,有时更廉价,而且你一时想表达的任何突发奇想都可以使用这种字体。
有时名人名言使用Decorative字体非常合适。
共分为四个部分:
第一部分:介绍四大原则,每个原则都会举例,并有小结
第二部分:介绍如何运用颜色,涉及色轮、颜色关系、暗色和亮色、色质、暖色和冷色等
第三部分:介绍不同体裁,如名片、信封等的设计原则,如何使用四大原则
第四部分:介绍字体的六大类型及如何产生协调、冲突、对比的效果
第一部分 四大设计原则
对比:避免相似,让元素截然不同
重复:让元素重复出现
对齐:元素不能随意安放,要与另一个元素有某种视觉联系
亲密:彼此相关的元素要归组在一起
元素:字体、颜色、大小、线宽、形状、空间等
一、亲密性原则:
1)诀窍:物理位置的接近就意味着关联;进一步,了解各元素之间的关系,充分利用
2)手段:调整文本的大小or字体的粗细or图片的大小or图片的摆放位置
3)误区:亲密性≠一切都要靠近,亲密性=有关联的元素靠近
4)小结:要有意识的引导阅读者的视线
①根本目的:实现组织性,更易于被阅读、被记住
②如何实现:统计眼睛停顿次数来数一数页面上有多少个元素,如果页面上的项超过3~5个,就可以看看哪些可以归拢在一起
③要避免的问题:
不要仅仅因为有空白就把元素放在角落或中央。
避免一个页面上有太多孤立的元素。
不要在元素之间留出同样大小的空白,除非各组同属于一个子集。
标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。
不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。
二、对齐性原则:
1)诀窍:物理位置的接近就意味着关联;进一步,了解各元素之间的关系,充分利用;
2)手段:文本左对齐或右对齐;将文本居中,但文本块不居中;按基线对齐
3)误区:不要中对齐,太乏味(庄重、正式如婚礼除外)
4)小结:任何元素都不能在页面上随意摆放
①根本目的:使页面统一而有条理
②如何实现:要特别注意元素放在哪里,在页面上找出与之相对齐的元素
③要避免的问题:
避免在页面上混合使用多种对齐方式
避免居中对齐
三、重复性原则:
1)诀窍:有一些一致性的元素,可以当重复性的元素。比如“粗字体,细字体,方块项目符号,缩进,间隔,对齐”
2)手段:如果那个元素很有意思,就可以用来做重复元素。如果很简单,就可以指定不同的大小、颜色或角度(下面例子里的茶壶);也可以添加与页面主题没有任何关系的重复元素(调查表单上放入一些石刻字符、报告中增加一些奇模怪样的鸟)
3)小结:对多页文档设计很重要
①根本目的:统一,增强视觉效果。
②如何实现:利用页面上现有的一致性元素,做重复设计;如果没有一致性元素,可以创建新的重复元素。
③要避免的问题:
避免太多的重复一个元素
四、对比性原则
对比就必须强烈,千万不要畏畏缩缩
①根本目的:增强页面的效果;有助于信息的组织
②如何实现:可以通过字体的选择等一系列方式
大字体与小字体的对比——————这是最容易的
典雅的oldstyle字体与粗体sans serif字体产生对比;
细线与粗线的对比;
冷色与暖色的对比;
平滑材质与粗糙材质的对比;
水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的对比;
间隔很宽的文本行与紧凑在一起的文本行形成对比;
小图片与大图片的对比。
③要避免的问题:
千万不要犹豫,如果两个项不完全相同,就应当使之不同,而且应当是截然不同。
五、总结——千万不要畏畏缩缩
这四个原则凝结成一个最基本的原则:千万不要畏畏缩缩。
①不要害怕在设计中留有空白;
②不要害怕设计是不对称的;
③不要害怕把单词设置得非常大或非常小;
④不要害怕让图片太大或太小。
第二部分 颜色运用
一、色轮
二、颜色关系
1、互补色
2、三色组:
3、分裂互补三色组:
4、类似色:
5、暗色与亮色:
三、如何建立亮色与暗色:
四、注意色质
色质是指某种颜色的特定明暗度、深浅度或色调。
如果色质很接近,看上去会有些模糊不清,对比太过微弱。
如果设计要求使用有类似色质的色调,一定要尽力避免它们挨在一起,另外每种色调的用量也不要完全相同。
五、暖色与冷色
颜色往往要么是暖色(这说明,其中包含红色或黄色),要么是冷色(说明其中包含蓝色)。
不过,我希望你记住更实用的一点,冷色总趋于后退,而暖色是趋进型的。
六、如何取舍
如何选择颜色?
①项目有季节性吗?
也许可以使用类似色来暗示季节,火热的红色和黄色表示夏季;冰冷的蓝色表示冬季;不同色度的橙色和棕色代表秋天;明亮的绿色象征春天。
②公司有没有制定一些官方颜色?
③你的项目是否包含一个照片或其他图像?
可以选择照片中的一个颜色,再根据这个颜色选择一组其他的颜色。
④如果项目会定期反复,可以自建一个调色板,供所有项目一致的使用。
七、CMYK与RGB,印刷与Web
CMYK代表Cyan(一种蓝色)、Magenta(一种红/粉红色)、Yellow(黄色)和一个Key色(通常是黑色)。利用这4种墨色,可以打印出成千上万种颜色,正是因为这个原因,这也称为一种“4色处理”。(专业印刷作业可能还会用到其他颜色的油墨)。
RGB表示Red(红色)、Green(绿色)和Blue(蓝色)。我们在计算机显示器、电视、iPhone等等上看到的就是RGB。
需要印刷的项目应当使用CMYK。
需要在屏幕上看的内容则应使用RGB。
第三部分 不同体裁的设计原则
涵盖企业名片、信笺、信封、传单、新闻简报、宣传册、明信片、报纸广告和网站。
一、企业名片
除了主色之外,如果还使用了第二种颜色(辅色),则用量一定要少。大多数情况下,第二种颜色只需稍稍用一点(不要在名片上通篇覆盖辅色),这样效果会更好。只需稍稍点缀,你会得到更大的回报。
ps:名片上没有必要写上email和web site等字眼,人们一眼就能看出来这些项是什么。
①格式:是水平的or垂直的
②字体大小:有时,把字体设置的足够大,足以使老人都能很容易看清楚,不如强调名片设计的整体、精美效果。
③创建名片、信笺和信封共有的一致图像
二、信笺和信封
从你选择的纸张质量,到设计、颜色、字体和信封,其中暗含的内容应该能够提升企业的形象。
①信笺和信封应当与企业名片一起设计。它们看上去应该同属一体,如果你给别人一张企业名片,随后又给他寄了一封信,肯定希望这两样能互相强调。
②创建中心点
应该有一个最突出的主导元素,而且在信笺和信封(以及企业名片)上都应当同样有这个主导元素。一定要避免信笺使用乏味的顶部居中布局!
③对齐
为信纸选择一种对齐方式
④第二页
如果有条件增加第二页信纸,可以取第一页上出现的一个小元素,第二页上只使用这个小元素而不放其他内容。
⑤传真与复印
如果计划通过传真或复印机发送你的信笺,不要选择深色或者带很多小点的纸张。
三、传单
传单是最适合使用不同有趣字体的地方之一,而且使用有趣的字体也是让人注意标题的一种最佳方法。
如果所有一切都很大,那么什么也不会突出,任何部分都无法吸引读者的注意。要有一个明显的中心点,并使用对比来组织信息,引导读者的视线浏览页面。
①创建一个中心点
②使用有对比的子标题
③重复
④对齐
四、新闻简报
多页出版物最重要的特性之一就是一致性,或重复。每一页看上去应当是属于整个出版物的一部分。可以通过颜色、图片风格、字体、空间布局、重复某种格式的项目列表、照片周围的边框、图题等等来实现这一点。
新闻简报最大的问题是缺乏对齐、缺少对比,另外使用了太多的Helvetica字体(Arial是Helvetica的一个别名)。
①对齐
②段落缩进
第一段不要缩进,即使跟在子标题后面也是如此。如果确实要缩进,应当使用1 em的标准排版缩进(em是字体大小点数)。
③不要使用Helvetica
应当采用一种同时包括粗黑版本和细版本的sans serif字体系列(如Eurostile、Formata、Syntax、Frutiger或Myriad)。可以尝试对标题和引用文字使用这种粗黑字体。
④正文应当可读
为了得到最佳阅读性,可以使用一种经典的oldstyle serif字体,或者使用一种比较细的slab serif字体。
五、宣传册
读宣传册中各个面的顺序应该就是读者打开这个宣传册的顺序,也就是说,你希望读者按什么顺序读宣传册中的各个面?
六、明信片
由于明信片直观而直接,不需要信封,也不需要信纸,所以明信片是吸引人注意的一种极佳的办法。出于同样的原因,如果明信片设计得很丑陋,很乏味,那它只会浪费每一个人的时间。 所以,为了避免这种浪费,要记住以下几点:
与众不同
成“系列”。
明确具体。明确告诉收明信片的人,他们会得到怎么样的好处
力求简练。
尽可能使用颜色
七、报纸广告
报纸广告的最大问题之一是太过拥挤。许多花钱在报纸上登广告的客户和企业都认为要把每一块空间都填满,因为每一块版面都是花了钱的。
空白!
机敏。没有什么能比一条机敏的标题更能吸引人了。
清楚。一旦你的标题吸引了读者的注意,接下来你的广告就要具体告诉读者该做什么。
简洁。
尽可能使用颜色
八、网站
一个好的web设计中,最重要的两个因素就是重复和清晰。
重复:在每一个页面上重复某些视觉元素。
可读性:网页上的行宽要更短。
第四部分 字体的六大类型
一、怎么样使用字体
1、协调
如果选择只使用一种字体,页面上的所有元素都采用同样性质的字体,这种设计就是协调的。
2、冲突
如果在同一个页面上设置了两个或多个类似的字体,它们并非完全不同,但也不完全相同,这个设计就是冲突的。
3、对比
强烈的对比能吸引我们的视线。要在设计中增加对比,最有效、最简单而且最让人满意的方式之一就是利用字体。
二、字体六大类型
1、Oldstyle
Oldstyle字体几乎没有什么显著的特征会影响阅读,它们本身不会分散人的注意力。如果你希望人们具体去读某些文字,可以选择设置为Oldstyle字体。
2、Modern
由于有剧烈的粗/细过渡,在显示大量正文时,大多数Modern字体都不是很好的选择。细线几乎会完全消失,而粗线太过突出,在页面上这种效果称为“眩目”。
3、Slab serif
因为它们的笔画比较粗,而且粗细相对单一。由于其简洁直接的外观,Slab serif常在儿童图书中使用。
4、Sans serif
Sans serif字体的粗细几乎总是单一的,笔画中几乎没有可见的粗/细过渡,字体的粗细都一样。
Tabitha的活力四射与Optima的古典美正好形成鲜明的对比。
5、Script
Script字体就像是奶酪蛋糕,要少用,这样才不会让人觉得恶心。
6、Decorative
很易于使用,有时更廉价,而且你一时想表达的任何突发奇想都可以使用这种字体。
有时名人名言使用Decorative字体非常合适。
有关键情节透露