美文网首页
写给大家看的设计书

写给大家看的设计书

作者: 孙希文 | 来源:发表于2017-07-25 10:13 被阅读0次

第一章  约书亚树

这一章从一般意义上对四大要素进行了解释,这四大要素分别是:

1)对比

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

2)重复

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等等,这样一来,既能增加条理性,还可以加强统一性。

3)对齐

任何东西都不能再页面上随意安防。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰,精巧而且清爽的外观。

4)亲密性

彼此相关的项目应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,他们就会成为一个视觉单元,而不是多个独立的元素。这样有利于组织信息,减少混乱,为读者提供清晰的结构。

而下面的几张,将会对这四种基本原则进行详细的阐述。

第二章  亲密性

亲密性原则是指:将相关的项组织在一起,移动这些项,让他们的物理位置相互靠近,这些项将被看作一个组,这样能给读者非常直观的提示。比如下面这个例子:

亲密性实例

当我们看列表左面,我们会认为这些单词可能有什么共同之处。再看右边的列表,我们无需仔细阅读每个单词是什么意思,从物理位置上我们一眼就能判断出两组单词肯定有所不同(是的,他后四种花与前面的花不一样)。这就反映了亲密性的概念:物理位置的接近意味着关联。

下面运用亲密性来设计一张名片。

原名片

对于这张名片,有的人可能是从中间的黑体字开始阅读,有的人可能是从上往下阅读,由于每个信息是独立的个体,阅读到最后,可能还会去寻找有没有遗漏的信息。

但是,我们运用亲密性来重新设计这张名片。把相关的元素组织成一个单元,这样相关的项就会产生联系。不相关的信息从物理位置分离开来,这样一张名片,信息的显示就会更有条理性,知道从哪里开始阅读,到哪里结束。

重新设计后的名片

当然,亲密性的思想并不是说所有的一切都要更靠近,他的真正含义是:如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉行也应当有关联。

如果多个项相互之间存在很近的亲密性,他们将成为一个视觉单元,而不是多个孤立的元素,彼此相关的项应当归在一组。

我们要避免的问题:

1)不要仅仅因为有空白就把元素放在角落或中央

2)避免一个页面上有太多孤立的元素

3)不要在元素之间留出同样大小的空白,除非各组同属于一个子集

4)标题、子标题、图标标题、图片能否归入其他相关材料?在这个问题上一定要非常清楚。在有很亲密性的元素之间建立关系。

5)不同属一组的元素之间不要建立关系!如果元素彼此无关,要把他们分开。

第三章   对齐

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

如果页面上的一些项是对齐的,整个设计页面将会是一个更内聚的单元。即便对齐的元素从物理位置上分开的,但是给视觉的感受是他们之间有一条看不见的线把他们连接在了一起。

依然用上一章的名片举个例子。

原始设计名片

居中对齐名片

右对齐名片

将原始名片经过居中对齐设计后,视觉效果是不是变好了。再看经过右对齐设计的名片,这会让文本联系在一条看不见的线上,这就是文本看起来更清晰、效果更分明。

虽然我认为居中对齐的设计好像比右对齐的设计好看些,但是书上这样说了:

居中对齐是初学者最常用的对齐方式,这种对齐看起来很安全,感觉上也很舒服,居中对齐会创建一种更正式、更稳重的外观,这种外观显得更为中规中矩,但通常也很乏味。请注意你喜欢的那些设计,我敢保证,大多数看起来精巧额设计都没有采用居中对齐。我知道,作为一个初学者,要完全摒弃居中对齐很难,但你必须从一开始就强制自己避免他。

看了下面的设计,发现居中对齐确实不如左对齐或者右对齐。

一个居中对齐的报告封面

但注意的是:并不是绝对不用居中!如果要表达出庄重、正式的效果,可以用上居中对齐,但是值得注意的是,在使用的居中对齐的时候,我们应该稍微修改一下,比如,设计一种非常随意、有趣的字体,

但是,在水平有限的现在,一定要坚持一个原则:页面上只能使用一种文本对齐方式,要么都左对齐,或右对齐,或者全部居中。

在这个设计中,标题和子标题都是左对齐,但是文字介绍是居中的,两个文本元素之间没有共同的对齐方式。

在这个设计中,上面部分用的是左对齐,下面部分用的是右对齐,虽然不只用了一种对齐方式,但是值得注意的是,上面部分的右边界和下面部分的左边界是对齐的,在一条直线上,这样就产生了某种联系

应当找一条明确的对齐线,并用它来对齐,如果有一个照片或图片(有明确的直边),可以沿着照片的这个直边与文本的平边对齐。如下图所示。

找到一条明确的线,并且与他对齐

小结:

任何元素不能在页面上随意摆放,必须和页面上的另外一个元素存在某种视觉联系。

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

要着力避免居中对齐,除非你有意识的想要创建一种比较正式、稳重(通常也很乏味)的表示,并不是完全杜绝使用居中对齐,有时可以有意的选择这种对齐方式,但是不要把他作为首要选择。

第四章   重复

重复的原则是指:“设计的某些方面需要在整个作品中重复”。

设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一而且增强整个作品。否则这些部分知识彼此孤立的单元。重复不仅对只有一页的作品有用,对于多页文档的设计更显得重要。

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

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

第五章  对比

要记住一个重要的规则:要想实现有效的对比,对比就必须要强烈,千万不要畏畏缩缩。如果两个元素存在不同,但是差别又不大,那么做出来的效果就不叫对比,而叫冲突。

对比原则:如果两个项不完全相同,就应当使之不同,而且应当使截然不同。

采用对比的方式:字体、线条粗细、冷暖色、平滑材质与粗糙材质、水平与垂直等等

第六章  复习

不要害怕在设计(或生活中留空白),这能让你的眼镜稍作休息、

不要害怕设计是不对称的,使用非居中的格式,不居中往往能是效果更强烈。

不要害怕吧单词设计的非常大或者非常小,在合适的场合都是可以的。

下面的例子一次运用各原则进行设计。

最初的设计

这是一个设计非常乏味的报告封面,使用了居中,信息凌乱。

运用亲密性设计后的报告封面

将标题和子标题相互靠近,作者署名和日期相互靠近,现在就有了明确的信息单元,现在看得很清楚。

运用对齐设计后的报告封面

尽管作者的署名和标题距离很远,但是经过右对齐后,在视觉上产生了某种联系,而且提供了一种更精美的外观。

经过对比设计后的报告封面

标题和署名的字体某些属性得到重复,这会加强他们的联系。

第七章  颜色运用

色轮的基础颜色是黄、红、蓝3种颜色。这三种颜色称为三原色。这是因为这三种颜色是无法创建的,也就是说,没有办法用其他颜色合成这三种颜色的纯色。

三色轮:

不断将空白两边的颜色等量混合得到的颜色填充,得到这样的一个三色轮。

互补:色轮相对位置的颜色为互补色,由于他们非常独立,所以最佳搭配是一种作为主色,另一种用于强调。

互补色

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

三色组

分裂互补三色组:从色轮的一边选择一种颜色,再从该颜色的互补色两侧选取两种颜色,形成分裂互补三色组。

分裂互补三色组

类似色:由色轮上彼此相邻的两种或者三种颜色组成。因为都有相同的基础色,所以形成了一个协调的组合。用不同的亮色和暗色组合一组类似色,效果非常好。

类似色

暗色和亮色

刚在讲的色轮只涉及“色调”,也就是纯色。还可以向不同的色调加黑或者加白。

#纯色就是色调

#向色调增黑构成暗色

#像色调增白构成亮色

增加了亮色和暗色的色轮

单色

单色组合是由一种色调及其相应的多种亮色和暗色组成的。比如黑白照片,都是由黑色及其多种亮色和暗色组成,而且形成的效果也非常美。

暖色和冷色

颜色有暖色(带有红色或者黄色)和冷色之分(带有蓝色),设计中,可以增加一些红色或黄色“z增温”,另外,可以加入蓝色“降温”。记住:暖色是趋于前进,冷色趋于后退。暖色不需要过多的处理就能产生效果,比如黄色、红色能立马映入你的眼帘,所以在暖色和冷色搭配中,要少用暖色。因为冷色是趋于后退的,所有要使用更多的暖色才能产生效果。

第八章 更多提示与技巧

在建立标识性包装时,最重要的特性之一就是要遵循重复原则:每一件作品中都必须有多个LOGO

在web设计中要注意的问题:不要让用户在页面上使用滚动条来查看导航链接。

不要让文本紧挨浏览器的左边界。

不要对文本或图片链接使用蓝色,这绝对是业余水平。

不要把文本放在有边框的粗笨表单元格中。

正文不要使用粗体,也不要占用整个页面的宽度。

不要使用荧光背景色,更不要使用荧光字体。

不要让访问这移动滚动条。页面最大宽度不要超过800像素。

保证录入页面和主页在800像素宽600像素高的范围内。

在一个好的web设计中,最重要的是重复清晰。在网站设计中,要保证不要让用户去寻找网站的导航系统,要明确在哪个位置,还要提示是否已经跳转了页面。

在网站上,应该在每个页面重复一些同样的视觉元素,这样才能让用户知道他还在你的网站中,还可以提供统一性和连续性。另外,用户应当在每个页面的相同的位置,同样的顺序找到有同样图片的导航。

相关文章

  • 《写给大家看的设计书》生活就要设计

    《写给大家看的设计书》 ​ 《写给大家看的设计书》一书作者为世界著名设计师、技术专家Robin Williams,...

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

    内容简介: 《写给大家看的设计书》出自一位世界级设计师之手。复杂的设计原理在《写给大家看的设计书》中凝炼为亲密性、...

  • 设计 | 写给大家看的设计书

    Robin Williams,世界著名设计师、技术专家和畅销书作家。通过写书和授课, 她已经影响了整整一代数字设计...

  • 写给大家看的设计书读书笔记之对齐

    写给大家看的设计书读书摘要 最近因为工作关系,需要了解下UI/UE,查阅下资料,这本<写给大家看的设计书>[htt...

  • 写给大家看的设计书

    这本书围绕亲密性、对齐、重复、对比这四个原则,反复地讲述灵活地运用这些原则能够带来多大的改变和亲眼可见的好处。作...

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

    亲密性 1.相关的项目组织在一起 2.物理位置的接近意味着存在关联 3.亲密性(即紧密性)意味着存在关联 对齐 1...

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

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

    一、概述 先上这本书的豆瓣基本信息给大家?《写个大家看的设计书》 乔帮主认为,审美应该作为一门学科,像历史,艺术,...

  • 写给大家看的设计书

    第一章 约书亚树 这一章从一般意义上对四大要素进行了解释,这四大要素分别是: 1)对比 对比的基本思想是,要避免页...

  • 写给大家看的设计书

    4大基本原则 1. 亲密性 (Proximity) 根本目的:实现组织性 如果某些元素在理解上存在关联,或者相互之...

网友评论

      本文标题:写给大家看的设计书

      本文链接:https://www.haomeiwen.com/subject/zlcwkxtx.html