2022-5-5 博博
每當(dāng)我找到一個看起來不錯、干凈且優(yōu)雅的界面時，我都會保存它！
現(xiàn)在我收集了一千多張UI界面，經(jīng)過反復(fù)的學(xué)習(xí)、使用或簡單查看后，我認識到了一些共同點： 讓我心動的顏色。
因此，在這里，我想總結(jié)一下如何在UI界面設(shè)計中創(chuàng)建完美顏色。
顏色就像語言一樣強大。當(dāng)你遇到一些設(shè)計、體驗及交互很棒的app時，回想一下，視覺外觀在很大程度上取決于顏色，顏色總是給用戶第一印象。
那么，什么樣的顏色用在實際產(chǎn)品上可以做什么呢？
顏色可以體現(xiàn)出品牌或產(chǎn)品的基本色調(diào)、心情、內(nèi)涵、概念、品質(zhì)、價值等作用。有研究表明，用戶僅花50秒就可以在線對你的產(chǎn)品有一個心理評價，并且用戶在最初的產(chǎn)品心理評價中有62％至90％的判斷是基于產(chǎn)品的配色方案。 （請看下圖）
正確的顏色選擇可以更好的支持信息可讀性。此外，它可以極大地提高可用性，例如增強號召性用語、增強導(dǎo)航、刺激直觀的交互，滿足審美需求和視覺解決方案。
總之，要創(chuàng)建一種清晰，和諧的顏色樣式來滿足用戶的需求。 （請看下圖，騰訊新聞利用顏色來做用戶引導(dǎo)及導(dǎo)航引導(dǎo)，利用顏色層級更利于用戶閱讀。）
產(chǎn)品的外觀是影響消費者購買決策的關(guān)鍵因素。研究表明，所有產(chǎn)品評估中的90％與顏色有關(guān)。
如今，許多公司將“顏色”（尤其是UI設(shè)計中的顏色）作為其營銷策略之一。 (請看下圖)
我們不能說一種顏色看起來“不好”，只有錯誤地使用顏色，顏色才可能看起來很糟糕。
假如麥當(dāng)勞使用灰色和黑色而不是黃色和紅色，你是否還有胃口？用戶看到之后根本就沒有任何胃口了，更不可能達成交易。 （請看下圖）
女人在聚會上穿黑色連衣裙和黑色的唇膏，你是否覺得很奇怪？就不符合用戶對事物的認知顏色了，給用戶困惑。（請看下圖）
可口可樂不再使用紅色的標(biāo)志改為藍色，你還會喝它嗎？喝進去你的心理上會覺得你是在喝漱口水。（請看下圖）
不同的顏色傳遞出了不同的含義和感覺
方法①：在什么時間用戶在使用你的產(chǎn)品，來確定你的產(chǎn)品顏色，比如晚上、早上、還是凌晨。再比如沉浸式體驗應(yīng)用晚上都會有深色夜間模式。
方法②：根據(jù)你的用戶群體選擇正確的顏色，你的產(chǎn)品是面向那一類用戶，男人、女人、青年、幼兒、老年等這些人的對于顏色的認知是不一樣的，比如幼兒對于顏色的認知是五顏六色，顏色亮度飽和度都偏高的，就像路邊的喜洋洋1元搖擺車孩子都很喜歡。
方法③：根據(jù)產(chǎn)品的特性選擇正確的顏色目標(biāo)。產(chǎn)品的特性及固有特性，比如黃金就是金色的，蔬菜黃瓜就是綠色，天空就是藍色我們不妨用產(chǎn)品的固有色來做設(shè)計及產(chǎn)品特性來做設(shè)計。
方法④：考慮顏色的心理屬性，色彩對人類情緒和行為的影響在心理學(xué)分支稱為色彩心理學(xué)。它指出我們的大腦對顏色有反應(yīng)，而我們通常不會注意到它。當(dāng)人眼感知到一種顏色時，我們的大腦就會向內(nèi)分泌系統(tǒng)發(fā)出信號，釋放出負責(zé)情緒的激素，每種顏色在我們的思維中都有自己的影響力。
紅色：它象征著好和壞的感覺，包括愛，自信，熱情和憤怒。
橙色：充滿活力的溫暖色彩帶給你興奮的感覺。
黃色：這是幸福，陽光，喜悅和溫暖的顏色。
綠色：大自然的色彩帶來平靜和生機的感覺。
藍色：它通常代表一些公司形象。與安全、可靠、科技有關(guān)。
紫色：是神秘和魔術(shù)的顏色。
黑色：它伴隨著悲劇和死亡，象征著一個謎。同時，它可以是傳統(tǒng)的也可以是現(xiàn)代的。
白色：顏色意味著純凈和純真，以及完整性和清晰度。
為什么要談?wù)撍{色？
只需看看你最常用的Apps或網(wǎng)站、Facebook、Twitter、Microsoft，騰訊，菜鳥、新能源、智能設(shè)備、丁丁、旺旺、飛書、百度等，你會看到，它們都是基于藍色。
藍色是男人、女人、成人、孩子都喜歡的第一色，藍色就像無處不在，在自然界中我們對藍色的認知度最高，藍色絕對是可以培養(yǎng)用戶信任和接受的安全顏色，藍色是UI設(shè)計中顏色的典型示例，如果沒有更好的選擇，我們可以使用藍色。
我們在許多美觀的界面中注意到的一件事是，它們通常在特定主色顏色上具有更深和更淺的變化。 （請看下圖例子）
咱們來分析上面界面3個顏色色相、飽和度、明度的變化。就是我們ps軟件里面取色器的HSB，h是色相，s是飽和度，b是明度。
通過上面的顏色分析，我們可以看出主色色相數(shù)值不發(fā)生變化還是藍色，我們可以把主色降低明度和增加飽和度，可以使顏色變化更深。通過增加明度和降低飽和度，可以產(chǎn)生更明亮的色彩變化。
環(huán)顧我們四周環(huán)境空間的變化。每次掃視房間時，無疑會看到顏色飽和度和明度的變化，以及陰影和亮面的變化，作為設(shè)計師我們可以從現(xiàn)實中取色。 （舉個例子：看下圖）
總結(jié)上面的例子，我們以后在做設(shè)計的時候遇到這種純色界面就可以利用主色的深淺變化，設(shè)計我們的界面，這種顏色搭配更和諧更美觀更自然。
在進行UI界面設(shè)計時，你不能完全擺脫顏色組合。在UI設(shè)計中結(jié)合顏色很容易，但是如何避免混亂和過載呢？如何擺脫樸素并保持精致？
牢記以下兩個原則：
第一個原則：
60％+ 30％+ 10％的原則是達到色彩平衡的最佳比例。通過培養(yǎng)一個平衡的色彩搭配，整潔，和諧的界面為用戶帶來愉悅感，此比例可以完美地發(fā)揮作用。而且，它可以減輕用戶的視線，使其舒適地從一個點移動到另一點。 （舉個例子看下圖）
第二個原則：
這些規(guī)則與“黃金（6：3：1）規(guī)則”相匹配。這也是避免混亂并在配色方案中保持平衡的好方法。
1）基于“主色”，你可以在色環(huán)上創(chuàng)建許多變化的顏色。
有一個竅門：確定主色后，在主色的基礎(chǔ)上添加白色即可得到亮色，添加黑色則暗色。在這里，我建議新手使用單色系方案，很容易把控。 （舉個例子看下圖）
主色系的搭配更容易把控，也更簡潔，視覺信息容易聚焦
2）在令人難忘的時刻展示品牌主色，以增強你品牌的獨特風(fēng)格。在添加顏色以增強品牌在界面上的效果時，請考慮添加主色的位置、占比、數(shù)量，增強你的品牌效應(yīng)，讓用戶對你的品牌顏色認知度更高。（舉個例子看下圖）
支付寶的藍色大家應(yīng)該都知道，這是支付寶首頁主色的占比，只要有人給你提起支付寶你肯定會想到藍色，這就是在界面設(shè)計里面主色的重要性
餓了么主色數(shù)量、占比、位置，增強了用戶對品牌色認知
如果一個元素比另一個元素更重要，則它應(yīng)該具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區(qū)分重要和次要信息。 （請看下圖）
汽車之家運用橘色色塊和藍色色塊來做到信息視覺重量，區(qū)分視覺層級，引導(dǎo)用戶重要信息
氧氣app的頂部導(dǎo)航部分，新婚蜜月&內(nèi)衣知識做了顏色的特殊處理，就是為了在導(dǎo)航部分視覺加重，引導(dǎo)用戶點擊探索
雪球理財app，一鍵添加按鈕更加醒目，大膽的使用主色吸引用戶的眼睛，引導(dǎo)用戶添加自己喜歡的股票
在UI設(shè)計中巧妙地使用顏色可以創(chuàng)建漂亮的UI界面，但是創(chuàng)建漂亮的UI界面絕不是最終目標(biāo)，實現(xiàn)出色的用戶體驗?zāi)繕?biāo)，使用戶的生活更快樂才是關(guān)鍵。
因此，從UI的顏色選擇和用法的角度來看，設(shè)計人員應(yīng)始終記住該界面應(yīng)高度可用且清晰，并以用戶為中心來做我們的設(shè)計！
藍藍設(shè)計的小編 http://sillybuy.com