顏色選擇很重要。每個人都會在看到它的人中喚起某種特定的視覺或情感。您可以在設(shè)計中使用它。讓我們談?wù)勅绾蝿?chuàng)建一個充分利用顏色選擇的用戶界面。

為什么在用戶界面中正確使用顏色

顏色可以用與語言一樣強大的方式說話。它們可以反映品牌的個性。他們可以吸引用戶，并且可以更好地傳達(dá)信息。任何UI設(shè)計準(zhǔn)則都可能突出提及顏色。

顏色可以設(shè)置品牌或產(chǎn)品的基本心情，基調(diào)，概念和內(nèi)涵。色彩研究所（Institute for Color）進行的研究表明，用戶大約需要90秒才能評估在線產(chǎn)品的質(zhì)量。人們進行的所有產(chǎn)品評估中，有62％至90％在潛意識層面上會影響顏色。隨之而來的是，切勿隨心所欲地為標(biāo)志，品牌和產(chǎn)品包裝選擇顏色。

您可以使用UX調(diào)色板來獲得更好的用戶體驗。正確的顏色選擇始終支持更好的信息可讀性。它還可以增強號召性用語等元素的強度。它可以滿足潛意識用戶的審美需求。最后，它可以刺激直觀的交互。

因此，語言的顏色也會影響購買決策。如今，UI設(shè)計中的色彩已成為任何在線營銷策略的核心部分。

UI顏色基礎(chǔ)知識

每個UX顏色選擇都有其獨特的含義和內(nèi)涵。當(dāng)然，其中某些取決于文化。

在正確的圖案中選擇正確的顏色

不同的UI設(shè)計顏色將各種概念傳達(dá)給感官。理想情況下，您想在正確的時間和正確的模式中選擇正確的一個。它們必須針對正確的用戶，并且您應(yīng)該選擇它們以針對正確的目標(biāo)。

如果您希望在UI設(shè)計中明智地使用顏色，請首先了解顏色的含義，它們會激發(fā)客戶的正確情感并幫助獲得所需的響應(yīng)。

讓我們從顏色可以帶來的情感和感知的差異入手：

紅色是我們所謂的暖色。那將是紅色，橙色和黃色。這些溫暖的色彩帶來了與溫暖和舒適有關(guān)的情感。但是，它們也可能對某些人表示憤怒，敵意或激情。眾所周知，以紅色為主要公司色彩來呼吁人們舒適和溫暖的品牌是可口可樂。

較冷的顏色是藍(lán)色，綠色，靛藍(lán)和紫色。有些聯(lián)想是甜蜜，安靜，信任，信心或沉思。您可能會注意到，Skype，IBM，Dell，HP，Intel等技術(shù)品牌通常會使用藍(lán)色進行品牌宣傳，因為這種顏色有助于提高對公司的信任度。

性別之間對顏色的感知存在差異。Natalia Khouw的"性別色彩的含義"研究發(fā)現(xiàn)，男人比女人更喜歡灰色，白色或黑色，并且女人更關(guān)注紅色和藍(lán)色的組合，比男人更困惑和分散注意力。像梅賽德斯這樣的品牌，其目標(biāo)受眾主要是男人，因此創(chuàng)建了黑色，灰色和白色組合的網(wǎng)站。

還證明了紅色和藍(lán)色的組合是成年人最喜歡的顏色。百事可樂利用這些顏色作為品牌優(yōu)勢。

設(shè)計產(chǎn)品界面時，請記住下一種顏色的含義：

紅色可以象征積極和消極的感覺。其中一些是之前提到的可口可樂試圖呼吁的憤怒，愛，自信和激情。

橙色似乎在大多數(shù)人中引起了興奮。這是許多公司使用的良好的UI顏色之一。例如，芬達(dá)（Fanta）將其用作背景顏色，以引起人們對名稱的注意。

黃色通常象征快樂，幸福和陽光。在談?wù)撋缃幻襟w網(wǎng)絡(luò)時，這非常合適，這就是Snapchat在標(biāo)志中使用此顏色的原因。

藍(lán)色表示安全，信任和安全。許多研究表明，藍(lán)色對于人口的許多不同部分都有積極的含義。藍(lán)色無處不在，包括許多自然環(huán)境。包括Skype和Microsoft Word在內(nèi)的數(shù)以百計的知名品牌，以及上述公司。

綠色帶來平靜的更新感覺。這些情緒與以綠色為主要標(biāo)志顏色的Tropicana這樣的品牌非常吻合。

黑色代表神秘，但通常也與死亡和悲劇有關(guān)。在其他時候，它可能意味著現(xiàn)代或傳統(tǒng)。

白色通常意味著健康，透明，純凈和純真。

紫色通常會帶來Asprey珠寶品牌在其顏色套件中使用的財富和皇室思想。

以下是為UX / UI設(shè)計選擇正確的配色方案的提示：

相似的UI配色方案：該術(shù)語是指在色輪上彼此靠近分組的顏色。類似方案的多樣性通常來自飽和度和亮度偏移。它們比主要的色相變化要好。

互補的UI配色方案：這是一個基于補充冷色和暖色之間相互作用的選項。當(dāng)它們在色輪上彼此相對時，它們會很好地工作。對于這種技術(shù)，存在一些方便的工具，例如Check My Color，Coolors.co和Paletton。

提示：

在添加顏色之前進行灰度設(shè)計會使復(fù)雜的視覺元素變得更加簡單。當(dāng)進行此操作時，它將強制元素布局并重新關(guān)注間距。完成一些工作后，可以從選擇一種品牌顏色開始。然后，選擇其他合適的方法。

品牌個性與正確的色彩搭配

所有品牌都有個性。在縮小調(diào)色板時，您應(yīng)該仔細(xì)考慮一下。如果您希望消費者與您的品牌相關(guān)聯(lián)，那么顏色就不會與要傳達(dá)的內(nèi)容沖突。

研究表明，多達(dá)85％的消費者認(rèn)為顏色是選擇特定產(chǎn)品的最重要動機。

優(yōu)秀的品牌不會偶然發(fā)現(xiàn)其配色方案。想一想麥當(dāng)勞餐廳系列中標(biāo)志性的紅色和黃色金色拱門。黃色使人聯(lián)想到快樂和陽光，而紅色則使消費者回想起內(nèi)部的牛肉漢堡。

另一個示例是Home Depot。在前面，我們提到橙色在許多消費者中帶來了興奮。Home Depot標(biāo)志的簡單橙色和白色設(shè)計使客戶知道他們可以在內(nèi)部找到新技術(shù)，例如頂級燃?xì)鉄緺t或割草機。

進行顏色組合之前，請先查看品牌的個性。考慮主要使用您產(chǎn)品的客戶的性別。考慮一下您要傳達(dá)的基調(diào)，提出的價值主張以及開展業(yè)務(wù)已有多長時間。

您正在嘗試盡可能地了解目標(biāo)受眾以及將要出售給他們的產(chǎn)品。如果您能做到這一點，您將有更多的機會選擇將來可能成為業(yè)務(wù)標(biāo)志的正確顏色。您的目標(biāo)應(yīng)該是使用有意義的顏色進行簡單的UI設(shè)計。

色彩平衡

在考慮顏色，使用方法和平衡技巧時，請記住以下內(nèi)容。在進行UI界面設(shè)計時完全放棄顏色組合是一個錯誤。避免設(shè)計中的過載和混亂，并記住極簡主義在UI中總是更好。接下來的兩個規(guī)則應(yīng)該會有所幫助。

第一個是6：3：1，在選擇顏色時也稱為黃金法則。60％+ 30％+ 10％的原則代表了在選擇顏色時達(dá)到平衡的最佳比例。

當(dāng)您嘗試生成一個整潔而和諧的界面時，此標(biāo)準(zhǔn)可以完美發(fā)揮作用。如果做得正確，該策略將吸引潛在客戶。觀看者的眼睛將得到緩解。它們可以自然地從設(shè)計中的一個點移動到下一個位置。

第二條規(guī)則是"最多三種原色"。這是一種避免視覺混亂的理想方法。它可以使您保持平衡，尤其是將其與黃金法則結(jié)合使用時。例如，嘗試以下分配：

中性色適合您設(shè)計的60％

二級品牌顏色占30％

用戶界面設(shè)計中的10％應(yīng)該是您的主要品牌顏色

良好的用戶界面設(shè)計使用了這兩個規(guī)則。

這是一個使用3種主要顏色的Amazon網(wǎng)站設(shè)計示例：背景為白色– 60％，藍(lán)色為頁腳和頁眉– 30％，黃色為按鈕并開始評級– 10％喚醒用戶

提供和諧的配色方案和簡潔的界面時，請考慮以下因素。

陰影

陰影是引導(dǎo)人腦得出某些結(jié)論的寶貴線索。如果您引導(dǎo)客戶，則更有機會吸引他們。陰影應(yīng)被用作巧妙地增強您的主要設(shè)計元素的一種方式。

色相是使用色輪創(chuàng)建變體所需要的。如果您選擇添加白色，則將產(chǎn)生色調(diào)。如果需要陰影，也可以添加黑色。

亮度

通過增加飽和度并調(diào)低亮度來創(chuàng)建深色的變體。如果您的產(chǎn)品可以更好地搭配更亮的顏色，則必須采取相反的措施。

對比

對比度是被認(rèn)為是實用方法的另一種形式的UI設(shè)計。如果您試圖設(shè)計一個簡單的界面，就會采用這種方式。這是一種引起用戶情緒激動的簡單方法。

車輪正反兩面的顏色始終會產(chǎn)生最明顯的對比度。考慮一下彼此相鄰時的黑白外觀。強烈的對比度增加了緊張感，并使觀眾集中注意力。光線對比帶來愉悅，舒適的感覺。如果您要進行休閑，輕松的設(shè)計，請使用這些技巧。

飽和過載可消除色彩鮮艷度

如果您的目標(biāo)是鮮艷度，則必須查看色彩飽和度。但是，僅圍繞高度飽和的顏色組合的方案會使眼睛不知所措，這意味著較少的振動。

有了顏色，減少幾乎總是更多。當(dāng)與Instagram標(biāo)志標(biāo)中有效使用的飽和度較低的顏色串聯(lián)使用時，高度飽和的顏色將充滿活力。

定義交互式顏色

如果需要交互式元素，則可以選擇交互式顏色。這些可能是鏈接，按鈕或用戶觸摸或單擊的任何其他UI控件。

如果可以，請使用一種顏色進行主要交互。該顏色將開始對用戶具有一種關(guān)聯(lián)。

您可以設(shè)計深色和淺色的交互式顏色。陰影將幫助您傳達(dá)UI元素的不同狀態(tài)。按下或懸停狀態(tài)是示例。

定義指示性顏色

指示性顏色具有含義。您需要針對應(yīng)用或網(wǎng)站上的狀態(tài)提出一種配色方案，例如針對錯誤，成功和警告的狀態(tài)。用于這些目的更常用的是紅色，黑色和綠色。

假設(shè)您的品牌顏色之一是紅色。如果是這樣，請勿將其用于錯誤消息。選擇禁用狀態(tài)的顏色時，請確定其具有足夠的對比度。用戶必須能夠閱讀它。

輔助功能

為UI工具包選擇正確的顏色時，請記住調(diào)色板的設(shè)計可訪問性級別及其對比度級別。這可以幫助色盲的人輕松使用您的產(chǎn)品。為了確保可以訪問調(diào)色板，可以使用一些對比度檢查器和設(shè)計元素可訪問性檢查器，例如WebAIM，noCoffee，可訪問性掃描儀。不要忘記，主要目的總是想出一個用戶友好的界面。

藝術(shù)與自然的啟發(fā)

自然和藝術(shù)是UI概念中色彩靈感的資源，您應(yīng)該明智地使用。例如，到戶外去看草叢，觀察許多綠色陰影。人們喜歡看起來自然的顏色。它們具有用戶友好的感覺。藝術(shù)可以看作是自然的直接反映。因此，您也可以從中汲取靈感。

現(xiàn)在應(yīng)該顯而易見的是，UI設(shè)計中有多少顏色很重要。切勿隨意為品牌選擇顏色。最好的用戶界面設(shè)計是精心選擇每種顏色的一種。

總結(jié)

色彩的選擇一直是一件令設(shè)計師頭疼的事，希望提供的建議和方法能夠幫助到您未來的顏色選擇及應(yīng)用。