以前做设计总觉得配色是最难的今天看了这篇网页配色文章终于有启发了

Author: Chris Song

前言


上两期,素马文化部长Chris Song分别详细讲解了做设计时如何进行页面布局设计,如果进行排版设计更加能打动你的用户。更早的时候,我们还有过几期是解说如何对中文汉字和英文进行字体设计的。这一期,我将重点给大家介绍如何进行色彩搭配。


按照素马内部的俗语,做网站设计,再高端的概念,再大气的视觉,化解成设计元素,无非是版式加配图。也只有版式和配图才能把观念和战略意图落地。好了,今天我们开始好色起来了!~


人们的切身体验表明,色彩对人们的心理活动有着重要影响,特别是和情绪有非常密切的关系。


人的第一感觉就是视觉,而对视觉影响最大的则是色彩。人的行为之所以受到色彩的影响,是因人的行为很多时候容易受情绪的支配。颜色之所以能影响人的精神状态和心绪,在于颜色源于大自然的先天的色彩。


随着社会的发展,影响人们对颜色感觉联想的物质越来越多,人们对于颜色的感觉也越来越复杂。国外科学家研究发现,在红光的照射下,人们的听觉感受性下降,握力增加。


粉红色象征健康,是美国人常用的颜色,也是女性最喜欢的色彩,具有放松和安抚情绪的效果。与红色相反,绿色则可以提高人的听觉感受性,有利于思考的集中,提高工作效率消除疲劳。


但是在精神病院里单调的颜色,特别是深绿色,容易引起精神病人的幻觉和妄想。客观而理智的人,对色彩只注意到它是否鲜明等,不杂有情感成分,那么这类人的情绪受色彩影响就小。而情感丰富的人,比如一些富于联想性格的女性,她们看见颜色常常会想到与之有关联的事情,这类人的情绪就易受到色彩的影响(比如买买买......)。还有一些人看颜色,都像看人一样各有其特殊的性格,有的颜色是和善的,有的是勇敢或狡猾的。


不同年龄的人对于色彩常有不同喜好,婴儿时期对于颜色的偏好是由于生理作用,年龄渐长,联想作用便逐渐加大。不同地域、不同民族的人,对颜色的喜好及感受性也大不相同,这在他们的绘画和服装上都可反映出来。另外随着社会的发展,影响流行色的因素也越来越多,比如人们受到工业污染困扰,因而开始向往大自然的颜色的人越来越多。

表现大自然的色彩如“天空色”、“海蓝色”、“沙漠色”、“森林色”等等。


设计、生活中的色彩学,学问也是讲不完。人们的颜色感觉容易引起联觉,因此颜色容易对人的心理产生,这样或那样的影响,如冷暖、远近、轻重等。颜色的冷暖更多是来自人对光的体验,颜色的冷暖,在程度上存在着差别,这些差别在人们的心里,决定于人们对它们所联系的具有同样颜色的实物的印象,或者受社会文化和个人理解的影响。


颜色的远近感(进退感)则与颜色的深浅有关,一般来说颜色越深给人的感觉越近,这也是取决于人们的生活经验。同时暖色能给人以向前方突出的感觉,被称为进色,冷色向后方退入,被称为退色。用冷色色的墙壁涂料,可以使狭小的房间在感觉上变大,暖色则会使宽大的房间在感觉上变小。颜色的深浅还能给人以轻重的感觉,浅色让人感到轻些。这是由颜色对神经的刺激度不同,对精神的压迫感不同引起的。


下面我们上几张跟色彩相关的图片,刺激一下大家的眼球。






















看完这些照片及提取出来的配色,“色彩,这是一种多么深刻而神秘的语言啊!”的确,不同的色调能够调动不同的情绪和反映,能够影响用户对于品牌的感知。简单说来,色彩可以造就不同的设计。与此同时,研究表明,色彩能够强化品牌认知度(高达80%),加深用户印象,让品牌的设计和文本在同类中脱颖而出。


今天我们一起来分享学习一下色彩选取的实用技巧,让你也可以轻松挑选最佳的色彩组合。


第一招:灵感捕捉


有一个很厉害的女设计师,她是这样建议的:“我常常通过漂亮的照片来获取斑斓绚烂的配色方案,取色的时候直接通过PS或者AI就可以。图片是非常不错的配色来源,不过前提条件是你选取的图片一定要有足够的凝聚力。”




所以,如果真的有色彩让你特别喜欢的照片,不妨直接借助它来制作一个好用而高效的配色方案。诸如 Photocopa 这样的工具会让这个过程更快捷,你所需要做的就是上传照片,然后探索可能的方案。


第二招:用好你的色轮


艺术家Marc Chagall 曾经说过一句被广泛引用的话:“所有的色彩都是隔壁色彩的朋友,也是相反位置色彩的爱人。”其实这句话说的就是色轮。



当使用水彩绘制花朵的时候,展现阴影最好的方式是使用色轮上相邻的色彩来绘制。



在Cindy的作品中,浅蓝和深蓝、紫色相邻,这一连串的色彩使用,渲染出了深度。色轮的使用技巧非常之广,色彩之间的关系是如此的清晰而富有规律,你可以轻松运用在不同的场合,创造出许多独特的组合。


如果你对此并不了解,也不用担心,网上有大把的相关工具帮你搞定色轮的使用。



第三招:向室内设计借灵感


不同的设计领域,在处理色彩上有着相同的经验。在室内设计领域,设计师需要使用纹理、物体和色彩来调和空间。


室内设计的许多设计规则运用在平面设计上非常靠谱,比如用色,60%的主色调、30%的辅助色、10%的强调色,这样的配色比例就非常不错。如果你需要引入第四种色彩,最好从辅助色当中分出一部分来。



其实许多领域当中知识和规律都是相通的,在不同的科学和艺术领域中借鉴规律并非是扯淡。所以,建筑学规律运用到平面设计中来,一点违和感都没有。



第四招:保存好设计


每当我看到漂亮的图片和配色不错的照片的时候,我会截图并保存下来。当我需要寻求配色方案的时候,我会在图片库当中寻求灵感,总能找到符符合需求的方案。在这里我还是要再啰嗦一下,

作为一个优秀设计师,看到好的网页,图片,配色方案,策划方案,奇特场景设计,字体等等,都应该及时保存下来,并分类好。然后我们很多设计师往往都只是把好的网页收藏起来,更好一点的则

截图截屏保存下来,但却很少进行定期的归类存档,也就是仅仅过把瘾而已,没有进行后期的进一步复习和归纳,这是非常不利于紧急时刻找灵感的。



Vanilla Frosting 是 Nicky商店中卖得最好的字体,它的配色和设计灵感就是来自于蛋糕。这也就是说,你的配色和设计灵感可以来自于许多不同的地方,不要给自己设限。



你可能已经很熟悉Pinterest和花瓣这样的网站了,这些灵感网站不仅能浏览,还能保存许多数字化的设计作品用作灵感来源。那么物理实体怎么办呢?


《Steal Like An Artist》中提到过一种方案:用文件夹和笔记本将你看到的杂志、传单等你觉得漂亮的印刷品等搜集起来,创造你自己的色卡和配色方案!


第四招:从自然取色


我们对于自然的色彩有着天然的亲和。如果你打算从大自然借色彩,还是有一些地方需要注意的。自然的色彩里,有着无限的色彩组合。每一片叶子和没一个水果都有着令人惊艳的色彩,这些自然的东西能给人灵感。



在这些富有水彩画质感的作品中,我们不难看出他的灵感来源:温暖的火红色,日落般绚烂的色彩,鲜艳的森林绿,充满生命力。


你可以轻松在网上找到别人的设计和方案,但是只有你从自然获取到的色彩,才是属于你自己的。



第五招:专注于3到4种色彩


除非你是要设计一套奇花无比的“彩虹系”的作品,那么尽量避免色彩使用过量。将整个设计的色彩控制在三到四个,会让整体看起来清爽而不会太过。如果需要超过三个色彩,尽量在现有色彩中加入黑白灰创造同色系色彩。



这个案例中,设计师使用了Marty字体,色彩上也坚持了他的三色原则,只使用了粉色、黑色和绿色。


所以,如果你想坚持自己的创意和设计,但是又感觉还有缺陷存在,不妨看看是不是配色方案用色过多。记住,最佳的配色方案是三种色彩。



第六招:根据主题来匹配色彩


想想看,你的设计到底是针对的什么主题。是关于运动、时尚、美容还是商务?决定了领域之后,你需要考虑的是与之相关的情绪是怎样的。这应该是一个可爱的时尚的宣传单,还是一个积极向上的体育海报?它应该是女性化的,还应该是优雅而开朗的?


有设计大师是这样的建议的:“你应该线构思出一个粗略的颜色主题,然后继续打磨细节。比如,你需要一个浪漫的紫色,或者可爱的粉红色。”



在这个作品中,设计师就采用了相对朴实的绿色、浅橙色和复古红。


仔细看看周围的类似的图片、设计和创意作品,他们用了什么色调、传达了什么情绪,如果你要借鉴的话,两者之间有什么区别,要注意什么细节,又该怎么使用。


另外一个不错的选择是自己钻研色彩理论。研读一下色彩理论和色彩心理学,了解色彩之间的关系、色彩对于用户心理的影响。不过,请记住:选择那些最有效的色彩!


总结


色彩可以成就设计,也可以毁掉设计。它可以带来美丽与平和,也可以创造尖锐的效果,营造恐怖的氛围,而这些都取决于你,这些效果都最终归结于你对于色调的选取是否认真,都源自于你对于设计最初的想法。


无论你的配色的灵感是源自于其他的作品,还是得自于天然,如果这是一套靠谱的方案,它会有助于设计。那么为何不多加探索,让你的设计拥有更强大的生命力呢?


相关阅读