长治丶晨电子有限公司

常聽(tīng)人感慨，看了那么多的案例，依然搞不定配色，這真是一個(gè)悲傷的故事?。〉拇_，找到漂亮的網(wǎng)站容易，弄明白為什么漂亮，卻需要從根子上來(lái)思考，所以，讀完上篇的基礎(chǔ)分析之后，接下來(lái)你需要掌控那些關(guān)于配色的概念和思路，這才是真正意義上的授人以漁。

一、色彩術(shù)語(yǔ)

色彩術(shù)語(yǔ)的存在讓我們能夠區(qū)分和描述色彩，熟悉并了解這些術(shù)語(yǔ)之后，我們能夠靈活地

? 色相(Hue)—即各類色彩的相貌稱謂

? 色彩飽和度(Saturation)/色度(Chroma)—顏色的整體強(qiáng)度或者亮度

? 明度(Value)—色彩的明暗程度

? 色調(diào)(Tone)—是純色和灰色組合產(chǎn)生的顏色，也可以說(shuō)是一幅畫(huà)中畫(huà)面色彩的總體傾向

? 色度(Shade)—是純色和不同比例的黑色混合產(chǎn)生的顏色，色彩的純度

? 色彩(Tint)—是純色和白色混合產(chǎn)生的顏色，一種色相(Hue)通過(guò)加入不同比例的白色能夠產(chǎn)生不同的顏色

二、色彩屬性

色彩的很多屬性能直接影響到一個(gè)物體的視覺(jué)效果。比如飽和度較高的物體比飽和度較低的物體更能吸引人的眼球，而明度較高的物體也有類似的效果。而實(shí)際上，色相本身也能傳達(dá)出特定的視覺(jué)感知。在所有色彩中，下列色彩尤其突出：

1、紅色(最突出)    2、藍(lán)色     3、綠色    4、橙色     5、黃色(最不突出)

當(dāng)你在頁(yè)面中使用紅色的時(shí)候，整體視覺(jué)會(huì)更加突出，所以當(dāng)你需要吸引用戶注意力或者涉及重要操作的時(shí)候，可以這么用色。而黃色相對(duì)而言更容易融入背景色，并不會(huì)像紅色那么抓人眼球。所以，當(dāng)你在制作配色方案的時(shí)候，這些色彩關(guān)系和配對(duì)方案就顯得尤為重要了。合理地色彩搭配能夠讓你制作出震撼的視覺(jué)效果，設(shè)計(jì)出吸引人的焦點(diǎn)。為了更好的明確色彩之間的關(guān)系，設(shè)計(jì)師和藝術(shù)家們常常會(huì)借助色輪來(lái)進(jìn)行配色。

三、色輪

色輪可以說(shuō)是最實(shí)用的色彩管理工具之一，它可以反映不同色彩之間的關(guān)系，幫你挑選首選色、搭配色。 在制作配色方案的過(guò)程中，色輪是最重要也是最實(shí)用的工具之一。色輪最初還是源于牛頓1672年所發(fā)布的一個(gè)實(shí)驗(yàn)，牛頓使用棱鏡來(lái)查看不同波長(zhǎng)的光，將折射后的光線投射到一個(gè)圓環(huán)上。隨后他證明，飽和度最高的色彩位于色輪的外側(cè)，而中性色位于中間。牛頓認(rèn)為，藝術(shù)家可以借助他的研究成果來(lái)提高藝術(shù)作品中的色彩對(duì)比。實(shí)際上他的色輪模型也確實(shí)為設(shè)計(jì)師們提供來(lái)行之有效的配色途徑，創(chuàng)造出更為漂亮的藝術(shù)作品。幾百年后的今天，色輪依然是設(shè)計(jì)師手中最為得力的配色工具之一，不論是網(wǎng)頁(yè)設(shè)計(jì)還是品牌設(shè)計(jì)，色輪能賦予你的設(shè)計(jì)一套富有凝聚力的配色方案。由于色輪本身所承載的色彩數(shù)目限制，它所提供的配色方案更多是一個(gè)大概，而非最終的方案。傳統(tǒng)意義上的色輪通常是印刷出來(lái)的2～3個(gè)紙質(zhì)環(huán)形構(gòu)成的，中間被固定住，可以旋轉(zhuǎn)。Adobe的網(wǎng)站Kuler就為你提供了一個(gè)不錯(cuò)的在線版本，并且還能幫你配色。另外一個(gè)在線色輪網(wǎng)站是Colorhexa.com，也是不錯(cuò)的選擇。

四、配色方案

當(dāng)你選好基本的顏色之后，你就可以借助色輪來(lái)確定配色方案了。

?近似色——你可以使用色輪上位置相鄰的色彩。確定首選色之后，你需要選擇用來(lái)搭配的第二和第三種顏色。近似色與你的首選色接近而不同，能與之和諧存在，你可以使用近似色來(lái)構(gòu)建配色方案。

?單色——基于單色的配色方案也不難實(shí)現(xiàn)，首選色的色相確定之后，調(diào)整它的色度、色調(diào)和色彩（讓其與不同比例的黑色、白色和灰色混合），也可以形成一套配色方案。

?三色——三色配色方案借助色輪很容易實(shí)現(xiàn)，也就是使用色輪上相互等距離的3種顏色即可。

?互補(bǔ)色——色輪中心對(duì)稱的兩邊的顏色就是互補(bǔ)色，兩種色彩相互抵消，色盲的用戶可能分辨不出來(lái)部分對(duì)比色。所以，如果你想每個(gè)人都看清楚網(wǎng)頁(yè)的內(nèi)容，那么請(qǐng)不要使用兩種正好處于相反位置的色彩。（稍微偏一點(diǎn)就好了）

?復(fù)合色——確定首選色之后，挑選一個(gè)互補(bǔ)色，然后加上一個(gè)與首選色同色系的色彩，這樣的三色搭配方案很容易實(shí)現(xiàn)，提供了明顯的色彩反差，也不容易被濫用。

?中性色——很多高大上的網(wǎng)站就是這么配色的，就靠中性色黑白灰撐起來(lái)的。

?自定義——拋開(kāi)上面的配色規(guī)則，不再遵循傳統(tǒng)，用更加冒險(xiǎn)和激進(jìn)的方案來(lái)裝飾網(wǎng)站。

最后，請(qǐng)記住最后一點(diǎn)，網(wǎng)站配色的目的是要提高網(wǎng)站的體驗(yàn)和可讀性，不要讓用戶分心。當(dāng)你設(shè)計(jì)配色方案的時(shí)候，需要保證即使是色盲用戶都能準(zhǔn)確而輕松地獲取網(wǎng)站內(nèi)容，這也就意味著你的配色要保證足夠的視覺(jué)反差，而非全部使用對(duì)比色。最簡(jiǎn)單的驗(yàn)證方法，就是將飽和度降到最低，如果你依然能看到網(wǎng)站最重要的內(nèi)容，能看清圖形和圖像，就好了。這樣一來(lái)，想必你也對(duì)于網(wǎng)頁(yè)配色有了更清晰的想法了吧。至少選擇兩種色彩，一主一次，并且兩種色彩足以支撐起網(wǎng)站的視覺(jué)。在必要的時(shí)候，可以基于這兩種色彩拓展出更多的同色系色彩，令網(wǎng)站色彩更豐富。

五、色調(diào)、色度和色彩、配色方案最重要的因素

當(dāng)你要使用你的配色方案來(lái)設(shè)計(jì)網(wǎng)頁(yè)布局的時(shí)候，你需要仔細(xì)審視整個(gè)網(wǎng)站來(lái)考慮如何使用這些色彩來(lái)引導(dǎo)你的用戶。審視網(wǎng)頁(yè)布局，你得先找出哪些地方更重要，哪些地方需要你的用戶點(diǎn)擊，哪個(gè)頁(yè)面是你希望用戶優(yōu)先訪問(wèn)的，確定了這些用戶行為方向之后，你就知道哪些地方的視覺(jué)是需要強(qiáng)化的。合理調(diào)整配色中顏色的色彩、色度和色調(diào)可以讓頁(yè)面不同的部分有輕重之分，正確引導(dǎo)用戶。很多時(shí)候，你希望用戶能直接點(diǎn)擊某個(gè)按鈕，通常網(wǎng)頁(yè)設(shè)計(jì)中會(huì)讓它成為一個(gè)“行為召喚按鈕”，讓它隨著鼠標(biāo)行為而改變顏色。為了吸引用戶，按鈕一般狀態(tài)下會(huì)使用首選色，那么要如何選擇它的懸停和禁用時(shí)候的顏色呢？一般來(lái)說(shuō)，最好是有微小的過(guò)度，所以很多設(shè)計(jì)師會(huì)選擇使用同色系的色調(diào)或者色度來(lái)表示不同的狀態(tài)。這個(gè)時(shí)候你可以從首選色#00AEEF開(kāi)始，加入一定的黑色(Shade)，配出Hover的時(shí)候的用色#0077A1。按下?tīng)顟B(tài)下，色彩應(yīng)該會(huì)更深，那么，你可以加入更多的黑色來(lái)模擬出那種物理按鈕被按下的狀態(tài)。通常當(dāng)按鈕被禁用的時(shí)候，設(shè)計(jì)師會(huì)讓色彩看起來(lái)更淺一點(diǎn)，所以，你需要做的就是讓首選色色彩或者色調(diào)更淺一點(diǎn)(加入白色或者灰色)，就成了。用戶界面中有許多元素，涉及到各種不同的操作，為了區(qū)分它們又得忠于配色方案，靈活調(diào)整色彩、色度和色調(diào)是非常必要的。

1、中性色讓網(wǎng)頁(yè)有對(duì)比更平衡

在很多網(wǎng)頁(yè)中，你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)的主體通常使用了白色的背景和灰色或者黑色的文字。這種設(shè)計(jì)上的嘗試早已有之，這種對(duì)比度確保了可讀性。使用中性色的美妙之處在于，它可以和任何配色方案搭配。你可以在配色方案中添加中性色，提高排版效果和可讀性。你也可以在網(wǎng)頁(yè)元素中適當(dāng)?shù)卦黾踊叶?，提高信息的層次，并不是網(wǎng)頁(yè)中每個(gè)元素都非得色彩鮮亮。有了層次，視覺(jué)就有了焦點(diǎn)，用戶就不會(huì)分心。

2、選擇多少色彩才合適

通常能具備主次兩種色調(diào)就夠用了，但是也可以通過(guò)調(diào)整色調(diào)、色彩和色度可以靈活創(chuàng)造更多的可能性。值得一提的是，網(wǎng)站的色彩比例控制為6:3:1最為適宜。色彩比例均勻的話，會(huì)讓色彩之間相互沖突，主次不分。6:3:1規(guī)則指的是，主色調(diào)應(yīng)該覆蓋6成的網(wǎng)頁(yè)和UI元素，輔助色占據(jù)3成，而剩下的1成則應(yīng)該是裝飾色或者強(qiáng)調(diào)色，讓網(wǎng)站或者UI更舒適。安古信息致力于高端網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、APP開(kāi)發(fā)、微信商城、分銷系統(tǒng)、多店系統(tǒng)、系統(tǒng)平臺(tái)開(kāi)發(fā)等領(lǐng)域，所有項(xiàng)目均為您提供，供您選擇！

如有此類需求可聯(lián)系安古信息客服

掃一掃在手機(jī)打開(kāi)當(dāng)前頁(yè)