如何在網(wǎng)頁設(shè)計(jì)中正確應(yīng)用色彩？

在網(wǎng)頁設(shè)計(jì)中正確應(yīng)用色彩從來都不是一件容易的事情！當(dāng)網(wǎng)頁上的產(chǎn)品介紹、推銷言辭和客戶評(píng)價(jià)在為訪問者傳遞產(chǎn)品信息時(shí)，顏色也會(huì)在情感層次上與訪客產(chǎn)生交流。應(yīng)用正確的顏色不僅可以幫助訪問者快速理解看到的內(nèi)容，還會(huì)促使訪客對(duì)品牌總體產(chǎn)生積極的看法。反之，在網(wǎng)頁設(shè)計(jì)中錯(cuò)誤地應(yīng)用色彩，則可能會(huì)導(dǎo)致潛在用戶流失。

簡(jiǎn)而言之，色彩是給訪客留下良好印象最快、最直接的方式。如何才能正確應(yīng)用色彩？別著急！了解了這些色彩理論和原則，你就能輕松應(yīng)對(duì)了！

不同的顏色分別代表什么?

選擇顏色不能光憑個(gè)人喜好，還需要知道其背后的含義。每種顏色都有不同的含義，并且以特定的方式影響著人們的情感。這就是色彩對(duì)于網(wǎng)頁設(shè)計(jì)如此重要的原因—— 能夠迅速傳達(dá)關(guān)于網(wǎng)站業(yè)務(wù)/產(chǎn)品的正確信息。

接下來，讓我們一起看看顏色背后的含義以及它們?cè)谇榫w上發(fā)揮的作用。

暖色系

紅色能喚起激情與活力的網(wǎng)頁設(shè)計(jì)，由Aneley設(shè)計(jì)。

暖色常常帶給來訪者一種充滿活力的感覺，但如果單獨(dú)使用它們，則會(huì)用力過猛。但將它們與清爽中性的顏色搭配不失為達(dá)到平衡的好辦法。

紅色 —— 活躍，情緒化，熱情，力量，愛，強(qiáng)烈。

粉色 —— 甜蜜，浪漫，俏皮，溫暖，富有同情心，柔軟。

橘色 —— 溫暖、熱情、成功、決心、友好。

黃色 —— 年輕，活潑，精力充沛，新鮮，樂觀。

冷色系

冷色能帶給來訪者一種平靜的感覺，這也是它們經(jīng)常被應(yīng)用在網(wǎng)站上的原因。但是需要注意的是：過度使用冷色會(huì)帶給來訪者冷漠、沒有人情味的感覺。

綠色 —— 清新，平靜，放松，信任，和平，希望，治愈。

藍(lán)色 —— 舒適，清澈，冷靜，信任，正直，忠誠，可靠。

紫色 —— 魅力、力量、懷舊、奢華、野心、精神。

通過用藍(lán)色來達(dá)到一種忠誠和信任的網(wǎng)頁設(shè)計(jì)，由DSKY設(shè)計(jì)。

中性色

中性色一般適合與暖色或冷色搭配使用。它們通常被用來淡化原色，在網(wǎng)頁設(shè)計(jì)中起到平衡色彩的作用。

灰色 —— 尊敬，智慧，耐心，現(xiàn)代，長(zhǎng)壽，智慧。

黑色 —— 力量，大膽，嚴(yán)肅，優(yōu)雅，豪華，戲劇性，正式。

棕色 —— 友好、大地、家庭、戶外、信譽(yù)、簡(jiǎn)單、持久。

一個(gè)使用色彩平衡創(chuàng)造豪華，簡(jiǎn)約感覺的網(wǎng)頁設(shè)計(jì)，由martinthehorrible設(shè)計(jì)。

色彩心理學(xué)與品牌認(rèn)知

當(dāng)涉及到創(chuàng)建和推廣網(wǎng)站品牌時(shí)，顏色背負(fù)著吸引注意力、創(chuàng)造欲望、推動(dòng)轉(zhuǎn)化率和贏得訪問者忠誠度的重要任務(wù)。只有選擇并應(yīng)用了正確的顏色，用戶即使沒有看到商標(biāo)也能認(rèn)出熟悉的品牌。

除了上面提到的顏色背后的含義外，還有一些常見的色彩應(yīng)用規(guī)律可以幫助品牌創(chuàng)造知名度。例如，餐廳通常是紅色和橙色，銀行和金融機(jī)構(gòu)通常是藍(lán)色，奢侈品包裝通常是黑色，酒店通常使用白色，藍(lán)色，黑色或綠色。一些以顏色著稱的標(biāo)志性品牌包括CNN（美國有線電視新聞網(wǎng)）的黑白紅應(yīng)用，國家地理的黃色應(yīng)用，以及麥當(dāng)勞使用的紅黃搭配等。

如果你還在糾結(jié)于選擇一種能讓你的品牌產(chǎn)生共鳴的顏色，最有效的方法就是多看看知名品牌的Logo或網(wǎng)站配色。然后根據(jù)上文提供的顏色含義，弄清楚為什么要選擇這些顏色進(jìn)行設(shè)計(jì)。這樣，很快你就能找到自己想要的顏色了。

網(wǎng)頁設(shè)計(jì)中的色彩理論

在上文中我們了解了顏色對(duì)訪問者的情感影響，那么接下來我們可以利用色彩理論進(jìn)行色彩搭配，來獲得對(duì)用戶行為的進(jìn)一步影響。

簡(jiǎn)單地說，色彩理論就是色彩在色輪上相互作用背后的科學(xué)。在設(shè)計(jì)中，色彩理論帶給設(shè)計(jì)者的配色靈感非常受用。最常見的配色結(jié)構(gòu)是三色系、互補(bǔ)色和相似色。

設(shè)計(jì)師可以通過考慮顏色的互補(bǔ)、對(duì)比和活力三方面來對(duì)色輪進(jìn)行更細(xì)致的選擇。

顏色互補(bǔ)是我們看到顏色與其他顏色相互作用的方式。當(dāng)你從顏色輪的相反的兩端匹配顏色時(shí)，你會(huì)有在視覺上被吸引的感覺。這是因?yàn)楫?dāng)一種顏色增強(qiáng)另一種顏色時(shí)，它為眼睛提供了視覺上的平衡。

對(duì)比色通過清晰劃分頁面上的元素來吸引訪問者注意力，既可以提高文本的可讀性，也可以將來訪者注意力吸引到頁面的特定部分。

活力色可以影響訪問者的情緒反應(yīng)。明亮的顏色可以讓來訪者感受到活力；深沉的顏色可以讓他們感到放松，從而更能專注于內(nèi)容。

選擇原色

開始搭配網(wǎng)頁設(shè)計(jì)的顏色之前，設(shè)計(jì)師的首要任務(wù)是為品牌建立原色。設(shè)計(jì)師可以從品牌標(biāo)志或品牌其他素材中提取，倘若不能，也可以利用色彩心理學(xué)和色彩聯(lián)想來選擇原色。

這個(gè)網(wǎng)頁設(shè)計(jì)從品牌標(biāo)志中提取了原色的網(wǎng)頁設(shè)計(jì)，由Iconic Graphics設(shè)計(jì)。

色彩渲染和陰影

一旦網(wǎng)站選定了基本的品牌原色，就可以開始考慮配色方案了。有些網(wǎng)站在設(shè)計(jì)時(shí)會(huì)使用單一顏色，但大多數(shù)時(shí)候建議你使用一些不同的色調(diào)。

在整個(gè)設(shè)計(jì)中只使用原色不見得是最好的色彩方案。你可以在保持基礎(chǔ)顏色不變的情況下，將顏色調(diào)暗或變亮，在網(wǎng)站上創(chuàng)造出一些微妙的變化。例如，如果你在網(wǎng)站各個(gè)板塊使用了淺色調(diào)的原色，那么你可以在CTA按鈕上使用主色調(diào)或更突出的色調(diào)，這樣就可以起到強(qiáng)調(diào)的作用。在下面的例子中，我們來看看設(shè)計(jì)師UI Maniac是如何做到這一點(diǎn)的。

原色橙色被用在不同的色調(diào)中來創(chuàng)造不同的色調(diào)案例，由UI Maniac設(shè)計(jì)。

60-30-10法則

這種比例法則非常簡(jiǎn)單，但對(duì)搭配不同的顏色非常有效。為了營造和諧的視覺效果，色彩的組合一般應(yīng)按60%-30%-10%的比例進(jìn)行。設(shè)計(jì)師不必總是用三種顏色，但這個(gè)比例確實(shí)是平衡色彩的一個(gè)安全數(shù)字。使用這個(gè)法則時(shí)需注意，60%的部分代表的是主色，30%代表副色，10%應(yīng)該是強(qiáng)調(diào)色。這個(gè)比例的配色是最賞心悅目的，因?yàn)樗梢宰屢曈X元素逐漸浮現(xiàn)，層層遞進(jìn)。

一個(gè)實(shí)現(xiàn)60-30-10規(guī)則的網(wǎng)站案例，由JPSDesign設(shè)計(jì)。

色彩對(duì)比

色彩對(duì)比是視覺構(gòu)圖中非常重要的一部分。例如，如果需要訪客注意到網(wǎng)站的某個(gè)特定區(qū)域(如CTA按鈕)，設(shè)計(jì)可以使用兩種對(duì)比度很高的顏色，如橙色和綠色，或紅色和藍(lán)色分別應(yīng)用于網(wǎng)站背景和按鈕。

對(duì)比度高但不傷眼睛的案例，該網(wǎng)站由JPSDesign設(shè)計(jì) 。

雖然高對(duì)比色的強(qiáng)調(diào)作用很棒，但也應(yīng)該謹(jǐn)慎使用。如果你在整個(gè)網(wǎng)站上都使用高對(duì)比度，訪問者就很難閱讀或查看文本。建議設(shè)計(jì)師在大多數(shù)設(shè)計(jì)中使用中等對(duì)比色，只有在突出關(guān)鍵元素時(shí)才應(yīng)用高對(duì)比色。

從圖像著手

在某些情況下，從圖像開始設(shè)計(jì)是有幫助的。如果你的腦海中有一個(gè)可以定義品牌的圖像，或者客戶已經(jīng)選擇了圖像，那么你就可以直接從中提取主要顏色。

在這個(gè)設(shè)計(jì)中有多種顏色，中性色調(diào)提供平衡。 ——arosto

處理多個(gè)圖像可能有些棘手，因?yàn)槟惚仨氃谠O(shè)計(jì)中找到一種保持顏色和諧的方法。在這種情況下，以下幾種方法可以有效平衡你的圖像。

考慮把它們轉(zhuǎn)換成灰度圖像：

（1）調(diào)整圖像的活力降低色調(diào)，

（2）使用中性色來平衡圖像，

（3）使用網(wǎng)頁設(shè)計(jì)應(yīng)用的調(diào)色板顏色創(chuàng)建一個(gè)漸變疊加。

以上的解決方案可以根據(jù)項(xiàng)目具體情況使用，就可以輕松地將所選的圖像和諧地組合在一起。

色彩賦予網(wǎng)頁設(shè)計(jì)生命

色彩無處不在，如果使用得當(dāng)，它們可以喚起訪客情感并促成操作或購買。雖然顏色在網(wǎng)頁設(shè)計(jì)中扮演著極其重要的角色，但它們并不是完美布局的唯一關(guān)鍵。色彩理論只是無數(shù)創(chuàng)建優(yōu)秀網(wǎng)頁設(shè)計(jì)策略中的一個(gè)，你可以應(yīng)用它來創(chuàng)建優(yōu)秀的網(wǎng)頁設(shè)計(jì)。

希望本文的色彩理論和配色技巧對(duì)你有所幫助，但是請(qǐng)記住，在設(shè)計(jì)中沒有嚴(yán)格的規(guī)則。事實(shí)上，最好的設(shè)計(jì)往往會(huì)打破常規(guī)。用色彩心理學(xué)作為指導(dǎo)進(jìn)行設(shè)計(jì)，但同時(shí)也要相信自己在設(shè)計(jì)上的創(chuàng)造本能！

原文作者：Mike Projkovski

原文鏈接：https://99designs.com/blog/web-digital/web-design-...