五、提取色卡,主辅色定型
走到这一步,可以说是快要大功告成了,接下来我们要做的就是将刚才创建的两个色彩卡组进行提取,第一次的色彩卡组提取两个色彩卡片,第二次的色彩卡组也提取两个色彩卡片。
这里需要注意一点的是,两个卡组选取的色彩尽量相差较大一点,意思就是说,例如第一组选取的色彩明度较低,那就将第二组选择的色卡选择的明度高一些,这样形成的反差,容易在界面中进行对比与强调。
六、创建文本色、背景色、强调色
接下来,我们在做最后一步,那就是选出最基础的背景、文字、点缀色,三个基础色卡,一般情况,文字色和背景色我多数采用黑和白的配比;当然,黑色也不是纯粹的黑色,而是通过主色的加深得到的,当然你也可以在第一次的主色色组内最小数值的基础上再加深一点点,得到新的文字色。
而点缀色,一般就是在非常小面积使用的色彩,一般别说一组文字内的一个关键词使用了点缀色进行突出;总之,点缀色的面积是非常小的。
七、代入原型设计
最终,我们将以上七个色卡排成一列查看一下是否和谐,一般情况下严格按照上述计算得出的颜色是不会出现差错的哈。
然后在设计界面时,代入这套颜色就可以了,当然,你也可以放入插画使用,如果感觉当前色彩范围有些狭窄,你还可以在第二步色彩延展的后面,继续增加基础色色相10位数,然后得出新的色卡,然后继续“+”、“-”10就可以了。
八、最终呈现
最后,我拿上面热乎乎的色彩组合代入界面并操作,给大家实际展现出来。
九、总结
这次的配色技巧就完成了,其实大家应该可以发现一个潜在的规律,不管在任何彩色范围内,只要我们能把控好色彩的纯度和明度,不管是任何色相,其实都是可以保正在一个区间内的;而往往大家没有拿出好的配色,多数情况就是配有掌握好纯度和明度的关系。
最后,希望大家都能学会这个方法并使用它,其实这套方法还可以延展出其他配色技法,带我下次再给大家实际讲解与操作。
作者:西瓜,公众号:西瓜的设计
本文由 @西瓜的设计 原创发布于人人都是产品经理;未经许可,禁止转载
题图来自 Unsplash,基于CC0协议