为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

当前位置:首页>设计文章>UI>为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

2021年的第 5篇原创文章

距离2021年40篇原创目标还剩35

配色对于设计师来说,是个非常基础也非常重要的活儿。

在如今这个时代,我们能接触到各种各样的色卡和配色工具辅助我们,但很多时候依然不会用!

这是怎么回事?

从器、术、道上来讲,我们能拿到色卡、配色工具并能美滋滋得使用它们,仅仅是掌握了“器”的范畴,术、道上面缺乏思路和技法,再好的色卡也白搭。

这就好像渣渣辉送你一把屠龙宝刀,但如果你没有浑厚的内功和刀法招式,它和一块废铁并没有什么区别~

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

今天,我们用一个实战干货来分享三个法子,帮你灵活高效得使用色卡。

久违的大纲:

1.让色彩主次有别
2.让色彩富有变化
3.中性色永远不会犯错

首先,我们有一份确定版式的作品集封面,可惜它没有任何颜色倾向,是个么得感情的面瘫。我们打算拿它开开刀,配点我们想要的颜色。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

接下来,我们去color hunt网站挑到了一个还不错的色卡,它看起来骚气十足,相信使用这种配色方案,会给我们的面试官留下深刻的印象。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

接下来,为了让它顺利得融入我们的作品集封面,我来分享并实践三种非常有用的策略。

1.让色彩主次有别

首先,我们需要树立一个清晰的主次认知——哪种颜色会成为画面主色,哪种颜色会成为辅助色?

为什么?因为主色将会定下画面的整体走势,辅色将通过搭配的形式强化观者对具体风格的感知。

主、辅的定义就像每天吃喝拉撒睡一样,它是必要且重要的,别怕麻烦。

这里介绍一个非常经典的方法论——6:3:1黄金配色比

它是意思就是,在画面中按照一定的比例去分配颜色。主色占比60%,辅色占比30%,点缀色占比10%。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

当然,我们没有必要受这个比例的束缚。只是在配色的前期,这是一个很好的规划手段。

按照这个思路,我们选取蓝色确立为主色,就可以将其拉满整个封面作为背景。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

我们选取粉色为辅助色,将其铺入对角处的辅助图形中。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

但目前还远远不够,我们需要继续使用下面这个关键策略。

2.让色彩富有变化

任何事物,只要有所变化,就会更加吸引眼球。

渐变色就是这个道理,相比纯粹单一的扁平色块,它产生了两种甚至两种以上颜色的过渡变化,给予读者多元化的视觉体验。而且还能传达更丰富的情绪。因此相比扁平色,渐变色可以更好得抓住眼球。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

回到案例,我们可以在背景上搞点事情。

继续从色卡中选出紫色,和背景的蓝色搭配形成蓝紫色渐变,这样整个背景就不会那么单薄。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

接下来,对角线的两个圆形看上去有点过于突兀了。我们同样可以做一个单色至透明的渐变,让图形和背景融为一体,画面更加和谐。而且这种处理也让圆形本身增加了光影质感,让它更加立体,整个画面富有层次。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

然后,我们可以再增加一些装饰来丰富画面层次。

比如复制几个降低透明度的圆形进行叠加,也可以再添加一些点、线的装饰,结合高斯模糊,增加元素形态上的变化。

另外,这里的线元素使用了色板中的瑰色进行了少量点缀。这里我为了提升和谐感,稍微调整了下它的色相。不要完全被色卡束缚,它只是参考。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

当然,如果你想让画面更加和谐稳定,也可以更换其他同色系的搭配。步骤完全没变,只是配色变了而已。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!
为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

3.中性色永远不会犯错

如果你觉得这些色彩太多没有信心完全驾驭,没关系,黑、白中性色总会吧~

中性色没有任何色彩倾向,纯粹中性的配色可以让画面传递稳定感、高级感。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

而且中性色还能和其他有色色彩百搭。所传递的调性则主要受控于主色的选择。

当中性色作为辅色,紫色作为主色时,整体画面会偏向紫色的调性;

当中性色作为主色,蓝粉渐变色作为辅色时,整体画面就会偏向中性色的调性。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

关于颜色调性,后面会单独拿出来细讲,这里就不赘述了~

最后,再推荐几个我常用的配色网站

color hunt

https://colorhunt.co/

上面有大量好看丰富的色彩,而且每天会根据浏览量进行热度排序。看到好看的配色直接hover点击色值就复制了。我平时配色没什么点子的时候就会在这里寻找配色灵感。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

Material Design Color Palettes

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

Material Design官方提供的调色器。google通过内置的一套算法调整每个颜色的色相、饱和度和明度,以此创造出各种各样美艳的色彩。

下图就是分别用紫色和黄色作为主色(primary)和辅色(secondary)时所自动生成的调色版,你可以在延展出的色板任意选择。比如我们按钮的hover、pressed状态就可以在这套色板中选择浅色和深色。

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

做个小结

1. 色彩也是需要主次分明的,你可以使用6:3:1这个配色法则进行色量的分配;

2. 如果你想让画面更加吸引眼球,渐变色绝对是你的不二之选;

3. 中性色永远不会犯错!百搭!

4. 存点配色网站,让你配色灵感如尿崩。

最后,案例的源文件已经打包上传啦~

获取方式:

点个「在看」,在公众号后台回复「配色案例」即可获取~

希望这篇文章能够给予你一些启发。期待你的收获和反馈。

我是Andrew,期见。

— END —

如果你觉得对你有所帮助,欢迎点个在看鸭,让我知道这篇文章对你是有价值的,当然这也是我继续下一篇分享的最佳动力~!

你可能还想看

《我做设计这么久,居然没听过这个模型?!》

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!

如果你分享过我的任意文章,欢迎扫码加我领取见面礼

为什么我有那么多色卡还是配色难?三招帮你解决这个问题!
公众号推送机制改版,文章不按发布时间排序啦。各位在公众号的右上角“...”(不是文章的右上角~)将转行人的设计笔记设为星标⭐,这样就不会错过每一篇文章了!~
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI效率工具设计干货

这三款sketch插件,让你效率逆天(已打包)

2023-4-13 22:29:05

UI效率工具设计干货

这些sketch冷门技法,让你一天顶两天!

2023-4-13 22:29:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索