路野

今天我将告诉大家一个更加简单高效的技巧去定义一个色板。在星球里还有很多这样的文章,无论是现有的500+精华文章,还是每天100+设计干货,我们坚信相信水滴石穿的力量。请看今天的分享,Enjoy it。

图片

a

一套界面需要哪些颜色?

图片

说到色板,我们得首先弄清楚一套APP需要哪几种色彩,我们从airbnb的色板中,以及很多很多产品中大概可以得出一个公式:品牌色 + 提醒类型颜色(成功,错误,警告)+ 中性黑白灰颜色(各种字体,背景,分割线颜色等)

图片

在定义了上述大的色彩原理下,我们需要对界面中使用场景进行梳理得出下列大概色彩类型。

图片

a

如何去做呢?

重点来了,那我们如何去做呢?首先,我们先创建3个方块,这些方块后面会成为基础颜色!这里我设置的是被3整除的高度和宽度,我创建了一个300X300的正方形:

图片

接着我们填充3个颜色,红,绿,蓝,为什么是红,蓝绿,因为在色彩体系里面,这三种颜色属于色光三原色(色光三原色为:红、绿、蓝。光线会越加越亮)

红,绿,蓝怎么定义,大家可以从自己品牌色里面去定一个,然后可以根据HSB的方法去得出同色温下面的绿和蓝!

图片

h值(色相)以15,S和B不变,递增得到基于品牌色的24个色带,有人可能会问为什么是24个?因为24X15=360刚好围绕色环盘一圈。

图片

所以我们得到一圈基于品牌色,明度和饱和度一致性的颜色!

图片

你也可以依据https://coolors.co/去生成一套蓝色或者绿色

第二步

第二步,将这三个方块横向等分,因为每个方块300X300,所以除以3就是100PX

图片

图片

图片

将一个矩形与画板顶部对齐,然后填充微白色,将第二个矩形与画板底部对齐,填充微黑色,然后将顶部的白色,和黑色透明度调整微20,这样我们就过得到,三种不同的红色,绿色,和蓝色。

第三步

第三步,我们需要定义垂直等分的区间,我们需要画2个矩形,这2个矩形的宽度刚好是300X300的三分之一也就是100X100,将他们和正方形的右侧对齐。

图片

现在到了这篇文章的核心,就是我们需要将这个颜色改为黄色,很多人可能会好奇,为什么是黄色,因为黄色是色彩的三原色之一(可以参考上面我们通过HSB得出黄色)

图片

图片

调整黄色的模式改为叠加,将其中一个透明度降低为40%,另外一个降低为80%,然后将他们复制到绿色和蓝色的画布上,借助叠加模式,我们得到了明亮和鲜艳的颜色。

第四步

这样我们就快速的得出了一套色彩体系,然后根据我们的需求选取一部分颜色成为这个色盘体系:

图片

图片

然后添加到我们的整个色盘里面去,同理我们可以得出黑白灰色颜色,比如我们的颜色最黑是#333333

图片

顶部20%白色,底部80%黑色得出

图片

图片

纵向叠加40%白色,80%白色得出

图片

得出文字3个梯度颜色

生成最终色板

图片

通过上面的步骤就可以得出整个色板

注意

色彩感觉不好的同学,如果没有品牌色,或者品牌色搭配出来不太和谐,强烈推荐大家使用这个网站进行配色。

图片

他是基于设计师人工智能匹配出来的颜色,都比较和谐,使用起来的,我们随便试试。

图片

在这个网站上输入一个红色,锁定,然后按空格随机生成颜色,最终确定,蓝色,绿色黄色,制作出色盘。

图片

得出色盘

关于色彩系统构建的方法就是这样,不知道大家掌握没有,希望大家在做设计时候,色彩运用更加科学,一定要自己动手试试!

 

原文地址:我们的设计日记(公众号)

作者:sky

 

转载请注明:学UI网 » 这样做设计,可太香了~

登录收藏
 
你可能喜欢的:
互补色搭配很难?我来教你怎么用(实操篇)互补色搭配很难?我来教你怎么用(实操篇)
听说这是最难的配色方法——互补色篇听说这是最难的配色方法——互补色篇
2021年度流行色彩已公布,用最科学严谨的方式教你把它用好!2021年度流行色彩已公布,用最科学严谨的方式教你把它用好!
插画 | 如何解决画面颜色脏插画 | 如何解决画面颜色脏
用好“对比色”,让你的设计更有吸引力!(实操篇)用好“对比色”,让你的设计更有吸引力!(实操篇)
配色没有冲击力?来试试对比色搭配配色没有冲击力?来试试对比色搭配
学会“邻近色”配色,搞定配色难题(实操篇)学会“邻近色”配色,搞定配色难题(实操篇)
配色不协调?来看看“邻近色”搭配配色不协调?来看看“邻近色”搭配
单色配色你真的会用吗?(实操篇)单色配色你真的会用吗?(实操篇)
单色配色也能玩出这么多花样?单色配色也能玩出这么多花样?