當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >UI設(shè)計(jì)的色彩搭配

UI設(shè)計(jì)的色彩搭配

發(fā)布時(shí)間：2024-02-22 16:43:57 瀏覽量：195次

配色是一項(xiàng)非常重要的美術(shù)素養(yǎng)，需要通過(guò)系統(tǒng)的學(xué)習(xí)和大量的觀察練習(xí)才能慢慢提升?？傮w來(lái)說(shuō)，手機(jī)UI界面設(shè)計(jì)應(yīng)遵循以下4條配色原則：整體色調(diào)要協(xié)調(diào)統(tǒng)一、配色要有重點(diǎn)色、注意色彩平衡和對(duì)立色的調(diào)和。（內(nèi)容參考書(shū)籍《移動(dòng)應(yīng)用UI設(shè)計(jì)》

色彩的意象

人們看到不同的顏色會(huì)產(chǎn)生不同的心理反應(yīng)，例如看到紅色會(huì)下意識(shí)地心跳加速、血液流速加快，進(jìn)而從心理上感受到一種興奮、刺激、熱情的感覺(jué)，這就是色彩的作用和意象。

下面是一些常見(jiàn)顏色的色彩意象：

提示：

暖色調(diào)可呈現(xiàn)溫馨、熱情的氣氛，冷色調(diào)可呈現(xiàn)寧?kù)o、清涼、高雅的氣氛；對(duì)比色調(diào)搭配可以產(chǎn)生強(qiáng)烈的視覺(jué)效果，給人亮麗、鮮艷、喜慶的感覺(jué)，但搭配不當(dāng)則會(huì)產(chǎn)生俗氣、刺眼的不良效果。

色彩的搭配原則

（1）整體色調(diào)協(xié)調(diào)統(tǒng)一：界面設(shè)計(jì)應(yīng)該先確定主色調(diào)，主色將會(huì)占據(jù)頁(yè)面中很大的面積，其他的輔助色都應(yīng)該以主色為基準(zhǔn)進(jìn)行搭配。這可以保證整體色調(diào)的協(xié)調(diào)統(tǒng)一，重點(diǎn)突出，使作品更加專(zhuān)業(yè)、美觀。

（2）有重點(diǎn)色：配色時(shí)，可以選取一種顏色作為整個(gè)界面的重點(diǎn)色，這個(gè)顏色可以被運(yùn)用到焦點(diǎn)圖、按鈕、圖標(biāo)，或者其他相對(duì)重要的元素，使之成為整個(gè)頁(yè)面的焦點(diǎn)。重點(diǎn)色不應(yīng)該用于主色和背景色等面積較大的色塊，應(yīng)用于強(qiáng)調(diào)界面中重要元素的小面積零散色塊。

（3）注意色彩的平衡：配色的平衡主要是指顏色的強(qiáng)弱、輕重和濃淡的關(guān)系。一般來(lái)說(shuō)，同類(lèi)色彩的搭配方案往往能夠很好地實(shí)現(xiàn)平衡性和協(xié)調(diào)性，而高純度的互補(bǔ)色或?qū)Ρ壬?，例如紅色和綠色很容易帶來(lái)過(guò)度強(qiáng)烈的視覺(jué)刺激，使人產(chǎn)生不適的感覺(jué)。另一方面為明度的平衡關(guān)系，高明度的顏色顯得更明亮，可以強(qiáng)化空間感和活躍感；低明度的顏色則會(huì)更多的強(qiáng)化穩(wěn)重低調(diào)的感覺(jué)。

（4）調(diào)和對(duì)立色：當(dāng)包含兩個(gè)或者兩個(gè)以上的對(duì)立色時(shí)，頁(yè)面的整體色調(diào)就會(huì)平衡，這時(shí)就需要對(duì)對(duì)立色進(jìn)行調(diào)和。

通常有3種方法進(jìn)行調(diào)和：

A.調(diào)整對(duì)立色的面積，使一種顏色為主色，其他顏色成為輔助色。為了降低輔助色的色感，可能需要適當(dāng)調(diào)整它們的純度和明度；

B.添加兩種對(duì)立色之間的顏色，引導(dǎo)顏色在色相上逐漸過(guò)渡，例如要調(diào)和紅色和黃色，可加入橙色；

C.加入大量的中性色，黑、白、灰稱(chēng)為中性色，它們不帶任何正面或負(fù)面的感情色彩，用來(lái)調(diào)和其他彩色是一種非常有效的方法。

常見(jiàn)的色彩搭配方法

每種色彩在印象空間中都有其獨(dú)特的位置，因此色彩搭配得到的印象可以用加減法來(lái)近似估算。如果每種色彩都是高亮度的，將其疊加就會(huì)達(dá)到人柔和、明亮的效果；如果每種色彩都是濃烈的，疊加得到的效果濃烈的。

如下：

黑色：作為整個(gè)界面主色，表現(xiàn)為高端、精致、穩(wěn)重的感覺(jué)，同時(shí)以不同明度的變化，突出界面層次和主次效果。 ??

紅色：是最具沖擊效果的顏色，也是容易使人興奮的顏色，將其與黑色搭配能夠減弱對(duì)人的大腦的刺激，同時(shí)彌補(bǔ)黑色帶給人的衰弱、恐懼等消極情緒。 ??

綠色：置于黑色背景中，即使是很小的色塊也會(huì)顯得引人注目，綠色也能減弱黑色和紅色對(duì)人大腦的刺激，給人生機(jī)勃勃的感覺(jué)和安全感。 ??

白色：的文本色與黑色的背景色形成鮮明的明度對(duì)比，整個(gè)頁(yè)面變得明快、輕盈，突出主要內(nèi)容，便于人瀏覽時(shí)將內(nèi)容一目了然。

當(dāng)不同的色彩搭配在一起時(shí)，色相彩度明度作用會(huì)使色彩的效果產(chǎn)生變化。兩種或者多種淺色搭配在一起不會(huì)產(chǎn)生對(duì)比效果，同樣的，多種深色搭配在一起也不吸引人。但是，當(dāng)一種淺色和深色混合在一起時(shí)，淺色就顯得更淺，深色顯得更深。明度和色相也會(huì)產(chǎn)生同樣的對(duì)比效果。 ??

當(dāng)然在實(shí)際設(shè)計(jì)過(guò)程中，設(shè)計(jì)師還要考慮到乘除法，例如同樣亮度和對(duì)比度的色彩，在色環(huán)上的角度不同，搭配起來(lái)就會(huì)得到千變?nèi)f化的感覺(jué)。

下圖是一些常見(jiàn)的配色方案：