网站导航

写给大家看的设计书

#书名

版权信息

书名:写给大家看的设计书(第4版)作者:[美]威廉姆斯(Robin Williams)译者:苏金国,李盼出版社:人民邮电出版社出版时间:2016-01

作者简介

《写给大家看的Web设计书》

内容提要

复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比4个基本原则。

亲密性、对齐、重复和对比4个基本原则

本书上一版读者评论

但我需要维护自己的blog,需要做幻灯片,更重要的是需要能够理解且欣赏视觉设计师的作品并实现它。如果我懂得设计,我肯定可以做得更好更专业,并能够提出建设性的意见。

不要认为,你只要把内容写出来就够了,那仅仅是陈述。‘未经设计’就好像是一场无聊的会议,下面的听众昏昏欲睡。‘经过设计’就好比马云的演讲,即使文化程度不高的听众也会听得津津有味……

“看看这本书,你会对设计有个大概的概念,然后就会在审美时变得不那么手足无措。”

我相信这本书里的四大法则一定会给美术基础薄弱的人带来最简单最有效的应对方法

很多你以前一直这么做但却不知道为什么这么做,看了它以后你会恍然大悟。而你以前不知道要这么做的,看了它以后,你就知道了。”

学会设计,是人生的必修课。如果每个人都有一点设计的知识,那么这个社会将无比优雅、文明。

运用这本书上的原理,突然发现原来我也可以给专业的设计人员挑挑毛病、提提建议呢

设计看起来很炫很酷,但只要了解一些本书中介绍的基本设计常识,每一个人都可以做出不俗的作品来。

重要的部分必须突出,
不重要的部分则要淡化……

本书适合你吗

或者是那些聪明的学生,他们深谙一个秘诀:论文越漂亮,越有可能得高分

只有找出问题所在,方能得出解决方案。

第1章 引言

第1章引言

能够准确陈述问题是何等重要,因为明确这些原则是掌握它们的关键。

一旦能够说出什么东西的名字,就会很容易注意到它。你就会掌握它,拥有它,让它受你所控。

对比(Contrast)对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。重复(Repetition)让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。对齐(Alignment)任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。亲密性(Proximity)彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

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

第2章 亲密性

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

在一个页面上,物理位置的接近就意味着存在关联(实际生活中也是如此)。

如果多个项相互之间有很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。

把相关的元素分在一组,使它们建立更近的亲密性

从哪里开始读名片?接下来看什么?什么时候结束?对于这些问题你现在还有疑问吗?

布局的时候一定要明确元素和其所属元属是否在一起,留意无关元素。

只要把有关联的元素放在一起,然后在不同单元间增加合适的空间,就让信息变得更直观。

如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉上也应当有关联。

首先,根据理解对信息进行分组(这个工作心算完成,也可以在纸上把想法简单画出来);你知道该怎么办。然后在页面上对文本进行实际分组。

空白可以表达关系,所以直接的暗示就是最后三种花是不同的。

你必须要知道如何使用软件中的段前段后间距设置,这样你就能在某个文字区域的元素间使用完全相同的空白了。

我把圆角变为直角,使刊头的外观更简洁、更突出;把标题字号加大,使布局更合理;把一些文字颜色调暗,这些字与其他字的对比度就没那么突兀了。

你无法分清标题属于它上面的文本还是属于下面的文本,原因就出在上下的距离都相等。

将有关系的项归为一组。如果页面上有些区域的组织不太清晰,则要看看这些项是不是存在本不该有的亲密性。

你确实需要知道除了击打空格键之外在段落间加入空白的方法!找到段落前后间距这个选项。

你可能会很自然地利用位置的紧密程度来反映元素间的关系,而亲密性实际上就是更有意识地这样做,并把这个概念更向前推进一步。

亲密性原则能够帮助你关注空间,以及空间对于表达的重要性。

所有的设计作品都要使用四种基本原则,也就是说,如果某个作品看起来业余又没有条理,那么缺少亲密性很有可能并不是出现的唯一问题。但是至少你已经可以准确地找到这个问题了。

如果多个项相互之间存在很近的亲密性,它们将成为一个视觉单元,而不是多个孤立的元素。彼此相关的项应当归在一组。要有意识地注意你是怎样阅读的,你的视线怎样移动:从哪里开始;沿着怎样的路径;到哪里结束;读完之后,接下来看哪里?整个过程应当是一个合理的过程,有确定的开始,而且要有确定的结束。

第3章 对齐

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

对齐原则很“神奇”,它会告诉读者,即使这些项并不靠近,但它们属于同一组。

对齐可以制造出一个安静的中心,它的表达更清晰,我们知道该做什么。

养成为元素画线的习惯,用线来明确哪里缺少关联。

尽管这是一种合法的对齐方式,但边界是“软”的;实在看不出那条“对齐线”的强度。

正是这个边界的强度为布局提供了力度。

居中对齐会创建一种更正式、更稳重的外观,这种外观显得更为中规中矩,但通常也很乏味。

边框束缚了整个空间,给人一种受限制的感觉。

这种左对齐使页面更为精美。只是在左边留有虚线,这就使页面变得开放,而且突出了对齐。

居中。感觉很稳固,甚至感觉非常乏味,就算字体可爱也没用。

如果想让文本居中,至少让它明显一点!

试试看,包含居中文本的块不要居中。

如果想让文本居中,尝试一下用另外某种方式使它更生动。

一定要坚持一个原则:只使用一种对齐方式。页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或者全部居中。

我们的眼睛喜欢看到有序的事物,这会给人一种平静、安全的感觉。此外也有助于表达信息。

绝对不要在左对齐的正文或缩进的文本上方将标题居中。

应当找出一条明确的线,并以它为基准对齐。

找一条明确的对齐线,并坚持以它为基准。

打破常规对齐时不要怯懦,一定要干脆一些,要么全部采用一种方式,要么全都不采用这种方式。千万不要保守。

只要你是有意为之,有时完全可以任意地打破常规对齐。

但是必须记住,关于打破规则本身也有一条Robin规则:在打破规则之前必须清楚规则是什么。

倾听你的眼睛——眼睛看向哪里,路线是什么,这是最佳路径吗?重要的信息是否都归入了逻辑亲密性中?对齐是否对清晰的表达有帮助?在这个小空间中画下能表示已有对齐的垂直线。

在设计中,统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关,需要在各个单独的元素之间存在某种视觉纽带。

对齐的根本目的是使页面统一而且有条理。

要特别注意元素放在哪里。应当总能在页面上找出与之对齐的元素,尽管这两个对象的物理位置可能相距很远。

要避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本居中,而另外一些文本右对齐)。

第4章 重复

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

可以把重复认为是“一致性”。

这正是重复的主旨,它能把整个作品联系在一起,提供统一性。

如果一个出版物有非常好的一致性,就可以放入一些与众不同的元素,使读者真正注意到你希望他们关注的内容。

重复有助于组织信息,可以帮助读者浏览各个页面,也有利于将设计中单独的部分统一起来。

有时重复的项并不一定完全相同,而只是存在明确关联的紧密相关的对象。

一旦建立一组关键的重复项。你就可以变换这些项并仍可保持一致的外观。

重复性元素并不必须是图形或者剪贴画。可以是空白、线、字体、对齐,或者任何你有意重复的东西。

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

最初,可以只是找出现有的重复,然后将其加强。熟悉了这种思想之后,再开始创建新的重复元素,来增强设计的效果并提高信息的清晰度。

要避免太多地重复一个元素,重复太多会让人讨厌。要注意对比的价值

第5章 对比

要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。

如果他们是不同的,那就让他们看起来截然不同。

要增加有意思的对比,最容易的方法就是实现字体对比(这也是本书第二部分的重点)。不过不要忘记,还可以利用线、颜色、元素之间的间隔、材质等形成对比。

将对比与重复相结合,如页码、标题、项目符号、线或空间布局,从而在整个出版物中建立一种强烈的统一标识。

采用严格的对齐方式并使用亲密性来加强页面的布局。

在设计原则中,对比最有意思,同时效果也最为显著!

去掉Times Roman和Arial/Helvetica字体。把这些字体干脆从你的字体选择中去除。相信我没有错。(另外把Sand也去掉。)

对比的根本目的有两个,这两个目的相辅相成,无法分开。一个目的是增强页面的效果,如果一个页面看起来很有意思,往往更有可读性。另一个目的是有助于信息的组织。

可以通过字体选择(见下一部分)、线宽、颜色、形状、大小、空间等来增加对比。

第6章 4大基本原则复习

有关设计(同时也是有关生活)的一个更一般的指导原则是:不要畏畏缩缩。

专业的设计人员总是会“借取”其他理念,他们总在寻找灵感。如果你在设计一个传单,可以先找一份你确实非常喜欢的传单,采用它的布局。只需使用你自己的文本和图片,就能把原来别人的传单变成你自己独一无二的设计。

第7章 颜色运用

CMYK和RGB这两种颜色模型之间的区别

色轮上相对(即完全对立)的颜色为互补色。由于它们如此对立,所以最佳搭配是一种作为主色,另一种用于强调。

彼此等距的三种颜色通常会形成一个让人愉悦的三色组。

类似色组合由色轮上彼此相邻的颜色组成。

纯色就是色调。
• 向色调增加黑色就构成一个暗色。
• 向色调增加白色就构成一个亮色。

单色组合由一种色调及其相应的多种亮色和暗色组成。

色质是指某种颜色的特定明暗度、深浅度或色调。

冷色趋于做背景色,而暖色是趋进型的。暖色不费多大功夫就能产生效果,红色和黄色能立即映入你的眼帘。所以,如果要组合暖色和冷色,一定要少用些暖色。

RGB表示Red(红色)、Green(绿色)和Blue(蓝色)。我们在计算机显示器、电视、iPhone等上看到的就是RGB。

在显示器上,光的颜色不是反射来的,它们会直接进入我们的眼睛。

需要印刷的项目应当使用CMYK;
• 需要在屏幕上看的内容则应使用RGB。

在色轮上相邻的颜色称作__。
2 在色轮上相对的颜色称作__。
3 在色调上增加白色会产生__。
4 在色调上增加黑色会产生__。

第8章 更多提示与技巧

第8章更多提示与技巧

无论项目大小,四条基本原则都应用在了每个项目上。不论你是想把作品打印出来,还是想做一个电子版的PDF,亦或是创建网页,设计原则都是相同的。

对比原则、重复原则、对齐原则、亲密性原则

建立标识性包装时,最重要的特性之一是需要遵循重复原则:每一件作品中都必须有某个标识性图像或某种标识性风格。

但是一定要记住,去掉一切非必要的信息。名片不是一个小册子。同样也去掉类似“电话”“邮箱”“网址”之类的词,因为就算你不说,我们也知道那是什么。

有时,把字体设置得足够大,足以使老人都能很容易地看清楚,不如强调名片设计的整体、精美效果,后者更为重要。

信封规格
标准企业信封为9½×4英寸。这称为10号信封。欧洲的标准规格是110毫米× 220毫米,称为C4信封。

可以把传单上的主体文字缩小。如果你在一开始就抓住了读者的注意力,他也会去阅读小字的。

创建一个中心点
在页面上放一个很大、有趣而且明显的东西。如果能让读者的视线停在这个中心点上,他们往往更有可能阅读其余的文本。

在页面上放一个很大、有趣而且明显的东西。如果能让读者的视线停在这个中心点上,他们往往更有可能阅读其余的文本。

学会控制字母间、行间、段间、标题和副标题、制表符和缩进之间的空间。我之所以不停地强调,是因为间距是业余作品和专业作品的区别。

第二部分 字体设计

因为字体才是设计的根本。

第9章 字体的基本规则

打字机使用的是等宽字体,每个字母占据了相同的空间——一个句号会占据和字母M同样大的空间

在今天,无论这样的习惯是从哪里来的,无论排字工人在两个句子之间放进大一点空格的传统有多久,今天的标准就是一个空格。

那些个大缺口阻碍了交流,而且会使你的作品看起来又老旧又笨拙。

冒号和分号在引号外面。

下面的第一行使用了打字机引号和撇号,而第二行使用了形状为6和9的真正的引号。

不要使用下划线。永远不要用。

字号越大,空间调整就越重要。不当的字间空格不仅看起来既幼稚又不专业,而且还会破坏词语之间的连贯性。

当一段文字的最后一行的字符数少于7个的时候(字符数取决于一行的长度),那么最后一行就称为寡妇。

为了要避免出现寡妇和孤儿,可能需要重写文本(如果你有这个权力的话),或者至少增加或减少一些词语。有时候可以增减字母、单词或者行之间的空隙,这就取决于所用的软件了。有时候可以通过增加或减少页面的空白(只需要调整一点点)来达到目的。这是一项必须完成的工作,所以竭尽全力吧!

如果有一个单词的样式是粗体、斜体或另外一种字体,紧随最后一个字母的标点也应该是同样的样式。

段落缩进或段落间的空行:缩进的意思是,“这是新的一段”。在段落间多出来的空行的意思同样也是,“这是新的一段”。所以你需要选择一种:或者新段缩进,或者在两段之间使用空行,而非同时使用。

第10章 字体(与人生)

如果只使用一个字体系列,在样式、大小、字体粗细等方面没有什么变化,就会产生一种协调的关系。

字体对比有6种明确的不同方式:大小、粗细、结构、形状、方向和颜色。

第11章 字体类别

大多数字体都可以划归为以下提到的6大类之一。在有意识地对比字体之前,需要先了解这几组字体设计之间的相似性,因为正是这种相似性才导致了字体组合使用时的冲突。

手写体就像奶酪蛋糕,要少用,这样才不会让人觉得恶心。

第12章 字体对比

字体大小对比并不意味着必须让字体很大,而只是要求应该有对比。

如果对比不强烈,看上去只会像是一个失误。

Robin原则:不要把同一个类别中的两种字体放在同一个页面上。

排字对比有一个原则,要求必须选取两个不同字体类别中的字体。

要想选择有对比的结构,一种容易的方法就是选择一个衬线体和一个无衬线体。衬线体的结构中通常存在粗/细对比,无衬线体则往往有一致的粗细。将衬线体与无衬线体结合,这是一种经过了时间检验的组合方法,

不要试图结合两种无衬线体,而应当使用一个无衬线体系列中的不同成员采用其他方式建立对比。

至少要引入一种包含大量不同成员的无衬线体系列(要求有各种不同的粗细)。要充分强调它们的对比!

全大写vs.全小写是一种形状的对比

罗马体表示所有字体中从上到下竖直的字体,这不同于斜体或手写体(这些字体是倾斜或者飘逸的)

暖色(红色、橙色)是前进型的,会引起我们的注意。目光很受暖色的吸引,所以只需很少的一点红色就可以产生对比。另一方面,冷色(蓝色、绿色)则是远离型的,总是在我们的视线中后退。即使更大的区域内都是冷色你也未必能注意到;实际上,需要更多的冷色才能产生有效的对比。

第13章 你掌握了吗

字体现在太多了,实际上只需要几个字体系列,利用它们就能建立各种生动的组合。从各个类别分别选择一个字体系列,要确保你选择的无衬线系列中极粗以及极细的字体都一概包含。

过程做一个设计或者重新设计时,先从哪里开始?从中心点开始。确定希望读者最先看什么。除非你已经决定要建立一个非常协调的设计,否则就应该创建一个有强烈对比的中心点。将信息分组。按逻辑进行分组,确定这些组之间的关系。通过组之间的靠近与否(亲密性)来显示这些关系。在页面上组织文本和图片时,要建立并维护明确的对齐。如果能看到一个明显的边界,如照片边界或垂直线条,可以通过其他文本或对象的对齐来加强这个边界。创建重复,或者找出可以重复的项。为建立重复,可以使用粗字体、线、装饰符号或者某种空间布局。看看哪些元素已经自然地重复,再看看是否适合加大重复力度。除非你已经决定创建一种协调的设计,否则一定要建立强烈的对比,这样会吸引读者的视线。要记住,对比要黑白分明。如果页面上的所有一切都又大又粗,很华丽,那么根本不存在任何对比!不论通过更大更粗来建立对比,还是通过更小更细形成对比,关键是要有所不同,这样才能引人注目。

第14章 测验答案和建议

把正确的信息写下来将更容易记住。

去掉边框,形成开放空间。设计新手往往把所有一切都包上边框。不要这么做了!让它自由呼吸。不要把它包得太紧!

第15章 本书所用字体

这其中往往包括了一种字体的所有变体:常规字体是一种字体,斜体是另一种,粗体又是一种,等等。

附录B 我永远是一名教师

生命中出现的一些事改变了我们的生活方向,我们必须顺着眼前的路走,翻越过了沿途的障碍,最后出现在眼前的是另一片天地。我总会思索我所做过的决定,想象如果我选择不同,我的人生又会是怎样的。但是知道我要相信来时的路。现在,我的眼前又出现了一条路,我很好奇走过去之后会看到什么样的风景。

事实上,这本书是我写给自己的,所以我就可以理解!很多书,我之所以写它们,就是因为我自己想学。

我也学到不要在一个任务里加入多余的符号。比如,描述键盘快捷键的标准方法(现在仍然是):Command + C。我的学生们就会按着Cmd、“+”和C键!所以我就会把这种快捷键描述成Cmd C。

我怀疑如果苹果可以的话,他们会把我关进监狱的,但是我仍然坚持用我学生可以理解的方式解释。我今天仍然如此。

很久以前我就知道我必须要对我写的东西负责任,因为用户们总是认为,如果出现了问题,那一定是他们做错了。他们认为书中的内容应该都是正确的!

您是怎么把设计概念抽象成简单易掌握的四条(亲密性、对齐、重复、对比)的?

我认为最有用的资源莫过于John McWade的Before & After。订阅他的博客,上他的网站,读他的书,注册一个The Grid然后和大家分享你的作品并且从别人身上学习。关于设计,能够激

现在我们正在忙着把我的“写给大家看”系列书做成视频放在网上。总体上说,因为世界在变化,所以我也有必要进入其他领域了!