专栏名称: 超级美工
中国电商设计第一公众号!定期展示最新电商设计案例,发布最热淘宝设计教程。关爱电商设计师群体。美工路上我们温暖相伴!
目录
相关文章推荐
电商头条  ·  雷军封神,小米杀入全球市值100强 ·  昨天  
JP欧洲跨境服务  ·  135个店铺被匿名起诉,这100+版权商标专 ... ·  2 天前  
蛋先生工作室  ·  2025年2月9日鸡蛋收盘价 ·  3 天前  
电商头条  ·  辛巴徒弟蛋蛋摊上大事了,已经被立案调查 ·  3 天前  
51好读  ›  专栏  ›  超级美工

董舵主配色大法终极篇!

超级美工  · 公众号  · 电商  · 2017-09-17 23:07

正文

兄弟们, 姐妹们


我来也!!



各位别来无恙!!



本篇文章是配色大法系列第7篇,也是最后一篇



上次有一位粉丝留言,留的非常棒,我等这个留言很久了…终于有人提这个问题了…


@小蔡

舵主,周末在家看了您之前的几篇配色文章,其中有篇讲到不同色相的配色,要让饱和度和明度统一,而另一篇说要想突出文字信息,就要保持文字颜色与背景色的明度差,我感觉这两者是矛盾的,具体怎么理解?


这个问题咱们先不讲,先简单回顾下前几章的主要内容。


配色大法第一章


第一章主要说的是色彩的属性。

知道颜色的属性有啥用呢?这个是配色的基础,这个你不懂,根本没法聊了…


下面哪个颜色更有安全感? 假如你的产品要体现安全的特性,你会选择什么颜色 ? 所以学配色必须先了解各个颜色的所含的属性。

第二章


第二章主要说的是如何让配色看起来很协调,要让颜色之间的色调保持统一,色调就是指的饱和度和明度。


(下图4个背景模块的的色调几乎一致,4种色相的S值和B值几乎一致,所以显得很和谐,大家可以在拾色器上吸下颜色试试看看)




第三章


第三章内容:如何强调突出页面中的信息?就是将此信息或者说叫文案的颜色与背景色形成足够都明度差距。因此80%以上海报的主文案非黑既白。




第四章


第四章内容:如何让你的视觉更突出,更有表现力? 这里就要了解对比和互补色的概念。


真正了解对比和互补之后你就会明白下图为什么这么搭配。




第五章


第五章内容:高级感的配色怎么来的?答:选低饱和度低明度配色,颜色越少对人的情绪刺激越少,越显逼格高冷。


想表现高端有品质的调性,底色非黑既白。想进一步表现轻奢可以用黄褐色。




第六章


色彩平衡,有很多人优秀的色彩案例中都充满平衡,本质是源于人眼的生理现象。主要表现为冷暖平衡,补色平衡,有色和无色平衡,纯色和花色平衡。



iPoneX 这张海报就是典型的纯色和花色平衡,屏幕画面内容很花所含信息太多,所以背景用纯白是最好的选择,不然整体画面会更花。同时三块屏幕的色调基本一致,所以显得很和谐,大家可以在拾色器上吸取看看。并且海报中还包含了冷暖平衡。



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


下面我在回答下开头的粉丝提的问题。


在日常的设计中,至少会用到2种颜色。一个是背景色,一个是文案的颜色。


我们第二章讲的色彩协调和谐是指的背景色,因为背景色是整个图片的主色,占了最大的面积,只要背景色调的比较协调,整个画面就会看起来很和谐。文案在画面中的比例不会很大,但是作为信息传递的重要元素,所以必须有足够的明度差才能跳出画面,直接让顾客一眼扫到。


说白了 画面中有作为大面积背景用的背景色,以及欲重点突出信息的强调色 。背景色无论你用几种,必须色调相同,取得整体画面的协调。而需要重要强调的文案或者标签要利用明度对比或者颜色对比使得该部分突出画面。看似矛盾,其实这就是配色,本质还是为了传递信息。


例如下图,4种产品的背景色色调相同非常和谐,而文案颜色和产品以及购买按钮的颜色与背景色拉开足够的明度差,从背景中脱引而出。 协调的背景色是为了衬托主体物的。




这里必须说清楚配色相关的的3个问题:







请到「今天看啥」查看全文