配色之道 - 大厂设计师都在使用的3个配色方法

配色一直以来就是设计圈内老生常谈的事,一款优秀的产品离不开合理的色彩搭配,不同色彩给人不同的含义。因此,色彩在设计中重要非常重要的元素,针对不同目标人群采用不同的色彩。


色彩传递信息的速度是非常快的,在进入眼球的瞬间就可以在人的脑海中形成一种印象,不同的颜色传递出的表现力与情感也是不同的。就如零售行业所研究“七秒钟定律”:人们在挑选商品和服务时 ,只需要 7 秒钟就可以确定是否感兴趣,而在这短暂的 7 秒钟内,色彩的作用占到了 67%。


在进行配色实战之前,首先需求了解色彩基本属性,才能在配色之路上走的更远更踏实。


一、色彩的基本属性

 

色彩由色相、饱和度、明度三要素构成。


色相

色相是色彩的首要特征,是区别各种不同色彩的最准确的的标准。事实上任何黑白灰以外的颜色都有色相的属性,而色相也是由原色、间色和复色来构成。

不同的色相具备不同的含义,所以在选择色相之前,我们需要了解不同色相的含义,如下图:

色相大体上可以分为系冷色系和暖色两个系列,紫色与绿色称为中间色,他们本身不能单独营造冷暖的印象



在你的配色能力还没达到专家级时,色相应尽量少一些,最好是将色相控制3种之内。因为在作品色相越多,视觉越花哨。用户对它的理解也会越加困难,同时色相越多,产生的噪点也越多,会分散用户的注意力。

比如下面这几组作品,色相就控制的很合理,除了黄色跟黑色及过渡的灰色,很难再看到其它颜色的影子,看起来非常的舒适。



饱和度

饱和度是指色彩的鲜艳程度,也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越高;消色成分越大,饱和度越低。


打开HSB,我们可以发现色彩有3个梯度,其中色相为(H)、饱和度为(S)、明度为(B)饱和度数值越大,色彩越鲜艳。

 平时在在使用吸色管时,常会将选择区分成同等的9份,接下来我们分析一下这支付宝、闲鱼这两款产品,看看它们在这个选择区中的色彩分布情况:


如上图,可以发现平时所使用的APP,我们可以发现大量互联网产品的主色和重要辅助色都会往右上角聚集。


但是有时并不一定是选择色彩饱和度数值越大就越好,需要根据具体运用场景来选择。比如这几组天王表的广告图,采用的就是低饱和的颜色,看着就很高级,颜色温和很舒适。


明度

色彩色明亮程度,在色彩中明度最高的是白色,明度最低的是黑色。明度不仅取决于物体照明程度,还取决于物体表现的反射系数。


色彩的颜色明度进阶能突出色彩的层次关系,让整个页面更具备空间感。我们可以发现任何一份作品的色彩都主次之分,有了主次之分,色彩的层次关系就非常明显了。


二、UI设计中的配色选择


在众多的 UI 设计规范中,色彩部分的介绍,都必然包含三种类型,分别是:

主色:应用的核心色彩,品牌色

辅色:丰富页面视觉和传达效果的次要颜色

中性:没有色相的文字、背景用色

主色的选择

主色是一个产品的最核心的色彩,品牌的象征色,所以确定主色其实很多简单,它的要点在于 —— 产品的定位是什么、目标用户是哪些人群、想让用户感受到哪种情绪,然后通过情绪关联一个大致的色彩范围,再进行微调就可以了。

上面提到,目前市场主流的产品品牌升级后,可以发现大多数产品的主色的饱和度都位于选择去的右上角。强化主色饱和度,增加色彩的对比性与识别度。


辅色的选择

 

辅助色是丰富应用中的次要色彩,它会包含一到若干个和主色不同的色彩,除了品牌传达外,具有更强的实用性


以主体色 H(色相)为基础,不断地递增、递减 15,在 0-360 之间可以得出 24 个颜色,也就是将 360° 色环分割为 24 份,(24份在360°色环上,每一个色相的角度为15°),最终得到下图24色。


邻近色:色相差值 15° 以内的颜色为邻近色;

类似色:色相差值 30° 以内的颜色为类似色;使用色相相近的颜色,页面元素不会相互冲突,更加协调有质感。

互补色:色相差值 180° 的颜色为互补色。选择使用互补色,最佳搭配是一种作为主色,另一种用于强调。它们有着非常强烈的对比度,用在需要特别强调某个元素时会非常有效。


辅助色需要注意两个条件:

1、和品牌色有明显区分:避免所选辅助色感官上给用户视觉区别与品牌色差距不大,传递的调性太过一致;

2、不能过于突兀:根据色彩原理,互补色是最能与品牌色本色产生视觉感官对比的颜色。

中性色的选择

中性色,是页面中文字、背景用到的颜色,它们承担起最基本的层次表现、便于阅读的重任。主色辅助色决定了界面视觉是否出彩,而中性色的应用直接决定了页面能不能正常使用。


中性色承担起了最基本的层次表现,所有根据色彩中的B(明度)值,来制定一个由深到浅的梯度,中性色的配置,就是制定一个由深到浅的灰度阶梯,应用在对应权重的元素上,色彩轻重的主要判断依据是 HSB 中的 B(明度) 值。

中性色虽然指的是无个性,但并不是只能用纯灰色,常见的一种做法,就是为中性色添加适量的蓝色饱和度,提升观看体验(满足 RGB 的某种特性)。



三、如何提升配色能力

 

上面我们已经提到了色彩的基本性质,以及如何进行配色,接下我们就来谈谈如何提升自己的配色能力。

1、吸色

这个是最简单,也是最实用的一个方法。大家刚开始入门的时,可以找一些优秀的竞品,吸取他们的色彩。不要觉得这样做是一件比较低级办法,很多配色专家也是从这一步走过来的。


平时我们在练习时,也可以找一些优秀作品作参考,同时也可以整理成色板,下次也方便使用。如下图



当你吸多了后,慢慢摸索,就会总结出一些客观规律的。形成一套属于自己的配色规范。



2、多收藏优秀色板

大家平时可以自己去收藏一些色板的图片存在本地,这样没有配色灵感的时候,就直接去打开文件夹找找色板,说不定会带来新的启发。

比如我收藏的这几组一些色板,日常就存在电脑的文件夹里,有需要就可以多打开看看。

总结 

配色常常从确定主色开始,根据行业类型视觉诉求的需要,选择一种居于支配的色彩作为主调色彩,构成画面的整体色彩倾向。然后选择辅色,添加点缀色,最后按照色彩组合的原则完成设计中的需求。


毕竟以上的方式只是给大家提供了一个理性科学的方法,如果想更加优秀,还需要进一步深入地去学习色彩理论知识,多看优秀的配色作品提升审美,总之要多看、多实践和多思考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 我们从小都能熟练地区分颜色,但为什么当我们需要运用色彩进行UI设计的时侯,却往往发现很难恰到好处地运用色彩,作出那...
    宁太阳阅读 2,244评论 0 3
  • 渐变的面目拼图要我怎么拼? 我是疲乏了还是投降了? 不是不允许自己坠落, 我没有滴水不进的保护膜。 就是害怕变得面...
    闷热当乘凉阅读 4,181评论 0 13
  • 夜莺2517阅读 127,659评论 1 9
  • 版本:ios 1.2.1 亮点: 1.app角标可以实时更新天气温度或选择空气质量,建议处女座就不要选了,不然老想...
    我就是沉沉阅读 6,786评论 1 6
  • 我是一名过去式的高三狗,很可悲,在这三年里我没有恋爱,看着同龄的小伙伴们一对儿一对儿的,我的心不好受。怎么说呢,高...
    小娘纸阅读 3,340评论 4 7