*牌ui色彩设计分析
什么的HSB?
HSB是一种颜色模式,在HSB模式下,H代表色相,S代表饱和度,B代表亮度
1.多尝试不同的配色
制作色板时,我们需要尽可能多地创造所有颜色和色彩灵感。不要害怕尝试不好,尝试处理所有颜色后,我们可以缩小色板的范围。在ui设计中,可能需要特别注意几个问题:
超链接颜色、*牌颜色、主色、辅色、成功颜色,错误颜色、文本颜色、背景颜色。
2.利用HSB色彩模型
*一步是确定*牌颜色,通常是企业LOGO的颜色。如果没有可以定义一种。
(1)以*牌色为基准得出24色带
以Spotify为例,它的*牌颜色是用绿色来定义它的一套色彩体系。
H值(色相)增加15,S和B不变,递增到基于*牌颜色的24个色带。为什么是24个?24X15=360刚好围绕色相环盘一圏,从而获得基于*牌色、亮度和饱和度一致性的颜色圈。
(2)基于色带得出16个色相环
细心的同学可能会发现色带上的许多颜色实际上很接近,比如绿色和蓝色。我们需要进一步筛选出合适的颜色作为16色相环,并尝试选择一些与主*牌颜色更协调的颜色。
(3)根据筛选得出16色相环
调整b(亮度)和s(饱和度)
在这一步中,我们需要定义相同频率的辅助颜色,即16色相环的辅助颜色,它可以在亮度(b)上按-10,-20去加減,或者在h上以+-5去増加色相,原理是要有对比度,需要显而易见。
调整饱和度值
调节亮度,如果对比度不明显,可以是-20,-30
最后,得出一套频率相同的色盘,但是它们非常相似,所以我们需要排除其中一些。
制定色板
要制作色板,需要使用一个网站coolors,只需要在这里输入相应的*牌颜色,就可以得到明度递减递增的色板。当然,你也可以调整亮度以获得出色的色板。
自此我们就得出了整个产品的调色板,许多电子商务公司,包括Airbnb和谷歌,都是通过类似的方法获得了他们的色板。最后,根据前面定义的警告颜色、超链接颜色和成功提示颜色,我们可以从辅助色板中获得相应的颜色,警告颜色为红色、超链接颜色为蓝色、警告颜色为黄色、成功颜色为绿色等。