<
如何快速提高自己的设计水平
>
上一篇

React 简介
下一篇

jQuery核心用法

第十四天学习(写给大家看的设计书)

  1. 摘要

摘要

优秀的设计

4大基本原则

每个优秀的设计中都应用了这些设计原则。各个原则实际上是相关联的。 

对比(Contrast)

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

重复(Repetition)

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

对齐(Alignment)

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

亲密性(Proximity)

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

上述4个原则的英文首字母缩写为CRAP,是一句不文明用语

亲密性

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

image-20190805144922161

企业名片的布局

企业名片布局是典型的布局

image-20190805150832221

image-20190805150847144

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

就像实际生活中一样,亲密性(即紧密性)意味着存在关联

如果把类似的元素组织为一个单元,马上会带来很多变化。搜线,页面会变得更有条理。其次,你会清楚地知道从哪里开始读信息,而且明白什么时候结束。另外,“空白”(字母以外的空间)也会变得更有组织。

image-20190805152139805

$亲密性的使用很微妙,不过相当重要。布局的时候一定要明确元素和其所属元素是否在一起,留意无关元素$

将类似的项归为一组来建立很近的亲密性时候,有时需要做一些修改,如需要调整文本的大小或字体粗细,或者要改变图片的大小或放置位置,等等。正文(所读内容的主干部分)的字号不一定非得是12磅!期号和新闻简报发行年份等正文的辅助信息,可以占据相当小的位置。

亲密性原则并不是说所有一切都要更靠近,其真正的含义:如果某些元素再理解上存在关联,或者相互之间存在某种关系,那么这些元素再视觉上也应当有关联。除此以外,其它孤立的元素或元素组则不应存在亲密性。位置是否靠近可以体现在元素之间是否存在关系。

image-20190805154928455

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

空白可以表达关系,只要督一眼就能从页面上得到很多信息,所以,我们需要确保读者获得正确的信息。

亲密性小结

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

根本目的

亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单地将相关的元素分在一组建立更近的亲密性,就能自动实现条理性和组织性。

如何实现

微微眯起眼睛,统计眼睛停顿的次数来数一数页面上有多少个元素。如何页面上的项超过3~5个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。

要避免的问题

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

对齐

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

如果页面上的一些项是对齐的,这会得到一个更内聚的单元。

对齐小结

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

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

根本目的

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

如何实现

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

要避免的问题

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

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

重复

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

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

重复小结

设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一并增强整个作品,否则这些部分只是彼此孤立的单元。重复不仅对只有一页的作品很有用,对于多页文档的设计更显重要(对此我们通常称之为保持一致)。

根本目的

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

如何实现

重复可以认为是保持一致性。

要避免的问题

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

例如,如果这位女士想穿黑色晚礼服,配红帽子、红耳环、红口红、红色手提包、红鞋和一件红上衣,重复就太滥了,现在的对比不再有统一的效果,感觉上也让人不太舒服,太多的重复将混淆重点

对比

对比是为页面增加视觉效果的最有效的途径,也是在不同元素之间建立一种有组织的层次结构最有效的方法。要记住一个重要规则:要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。

对比原则指出:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。

对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者、并且制造焦点。

可以采用多种方式产生对比。如大字体与小字体的对比:典雅的旧式体与加粗的无衬线体产生对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比,等等。

如果两个元素虽然不同,但是区别不大,这时候就不是对比了,而是冲突了。

对比小结

在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放着两个不完全相同的元素(比如有两种不同字体,或者有两种不同线宽),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。

对比就像需要修补一处漆记时配漆一样,不能大概地配色,颜色要么配得完全相同,要么就得把整面墙都重漆一遍。

根本目的

对比的根本目的有两个,这两个目的相辅相成,无法分开。一个目的是增强页面的效果,如果一个页面看起来很有意思,往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误地强调重点(即本不该是重点的元素)。

如何实现

可以通过字体选择、线宽、颜色、形状、大小、空间等来增加对比。对比一定要强烈。

要避免的问题

不要犹豫。如果你想形成对比,就加大力度。不要将一种粗钱与一种更粗的线进行对比。不要将棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。如果各个项不完全一样,干脆让它们截然不同

颜色运用

不同凡响的色轮

色轮的基础是黄、红、蓝三种颜色。这些颜色称为三原色,因为这是唯一无法创建的颜色。

互补

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

image-20190806093202118

image-20190806093216236

三色组

彼此等距的三种颜色通常会形成一个让人愉悦的三色组。红色、黄色、蓝色就是一种极其流行的颜色则和,儿童产品通常都采用这种组合。由于这是三基色。

也可以尝试使用绿色、橙色、紫色构成的间色三色组,尽管不那么常用,但出于以上原因,这种组合也让人很舒服。

除了红、黄、蓝构成的基色三色组以外,所有三色组中的三种颜色都有基础色使其相互连接,因此看上去非常协调。

image-20190806093634286

分裂互补三色组

另一种形式的三色组称为分裂互补三色组。从色轮的一边选择一种颜色,再在色轮上找出它对面的互补色,不过并不直接使用这个互补色,而是使用该互补色两侧的颜色。这样得到的组合会有一种更为细致的颜色边界。以下是这组合的两个🌰

image-20190806094117480

类似色

类似色组合由色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色,它们都有相同的基础色,这就形成了一个协调的组合。用不同的亮色和暗色组合一组类似色,效果相当醒目!

image-20190806094451456

暗色和亮色

到目前为止 ,我们使用的基本色轮只涉及纯“色调”,也就是纯色。还可以向不同色调增加黑色或白色,这样能大幅扩展这个色轮。相应地丰富我们的选择。

image-20190806094759350

单色

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

暖色与冷色

颜色往往要么是暖色(这说明其中包含红色或黄色),要么是冷色(说明其中包含蓝色)。可以通过增加一些红色或黄色 将某些颜色”加热”,如灰色或黄褐色。与之相反,也可以对颜色增加不同程度的蓝色对其“降温”

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

由于冷色是后退型的,所以使用(有时则必须使用)更多的冷色才能产生效果或形成有效的对比。

不要让冷暖色太过均衡!一定要充分利用这种视觉现象。

CMYK与RGB,印刷与WEB

要注意两种重要的颜色模型。这是一个非常复杂的内容,本书只提供最简要的解释。

CMYK

CMYK代表Cyan(一种蓝色)、Magenta(一种红/粉红色)、Yellow(黄色)和一个Key色(通常是黑色)。利用这4种墨色,可以打印出成千上万种颜色,正是因为这个原因,这也称为一种“4色处理”。

RGB

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

印刷与Web颜色模型

关于CMYK和RGB需要记住的是:

创建包装或品牌

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

你可能会不由自主地重复某个特点,但当你开始有意地做某件事时,这件事就会看起来很明显。努力从相似点中确立特色。留下你的招牌动作。

Top
Foot