每當(dāng)我找到一個(gè)看起來(lái)不錯(cuò)、干凈且優(yōu)雅的界面時(shí)，我都會(huì)保存它！

現(xiàn)在我收集了一千多張UI界面，經(jīng)過(guò)反復(fù)的學(xué)習(xí)、使用或簡(jiǎn)單查看后，我認(rèn)識(shí)到了一些共同點(diǎn)： 讓我心動(dòng)的顏色。

因此，在這里，我想總結(jié)一下如何在UI界面設(shè)計(jì)中創(chuàng)建完美顏色。

一.

色彩在界面里的魅力

顏色就像語(yǔ)言一樣強(qiáng)大。當(dāng)你遇到一些設(shè)計(jì)、體驗(yàn)及交互很棒的app時(shí)，回想一下，視覺外觀在很大程度上取決于顏色，顏色總是給用戶第一印象。

那么，什么樣的顏色用在實(shí)際產(chǎn)品上可以做什么呢？

1.體現(xiàn)品牌個(gè)性

顏色可以體現(xiàn)出品牌或產(chǎn)品的基本色調(diào)、心情、內(nèi)涵、概念、品質(zhì)、價(jià)值等作用。有研究表明，用戶僅花50秒就可以在線對(duì)你的產(chǎn)品有一個(gè)心理評(píng)價(jià)，并且用戶在最初的產(chǎn)品心理評(píng)價(jià)中有62％至90％的判斷是基于產(chǎn)品的配色方案。 （請(qǐng)看下圖）

 2.獲取更好的用戶體驗(yàn)

正確的顏色選擇可以更好的支持信息可讀性。此外，它可以極大地提高可用性，例如增強(qiáng)號(hào)召性用語(yǔ)、增強(qiáng)導(dǎo)航、刺激直觀的交互，滿足審美需求和視覺解決方案。

總之，要?jiǎng)?chuàng)建一種清晰，和諧的顏色樣式來(lái)滿足用戶的需求。 （請(qǐng)看下圖，騰訊新聞利用顏色來(lái)做用戶引導(dǎo)及導(dǎo)航引導(dǎo)，利用顏色層級(jí)更利于用戶閱讀。）

3.影響用戶的購(gòu)買決策

產(chǎn)品的外觀是影響消費(fèi)者購(gòu)買決策的關(guān)鍵因素。研究表明，所有產(chǎn)品評(píng)估中的90％與顏色有關(guān)。

如今，許多公司將“顏色”（尤其是UI設(shè)計(jì)中的顏色）作為其營(yíng)銷策略之一。 (請(qǐng)看下圖)

二.

巧妙的使用顏色技巧

1.在正確的使用方式中選擇正確的顏色體驗(yàn)

我們不能說(shuō)一種顏色看起來(lái)“不好”，只有錯(cuò)誤地使用顏色，顏色才可能看起來(lái)很糟糕。

假如麥當(dāng)勞使用灰色和黑色而不是黃色和紅色，你是否還有胃口？用戶看到之后根本就沒有任何胃口了，更不可能達(dá)成交易。 （請(qǐng)看下圖）

女人在聚會(huì)上穿黑色連衣裙和黑色的唇膏，你是否覺得很奇怪？就不符合用戶對(duì)事物的認(rèn)知顏色了，給用戶困惑。（請(qǐng)看下圖）

可口可樂(lè)不再使用紅色的標(biāo)志改為藍(lán)色，你還會(huì)喝它嗎？喝進(jìn)去你的心理上會(huì)覺得你是在喝漱口水。（請(qǐng)看下圖）

不同的顏色傳遞出了不同的含義和感覺

作為設(shè)計(jì)師如何正確的使用顏色呢？

方法①：在什么時(shí)間用戶在使用你的產(chǎn)品，來(lái)確定你的產(chǎn)品顏色，比如晚上、早上、還是凌晨。再比如沉浸式體驗(yàn)應(yīng)用晚上都會(huì)有深色夜間模式。

方法②：根據(jù)你的用戶群體選擇正確的顏色，你的產(chǎn)品是面向那一類用戶，男人、女人、青年、幼兒、老年等這些人的對(duì)于顏色的認(rèn)知是不一樣的，比如幼兒對(duì)于顏色的認(rèn)知是五顏六色，顏色亮度飽和度都偏高的，就像路邊的喜洋洋1元搖擺車孩子都很喜歡。

方法③：根據(jù)產(chǎn)品的特性選擇正確的顏色目標(biāo)。產(chǎn)品的特性及固有特性，比如黃金就是金色的，蔬菜黃瓜就是綠色，天空就是藍(lán)色我們不妨用產(chǎn)品的固有色來(lái)做設(shè)計(jì)及產(chǎn)品特性來(lái)做設(shè)計(jì)。

方法④：考慮顏色的心理屬性，色彩對(duì)人類情緒和行為的影響在心理學(xué)分支稱為色彩心理學(xué)。它指出我們的大腦對(duì)顏色有反應(yīng)，而我們通常不會(huì)注意到它。當(dāng)人眼感知到一種顏色時(shí)，我們的大腦就會(huì)向內(nèi)分泌系統(tǒng)發(fā)出信號(hào)，釋放出負(fù)責(zé)情緒的激素，每種顏色在我們的思維中都有自己的影響力。

紅色：它象征著好和壞的感覺，包括愛，自信，熱情和憤怒。

橙色：充滿活力的溫暖色彩帶給你興奮的感覺。

黃色：這是幸福，陽(yáng)光，喜悅和溫暖的顏色。

綠色：大自然的色彩帶來(lái)平靜和生機(jī)的感覺。

藍(lán)色：它通常代表一些公司形象。與安全、可靠、科技有關(guān)。

紫色：是神秘和魔術(shù)的顏色。

黑色：它伴隨著悲劇和死亡，象征著一個(gè)謎。同時(shí)，它可以是傳統(tǒng)的也可以是現(xiàn)代的。

白色：顏色意味著純凈和純真，以及完整性和清晰度。

2.注意藍(lán)色

為什么要談?wù)撍{(lán)色？

只需看看你最常用的Apps或網(wǎng)站、Facebook、Twitter、Microsoft，騰訊，菜鳥、新能源、智能設(shè)備、丁丁、旺旺、飛書、百度等，你會(huì)看到，它們都是基于藍(lán)色。

藍(lán)色是男人、女人、成人、孩子都喜歡的第一色，藍(lán)色就像無(wú)處不在，在自然界中我們對(duì)藍(lán)色的認(rèn)知度最高，藍(lán)色絕對(duì)是可以培養(yǎng)用戶信任和接受的安全顏色，藍(lán)色是UI設(shè)計(jì)中顏色的典型示例，如果沒有更好的選擇，我們可以使用藍(lán)色。

3.注重界面里面背景與元素顏色之間的變化

我們?cè)谠S多美觀的界面中注意到的一件事是，它們通常在特定主色顏色上具有更深和更淺的變化。 （請(qǐng)看下圖例子）

咱們來(lái)分析上面界面3個(gè)顏色色相、飽和度、明度的變化。就是我們ps軟件里面取色器的HSB，h是色相，s是飽和度，b是明度。

通過(guò)上面的顏色分析，我們可以看出主色色相數(shù)值不發(fā)生變化還是藍(lán)色，我們可以把主色降低明度和增加飽和度，可以使顏色變化更深。通過(guò)增加明度和降低飽和度，可以產(chǎn)生更明亮的色彩變化。

真實(shí)世界的顏色變化

環(huán)顧我們四周環(huán)境空間的變化。每次掃視房間時(shí)，無(wú)疑會(huì)看到顏色飽和度和明度的變化，以及陰影和亮面的變化，作為設(shè)計(jì)師我們可以從現(xiàn)實(shí)中取色。 （舉個(gè)例子：看下圖）

總結(jié)上面的例子，我們以后在做設(shè)計(jì)的時(shí)候遇到這種純色界面就可以利用主色的深淺變化，設(shè)計(jì)我們的界面，這種顏色搭配更和諧更美觀更自然。

4.色彩比例中的黃金比例-黃金（6：3：1）規(guī)則

在進(jìn)行UI界面設(shè)計(jì)時(shí)，你不能完全擺脫顏色組合。在UI設(shè)計(jì)中結(jié)合顏色很容易，但是如何避免混亂和過(guò)載呢？如何擺脫樸素并保持精致？

牢記以下兩個(gè)原則：

第一個(gè)原則：

6：3：1條規(guī)則

60％+ 30％+ 10％的原則是達(dá)到色彩平衡的最佳比例。通過(guò)培養(yǎng)一個(gè)平衡的色彩搭配，整潔，和諧的界面為用戶帶來(lái)愉悅感，此比例可以完美地發(fā)揮作用。而且，它可以減輕用戶的視線，使其舒適地從一個(gè)點(diǎn)移動(dòng)到另一點(diǎn)。 （舉個(gè)例子看下圖）

第二個(gè)原則：

最多3種原色

這些規(guī)則與“黃金（6：3：1）規(guī)則”相匹配。這也是避免混亂并在配色方案中保持平衡的好方法。

5.主色在軟件里的應(yīng)用特點(diǎn)

1）基于“主色”，你可以在色環(huán)上創(chuàng)建許多變化的顏色。

有一個(gè)竅門：確定主色后，在主色的基礎(chǔ)上添加白色即可得到亮色，添加黑色則暗色。在這里，我建議新手使用單色系方案，很容易把控。 （舉個(gè)例子看下圖）

主色系的搭配更容易把控，也更簡(jiǎn)潔，視覺信息容易聚焦

2）在令人難忘的時(shí)刻展示品牌主色，以增強(qiáng)你品牌的獨(dú)特風(fēng)格。在添加顏色以增強(qiáng)品牌在界面上的效果時(shí)，請(qǐng)考慮添加主色的位置、占比、數(shù)量，增強(qiáng)你的品牌效應(yīng)，讓用戶對(duì)你的品牌顏色認(rèn)知度更高。（舉個(gè)例子看下圖）

支付寶的藍(lán)色大家應(yīng)該都知道，這是支付寶首頁(yè)主色的占比，只要有人給你提起支付寶你肯定會(huì)想到藍(lán)色，這就是在界面設(shè)計(jì)里面主色的重要性

餓了么主色數(shù)量、占比、位置，增強(qiáng)了用戶對(duì)品牌色認(rèn)知

6.通過(guò)使用色彩，我們可以為元素分配不同的重要性級(jí)別

如果一個(gè)元素比另一個(gè)元素更重要，則它應(yīng)該具有更高的視覺重量。這使用戶易于快速瀏覽頁(yè)面并區(qū)分重要和次要信息。 （請(qǐng)看下圖）

汽車之家運(yùn)用橘色色塊和藍(lán)色色塊來(lái)做到信息視覺重量，區(qū)分視覺層級(jí)，引導(dǎo)用戶重要信息

氧氣app的頂部導(dǎo)航部分，新婚蜜月&內(nèi)衣知識(shí)做了顏色的特殊處理，就是為了在導(dǎo)航部分視覺加重，引導(dǎo)用戶點(diǎn)擊探索

雪球理財(cái)app，一鍵添加按鈕更加醒目，大膽的使用主色吸引用戶的眼睛，引導(dǎo)用戶添加自己喜歡的股票

在UI設(shè)計(jì)中巧妙地使用顏色可以創(chuàng)建漂亮的UI界面，但是創(chuàng)建漂亮的UI界面絕不是最終目標(biāo)，實(shí)現(xiàn)出色的用戶體驗(yàn)?zāi)繕?biāo)，使用戶的生活更快樂(lè)才是關(guān)鍵。

因此，從UI的顏色選擇和用法的角度來(lái)看，設(shè)計(jì)人員應(yīng)始終記住該界面應(yīng)高度可用且清晰，并以用戶為中心來(lái)做我們的設(shè)計(jì)！