返回顶部
热门问答 更多热门问答
技术文章 更多技术文章

[美工设计] 配色大法终极篇!

[复制链接]
商乾小编 显示全部楼层 发表于 2017-9-19 14:29:11 |阅读模式 打印 上一主题 下一主题

登录网站,浏览更多精彩内容

您需要 登录 才可以下载或查看,没有账号?加入我们

x
                                                                                                   
兄弟们,姐妹们

我来也!!


9f6dd25638fe08a1ad6ac2a9af3ced37.gif

各位别来无恙!!


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


88b717459ffe08c0f225f9f9e03f871e.jpg

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

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

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

配色大法第一章
第一章主要说的是色彩的属性。
知道颜色的属性有啥用呢?这个是配色的基础,这个你不懂,根本没法聊了…

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

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

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


828efe68b37fe92348bfddb37f0c5ff7.jpg


第三章

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


e29aeb85a9a91b06b7dd64ac2bb9a080.jpg


第四章

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

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


75c2adeee440678cf292ce4d406f0e17.jpg


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

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


7a371ae1038cabad405bdba77de29e15.jpg


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


dfb5db8a4ed422ecea588b0a6aa21d33.jpg

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


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

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

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

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

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

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


d69d8ebe9a8d00292ab8f3b11789c6f3.jpg


这里必须说清楚配色相关的的3个问题:
1、根据设计主题选色
2、用色彩引导视觉突出重点信息
3、画面色彩的协调性和美感  


色彩的本质是实现设计目的的一个辅助元素,为了更好的传递信息。排版也是如此。


bd3e8c9135c95c2ff0bb48e34d3268ed.jpg
拿上图举例

首先明确设计目的和主题:体现去韩国旅游,因此选色直接选取了韩国国旗颜色。

色彩协调性:背景色红和蓝,色调一致搭配和谐。并且还有冷暖对比色彩平衡。

突出重点信息:文案部分作为重点信息,用了黑白与背景产生足够的明度差,因此信息识别度很高。

还是那句话,配色是为了更好的传递信息,突出信息的主次关系,并且能传递出相应的情感和调性。
——————————

最后在说一下用色彩引导视觉的例子。就在我写这篇文章的时候,看到了自己刚买的护肤霜的包装盒,上面的视觉引导挺好。几个四个字的主标题,用了白色的底色,特别明显,如目录一般引导你往下看。 有时候我们做设计的时候是需要换位思考的,假如你是消费者,你第一眼看到哪里,你想表达的信息消费者是否会注意到?


4b1d65bd250f108c12f5863511152d3c.jpg

我前几天在一个自助咖啡机买咖啡,买了之后一直没找到咖啡盖在哪,屏幕上面也没有指引。因为咖啡的搅拌棒以及二维码都在右侧,我就一直盯着右边看,看了六七秒才发现盖子在机器左侧的盒子里。 所以我觉得做设计一定要能换位思考,如何用设计引导顾客的浏览视线,顾客是否能理解,能最短的时间看懂你做的设计?

关于配色的内容就限暂时告一段落了,以后有好的配色知识还会继续分享的,后面会跟大家分享版式排版相关的知识点。





商乾电商学院,爆款打造,运营代运营,软件开发、跨境电商、电商培训。因为专注所以专业,欢迎咨询。园洲地址:假日名城1507.石湾地址:名巢孵化园!
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

商乾全球电商人、电商交流学习与电商实战技术分享、电商爬虫、生活交流专业网站
  • 官方手机版

  • 微信公众号

  • 商务合作