網(wǎng)頁設(shè)計(jì)色彩搭配9技巧，不能不知的色彩心理學(xué)

在心理學(xué)的研究中，大腦對(duì)顏色的敏感度很高。像是讀者對(duì)雜志內(nèi)頁的廣告內(nèi)容全彩的偏好比起黑白高出了26%，有92.6%的人認(rèn)為視覺將影響他們的購物決策，而人們的潛意識(shí)在90秒內(nèi)便會(huì)透過顏色判讀他們是否要購買商品，又這樣的下意識(shí)行為在大型的物品，如行李箱的挑選上又特別明顯。

上述的結(jié)果都再再顯示出顏色對(duì)使用者的影響。打造一個(gè)品牌，在視覺上給人的形象與感覺是很重要的，是人們第一眼對(duì)你的印象，也是去建立信任感、讓消費(fèi)者對(duì)品牌產(chǎn)生長期支持的重要關(guān)鍵。既然如此，你的網(wǎng)站顏色搭配、Logo顏色挑選是否恰當(dāng)呢？

你所選擇的品牌顏色將會(huì)永遠(yuǎn)影響你的品牌意識(shí)。根據(jù)研究結(jié)果顯示，顏色會(huì)增加80%的品牌認(rèn)知度，而品牌顏色也會(huì)影響品牌傳遞出的價(jià)值。在調(diào)查結(jié)果中發(fā)現(xiàn)，前100大的品牌中，他們的品牌顏色前四大代表色依序是：藍(lán)、黑、紅、黃。橘色、綠色和紫色被使用的比率則相對(duì)少了許多。

而在前100大的品牌中，有51%都是使用單色系的色調(diào)；有30%則是使用兩種色調(diào)，以下有幾個(gè)從TheLogoFactory.com做出來的標(biāo)示，你可以去感受一下色系變換以后，品牌或是號(hào)志給你的感受有什麼不同。

好的色系選擇與搭配會(huì)讓你的事半功倍。你一定不會(huì)想要隨便選一個(gè)色系來建構(gòu)你的網(wǎng)站，只因?yàn)椤缚雌饋砗芸帷拱?！以下提?個(gè)小技巧，教你如何選擇網(wǎng)站配色。

 1. 了解顏色如何影響情緒

在前面描述了那麼多顏色對(duì)人們選擇的影響之后，你一定也會(huì)知道顏色是會(huì)影響人們的情緒的。但是哪一種顏色會(huì)喚醒什麼樣的情緒？而對(duì)不同地理位置的消費(fèi)族群，即便是相同的顏色也可能代表不同的意義。比方說在婚禮的時(shí)候，臺(tái)灣人可能會(huì)喜歡紅色帶喜氣，西方人就習(xí)慣是白紗或簡約風(fēng)的色調(diào)。

那你的品牌想要給予人們什麼樣的感受？想一想心理學(xué)背后顏色與情緒之間的關(guān)系。以下是根據(jù)北美消費(fèi)族群的調(diào)查結(jié)果，不同顏色的CTA如何影響人們的情緒：

黃色：樂觀、年輕，常被使用在獲取window shopper的注意力

紅色：充滿活力、心跳加速、創(chuàng)造急迫性，常出現(xiàn)在清倉大拍賣

藍(lán)色：建立信任感和安全感，常出現(xiàn)在銀行和企業(yè)

綠色：跟健康有關(guān)，對(duì)眼睛來說最舒服的顏色，通常會(huì)使用在實(shí)體店家，可傳遞放鬆的感覺

橘色：積極、創(chuàng)造行動(dòng)呼吁，以帶動(dòng)訂閱、購買或銷售

粉紅色：浪漫和女性主義，通常會(huì)女性的和年輕女性的產(chǎn)品市場出現(xiàn)

黑色：強(qiáng)而有力，通常出現(xiàn)在奢華的商品上

紫色：放鬆和冷靜，常被用在常美妝和抗老化的產(chǎn)品

Color Emotion Guide也做了一張品牌色系的表，你可以用這張表作為品牌色系的參考選擇。

2. 考慮整體的主要目標(biāo)客群、性別和年齡層

你想要賣給哪一群人？你想要喚起他們什麼樣的情緒？這很重要！以下是Fasst Company針對(duì)紅、橙、黃、綠、藍(lán)、紫六種不同的顏色對(duì)人們的情緒和心理影響。想一想你的主要目標(biāo)客群的人格特質(zhì)還有情緒。選擇最合適的顏色作為網(wǎng)站的主要顏色，舉例來說，如果你是一間有機(jī)的食品公司，那麼最好選擇綠色，因?yàn)榫G色跟自然還有健康有關(guān)。

除了主要的目標(biāo)客群之外，客群的性別也可能會(huì)是考量的因素。如有些公司是比較針對(duì)不同性別銷售的。就必須要了解不同的性別的消費(fèi)者他們偏好的顏色。根據(jù)Colour Assignment調(diào)查22個(gè)不同國家的人顏色偏好的結(jié)果，男生跟女生喜歡的顏色則如下圖所示：

男生偏好的顏色：藍(lán)色（57%）、綠色（14%）、黑色（9%）、紅色（7%）、橘色（5%）

女生偏好的顏色：藍(lán)色（35%）、紫色（23%）、綠色（14%）、紅色（9%）、黑色（6%）

男生最不喜歡的顏色：咖啡色（27%）、紫色和橘色（22%）、黃色（13%）、灰色（5%）

女生最不喜歡的顏色：橘色（33%）、咖啡色（20%）、灰色（17%）、黃色（13%）、紫色（8%）

你會(huì)發(fā)現(xiàn)男生真的很喜歡藍(lán)色，并且討厭咖啡色跟紫色；女生則是喜歡藍(lán)色跟紫色，不喜歡橘色跟咖啡色。

不同年齡層也會(huì)對(duì)顏色有不同的偏好：

4. 透過測驗(yàn)了解什麼樣的顏色適合你的網(wǎng)站

如果你對(duì)于決定網(wǎng)站的色調(diào)有困難，那麼你可以透過Grasshopper的顏色測驗(yàn)幫你。這個(gè)測驗(yàn)會(huì)透過7個(gè)小問題來告訴你選擇顏色的方向。

5. 放下自己的偏見

如果你喜歡藍(lán)色，那麼你很可能會(huì)傾向?qū)⑵放频腖ogo或是網(wǎng)站的色系使用藍(lán)色。但如果你是一個(gè)鎖定女性消費(fèi)者的化妝品公司，選擇藍(lán)色就有點(diǎn)兒就大錯(cuò)特錯(cuò)了。因此你必須要放下自己的偏見，才不會(huì)因?yàn)閭€(gè)人的偏好導(dǎo)致銷售成本增加，并可能會(huì)隨著時(shí)間推移而對(duì)你的品牌印象有扣分的效果。

6. 選擇要用幾種顏色

到了這裡，你應(yīng)該已經(jīng)有一個(gè)初步色系的發(fā)想了，接著就要思考你總共要在網(wǎng)站上使用幾種顏色。但這沒有固定的標(biāo)準(zhǔn)答案，建議是採用60-30-10法則。這是在室內(nèi)設(shè)計(jì)和流行時(shí)尚產(chǎn)業(yè)常會(huì)使用到的配色比率，被稱之為「好和諧」的黃金原則。也就是將60%用主要的色系，30%用次要的色系，10％為輔助色系。

比如一個(gè)正式場合男生的上半身衣著搭配：外套的顏色可以用60%，襯衫是30%，領(lǐng)帶10%。以室內(nèi)空間搭配的話，牆壁色系用60%的比例，家居床品、窗簾30%，剩下的10%就是其他的物件、裝飾品、藝術(shù)品等。

舉Quicksprout的例子來說，綠色是它用的主色系，白色則是次要的顏色，黑色是輔助顏色。所以當(dāng)你把整張圖放在一起看，你會(huì)發(fā)現(xiàn)理想的顏色使用搭配是3種。這并不是說你的網(wǎng)站不能用4、5種顏色，只是顏色越多會(huì)越複雜，讓人抓不住重點(diǎn)在哪裡，很有可能因此而失焦，跳離網(wǎng)站。

7. 選擇你的顏色組合

在選好要幾種顏色做搭配以后，接著你需要考量的是色系組合。雖然你不是設(shè)計(jì)專家，但你需要幾個(gè)對(duì)照組合作比較。 最簡單的方式是採用對(duì)比的方式將網(wǎng)站的內(nèi)容清楚地呈現(xiàn)在瀏覽者的面前，不論是淺底深色字或是深底淺色字，只要搭配得宜，都很容易讓人一眼就抓住網(wǎng)頁的重點(diǎn)。

除了對(duì)比色系以外，你也可以考慮鄰近色、類似色和同類色。還記得以前在美術(shù)課的「色彩輪盤」嗎？

再者你也可以透過研究競爭對(duì)手的網(wǎng)站，找到適切的色系搭配。建議至少比較三個(gè)主要的競爭者，去分析他們採取什麼樣的顏色組合搭配，以及選擇該色系的原因。你可能可以創(chuàng)造與競爭對(duì)手類似的色系品牌和網(wǎng)站，又或者是用完全不同的色調(diào)以凸顯自己的差異。

說到這裡你可能會(huì)對(duì)顏色的安排有些想法，接著就能進(jìn)一步透過小工具幫忙，流線化整個(gè)色系選擇的過程，以下提供6個(gè)小工具：

(1) Colorspire

它可以很快的讓你看到不同顏色在網(wǎng)站上搭配的感覺，讓你能快速地修正網(wǎng)站的顏色搭配以節(jié)省時(shí)間。

（2） Paletton

Paletton跟Colorspire有點(diǎn)像，你可以選擇幾個(gè)色系和色塊做色彩的組合搭配。

(3) Color Explorer

如果想要更細(xì)節(jié)地挑選顏色，可以考慮使用Color Explorer。這是一個(gè)完全免費(fèi)的線上工具，注冊以后可以使用的功能則更多元。

(4) ColorSchemer Gallery

ColorSchemer是一個(gè)讓設(shè)計(jì)師可以共享和管理色系的地方，你可以透過ColorSchemer搜尋和下載新的配色，并且向他人展示，還可以依照日期、評(píng)分、下載次數(shù)和關(guān)鍵字搜尋不同的色系搭配組合。

(5) Colourlovers

Colourlover有點(diǎn)像是ColorSchemer，提供不同的色彩搭配組合供使用者蒐藏搜尋和選擇，也能讓使用者分享和收藏關(guān)于配色的靈感。

(6) Color Hunter

Color Hunter 可以幫你從你喜歡的色系搭配中，找到主要的顏色元素，這樣你就可以套用在自己的網(wǎng)站上。比方說你看到某個(gè)網(wǎng)站的色彩搭配很不錯(cuò)，只要貼上圖片的網(wǎng)址或是上傳圖片，或是輸入關(guān)鍵字Color Hunter就會(huì)自動(dòng)幫你找出它們的主要色調(diào)供你參考。注冊帳號(hào)了以后，可以保存自己喜歡的色系搭配。

另一個(gè)跟Color hunter滿像的工具是Pictaculous，一樣是透過上傳圖片即可給予相對(duì)應(yīng)的色彩組合搭配。

最后，當(dāng)你選擇好色系搭配以后，可以再使用Check my color的演算法去看你所使用的色彩元素搭配是否適切。

若你覺得上述的工具不夠用，這裡再提供你一個(gè)工具清單，以為你的網(wǎng)站選色理出更多頭緒。

【結(jié)語】

你不需要是個(gè)大藝術(shù)家，才能想出很棒的顏色搭配。只需要瞭解一點(diǎn)色彩心理學(xué)還有顏色所帶動(dòng)的情緒，并且根據(jù)60-30-10法則和顏色的輪盤，藉由一點(diǎn)實(shí)驗(yàn)和A/B測試，就能找到最適合的網(wǎng)站色系組合。

長期來說，你的網(wǎng)站機(jī)能透過顏色傳遞更多訊息，包括品牌的價(jià)值，同時(shí)藉此降低網(wǎng)站瀏覽者地彈出率、延長他們停留在你的網(wǎng)站上的時(shí)間，以及帶來更高的轉(zhuǎn)換率。

文章名稱：網(wǎng)頁設(shè)計(jì)色彩搭配9技巧，不能不知的色彩心理學(xué)
文章網(wǎng)址：http://www.bm7419.com/news10/43410.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、微信小程序、微信公眾號(hào)、企業(yè)網(wǎng)站制作、網(wǎng)站排名、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)