简单几步，教你做一名出类拔萃的配色交互师

前言

很多小伙伴都说自己配色如屎，因为没学过色彩，没画过画，导致每次配色时都小心翼翼的。

然后去网上搜各种配色理论，看了什么冷暖、明暗等术语后开始照着去配色，然而还是一坨...（我也是这样）

所以有段时间我专门去了解配色这玩意儿，发现配色其实没那么难，至少没像做平面、广告等那些设计那么难，UI 视觉界面的配色其实更“简单”（这里说的简单不是说配色简单，而是用色更简约）。

所以我下面介绍一款配色利器给你。

Maerial Design（MD）

MD 是由 Google 推出的设计语言，它更适用于 UI 视觉界面的配色，能起到更统一、更舒服的作用。

MD 所展示的颜色较鲜艳，所以在设备上展示出来也是很有识别性。有时候大家看到某个界面颜色很突出，干净且简约，那一定是按照 MD 的颜色来设计的。

它的色彩灵感来自于当代建筑等，并由此引发出了大胆的颜色，与单调乏味的周边环境形成鲜明的对比。

包括目前很多优秀的作品，都是参照它的规范来设计的。

MD 视觉调色板

MD 给出的官方色谱你可能会看不懂，所以我做了一套更清晰的（本来我做的很简单很丑，这个是看了 @大植子 的色板修改过的）：

这是我在 sketch 里面做的色板，我这次骑行单车 App 的设计，颜色也是借用于此，所以色泽会看起来相对比较舒服。

三个色度如：

利用这三个色值来做搭配，可以起到一个过渡的作用。

举个例子：

大家看到这个界面，我一共使用了三种颜色，分别用不同的透明度来做调度，按钮是一个颜色、两种文字的搭配色、以及地图显示的颜色。

这样整个界面的基调都处于一个范围内，看起来也会很统一。

（虽然我做的都是一个色值的设计，但不代表它不能做渐变，原理也跟上面的是一样的。）

强调色

那强调色是什么呢？

比如你选择了三个色度值之后，想要突出按钮，那么就用其他颜色的色值来做按钮色来尽量突出这个按钮，所以你选择的这个颜色就是强调色。

举个例子：

这个按钮的颜色就是强调色，主要看你如何去搭配使用。

如果你大范围的用到强调色，那只需要用透明度来做不同位置的控制就足够了，不需要用过多的颜色来强调。

当然，强调色是可有可无的，或许你看我的这个界面使用了这个颜色会觉得不搭，那是因为我的背景色全都偏暖了，所以加了个冷色会显得很突兀，主要还是看你界面是否存在多样性，然后自己看情况去配色。

主题色

很简单，就是界面背景和面板色。因为我做的是暗色系的搭配，所以选择了黑色。但是为什么我的黑色不是纯黑呢？

上面其实也提到了下，因为为了配合我的黄色系，我在黑色中加了点黄色，这样更能衬托出界面的基调。包括面板也是，加了亮黄，所以看起来比黑色更浅，但是不会突兀。

这就是主题色的搭配。整体来说还是比较简单的，希望能帮到你。