UI設計色彩搭配技巧

 

UI設計選擇顏色很重要。每個人都會在看到它的人中喚起某種特定的視覺或情感。您可以在設計中使用它。讓我們談談如何創(chuàng)建一個充分利用顏色選擇的用戶界面。這是應該有益于您的底線的那些用戶界面設計原則之一。

 

為什么必須在您的網(wǎng)站用戶界面中正確使用顏色

 

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

 

顏色可以設置品牌或產(chǎn)品的基本情緒，基調，概念和內涵。色彩研究所(Institute for Color)進行的研究表明，用戶大約需要90秒鐘來評估在線產(chǎn)品的質量。人們進行的所有產(chǎn)品評估中，有62%至90%在潛意識層面上會影響顏色。這樣就可以避免為徽標，品牌和產(chǎn)品包裝選擇正確的顏色。

 

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

 

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

 

UI顏色基礎知識

 

每個UX顏色選擇都有其獨特的含義和內涵。當然，其中某些取決于文化。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

黃色通常象征著快樂，幸福和陽光。在談論社交媒體網(wǎng)絡時，這非常合適，這就是Snapchat在徽標中使用此顏色的原因

 

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

 

綠色帶來平靜的更新感覺。這些情緒與使用綠色作為主要徽標顏色的Tropicana這樣的品牌非常吻合。

 

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

 

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

 

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

 

以下是有關為UX / UI設計選擇正確的配色方案的提示：

 

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

 

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

 

提示：

 

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

 

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

 

所有品牌都有個性。在縮小調色板時，您應該仔細考慮一下。如果您希望消費者與您的品牌相關聯(lián)，那么您的顏色就不能與您要傳達的內容沖突。

 

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

 

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

 

另一個示例是Home Depot。早先，我們提到過橙色帶來了許多消費者的興奮。Home Depot徽標的簡單橙色和白色設計讓客戶知道他們可以在內部找到新技術，例如燃氣燒烤爐或割草機。

 

進行顏色組合之前，請先查看品牌的個性。考慮主要使用您產(chǎn)品的客戶的性別?？紤]一下您要傳達的基調，提出的價值主張以及開展業(yè)務已有多長時間。您想顯得新鮮有趣嗎，還是經(jīng)過時間考驗和可靠?

 

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

 

3.色彩平衡

 

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

 

個是6：3：1，在選擇顏色時也稱為黃金法則。60%+ 30%+ 10%的原則代表了在選擇顏色時達到平衡的比例。

 

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

 

第二條規(guī)則是“三種原色”。這是一種避免視覺混亂的理想方法。它使您能夠保持平衡，尤其是當您將其與黃金法則結合使用時。例如，嘗試以下徽標：

 

中性色適合您設計的60%

 

二級品牌顏色占30%

 

用戶界面設計中的10%應該是您的主要品牌顏色

 

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

 

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

 

注意正確的元素。

 

在下面的這一部分中，我觀察到了多次出現(xiàn)的突出顯示文本的情況。為什么是這樣?

 

4.組合和免費顏色

 

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

 

陰影，色調和色調

 

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

 

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

 

亮度

 

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

 

對比

 

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

 

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

 

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

 

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

 

有了顏色，少即是多。當與Instagram徽標中有效使用的飽和度較低的顏色串聯(lián)使用時，高度飽和的顏色將充滿活力。

 

6.定義交互式顏色

 

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

 

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

 

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

 

定義指示性顏色

 

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

 

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

 

輔助功能

 

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

 

設計用戶界面元素時使用的對比度和顏色可能會對它們對所有最終用戶的可訪問性產(chǎn)生巨大影響。僅僅依靠顏色差異會限制色盲人員使用您的產(chǎn)品的能力。將淺色和深色與諸如交叉影線之類的技術結合使用，以區(qū)分界面的一部分，從而使有視覺問題的用戶更容易訪問它。這種設計思路可以為您的所有用戶提供更有趣和更實用的界面。

 

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

 

自然和藝術是UI概念中啟發(fā)色彩的資源，您應該明智地使用。例如，到戶外去看草叢，觀察許多綠色陰影。人們喜歡看起來自然的顏色。它們具有用戶友好的感覺。藝術可以看作是自然的直接反映。因此，您也可以從中汲取靈感。這是一個示例，例如依云品牌徽標不僅在徽標中使用自然色，而且使用自然設計。

 

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

 

它永遠不會損害車間的顏色選擇，因此您的潛在客戶可以在您上線網(wǎng)站或新公司徽標之類的內容之前給您反饋。如果您遵循我們提到的UI設計中有關顏色使用的做法，則沒有理由不能使您的品牌取得新的成功。