配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

2023-10-22 17:45:52 來源/作者: / 己有:1人學(xué)習(xí)過

4. 如果有疑問,使用藍(lán)色

如果你對(duì)選擇什么強(qiáng)調(diào)色有任何疑問,請(qǐng)使用藍(lán)色。藍(lán)色通常是最靈活的顏色,適合多數(shù)的網(wǎng)站類型。紫色和黃色之類的顏色可以是很活潑的,但是如果使用不當(dāng)?shù)脑?,立馬會(huì)變得很花哨。

另一方面,你可以在以藍(lán)色為強(qiáng)調(diào)色的基礎(chǔ)上隨意發(fā)揮,但你也不能走的太遠(yuǎn)。如果你不知道從哪里開始學(xué)習(xí)或者在項(xiàng)目中使用什么顏色的時(shí)候,就用藍(lán)色就對(duì)了。如果你要選擇特別的藍(lán)色,你可以選擇深藍(lán)色(H值235)至淺綠色(H值190)的范圍以保證自己在安全的領(lǐng)地。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

在我的布局示例中,我選擇值為205的色相。當(dāng)你已經(jīng)選定了強(qiáng)調(diào)色,將它添加到任何你認(rèn)為必需的位置。假如你在按鈕或任何其他有文字的區(qū)域使用了強(qiáng)調(diào)色,也要相應(yīng)地改變文本的顏色。在這個(gè)例子中,我將強(qiáng)調(diào)色區(qū)域之上的文字改成了白色。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

5. 為強(qiáng)調(diào)色添加變化

一旦你選定了強(qiáng)調(diào)色,將色相(H)滑條位置保持不變。你現(xiàn)在需要為你的設(shè)計(jì)添加額外的顏色,不過為了讓事情變得更簡單,這些顏色都是你已經(jīng)選擇的強(qiáng)調(diào)色的變色。

在顏色選擇器上強(qiáng)調(diào)色周圍拖動(dòng)選色點(diǎn)來創(chuàng)建變色。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

在以下這些元素上使用變色:

懸停效果

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

邊框

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

強(qiáng)調(diào)色上的文本

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

漸變

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

光和陰影的效果

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

6. 避開調(diào)色面板右上角的位置

顏色選擇器上右上角的位置是高純度的顏色。右上角的顏色像一級(jí)方程式賽車,它們的執(zhí)行力驚人,并且非常吸引人,但是我們一般需要足夠的經(jīng)驗(yàn)才能很好地駕馭它們。如果沒有經(jīng)驗(yàn)的話,它們可能會(huì)造成事故,所以最好去嘗試使用更緩和的顏色。

這就是為什么我在本教程的第三節(jié)讓你選擇右上角四分之一中心位置的顏色,以確保以一種相對(duì)柔和的顏色開始。

為了說明這一點(diǎn),看一下假如我只改變?cè)O(shè)計(jì)的色相,不再動(dòng)顏色選擇器,會(huì)是什么效果。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 

它仍然看起來非常漂亮,對(duì)吧?但是如果我把選色點(diǎn)拖拽到顏色選擇器的右上角,它突然就變得不太好了。