網(wǎng)頁(yè)設(shè)計(jì)色彩搭配技巧

本文格式為Word版，下載可任意編輯——網(wǎng)頁(yè)設(shè)計(jì)色彩搭配技巧網(wǎng)頁(yè)設(shè)計(jì)色調(diào)搭配技巧

色調(diào)幾乎是全體設(shè)計(jì)體系中不成疏忽的組成片面，而在網(wǎng)頁(yè)設(shè)計(jì)中，色調(diào)本身所發(fā)揮的作用并不單一，下面是我共享的網(wǎng)頁(yè)設(shè)計(jì)色調(diào)搭配技巧，一起來(lái)看一下吧。

1、通過(guò)比例變化創(chuàng)造視覺(jué)焦點(diǎn)

操縱色調(diào)的比例來(lái)創(chuàng)造視覺(jué)焦點(diǎn)是常見(jiàn)的色調(diào)運(yùn)用手法之一，操縱色調(diào)的比例實(shí)際主要是通過(guò)操縱色調(diào)所在元素的大小來(lái)達(dá)成效果的。譬如Viporte這個(gè)網(wǎng)站，當(dāng)你上下滾動(dòng)首頁(yè)的時(shí)候，每個(gè)片面都用超大的字體舉行了裝飾，而每個(gè)字母都使用了美麗的色調(diào)舉行填充。不同的文字使用了不同的色調(diào)，并且搭配以相應(yīng)的圖片。

每個(gè)頁(yè)面的焦點(diǎn)斷定是最中心的圖片和字母，而焦點(diǎn)的形成和色調(diào)的比例與運(yùn)用脫不開(kāi)關(guān)系。操縱色調(diào)的占比，無(wú)論是多還是少，只要有明確的目的，總能形成吸引留神力的焦點(diǎn)。無(wú)論是我們常說(shuō)的“萬(wàn)花叢中一點(diǎn)綠”，還是極簡(jiǎn)主義設(shè)計(jì)中大面積的留白，都是色調(diào)比例操縱下所構(gòu)成視覺(jué)焦點(diǎn)的典型案例。

2、通過(guò)比較度吸引用戶留神

在設(shè)計(jì)過(guò)程中，使用色調(diào)來(lái)操縱比較度也是設(shè)計(jì)師頻繁使用的技巧之一。當(dāng)設(shè)計(jì)的整體色調(diào)趨于溫和和寧?kù)o的時(shí)候，突然注入強(qiáng)比較的色調(diào)，能夠瞬間抓住用戶的留神力。

而Thinx這個(gè)網(wǎng)站在設(shè)計(jì)的時(shí)候就將比較度操縱得很好。網(wǎng)頁(yè)主體的配色采用的是經(jīng)典的黑白搭配，白色的背景搭配黑色的文本。而整體的設(shè)計(jì)感的來(lái)源那么主要源于排版和彩色的圖片。

網(wǎng)站所采用的圖片明顯經(jīng)過(guò)用心的選擇和設(shè)計(jì)，紅色的底色、黑色的內(nèi)衣和模特外露的細(xì)膩肌膚色在圖片強(qiáng)烈的碰撞，美麗而彌漫誘惑，圖片大膽的色調(diào)搭配和素色的背景與文字形成了鮮明而猛烈的比較，無(wú)論是經(jīng)典的紅黑搭配，還是永恒的黑白配色，都足夠美麗和吸引人。

Thinx這個(gè)案例我分外熱愛(ài)，并且經(jīng)常會(huì)用到，由于它證領(lǐng)略設(shè)計(jì)師并不確定非得靠高飽和度的霓虹色來(lái)創(chuàng)造高比較度的配色。即使是兩種平衡的顏色，也能讓整個(gè)設(shè)計(jì)脫穎而出。

3、使用色調(diào)創(chuàng)造UX模式

高度一致的配色方案能夠創(chuàng)造出視覺(jué)模式，而延遲到用戶體驗(yàn)上，那么會(huì)讓整個(gè)UX呈現(xiàn)出模式化的特征。模式化的設(shè)計(jì)讓用戶更輕易適應(yīng)，用戶更輕易摸索出規(guī)律，也更輕易產(chǎn)生相匹配的預(yù)期，換句話說(shuō)，UX模式能夠培養(yǎng)用戶習(xí)慣，同用戶產(chǎn)生深刻的關(guān)聯(lián)。就像用戶習(xí)慣了某些特定的圖標(biāo)之后，在其他地方看到這些圖標(biāo)就知道它們的`含義，明白該如何交互了。

譬如，小房子圖標(biāo)會(huì)讓用戶想到首頁(yè)、主頁(yè)，而垃圾桶那么會(huì)關(guān)聯(lián)上刪除的概念。色調(diào)相對(duì)而言更加主觀，由于每個(gè)網(wǎng)站和APP都會(huì)采用自己的配色方案，不同的色調(diào)代表不同的含義。

那我們就以Underbelly這個(gè)產(chǎn)品表示頁(yè)作為例如吧。在Underbelly這個(gè)網(wǎng)站中，全體可點(diǎn)擊的組件都是藍(lán)色的，你在試用網(wǎng)站幾秒鐘之后，能夠快速掌管這個(gè)UX模式，并且明白如何操作。這就是Underbelly通過(guò)色調(diào)構(gòu)建UX模式的方法。UX模式的優(yōu)勢(shì)在于，它讓用戶更快地熟悉你的產(chǎn)品。越輕易識(shí)別，用戶的想法越少，產(chǎn)品的的使用也就更加順暢了。

4、使用色調(diào)來(lái)創(chuàng)造層次

當(dāng)我們欣賞網(wǎng)頁(yè)和各種界面的時(shí)候，信息的層次感很大程度是借助視覺(jué)來(lái)營(yíng)造的。使用色調(diào)來(lái)創(chuàng)造視覺(jué)層次感就很順其自然了。

在Skore的產(chǎn)品頁(yè)面中，每一個(gè)片面都有使用到綠色的元素。重復(fù)的綠色元素不僅創(chuàng)造出可供用戶快速識(shí)別的模式，它也讓用戶能夠快速明白哪些因素更加重要。通常，我們解釋視覺(jué)層次的時(shí)候，會(huì)用不同大小、粗細(xì)的字體來(lái)闡述信息層次和布局，但是不同強(qiáng)度的色調(diào)，同樣可以實(shí)現(xiàn)層次的劃分。

在Skore這個(gè)案例當(dāng)中，綠色和灰色的文本以及白色的背景之間有著良好的比較度，整個(gè)配色方案不憑借其他的強(qiáng)調(diào)色，以綠色為主。這種相對(duì)穩(wěn)定的配色布局有助于讓每個(gè)片面都有層次地呈現(xiàn)出來(lái)。綠色不僅吸引用戶關(guān)注關(guān)鍵的元素，而且為不同的片面的內(nèi)部供給層次布局。

5、充分利用色調(diào)的好像性

除開(kāi)其他的目的，設(shè)計(jì)師使用色調(diào)或者調(diào)整色調(diào)的目的，根本都是為了創(chuàng)造設(shè)計(jì)的一致性。InVision的年度總結(jié)頁(yè)面使用了從粉色到紫色的漸變，在頁(yè)面的下方，粉色和紫色同樣應(yīng)用到了按鈕中，此外，在著陸頁(yè)當(dāng)中，將比較度明顯的白色置于粉色+紫色的背景之上，確保信息的明顯呈現(xiàn)。假設(shè)色調(diào)每次都不一樣，那么整個(gè)設(shè)計(jì)看起來(lái)就不是那么令人難忘了。

另外一個(gè)案例來(lái)自于Comotion。Comotion的工作室首頁(yè)采用了幾種不同的色調(diào)，但是這些色調(diào)的色調(diào)是分外接近的，從而創(chuàng)造出了一種和而不同的配色方案。在這個(gè)設(shè)計(jì)案例當(dāng)中，幾個(gè)不同的色調(diào)互為搭配，并不會(huì)太過(guò)于突出，但是又能夠恰到好處地舉行強(qiáng)調(diào)，最終讓色調(diào)足夠好看，有保持了用戶的參