顏色是視覺傳達(dá)最強大的工具之一。它可以影響我們的情緒、情緒和行為。這就是產(chǎn)品設(shè)計師仔細(xì)選擇顏色如此重要的原因。

在本文中，我們將為網(wǎng)頁設(shè)計師探索色彩理論的基礎(chǔ)知識，并提供信息來幫助您設(shè)計有效且視覺上有趣的配色方案。

什么是色彩理論？

顏色是人機交互的重要組成部分，與排版等其他元素類似，設(shè)計師應(yīng)該謹(jǐn)慎選擇顏色。配色方案是設(shè)計人員用來描述他們在設(shè)計中使用的顏色組合的術(shù)語。由于那里有無限的顏色組合，因此很難確定哪種配色方案最適合您的產(chǎn)品。幸運的是，設(shè)計有色彩理論，這是一門幫助我們選擇平衡且有效的色彩組合的學(xué)科。

這里有一些來自色彩理論的實用建議，它們將幫助您為您的設(shè)計系統(tǒng)選擇強大的顏色組合。

限制顏色總數(shù)

實現(xiàn)色彩組合的和諧是色彩理論的主要原則之一。當(dāng)您創(chuàng)建一個新方案時，可能很想為其添加數(shù)十種顏色。但最好避免這種誘惑。為什么？因為當(dāng)你使用太多顏色時，很難達(dá)到視覺平衡。您還可以輕松地壓倒您的用戶。

那么如何避免這種情況呢？保持您的配色方案簡單，最多使用兩種或三種顏色。一些設(shè)計師認(rèn)為兩種或三種顏色會限制他們的創(chuàng)造力，但事實并非如此。通過使用這些顏色的陰影和色調(diào)，可以創(chuàng)建有趣的視覺組合。簡單的方案也最適合您的用戶。

使用色輪選擇顏色

下一步是了解如何選擇實際顏色。網(wǎng)頁設(shè)計師通常依靠色輪來解決這個問題。色輪包括原色（紅色、黃色、藍(lán)色）、二次色（原色的混合；橙色、綠色和紫色）??和三次色（由一種原色和一種二次色等量混合而成的顏色；香櫞，赤褐色，淺黃色）。

以下是您可以使用色輪創(chuàng)建的三種流行的配色方案：

單色 。單色方案使用單一顏色，但具有不同的色調(diào)、陰影和色調(diào)。這個方案很容易上手；由于顏色自然地融合在一起，它們會產(chǎn)生舒緩的效果。

類似的 。類似的配色方案使用一些相關(guān)的顏色——一種顏色是主色，而另一些則支持它。支持性的顏色豐富了方案，使其更具視覺吸引力。

補充 。在最基本的形式中，互補方案僅包含兩種對比色（例如，主要的綠色和強調(diào)紅色）。如果您想引起注意，此方案效果很好。

了解色彩心理學(xué)

關(guān)注色彩的心理方面是理解色彩理論的重要組成部分。當(dāng)您為您的產(chǎn)品選擇UX 調(diào)色板時，您通常會考慮事物的外觀，但同樣重要的是考慮它們的感受。顏色對人腦具有強大的心理影響，每種顏色代表用戶的不同含義和情感。

雖然沒有普遍接受的含義，但以下是顏色喚起大多數(shù)人的一些普遍感受：

• 紅色 ：危險、重要、愛。紅色被稱為能量的顏色——僅僅看它就可以增加一個人的脈搏、心率和新陳代謝。這是吸引訪客注意力的絕佳顏色；嘗試使用它來突出顯示頁面上最重要的元素。
• 橙色 ：活力、樂觀、有趣。橙色具有積極的活力氛圍。它還與便宜的產(chǎn)品相關(guān)聯(lián)，如果您想突出最優(yōu)惠的價格，它是電子商務(wù)商店的好顏色。
• 黃色 ：幸福、關(guān)注、溫暖。黃色表示陽光的性格；當(dāng)與黑色結(jié)合時，它會迅速引起注意。（例如，想想城市的黃色出租車。）
• 綠色 ：成長、成功、自然。綠色非常適合貼近自然的產(chǎn)品。它也是在用戶界面中使用的流行顏色，向用戶發(fā)出操作成功完成的信號。
• 藍(lán)色 ：信任、舒適、平靜。藍(lán)色代表放松和舒適。品牌喜歡這種顏色，因為它給顧客一種內(nèi)在安全感。
• 紫色 ：奢華、創(chuàng)意、智慧。紫色通常與皇室和奢侈品有關(guān)。
• 黑色 ：力量、成熟、神秘。大多數(shù)品牌將黑色限制在文字和口音上。作為一種原色，黑色在時尚網(wǎng)站上可能會很突出，以傳達(dá)一種奢華的感覺。
• 白色 ：清潔、健康、純真。白色通常讓我們想到健康和清潔。設(shè)計師通常選擇這種顏色來暗示產(chǎn)品的安全性，特別是對于醫(yī)療設(shè)備和高科技產(chǎn)品

性別和顏色

性別會影響顏色偏好嗎？在一項研究中，確實發(fā)現(xiàn)了一些重大差異。

以下是該研究的快速摘要：

• 藍(lán)色是最受男性和女性歡迎的顏色。
• 盡管普遍認(rèn)為，粉紅色并不是女性最喜歡的顏色。
• 橙色、棕色和黃色是最不受男性和女性歡迎的顏色。
• 男性通常喜歡明亮的對比色，而女性則喜歡柔和的顏色。

年齡和顏色

年齡也在顏色偏好中發(fā)揮作用?！渡市睦韺W(xué)與色彩療法》的作者費伯·比倫發(fā)現(xiàn)，年輕人往往更喜歡波長較長的顏色（如紅色和橙色），而老年人則喜歡波長較短的顏色（如藍(lán)色）。關(guān)于性別和顏色偏好的同一項研究證實了，但也發(fā)現(xiàn)許多年齡組更喜歡紫色。

使用顏色的實用技巧

現(xiàn)在我們知道了什么是顏色理論，是時候探索一些在 UI 設(shè)計中使用顏色的實用技巧了。

使用情緒板找到合適的顏色

情緒板是視覺靈感的集合。情緒板對于選擇幾乎任何視覺設(shè)計決策（包括顏色）都非常有用。如果您找到喜歡的圖像或照片，您可以使用一些工具直接從中創(chuàng)建配色方案。

使用顏色創(chuàng)建焦點

良好的可掃描性對于網(wǎng)頁設(shè)計至關(guān)重要。訪問者應(yīng)該能夠一目了然地找到他們需要的信息。您使用的顏色可以支持這一點，因為它們可以幫助引導(dǎo)用戶的眼睛。例如，您可以為號召性用語按鈕使用對比色，以賦予它更多的視覺重量，從而使其更加突出。

決定何時以及如何使用鮮艷柔和的色彩

大多數(shù)顏色將屬于以下兩類之一：鮮艷或柔和。根據(jù)項目的性質(zhì)，您可以更多地依賴第一組或第二組。

鮮艷的顏色是從背景中脫穎而出并充滿能量的顏色。這些顏色非常適合營造充滿活力的氛圍，對于想要以非傳統(tǒng)方式展示自己的公司來說，這是一個不錯的選擇。

另一方面，柔和的色彩與設(shè)計融為一體，有助于傳達(dá)一種平靜感，讓用戶感到輕松自在。

最終，您應(yīng)該根據(jù)您希望客戶在與您的產(chǎn)品互動時的感受來選擇顏色。

不要忘記可訪問性

設(shè)計不僅僅關(guān)乎美學(xué)；它還與功能和可用性有關(guān)。在設(shè)計 UI 時，它應(yīng)該可供具有各種能力的人訪問。設(shè)計師在使用顏色時面臨的一個特殊挑戰(zhàn)是考慮色盲或色覺缺陷 (CVD) 的人將如何與產(chǎn)品互動。

這些色輪顯示了視力正常的人（最左邊）的顏色，以及紅綠色缺陷的人（中間和右邊）所看到的相同顏色。圖片改編自櫻寶。

使用顏色進(jìn)行設(shè)計時要記住以下兩點：

• 永遠(yuǎn)不要單獨使用顏色來傳達(dá)含義 。使用多種視覺提示來傳達(dá)產(chǎn)品中的基本狀態(tài)。例如，當(dāng)您顯示錯誤消息時，請勿在“必填字段為紅色”的文本旁邊使用紅色。相反，添加一個可見符號（例如星號）并說“必填字段為紅色并標(biāo)有 *”。

• 避免低對比度的文字 。將具有低對比度的兩種顏色并排放置會使您的副本非常難以閱讀。Web 內(nèi)容可訪問性指南( WCAG) 建議背景與文本的對比度至少為 4.5:1。請記住，當(dāng)您設(shè)計文本以及功能元素（例如按鈕）時。

結(jié)論

顏色只是網(wǎng)站設(shè)計師喜歡使用的工具之一。同時，它也是難以掌握的工具之一。上面提到的規(guī)則將為視覺設(shè)計師奠定良好的基礎(chǔ)，但唯一提高的方法是掌握創(chuàng)造出色色彩組合的技巧。熟能生巧。關(guān)注設(shè)計，瀏覽更多關(guān)于網(wǎng)站設(shè)計的文章。