小男

点击下方观看视频版哦~

 

以下是图文版:

相信大部分人都使用过在线配色工具或在线配色网站,那么使用这些工具或网站来配色,真的就能得到正确美观的效果么?当然不能。原因很简单,如果使用这些工具就能轻松完成配色工作,那么就不需要设计师了,随便找一个不懂色彩的人都可以替代我们。

因此本期的教程我们就来谈谈,如何正确的使用在线配色工具。首先,我推荐几个在线配色网站给大家。
                                                                                                 brandcolors.net
这个网站都是世界知名品牌、企业公司、知名网站的配色,而且还提供了快速下载的选项,单独的去点击色彩,就可以完成复制了。

                                                                                           webdesignrankings.com
这个网站据说是一位设计师在二十四小时内独立开发完成的,这上面也有一些比较漂亮的色彩组合,当我们把鼠标移动到不同的水滴上,就会显示这个颜色的色值了。
                                                                                                       coolors.co
这个网站只需要按空格键,就可以快速的生成配色,每次都会出现由五种颜色组合成的色卡。这里不仅会显示颜色的代码,而且当我们点击某一颜色时,也会出现这个颜色不同纯度明度的选项,并且还可以通过滑块来对色彩进行调整。

                                                                                                    colordrop.io
这个网站同样为我们提供了非常多的色彩组合,每个组合都有四种颜色,当我们点击某一颜色时,就会弹出相对应的颜色参数,可以很轻松的使用,非常方便。

类似这种配色网站有很多,虽然这四个网站不一定是最好的,但是配色网站都大同小异,重要的不是你知道多少这种网站,而是你是不是真的会用。

我相信现在肯定有的人心里是这样想的。
没关系,我是这样想的。下面就让我们用事实说话。
这个界面的版式部分已经编排好了,这里我们就尝试一下从我们提供的网站中,随便挑选一组颜色来填充试试。

我们就从这个网站上寻找,这里我们选择了这组纯度都较高且非常漂亮的色彩组合。

单看这组颜色还是挺漂亮的,那我们就把它随意的填充在左侧的界面上,我们看最终的效果怎么样呢,并不好对吧,可以说配色毁了这个界面。
如果你还是不服的话,没关系我们再试一个。
这个网站之前我们说过,都是比较知名品牌的用色,按理来说色彩搭配应该是没问题的,这里我们就选择大家比较熟悉的500px的配色。
填充到界面之后大家感觉如何呢,如果我说惨不忍睹应该不过分吧。所以,我们得出一个结论:直接使用在线配色网站的颜色是行不通的。下面我们就来看看到底该怎么使用。

首先就是搭建版式,要想做好配色版式一定不能太差,如果版式一塌糊涂的话,那么配色再好也无济于事。

版式完成之后就需要确定色彩的依附载体,说白了就是色彩使用的地方,比如这个界面中,首先我们可以填充的就是背景。
其次呢就是图片的颜色,当然图片本身就带有色彩,这里为了方便理解我做了去色处理,大家平时没必要这么做,但是图片的色彩一定要事先考虑好。
然后就是版面中的色块。
最后就是文字部分,虽然文字可以是有彩色也可以是无彩色,但无论怎么样,我们都要做到心中有数。
色彩的依附载体确定完之后,接下来需要思考的是,想让画面通过色彩传递出什么样的气质或风格。

由于这里提供了品牌和相关图片,所以案例的风格定位就比较简单了。比如具象的有:水、游泳、女性、性感、护肤品。抽象的比如清凉、活力、素雅、清新、文艺等等。


根据这些信息,我们确定了画面的主色相,这里我们选择蓝色,可以说是没有任何问题的。


同时也可以为画面确定主色调,这里我们就暂定明色调或淡色调。


前期的准备工作已经做完了,接下来就要根据我们的设计需求选择适合的网站。

什么叫适合的网站呢?比如这个界面之前我们已经分析过了,能够填充颜色的部分有背景、色块、文字,所以我们可以得出三到四种的色彩搭配是最合适的。
所以我们就要根据色彩数量来筛选网站。比如这个网站,它提供的色彩搭配数量多的十几个少的就一个,如果我们从这里选就会浪费很多不必要的时间,所以就可以先PASS了。
而这个网站都是五种颜色,也不适合我们色彩的使用的数量,所以也可以PASS掉。

而剩下的这两个网站都是四种颜色,所以从它们当中挑选就可以了。那怎么挑选呢,首先我们可以找到含有蓝色的色卡。
我们就以这个网站为例。
我们从这个网站上提取了十个色卡然后开始筛选,因为我们不可能全部都用。因为之前我们已经确定了画面的主色调为明色调或淡色调,所以我们先PASS掉色调不符的组合。
接下来根据色彩关系进一步筛选,比如使用同类色还是对比色,这个就要根据风格定位来选择了,因为我们不想让画面是一种单调的风格,所以这里我们就去掉了同类色的组合。
现在只剩下四个色卡了,再往下筛选就没那么容易了,所以我们就要结合风格定位来分析。
首先这组颜色除了带有蓝色和无彩色外,就是一个淡棕色,所以这个色彩会对画面产生很重要的影响,但是这个色彩又不符合我们的风格定位,所以也可以去掉。
而剩下这三组色彩其实从理论上来说都符合我们的风格定位,比如蓝色的清凉、绿色的健康、粉红的女性、黄色的活力、白色的纯洁等等,都包含在内了,所以这时候选择哪组色彩就要看你想突出哪种风格了。
那么这里我想突出清凉、干净、并且带有一些活力这样的感受,所以我选择了这组配色。
接下来就到了后期部分也就是操作的部分。选择好色卡之后我们先要分析它们之间的关系,比如这组颜色从大的范围来看可分为蓝色和黄色,而在蓝色当中又分为深蓝和浅蓝,剩下的就是白色。
分析完之后我们要确定色彩的地位,我们已经确定了蓝色为主色,而这个画面中的主色就是面积最大的背景色,但是这里有两个蓝色应该选择哪个呢?这里我们还是要依据风格定位,比如清凉、清新、雅致等印象一定是淡蓝色能体现出来的,深蓝色不行,并且淡蓝色与图片的色调也比较接近能够很好的融合在一起,所以我们用淡蓝色来填充背景。
然后从深蓝色、黄色、和白色当中选择一个填充文字和两个比较重要的色块,由于背景是淡蓝色,如果文字再填充黄色或白色的话识别性会很差,所以文字我们填充深蓝色。
这样主色就是淡蓝色,副色是深蓝色,而黄色就可以当作点缀色来使用了,所以我们用黄色填充文字下方的色块和一些需要点缀的地方。


剩下的三个色块保留白色就可以了,白色的调和会让画面显得透气一些,不然整个画面都是有彩色就会显得有些闷。
到这里我们已经把提取的颜色全部填充到了这个版式当中,可以说与之前随意填充的那两个相比已经好了很多。但是这里还是有一些问题的,所以还需要进一步对细节进行微调。
现在这个画面的配色有什么问题呢?最明显的就是黄色的纯度有些高了,在这个画面中有些抢眼,而我们知道黄色是充当点缀作用的,所以我们要降低黄色的纯度、提高明度。
调整完黄色之后我们发现,文字的深蓝色在黄色的衬托下对比就有些强了,所以针对深蓝色我们也要适当的做一些调整。
那么这个配色就完成了,可以说和我们预期的风格定位是相一致的,并且也很美观。下面我们可以换一组颜色试试。
之前我们说过这三组色卡都是可以的,那我们就换一个使用。
同样我们还是先来分析这组色彩之间的关系,大致可分为蓝色、绿色、粉色,而绿色当中又分为深绿和浅绿。
先将图片的色彩还原,之后就是确定主色,因为这里我想与之前的案例呈现出不一样的感觉,所以我们不选择蓝色而选择粉色为主色填充背景,这样画面的感觉就偏女性气质多一些。
然后就是文字,虽然我们没有用蓝色作为主色,但是根据我们的风格定位,这个画面也是需要蓝色的,所以就用蓝色来填充文字。
最后就剩下两个绿色,而这里我们用浅绿色来填充色块,为什么是浅绿色呢?因为我们要考虑文字的识别性,深绿色和蓝色的纯度明度相差不多,所以它们的对比效果就会比较弱。
而白色作为很好的调和色,也并不需要调整。最终的效果怎么样呢?同样这里也是有调整空间的。
首先就是背景色有些偏深了,所以我们减淡背景色,并且在色相上稍微调得偏紫一些,这个颜色的选择是参考了左下角的图片色,并非是平白无故出现的。
然后再看这里的绿色,显得有些脏也就是偏灰,所以我们也可以对绿色进行一下调整让它变亮一些,这样不仅文字的识别性得到了改善,而且也美观了很多。
而文字的识别性虽然得到了改善,但还可以更好,所以加深一下蓝色,那么这个案例到这里就可以了。
最后我们来看一下这两个方案,无论是色调、气质、风格、还是美感都是符合我们前期定位的。但我相信一定有人会有质疑,不是教如何使用在线配色工具吗,怎么到最后又变成人为的调整了,这里当然不是在逗大家玩,因为配色的确就是这样一个复杂思考、反复调整的过程,而不是简单的吸取、填充两步就可以了,所以无论是配色工具,还是提供色彩搭配的网站,顶多也只能作为我们配色的参考,而不能当作是我们配色的全部。

 

本期教程到这里就结束了,感谢大家的观看和支持,如果你认为我们的教程,对你有一点点帮助,那么也请你帮助我们传播给更多的人。我是本期的讲师无我,我们以后见,拜拜。

 

原文地址:研习设(公众号)
作者:研习设K先生

转载请注明:韦德1946 » 你真的会使用在线配色工具吗?

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
如何才能更懂你?千万级App的焕新之道如何才能更懂你?千万级App的焕新之道
产品体验报告 | 要深度分析,不要表面赏析产品体验报告 | 要深度分析,不要表面赏析
用药助手 9.0 ,升级背后的设计思路用药助手 9.0 ,升级背后的设计思路
用户体验旅程图 | 概念、实操、模板用户体验旅程图 | 概念、实操、模板
设计师必备的XD插件合集设计师必备的XD插件合集
时尚风格如何体现?(质感篇)时尚风格如何体现?(质感篇)
为什么你的APP不耐看为什么你的APP不耐看
用户角色模型 | 拒绝“我认为”的设计用户角色模型 | 拒绝“我认为”的设计
色彩解读之紫色篇色彩解读之紫色篇
2019年流行色:活力珊瑚橘色2019年流行色:活力珊瑚橘色