前言
很多小伙伴都说自己配色如屎,因为没学过色彩,没画过画,导致每次配色时都小心翼翼的。
然后去网上搜各种配色理论,看了什么冷暖、明暗等术语后开始照着去配色,然而还是一坨...(我也是这样)
所以有段时间我专门去了解配色这玩意儿,发现配色其实没那么难,至少没像做平面、广告等那些设计那么难,UI 视觉界面的配色其实更“简单”(这里说的简单不是说配色简单,而是用色更简约)。
所以我下面介绍一款配色利器给你。
Maerial Design(MD)
MD 是由 Google 推出的设计语言,它更适用于 UI 视觉界面的配色,能起到更统一、更舒服的作用。
MD 所展示的颜色较鲜艳,所以在设备上展示出来也是很有识别性。有时候大家看到某个界面颜色很突出,干净且简约,那一定是按照 MD 的颜色来设计的。
它的色彩灵感来自于当代建筑等,并由此引发出了大胆的颜色,与单调乏味的周边环境形成鲜明的对比。
包括目前很多优秀的作品,都是参照它的规范来设计的。
MD 视觉调色板
MD 给出的官方色谱你可能会看不懂,所以我做了一套更清晰的(本来我做的很简单很丑,这个是看了 @大植子 的色板修改过的):
这是我在 sketch 里面做的色板,我这次骑行单车 App 的设计,颜色也是借用于此,所以色泽会看起来相对比较舒服。
三个色度如:
利用这三个色值来做搭配,可以起到一个过渡的作用。
举个例子:
大家看到这个界面,我一共使用了三种颜色,分别用不同的透明度来做调度,按钮是一个颜色、两种文字的搭配色、以及地图显示的颜色。
这样整个界面的基调都处于一个范围内,看起来也会很统一。
(虽然我做的都是一个色值的设计,但不代表它不能做渐变,原理也跟上面的是一样的。)
强调色
那强调色是什么呢?
比如你选择了三个色度值之后,想要突出按钮,那么就用其他颜色的色值来做按钮色来尽量突出这个按钮,所以你选择的这个颜色就是强调色。
举个例子:
这个按钮的颜色就是强调色,主要看你如何去搭配使用。
如果你大范围的用到强调色,那只需要用透明度来做不同位置的控制就足够了,不需要用过多的颜色来强调。
当然,强调色是可有可无的,或许你看我的这个界面使用了这个颜色会觉得不搭,那是因为我的背景色全都偏暖了,所以加了个冷色会显得很突兀,主要还是看你界面是否存在多样性,然后自己看情况去配色。
主题色
很简单,就是界面背景和面板色。因为我做的是暗色系的搭配,所以选择了黑色。但是为什么我的黑色不是纯黑呢?
上面其实也提到了下,因为为了配合我的黄色系,我在黑色中加了点黄色,这样更能衬托出界面的基调。包括面板也是,加了亮黄,所以看起来比黑色更浅,但是不会突兀。
这就是主题色的搭配。整体来说还是比较简单的,希望能帮到你。