UI設(shè)計(jì)色彩搭配技巧

 

UI設(shè)計(jì)選擇顏色很重要。每個(gè)人都會(huì)在看到它的人中喚起某種特定的視覺(jué)或情感。您可以在設(shè)計(jì)中使用它。讓我們談?wù)勅绾蝿?chuàng)建一個(gè)充分利用顏色選擇的用戶界面。這是應(yīng)該有益于您的底線的那些用戶界面設(shè)計(jì)原則之一。

 

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

 

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

 

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

 

您可以使用UX調(diào)色板來(lái)獲得更好的用戶體驗(yàn)。正確的顏色選擇始終支持更好的信息可讀性。它還可以增強(qiáng)號(hào)召性用語(yǔ)等元素的強(qiáng)度。它可以增強(qiáng)客戶導(dǎo)航功能。它可以滿足潛意識(shí)審美用戶的需求。最后，它可以刺激直觀的交互。

 

因此，語(yǔ)言的顏色也會(huì)影響購(gòu)買(mǎi)決策。如今，UI設(shè)計(jì)中的色彩已成為任何在線營(yíng)銷策略的核心部分。

 

UI顏色基礎(chǔ)知識(shí)

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

在設(shè)計(jì)產(chǎn)品界面時(shí)，請(qǐng)記住下一種顏色的含義：

 

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

 

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

 

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

 

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

 

綠色帶來(lái)平靜的更新感覺(jué)。這些情緒與使用綠色作為主要徽標(biāo)顏色的Tropicana這樣的品牌非常吻合。

 

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

 

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

 

紫色通常會(huì)帶來(lái)Asprey珠寶品牌在其顏色套件中使用的財(cái)富和皇室思想。

 

以下是有關(guān)為UX / UI設(shè)計(jì)選擇正確的配色方案的提示：

 

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

 

互補(bǔ)的UI配色方案：此選項(xiàng)基于互補(bǔ)的冷色和暖色之間的相互作用。當(dāng)它們?cè)谏喩媳舜讼鄬?duì)時(shí)，它們會(huì)很好地工作。對(duì)于這種技術(shù)，存在一些方便的工具，例如Check My Color，Coolors.co和Paletton。

 

提示：

 

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

 

2.品牌個(gè)性與正確的色彩搭配

 

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

 

研究表明，多達(dá)85%的消費(fèi)者認(rèn)為顏色是選擇特定產(chǎn)品的最重要?jiǎng)訖C(jī)。

 

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

 

另一個(gè)示例是Home Depot。早先，我們提到過(guò)橙色帶來(lái)了許多消費(fèi)者的興奮。Home Depot徽標(biāo)的簡(jiǎn)單橙色和白色設(shè)計(jì)讓客戶知道他們可以在內(nèi)部找到新技術(shù)，例如燃?xì)鉄緺t或割草機(jī)。

 

進(jìn)行顏色組合之前，請(qǐng)先查看品牌的個(gè)性?？紤]主要使用您產(chǎn)品的客戶的性別?？紤]一下您要傳達(dá)的基調(diào)，提出的價(jià)值主張以及開(kāi)展業(yè)務(wù)已有多長(zhǎng)時(shí)間。您想顯得新鮮有趣嗎，還是經(jīng)過(guò)時(shí)間考驗(yàn)和可靠?

 

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

 

3.色彩平衡

 

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

 

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

 

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

 

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

 

中性色適合您設(shè)計(jì)的60%

 

二級(jí)品牌顏色占30%

 

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

 

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

 

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

 

注意正確的元素。

 

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

 

4.組合和免費(fèi)顏色

 

提供和諧的配色方案和簡(jiǎn)潔的界面時(shí)，請(qǐng)考慮以下因素。

 

陰影，色調(diào)和色調(diào)

 

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

 

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

 

亮度

 

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

 

對(duì)比

 

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

 

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

 

5.飽和過(guò)載可消除色彩鮮艷度

 

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

 

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

 

6.定義交互式顏色

 

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

 

如果可以，請(qǐng)嘗試僅使用一種顏色進(jìn)行主要交互。該顏色將開(kāi)始對(duì)用戶具有一種關(guān)聯(lián)。

 

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

 

定義指示性顏色

 

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

 

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

 

輔助功能

 

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

 

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

 

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

 

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

 

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

 

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