header_v0.7.0

《写给大家看的色彩书2:色彩怎么选,设计怎么做》读书笔记

268天前发布

原创文章 / 多领域 / 观点
三行树 原创,如需商业用途或转载请与三行树联系,谢谢配合。

之前看“一”的时候系统的巩固了自己以往所有的色彩知识,收获很多。继续读“二”之后,才感觉自己对配色方法有了全新的意识。由于看的是电子书,读到最激动的时候很想去买一本纸质书来看,但是搜遍了全网才知道已经绝版了,正版书都要买到两百左右。哎~

      承接第一本的内容,这本书中,梁景红老师主要讲了怎么选择颜色与怎么使用颜色,书中还引入了梁老师自己所经历过的典型案例。相同的案例,不同版本的对比,以及不同案例相似地方的对比,很直观的体现出用对色彩的重要性以及如何理性的使用色彩。以前对色彩一点的感性认识,都得到了理性的解答,真的很值得一读。


本书的主要内容:

第一部分:如何“选”色

chapter1 明确解决色彩问题的核心在哪里

chapter2 色卡是色彩的提炼,色彩设计过程中的必经之路

chapter3从“被色彩利用”到“主动运用色彩”


第二部分:如何“用”色

chapter1 看案例,把色彩关系处理好

chapter2每种色彩在画面中都有它的功能

chapter3 各有不同用途的9种色彩对比

chapter4 浅谈色彩情绪与文化传达

—————————————————————————————————————————————————


第一部分:如何“选”色  

 

chapter1 明确解决色彩问题的核心在哪里

关于配色软件与配色规范

目前有各种各样的配色工具,一种软件可以帮助我们分析图片,可以提供配色参考。有需要的时候可以一试,但是过度的依赖软件,不利于提高自身的色彩感受力、色彩控制能力和色彩辨识能力。

而各种色彩搭配的规范与技巧都是来自于人们对美的普遍认识,有了一些规律性的技巧,还需要根据实际情况来协调。所以最美的配色都是手动设计出来的。


在一个设计中,当选择了一种颜色后,很多人会采取以下三种做法

A借鉴相关色彩中的优秀作品

B根据色卡工具来选择

C使用配色软件进行配色

这些方法最初很受用,但是长此以往,很难形成独特的自我风格,也很难提升自我的色彩能力。

此外,最重要的是,使用这些方法也很难说服自己的客户,很容易被返工。

要解决这些问题,就要让你的“设计”讲得出道理来,让设计作品中的每一色设计元素的安排都是有明确的目的和原因,而不是一味的通过借鉴与感性得来。


视觉更新的案例:

以下的为改版前的OA系统软件界面,可以看出比较保守,画面枯燥

257a58106da8a84a0d304f52da7e.jpg


在界面所欲元素不变、位置不变的前提下改版后的界面如下:

其中设计的理念:

1双主色的使用:这是一家热电供暖企业,选择红色为主色也是不错的选择

其次,大面积的红色会使用过度兴奋,蓝色作为主色之一,既可以延续上一版的风格,也可以缓和界面在视觉上的刺激。

红色和蓝色搭配要避免生硬的结合,这就要注意灰色,白色的使用。

2统一底部图标:在原来的界面中,底部图标零散的排列在很大的面积内,为了化零为整,缩短图标的距离,并在底部背景加灰色。

3邮件区域,添加细节:邮箱区域的使用是比较频繁的,进行稍许的润色,但是即便使用度高,毕竟属于功能区域,不能影响顶部品牌的显示,所以使用低饱高亮的彩色背景,既起到醒目的作用,又可以体现细节,还不至于喧宾夺主。

4顶部区域,用图像在颜色上进行过渡

弧线设计使得画面轻松,有想象力,画面内容使得双主色渐变结合。

5顶部最右边白云是又蓝色的色彩有序联想到天空而来。而使用OA界面的人群为常时间坐在办公室的白领,加入蓝天白云在视觉上增添更多的想象。


444f58106e1aa84a0e282be829d8.jpg




设计师眼中的“色彩”在哪里

不能为没有目标的对象决定色彩。色彩的设计也不是一开始就决定的,而是在设计的目的与信息决定后,依附在设计的形式上的(虽然有的时候色彩就是内容,比如日本前卫主义艺术家草间弥生的彩色圆点就是设计的内容,展现彩色圆点就是设计的目的)。

比如需要设计一个会议室,你并不能一开始就确定这个会议室的颜色,而是需要先确定会议室的类别,是公司员工会议室、展览馆还是服装公司用来走秀的秀场,是小型的会议室还是上百人的大会议室,需要使用多媒体还是对灯光要求比较高,使用的人群是什么样的等等。只有这些目的与信息确定了,才可以考虑以什么样的形式呈现,用什么样的颜色搭配。


关于用“直觉”做设计

在设计开始之前就有朦胧的想法是非常正常的,设计师比其他职业更加敏感,有经验的设计师更是如此,由此产生的作品往往非常的优秀。但这些都是在不断经验积累中升华出的职业的直觉。

而对于刚入门的设计师,这种想法往往并不可靠,需要你虚心的进行理性的学习,不断的增长经验。

“感性”可以理解为设计师的灵魂,是一个设计师区别于其他人的部分,而学习知识的魅力在于:可以学习其他人的“理性”和“经验”,但是学不到他们的“感性”或“直觉”。



chapter2 色卡是色彩的提炼,色彩设计过程中的必经之路

或许你并不常用到色卡,而实际上,色卡作为色彩的提炼,在思维过程中是会以一个不易察觉的步骤出现在你的大脑中。

色卡的来源:来自于对日常相关事务的整体印象

比如夏天的色卡颜色,可以通过夏天的水果,常做的事情,相关的人物,衣着等的颜色来提炼。

色彩倾向:一种颜色色相的饱和度越高,这种颜色的色彩倾向越明显。黑白也是一种色彩倾向,但是不稳定,容易受到有彩色的影响。下图中从右到左,色彩倾向越来越明显。

c74258115a16a84a0e282bc73710.jpg


用关键词概括色彩:不同的颜色对人们都会有不同的心理感受。温暖的感觉,寒冷的感觉等。当你进行设计时,根据关键词来选择对应的颜色,色彩就可以将关键词的情绪传递出去。

具象与抽象:具象色彩感情是联想到的事物,常常用名词表达,如下图红色搭配绿色联想到胡萝卜。

757958115bcaa84a0d304f632169.jpg

具象色彩情感主要由你是否阅读过、了解过这种色彩记忆来决定。这种情感一般由长时间的共同印象积淀出来,很适合商业信息的传播,并且效果也很好。

也有短时间出现的具象色彩情感,比如《阿凡达》流行时期,蓝色常被人联想到这不电影。

多数的色卡参考书更多关注的是抽象色彩情感,抽象色彩感情往往是联想到某种心理印象,比如红色联想到甜的

这种情感有根据个人经验产生,也有根据文化背景产生。常用形容词来表达,应用广泛。这是人类文明发展进程中积累下来的情感,而没有经历过着这种感受,就不能理解这种色彩情感。

运用色彩时,不仅仅是可以利用联想选择适当的颜色,重要的是色彩引起的联想的关键作用,信息传达出去了,比如使用橙色来包装橙汁饮料,要让人们可以轻易联想到这种饮料是橙汁味的,是酸甜的,才算成功。

比如下图左侧的色卡,在德国爱娃.海勒的《色彩的文化》中表达的情感是“遥远”,只有行驶在右侧的高速公路上时才能体会得到,而行驶在中间的公路上,则完全不会有这种联想。

ba5558115e4fa84a0d304fb55028.jpg

在工作过程中创建属于自己的色卡库:在遇到优秀的作品时,使用软件吸取经典的颜色搭配保存下来。这不仅仅是对配色进行分析,也是做调研,对每个案例都进行色彩分析,你就有了自己的色彩资料库。

不要把色彩信息符号化,程式化:比如很多旅游公司使用蓝色,但是并不表示旅游公司只能使用蓝色,比如中国国家地理就是使用红色,也不代表蓝色就是旅游公司,比如在超市里蓝色包装的常常是牙膏。

e88d581160e4a84a0d304fd26f3b.jpg


e7f85811610aa84a0e282b83a334.jpg


           










避免对立的色彩情感出现在一个作品里:色彩关乎情绪,给人最直接的感受,越简单,越明确,找出传播的主要情感和次要情感,避免把两个相反的情感放在同等重要的位置上。

d590581161e5a84a0d304f1c6a7b.jpg


提高色彩敏感度,应对相近的色彩情感:表达意思相近的词语,颜色表达却不同,如“清凉的”和“清爽的”。前者适合表达外界给人的感受,以冷色系为主,后者更多是自身感受,可以增加一些暖色作为搭配。

下图中,纯蓝的冰块废人冰凉的感受,而饮料中含有的冰块则给人清爽的感受。

4ec858116e01a84a0d304f85a8be.jpg

090e58116e1ea84a0d304f29dd70.jpg














chapter3从“被色彩利用”到“主动运用色彩”

被色彩利用,也就是盲目的使用色彩,相信色彩,没有理性的考虑原因。

而主动的运用色彩,就是理性的分析,找出合理的色彩的过程:

1找出关键点,具体是什么样的设计目的

2找出情绪关键词。比如产品是年轻化的,而年轻并不是情绪关键词,需要进一步拆分为轻松的,不枯燥的,这这样就可以轻松的选出有活力,令人振奋的色彩。

比如魔术,可以拆分出变换莫测的,多变的情绪关键词。

比如大气,任何颜色都可以给人大气的感觉,所以不要改变板式,简化颜色的使用,色相越少越大气。

比如跑步,可以拆分成轻松的,蓝色,健康,明色色调等等

f7ac581170b0a84a0e282b276b37.jpg


————————————————————————————————


第二部分:如何“用”色


chapter1 看案例,把色彩关系处理好

在一个画面里,色彩与色彩之间是有一种呼应和对立关系的,增加或者删除一种颜色都会改变整个画面的效果

这关系到色彩的层次感、冷暖关系、位置关系和色彩对比等方面。在这些关系中我们将讨论“色彩平衡称”的内容。


视觉更新的案例后续:

在之前的OA系统案例中,进行新的改版,可以看出作者的创作历程

在图1 中,先是创作出顶部“退出”功能区,而不是直观的规划布局。这时是一种混沌的状态,连标识“品牌区域”都没有规划

图2 中,顶部的轮廓清晰了,但仍旧很不明确

图3到图5中,在不断增加内容,调整整体画面的色彩平衡感,整体没有完成,却在思考细节

如果事先规划好整体布局,再进行细节的创作,会更加的顺利

ec48581172aea84a0d304f09396b.jpg


723458117334a84a0d304f6f75bf.jpg


设计重点总结:

1品牌标识区域的主色仍然选择延续红色,简单的色彩更加可以和周围融合,也更加的醒目。

2辅助色虽然没有主色显眼,但是在平衡中的作用远大于主色。从而色彩量左右平衡,最终的颜色在中上方,

3如果两色的造型对称,很容易完成这样的平衡,但页面的内容并不是左右平衡的,左侧内容明显多于右侧,所以就需要在右侧底部增加颜色深一点而面积不需要过大的区域来填补这样的不平衡。下图中,去掉右下角的色块可以明显感觉到画面的不平衡感。而且也只有这样的高饱和度的颜色,才足以保持平衡。

4右下角的色块中加入两色的小图标,点亮了整块区域

5设置代理人处使用了绿色进行点缀,与红色形成对比了。而其他大多数的图标都使用橙黄色的暖色调,呼应主色。

6品牌标识的底色快使用倾斜的造型,使得画面增添生动活泼的气氛

524058119180a84a0d304f441da4.jpg

一个作品中,只要使用两组色彩倾向明显的色彩就可以撑起一个成功的作品。蓝色和红色色彩最为明显,同时红色色彩倾向更加具体,更加稳定。蓝色,深浅不一,但很色相清楚。


而在同一个企业的另外一个EIP系统,则使用了双主色设计,蓝色与红色正面对抗,色彩量对抗也更加纯粹,视觉更加干净、大气。辅助色使用力量“薄弱”的淡灰色,不会对整体色彩产生影响。

53a358119444a84a0e282babd96a.jpg


后期将两个系统合并的设计前,企业方现行设计了一个版本如下:

这个界面粗略看来,已经将两个系统的功能放在一起,但是视觉上十分凌乱,并没有将原版两者的优点结合。虽然这些功能都很重要,但是仍然可以分出主次,更加和谐的设计在一起。

126358119de0a84a0e282bc327bd.jpg


根据以上分析,进行重新设计

1新的系统,考虑到要保留EIP的大气,取消斜线的设计,但在顶部增加一条弧线,给横平竖直的格局规划带来一丝活泼与幽默、飞扬与轻松感。

2考虑到常用的“收文”功能区域,保留原来的位置不变,而文件管理则放在左上角,位置虽然变化,但是图标不变,同时比较醒目,使用者会很容易熟悉。

3企业标语并非一定要放在顶部,否则会影响品牌区域的视觉感受,放在左下角空白处,不经醒目,也可以与右边的色彩进行抗衡。

4而“网络缴费”区域虽然不常用,但是是EIP系统象征的功能,放置品牌功能下方,为了增加画面暖色,底部链接设置为暖灰色,增加画面协调感。同时在图标中加入一些暖色点缀色提亮。

89225811b8b3a84a0d304f95d4ea.jpg



从以上的案例中,可以看出,“色彩平衡称”时刻在起作用。每一个作品画面上色彩的感受都需要达到良好的平衡状态,在视觉上才会稳定,协调。


chapter2每种色彩在画面中都有它的功能

从外部探讨色彩通常是主色、辅助色、点缀色等功能。从内部讨论色彩则要分清主从,轻重。

主角是谁,怎么烘托主角,配角怎么起作用等等

每种颜色的功效是什么,之配色,融合色,强调色,添加色……


“主角色”

色彩在一个作品中到底有什么作用呢?

下图中FOSCARINI广告,红色是这个作品的主角(企业品牌,广告语和网址等信息),就如案例中提到的“品牌区域”,绿色是画面的主角,主角文字红色与画面主角绿色是对比色关系,强烈的反差更显画面精致,主题突出,两者相辅相成。视线先被红色所在的主角吸引,内心才会安定下来,并且有精力放松观察整个画面。

画面如果没有主角或者主角色不突出(右图),就会给人感觉混沌无序,立意不清。

031b5811a28aa84a0e282b3fc8f8.jpg






















这就是颜色起的作用,颜色附着在对象之上,当颜色的作用于对象需求一致时,作品就成功了。


“主角色”并不是作品中面积最大的颜色,远观可能并不清楚,但是它传递的是这幅作品的核心,甚至是作品存在的原因。观察作品时,视线会不自觉的落在主角色上,找不到主角时,就无法开始阅读作品。



如何提升主角色的魅力?

下面三幅图中:图1的主角色与画面的主角反差最大,大小适中,一眼就可以看到产品的位置,主题突出,明确

图2 主角色与画面主角的颜色一致,画面颜色混杂在一起,虽然增大了产品的体积,但是仍然不够清晰。

图3 主角色占据的空间过小,但广告内容很吸引顾客,会让人不自主的寻找产品。

ff4f5811a4b6a84a0d304f436096.jpg


而图3 产品过于分散,主角色不够突出。改成如下板式,或许更加容易突出主角色

71025811a5eaa84a0e282bbb7f2a.jpg

“主角”的配色方式

1增加面积,烘托中心

7d245811a659a84a0d304ffa527e.jpg

2制造亮点

9e6d5811a68ca84a0e282bc4c3b2.jpg

3强化对比关系

强化主角本身的色彩,或者增加各种对比色,以来开主角和配角之间的距离


4让主角的颜色更加鲜艳

增加主角饱和度,明亮度

3c335811a718a84a0e282b33316c.jpg

5当主角是浅色,弱化其他颜色

3ee45811a773a84a0e282be5b015.jpg

6把主角放置在视觉中心位置

e28b5811a7a2a84a0e282bd5213b.jpg



“配角”色:

“配角”色是为了烘托主角、支持主角儿存在的,专门被设置在主角的近旁,使得主角突出。

图中青椒露出的淡黄色种子使得绿色如此的生动,若没有这一抹淡黄色,整个作品都会黯然失色。

e4dc5811a80fa84a0e282b7caa7f.jpg


配角”设置的方式:

1选择对比强烈的配角色

70885811a8aba84a0e282bb1d36a.jpg

2配角面积越小,效果越好

面积越大,纯度越高,越会削弱主角的地位

a3755811a8d1a84a0d304fd5f528.jpg




支配色:背景色

背景色可以掌控整个画面的色彩感觉,不同的背景色,带来不同的视觉感受

f3555811a949a84a0d304f254de6.jpg


使用支配色的方式

1面积不是问题,面积小,只要成功包围了主体,就可以成功支配整个画面

8f5f5811a9a0a84a0d304f08253f.jpg

2同样支配色与色彩的强弱也没有关系


80655811a9cea84a0d304f633b54.jpg



融合色:缓和游离的气氛

加入了某个颜色后,画面更加统一,更出彩,这就是融合色。

图中文字的背景紫色,与小女孩的衣服,产品的包装都形成了很好的呼应,这就是融合色在整个画面中的作用。

0c485811aa29a84a0e282bb86c84.jpg


如何使用融合色:

加入相近的统一色相的颜色,能够控制主角色,并融合整体

99185811aadfa84a0e282b74fd7b.jpg




强调色:画面更生动

类似于之前说过的点缀色,它本身有依附的物体并不重要,而体现这种功能的色彩就可以使得画面变得生动

运用色彩呼应,强化品牌

当传播一种信息时,我们就使用这种信息包含的色彩来表达这一概念

重复产品的颜色

fd4d5811ab54a84a0d304f3ed0fe.jpg


incase广告中,天蓝色的拉锁

ec855811abaea84a0d304f40f3ea.jpg


让强调色效果更好:

1面积越好,越好

22085811aca0a84a0e282ba13eda.jpg

2对比色、色彩倾向越强烈,越好

382e5811acc3a84a0d304f4f069e.jpg



区分强调色、添加色、平衡色

强调色:为了强调信息,同时调节页面的气氛,更丰富、更有引导

添加色,这个颜色虽然也强调了一定的信息,但更多的是为了画面更加有力量

平衡色:为了平衡画面的稳定感,和谐统一。去掉这个颜色,画面会有失衡感


多色设计:

虽然使用的色彩够多,但是整个画面仍然有主有次,有明显的色彩倾向感

多色设计的方法:

1重新排列,分离配色

73775811adb9a84a0d304f705241.jpg

2拆开相邻色,释放独立感

fc195811adefa84a0d304f3f164b.jpg

3加入对比色,分离配色

59645811ae16a84a0d304ffa50f3.jpg

4为彩虹色增加稳定的颜色

24ef5811ae3ca84a0d304ffb74ec.jpg

5减少色相,增加层次

a0775811ae68a84a0d304f2aa4ce.jpg



chapter3 各有不同用途的9种色彩对比


上下分布——找准色彩重心

06c15811aee8a84a0d304f64756a.jpg

图1低重心配色,稳定大气

图2、3高重心配色,活泼、智慧


左右分布——对决型色彩设计

6a505811af41a84a0e282bff88ed.jpg

对抗感与图形规则与否无关。

在两个部分中,有色彩呼应,会使得减弱对抗性

饱和度高,对抗性强,饱和度低,对抗性弱


中兴型色彩与散开型色彩:

散开型充满自由、欢乐、舒适感;中心型表现安定、沉着、传统

a5f25811afeba84a0d304fb05a84.jpg


低色彩量与高色彩量

bc6e5811b038a84a0d304f0fed26.jpg

高色彩量接近黑色,,体现健康,积极的感觉;低色彩量接近白色,体现优雅而高档的感觉

色彩面积大,色彩量高,面积小,色彩量低

两种色彩量的对抗关系结合,会呈现优雅和健康的感觉,常用在食品中

结合两种色彩量的方式:

4cb85811b0eca84a0d304fc40a4b.jpg

面积差大,给人高色彩量更加尖锐,常用于强调;面积差小,给人感觉稳定


色彩的韵律感与秩序感:彩虹

6ab15811b163a84a0e282bc97569.jpg

如何制造秩序感:从分离的方式变化为渐变融合的方式

1按照彩虹的顺序

2给色彩添加统一的底色

3使用纹理、花样

ef695811b1f3a84a0e282bf64e7e.jpg



色彩的领地感:留白

e1d15811b21da84a0e282b6a460c.jpg


双对比色十字形配色:追求稳定的配色方式(梵高配色法)

07ea5811b275a84a0d304fb582a3.jpg


双色调对比色配色:

12255811b2a0a84a0d304f4a684e.jpg



chapter4 浅谈色彩情绪与文化传达

大海只能用蓝色吗?

突破色彩的固有形象:一种给人固定影响的颜色,就是色彩的固有形象。正如西瓜是绿色的,出现黄色皮的西瓜,则不太让大众消费者接受。

1而与固有的色彩形象不同的产品,往往给人稀有的,昂贵的感觉。

2与固有形象不同的色彩,也常常出现在艺术中。漫画家笔下的大海也可以根据需要设计成任何颜色

3把握好尺度的突破固有形象,也可以成为有力的营销手段(彩色自行车)

4不同的文化,中固有色彩印象不同

所以大海是不是蓝色的,需要根据不同的场合,不同的目的来决定


品味冷暖

除了固有的冷暖色,在蓝色中加入黄色,会使蓝色偏湖蓝,偏暖(左侧圆点)

加入紫色,则会偏深蓝,偏冷(右侧圆点)

这两种蓝在于暖色调对比中,差异更加明显

8d1b5811b46aa84a0d304f577f36.jpg


色彩与图形的关系:色彩的固有形象往往会赋予图形更多的意义

下图中蓝色低上的图形给人以轮船大海的联想,而右侧绿色低的图形则不会引起人们这样的联想。

8efb5811b54ea84a0e282bbd6134.jpg




最后我个人的一点点总结:

对于强调色,点缀色,主色,辅助色,融合色,背景色等等,名称只是在一类优秀作品中,总结出的一种规律,往不同的方向思考,使用不同的思维方式,会得出不同名称的搭配。起初你可能觉得,这有一点乱,因为这是把不同维度的标尺放在一起,非常容易搞混。但是,时间久了,分析的作品多了,你可能就会发现,关于配色,重要的不是一种色彩所在画面中的名称,而是这种色彩在画面中的作用,在视觉上的引导功能。也许这个时候,你就会发现,自己到达了一种通过重重理性分析所到达的感性的配色的高度。

4

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功