提高參與度的最佳配色網站

你的配色方案是否引發了你所期望的反應?

你是否發現自己被潛在的網站調色板的數量所淹沒?

每個人都有自己喜歡的顏色,當涉及到他們的工作或其他方面時,他們往往會傾向於這種顏色。

但是一個熟練的設計師明白根據品牌來評估一個顏色方案的重要性。這些顏色的含義。以及所推廣的產品或服務。

顏色實際上是根據你使用的調色板引起的情感反應。

好的顏色選擇需要仔細的規劃。

它們可以影響訪問者如何解釋他們所看到的東西,就像網站的布局和排版一樣–而且,如果做得好,它們可以對每個訪問者對品牌的整體評價產生積極影響。

在這篇文章中,我們將看看為什麽為你的網站選擇正確的顏色很重要,以及來自真實網站的23種不同的調色板能有效地抓住訪問者的註意力。

為什麽你的顏色方案如此重要?

Quick Hits CRO Tips Episode 4

在我們進入為你的網站選擇顏色方案的過程之前,重要的是要了解為什麽你的網站顏色方案如此重要。

畢竟,你可能在想,真正重要的是內容。這是真的,但它不是一切。

人們喜歡內容。他們被新鮮的聲音和誘人的信息所吸引,但你必須首先抓住他們的註意力。這就是網站調色板發揮作用的地方。

如果你選擇了正確的網站配色方案,你就有機會大大改善訪問者對你內容的體驗。

下面是方法。

1. 創建品牌識別

你的網站本質上是你公司的網上家園。

這意味著它需要準確地代表你的品牌。除此之外,它還需要有足夠的記憶力,使用戶在第一次訪問後還會回來。

畢竟,你的許多訪問者在第一次訪問時還沒有準備好進行購買或其他主要的轉換 – 他們需要記住你的公司,以便回來采取這些行動。

幸運的是,顏色可以增加80%的品牌識別度。

因此,如果你的公司已經有一個既定的顏色方案,那麽在你的網站設計中包括這個方案是非常重要的。這將使訪問者更容易立即將其與他們所看到的你的品牌的其他地方聯系起來。

此外,如果你的顏色方案在整個網站上是一致的,那麽當他們回來時,無論他們登陸的是哪個頁面,他們都會知道他們來對了地方。

除了告訴用戶你的公司是誰,你的網頁設計在用戶對你的品牌的快速判斷中也起著重要作用。

根據一項調查,94%的受訪者將網頁設計列為網站第一印象的主要驅動因素之一。

當然,網頁設計所涉及的內容遠不止是顏色。

但是,鑒於顏色是你的網站上最明顯的元素之一,也是用戶在最初的50毫秒內可以辨別的唯一元素之一,你的調色板可以決定用戶對你公司的評價。

2. 塑造訪問者對你網站的感覺

在另一項關於消費者的第一印象如何形成的研究中,90%的初步評估僅基於顏色。

在某種程度上,這其中的原因很明顯。

畢竟,顏色是頁面中最容易 “理解 “的方面之一。它幾乎可以被即時評估,而且不需要訪問者評估副本或其他信息。

但是考慮顏色的心理學在這些快速判斷中扮演的角色也很重要。

許多公司利用了這些聯系,如下圖中的標誌所示。

網站-顏色-調色板-2-下圖中的標誌

例如,想要創造一種創造力和想象力的品牌傾向於在他們的圖像中加入紫色,而想要建立一種平衡和平靜感的品牌則傾向於黑色和白色。

這直接關系到你希望你的品牌擁有的 “個性”。

在一項關於品牌個性的研究中,心理學家和斯坦福大學教授Jennifer Aaker總結說,有五個核心維度在品牌個性中起作用。

網站-顏色-調色板-品牌個性-研究

品牌有時可以混合各種特征,但在大多數情況下,它們的 “個性 “主要集中在一個方面。例如,一家銷售野營裝備的公司會認同 “粗獷”,而一個時尚品牌則可能以 “精致 “為目標。

正如你在上面的標誌圖中所看到的,顏色在向消費者展示你的品牌個性方面發揮著重要作用。

雖然大多數人可能沒有意識到,一個公司的紅色標誌是為了創造一種興奮的感覺,但它仍然可以做到這一點。

而且,雖然每種顏色都能起到創造特定感覺或反應的作用,但對於大多數品牌和網站來說,某些顏色是比其他顏色更好的選擇。

例如,藍色通常被認為是最安全的選擇。這在一定程度上是因為它是大多數人最常見的 “最愛 “顏色。

事實上,57%的男性和35%的女性說這是他們最喜歡的顏色。

網站-顏色-調色板-藍色-最喜歡的顏色

因此,如果你想吸引廣泛的受眾,這可能是你的網站的一個偉大選擇。事實上,這可能是為什麽今天一些訪問量最大的網站,如Facebook和Twitter,使用它作為他們的標誌和品牌。

還值得註意的是,藍色通常也與信任、權威和可靠的感覺有關。

但這並不意味著它是每個網站的最佳選擇。這完全取決於你想傳達給你的訪問者的感覺。

例如,如果你的品牌以健康和保健為中心,綠色可能是創造這種關聯的更好選擇。而如果你想讓你的訪問者感到興奮並促使他們迅速采取行動,那麽紅色可能更有效地幫助你實現這一目標。

因此,當你為你的網站選擇顏色時,要考慮它們可能在你的訪問者中引起的情緒反應。

例如,如果你想為你的瑜伽館的網站創造一種寧靜的感覺,紅色可能不是最好的選擇–在你為設計投入大量資金之前,最好知道這一點。

3. 形成一種秩序感

website-color-palettes-2-logos-in-the-following-chart

除了你選擇的個別顏色可能喚起的情感反應,還有必要考慮你的網站上的顏色彼此之間的互動方式。

做到這一點的最好方法是看一下色彩理論的一些基本原則。

網站-顏色-調色板-3-顏色理論

如果你曾經上過藝術課或看過任何與設計有關的資源,你可能會看到類似於上面圖形中的色輪的東西。

這個色輪中最常見的概念是三原色(紅、黃、藍)和由它們混合而成的二、三原色之間的關系。

但除此之外,這個輪子還可以幫助你創造色彩的和諧或視覺上令人愉悅的色彩安排。一個和諧的網頁設計調色板可以幫助你建立一種平衡和秩序感。

有三種被廣泛接受的色彩方案可以用來建立這種類型的和諧:類比、單色和互補。

類比色方案是由色輪上並排的顏色組成的。這是最難做好的調色板之一,因為這些顏色很容易壓倒對方。

也就是說,類似的配色方案也是最有活力的。

因此,如果你想創建一個色彩豐富、視覺上有趣的網站,你可以用類似於以下三個例子的調色板來做。

網站-顏色-調色板-3-例子-1

單色方案屬於與前一種類型相反的光譜的另一端。顧名思義,它是由一種主色調組成的,但色調的強度和明度各不相同。

這些調色板是一些最容易創建和 “最安全 “實施的調色板,因為同一顏色的不同色調很少會發生沖突或感覺太忙。

因此,如果你想在你的網站上有一個相對簡單的外觀,像這三種單色方案對你的品牌來說可能很有效。

網站-顏色-調色板-3-例子-2

最後,互補型調色板的種類介於類比型和單色型之間。

它是由色輪上直接相對的顏色組成的。因此,雖然它涉及更多的顏色,但這些顏色自然地相互補充,不會讓訪問者感到不知所措。

如果你想在你的色彩方案中加入一些種類,而又不使你的網站顯得太過繁忙,像這些互補色方案可能是完美的選擇。

網站-顏色-調色板-3-示例-3

當然,這三種並不是你可以創建的唯一類型的色彩方案。事實上,最好的調色板類型根據你問的人而有所不同。

三聯式配色方案是主要的選擇之一。

網站-顏色-調色板-三段式顏色方案

這種配色方案涉及到使用三種顏色,它們在色輪上彼此相距120度。在上面的圖形中,這些顏色是橙色、綠色和紫色。

當你選擇你的顏色時,記住上面列出的類型並不是確定的規則。它們可以讓你對你的網站的整體感覺有一個大致的概念,但它們絕不是創建一個適合你的品牌的調色板的唯一方法。

無論你采用哪種調色板,你都可以用它來創建每個頁面上最重要內容的層次結構。

4. 讓某些元素脫穎而出

website-color-palettes-brand-personality-study

正如我在上一節中提到的,一個確定的網站調色板可以幫助表明某些元素的重要性。

當你決定如何在你的網頁上使用你的顏色方案時,你可以通過記住隔離效應來最大化這種影響。

這個心理學原理背後的一般想法是,一個項目越突出,它就越有可能被註意和記住。

確保你選擇的顏色能夠使某些行動呼籲在你的頁面上脫穎而出,而不與你的其他設計相沖突。

瘋狂的蛋熱圖和滾動圖

這種方法也符合大多數消費者的喜好。

在《對色彩組合的審美反應》和《消費者對色彩組合的偏好》這兩項研究中,研究人員發現,雖然消費者喜歡具有相似色調的色彩組合,但他們也喜歡具有高度對比的重點色彩的調色板。

第一項研究顯示,”隨著色調相似度的增加,配對偏好和和諧度都會增加”。但是,”盡管具有高度對比的色調的配對通常被判斷為既不可取也不和諧,但隨著與背景的色調對比的增加,形象色彩的偏好評分也會增加”。

在第二項研究中,研究人員發現,”人們一般喜歡將相對接近或完全匹配的顏色結合起來,但有些人通過使用對比色來突出一個標誌性的產品成分,這是例外”。

因此,盡管你的重點顏色應該有強烈的對比,但如果你的調色板的其他部分是由相對相似的色調組成的,那也是可以的,甚至是最好的。

這意味著,創建包括一種強烈的、引人註意的重點顏色的網頁設計調色板,不僅可以有效地隔離某些元素,而且也是創造一種許多訪問者會喜歡的組合的好方法。

5. 簡化與設計有關的決定

website-color-palettes-blue-favorite-color

當涉及到運行一個網站或一個企業(或兩者都是!)時,尋找簡化基本流程的方法總是一個好主意。

畢竟,你花在基本任務上的時間越少,你就有越多的時間花在對你的成功有更大影響的過程和決定上。

而建立網頁設計調色板是減少創建新網頁的時間的一個好方法。當你有一個既定的色彩方案時,你會使基本的設計選擇變得更加容易,無論是對你自己還是對你的設計師和開發人員來說。

如果你像這個企業那樣花時間以一種易於使用的方式記錄你的調色板,這一點尤其正確。

網站-顏色調色板-簡化設計-決定

當你為你的調色板創建一個用戶友好的檔案時,你製造了一個一目了然的資源,包含了每個元素的所有可能的選擇。

這樣,如果你(或你的設計師)在確定CTA按鈕使用哪種顏色時遇到困難,你可以簡單地參考該檔案,獲得完整的選項清單。

因此,你可以從一個預先設定的顏色列表中進行選擇,而不是絞盡腦汁地尋找所有的可能性。一旦你選擇了一些要使用或測試的顏色,所有的HEX和RGB代碼都已經在你面前了。

你應該加入多少種顏色?

這完全取決於你的設計的復雜性和顏色組合的類型。例如,如果你使用的是單色的網頁設計調色板,你可能需要七種甚至更多的顏色,才能在屏幕上捕捉到足夠的變化。

你要為你的網站的特定部分指定顏色,如文本、背景、鏈接、鏈接懸停顏色、CTA按鈕和標題。

如何選擇網站配色方案

如果你不確定如何選擇最好的網頁設計調色板,請看我製作的這個視頻。它告訴你選擇網站配色方案的實用技巧。理想情況下,網站調色板反映了一個企業的價值觀、信仰和目的。響亮的顏色可以表明一個不那麽正式的氛圍和更多的興奮,而低調的顏色給企業帶來更多的成熟或正式的註解。

但是,當你盯著數以千計的潛在顏色組合時,這並不總是容易翻譯的。讓我們看看23個偉大的網站調色板,它們可以幫助你提高參與度。

以下網站使用各種網站調色板,效果很好。它們是根據它們所喚起的情緒和所傳達的感情而精心選擇的。

1. Mea Cuppa

Mea Cuppa網站使用了令人賞心悅目的調色板,其中包括幾個寶石色(紅寶石和綠寶石),以獲得最大的活力,但在其他方面則依靠棕色和灰色的中性、單色調。

網頁設計調色板喚起了咖啡館的感覺,並反映在網站的英雄圖像中,從而創造了凝聚力。

2.The Big Top

BigTop是一個專門幫助初創企業建立網路的社區。該網站使用了一種不尋常但極其吸引人的寶石色調組合,從紫色和藍色到明亮的橙色和黃色。

主色調都是冷色,這使得暖色系的顏色更加突出。你會註意到在主頁的截圖中,橙色和黃色的CTA在其他東西之前就抓住了你的註意力。

3.Tori’s Eye

我們的第三個例子來自Twitter可視化工具Tori’s Eye。這是一個大部分為單色方案的好例子。在這裏,我們看到了以綠色陰影為中心的簡單而有力的調色板的效果。

這種配色方案通常很容易完成,因為一種顏色的陰影幾乎總是能與同一顏色的另一種陰影配合。

4. BarkBox

BarkBox主頁上的主要粉紅色在整個網站上以不同的色調重復出現。它與整個網站的標誌和CTA中使用的藍色形成了鮮明的對比。

使用互補色來吸引訪問者的註意力,可以幫助改善任何網站的調色板。

5.Cheese Survival Kit

紅色是網站調色板的一個非常流行的顏色。它可以傳達豐富的情感,這使得它的用途非常廣泛。它在小劑量使用時特別有力,正如你在奶酪生存工具包網站上看到的那樣。

紅色被更多的中性色彩所調和,而藍色則有助於為CTA和其他企業希望吸引訪問者眼球的地方帶來沖擊。

6.Nordic Ruby

北歐紅寶石,一個在斯德哥爾摩舉行的會議,有一個美麗的網站,以豐富的寶石色調設計。這個網站調色板所選擇的顏色使其具有復雜性,並使其從影響不大的設計中脫穎而出。

7.Lake Nona

諾納湖是一個特定地方的網站–特別是靠近水的地方。因此,在這裏看到一個藍色的代表並不令人驚訝。其他的中性顏色讓藍色很好地凸顯出來。

網站-顏色-調色板-羅納湖-調色板

8. LemonStand

同樣,一家名為Lemon Stand的公司在其網站調色板中使用黃色並不奇怪。藍色和灰色與黃色搭配得很好,有助於調節其亮度。

9.Mint

薄荷是一個致力於金融的網站,所以綠色和藍色的使用是很好的選擇。它們有助於傳達平靜、安寧和信任。棕色系的中性色調使其成為一個整體的大地色系,可以舒緩人們的感官。

10.Odopod

Odopod采用了單調的調色板,但在其主頁上使用了漸變色,有助於避免看起來很無聊。大字體的設計提供了很好的對比,而且他們希望你點擊的地方也很明顯。

11.Fiverr

你可能會註意到,許多公司為CTA保留了一種特定的顏色–在Fiverr的例子中,是綠色–專門用於CTA。它並沒有出現在網站的其他地方。事實上,它甚至沒有被ColorFav選中,因為它被更多的中性顏色所主導。

12.Digital Photography School

你會期望一個以圖形藝術為中心的企業有一個令人信服的網站調色板,而數碼攝影學校並沒有讓你失望。鮮艷的色彩有助於吸引瀏覽者的註意力。而且,就像Fiverr一樣,CTA中使用的橙色甚至沒有出現在網站的調色板上,因為它的使用很有影響。

13.Ahrefs

網站-顏色-調色板-阿赫雷斯調色板

Ahrefs是一個大量使用調色板的網站的例子。一個較深的藍色作為主色調,但它的變化存在於整個網站。橙色、粉色和茶色也是如此。

14. Millo.co

Millo.co使用一個非常簡單的網站調色板,而且它的效果更好。當我們訪問這樣的網站時,我們清楚地知道該看哪裏。

15.Brian Gardner

一些公司和個人將單色調色板發揮到了極致。布賴恩-加德納,網頁設計師,使用了一個黑色和白色的顏色方案,效果非常好。這是以他的極簡主義品牌為基礎的,所以反映了他的價值觀和信仰。

網站-顏色-調色板-布萊恩-加德納-調色板

16.Loom

當你想讓訪問者感到輕松時,柔和的顏色可以起到很好的作用。Loom采用了大量的鮭魚和嬰兒藍。它效果很好,尤其是CTA和頁面上其他重要元素可用的深藍色。

留下评论