a

一套界面需要哪些顏色？

說(shuō)到色板，我們得首先弄清楚一套APP需要哪幾種色彩，我們從airbnb的色板中，以及很多很多產(chǎn)品中大概可以得出一個(gè)公式：品牌色 + 提醒類(lèi)型顏色（成功，錯(cuò)誤，警告）+ 中性黑白灰顏色（各種字體，背景，分割線顏色等）

▲在定義了上述大的色彩原理下，我們需要對(duì)界面中使用場(chǎng)景進(jìn)行梳理得出下列大概色彩類(lèi)型。

a

如何去做呢？

重點(diǎn)來(lái)了，那我們?nèi)绾稳プ瞿?？首先，我們先?chuàng)建3個(gè)方塊，這些方塊后面會(huì)成為基礎(chǔ)顏色！這里我設(shè)置的是被3整除的高度和寬度，我創(chuàng)建了一個(gè)300X300的正方形:

接著我們填充3個(gè)顏色，紅，綠，藍(lán)，為什么是紅，藍(lán)綠，因?yàn)樵谏鼠w系里面，這三種顏色屬于色光三原色（色光三原色為：紅、綠、藍(lán)。光線會(huì)越加越亮）

紅，綠，藍(lán)怎么定義，大家可以從自己品牌色里面去定一個(gè)，然后可以根據(jù)HSB的方法去得出同色溫下面的綠和藍(lán)！

h值(色相)以15，S和B不變，遞增得到基于品牌色的24個(gè)色帶，有人可能會(huì)問(wèn)為什么是24個(gè)？因?yàn)?4X15=360剛好圍繞色環(huán)盤(pán)一圈。

▲所以我們得到一圈基于品牌色，明度和飽和度一致性的顏色！

▲你也可以依據(jù)https://coolors.co/去生成一套藍(lán)色或者綠色

第二步

第二步，將這三個(gè)方塊橫向等分，因?yàn)槊總€(gè)方塊300X300，所以除以3就是100PX

▲將一個(gè)矩形與畫(huà)板頂部對(duì)齊，然后填充微白色，將第二個(gè)矩形與畫(huà)板底部對(duì)齊，填充微黑色，然后將頂部的白色，和黑色透明度調(diào)整微20，這樣我們就過(guò)得到，三種不同的紅色，綠色，和藍(lán)色。

第三步

第三步，我們需要定義垂直等分的區(qū)間，我們需要畫(huà)2個(gè)矩形，這2個(gè)矩形的寬度剛好是300X300的三分之一也就是100X100，將他們和正方形的右側(cè)對(duì)齊。

現(xiàn)在到了這篇文章的核心，就是我們需要將這個(gè)顏色改為黃色，很多人可能會(huì)好奇，為什么是黃色，因?yàn)辄S色是色彩的三原色之一（可以參考上面我們通過(guò)HSB得出黃色）

調(diào)整黃色的模式改為疊加，將其中一個(gè)透明度降低為40%，另外一個(gè)降低為80%，然后將他們復(fù)制到綠色和藍(lán)色的畫(huà)布上，借助疊加模式，我們得到了明亮和鮮艷的顏色。

第四步

這樣我們就快速的得出了一套色彩體系，然后根據(jù)我們的需求選取一部分顏色成為這個(gè)色盤(pán)體系：

然后添加到我們的整個(gè)色盤(pán)里面去，同理我們可以得出黑白灰色顏色，比如我們的顏色最黑是#333333

▲頂部20%白色，底部80%黑色得出

▲縱向疊加40%白色，80%白色得出

▲得出文字3個(gè)梯度顏色

生成最終色板

▲通過(guò)上面的步驟就可以得出整個(gè)色板

注意

色彩感覺(jué)不好的同學(xué)，如果沒(méi)有品牌色，或者品牌色搭配出來(lái)不太和諧，強(qiáng)烈推薦大家使用這個(gè)網(wǎng)站進(jìn)行配色。

▲他是基于設(shè)計(jì)師人工智能匹配出來(lái)的顏色，都比較和諧，使用起來(lái)的，我們隨便試試。

▲在這個(gè)網(wǎng)站上輸入一個(gè)紅色，鎖定，然后按空格隨機(jī)生成顏色，最終確定，藍(lán)色，綠色黃色，制作出色盤(pán)。

▲得出色盤(pán)

關(guān)于色彩系統(tǒng)構(gòu)建的方法就是這樣，不知道大家掌握沒(méi)有，希望大家在做設(shè)計(jì)時(shí)候，色彩運(yùn)用更加科學(xué)，一定要自己動(dòng)手試試！