每當我看到一個漂亮，優雅并且簡潔美觀的界面，就會忍不住儲存下來。現在，我已經收集了100多個美不勝收的UI 界面。在一次次觀摩，欣賞和學習後，我發現這些界面有很多共同點。可究竟是什麼讓我對它們一見鐘情呢？現在我找到了答案，是色彩。
本文中，結合自身經曆，我總結了一些UI 設計配色技巧。雖然它們不能像魔術一樣讓你搖身一變成為最優秀的UI設計師，但是我保證，這些為你量身打造的UI 設計配色技巧，定會讓你受益匪淺。
**
1. 色彩的魔力
**
色彩是會說話的，甚至可以像語言一樣強大。回想以下，每當你初見一個網站或産品，給你留下第一印象的是什麼呢？是視覺外觀，而視覺外觀很大程度上是取決于色彩運用。
那麼，在UI設計中，色彩究竟可以做些什麼？
1）反映品牌的内涵和品質
顔色可以為品牌設定基調。 CCICOLOR的一項研究表明，使用者在評估一款線上商品時，隻需花費短短90秒，而判斷的依據高達62％至90％将取決于配色方案。
2）實作更佳的使用者體驗
色彩的有效運用能提升整體美感，提供更優的閱讀體驗，創造清晰和諧的風格。
3）影響購買決策
根據Kissmetrics的說法，産品的視覺外觀是影響消費者購買決策的首要因素。此外，QuickSprout的研究也表明，90％的産品評估都與顔色有關。Neil Patel曾寫到，“顔色在你購買特定産品的原因中占據85％的分量”。正因如此，顔色已成為當今重要的營銷手段之一。
**
2. 色彩的基本概念
**
色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象征。解讀色彩的語言，請看下表：
color-meaning.png
**
3. UI 設計配色技巧
**
1） 色彩使用也講究“天時地利人和”
存在即合理，沒有哪一個色彩本身就是醜陋和不具備美感的，隻能說，如果我們錯誤的使用了色彩，那麼它的美一旦被破壞，就隻剩下醜陋和别扭了。
想象一下，如果麥當勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對他們的炸雞充滿饑腸辘辘的感覺嗎？女人喜歡穿着黑色禮服搭配鮮豔口紅參加派對，為什麼？因為這樣會讓她們看起來性感迷人。
不同的顔色傳達不同的含義和感覺。如何明智地進行選取和搭配呢？這裡請注意5點：選取合适的顔色，運用于合适的設計場景，注意時間變化，關注目标使用者，明确想要達到的目的。
這裡請認真檢視上圖，明确顔色的意義。但如果你非要冒險追求獨一無二的設計，那麼祝您好運。
red-yellow.png
**
2）留心藍色
為什麼專門談藍色？藍色不是海洋天空的專屬色，藍色也是UI 設計的青睐色。
看看你常用的一些比較有名的APP或者網站，比如Facebook，Safari以及辦公軟體等等。有什麼發現呢？是的，它們的界面都是藍色，各種層次的藍色。
有研究表明，藍色是唯一一種讓女性和男性都鐘愛的顔色。藍色幾乎無處不在，大自然中，各網站的UI界面，服飾衣物等，藍色随處可見。包括我此刻寫入文章的Microsoft Word，界面也是藍色的。
藍色無疑是一種安全的顔色，它能最大程度上獲得使用者的信任并被廣泛接受，藍色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇，請用藍色。
facebook-blue.png
**
3）背景色和元素之間的色彩變化技巧
看看以下的界面：
color-variation.png
（來源）
這裡暫且不談這又是關于藍色的UI界面，讓我們專注于它的色彩變化。主題顔色是藍色，其他元素是較暗的藍色和更明亮的藍色。整體看上去，各層次的顔色平衡和諧且又脈絡清晰。
怎麼做到自然而又極具美感的色彩變化？
隻是一個簡單的黃金法則：通過降低亮度和增加飽和度可以使色彩變得更深；通過增加亮度和降低飽和度來使色彩變得更淺。
**
4）色彩組合的黃金比例——（6：3：1）規則
在設計時，色彩組合必不可免。組合顔色很容易，但組合後如何避免色彩混亂和累贅？如何既能夠不顯得單調又展示設計感？
記住二個原則：
第一個：6**：3：1規則**
60％+ 30％+ 10％的比例是為了平衡顔色。這個公式能創造出一種平衡的感覺，并能提供更佳的使用者體驗，可以讓使用者的實作從一個點舒緩的移動到另一個點。
第二個：最多3個原色
這個規則與黃金（6：3：1）規則相比對。這是避免混亂并保持平衡的最佳辦法。
color-proportion - 副本.png
**
5）顔色組合和互補
提供和諧的配色方案時，需要注意些什麼？在這個過程中需要考慮以下方面：
第一， 色調
您可以在色環上生成單個“色度”的許多變體。通過添加白色，黑色和灰色來生成不同的色調。
實作平衡色調，最簡單的方案是單色（單色）方案。
第二， 對比
顔色的不同對比可以喚起不同的情感反應。色輪上相對的兩種顔色可以提供最高的對比度，比如黑色和白色。強烈的對比度可以讓人集中精力，并且産生緊張的心情; 柔和的對比度則适用于輕松、休閑的UI設計。
注意：對比的使用不要過火，這樣容易使使用者産生困擾。
color-contrast - 副本.png
**
6）黑白色搭配不過時
黑色是所有中性色中最強的，而白色是最常用的背景顔色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給使用者自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優雅的氛圍。黑白色的搭配主要用于網站UI界面。
black-white.png
**
7）從自然和藝術中獲得靈感
自然與藝術是靈感的主要源泉。擡頭看看天空，你會發現藍色發揮到淋淋盡緻的經典模樣。從大自然中獲得的配色靈感可以使您的設計更加切合使用者的審美，非常自然，不帶刻意的痕迹。而藝術是對自然的直接反映，是非常寶貴的資源，值得好好利用。
nature-color.png
**
8）顔色心理學 – 避免性别誤區
或許天生如此，女人不喜歡灰色，橙色和棕色。她們鐘愛藍色，紫色和綠色。而男人不喜歡紫色，橙色和棕色。男人喜歡藍色，綠色和黑色。隻要記住，當你的産品目标使用者群是男性時，選擇能傳達男性氣概的色彩。如果你把運動類App的界面使用了女性色彩，結果可想而知。
還有一個誤區，人們以為粉色是女性的喜愛，但結果也許會讓你大跌眼鏡。
color-gender.png
**
4. 工具和模闆
**
這裡我總結了一些有助于UI配色的工具和模闆，希望對您有所幫助：
1） Coolors.co
Coolors.co是挑選顔色的好工具。隻需鎖定所選顔色并按空格即可生成調色闆，還提供了鎖定部分色卡再次生成顔色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。
2） Mockplus
Mockplus是一款非常友善的UI / UX設計工具，其啟動頁面加入了配色精美的示例項目和模闆，可直接導入桌面用戶端。其編輯器中，可對元件進行多樣的色彩設定和編輯，内部也包含完整的顔色選擇器，支援導入圖檔和GIF，如果您是要在原型設計過程中産出精美的UI 界面，Mockplus能滿足您的需求。
3） Paletton
Paletton有點類似于Kuler，但又不僅限于5個色調。當您已經擁有原色并想要使用其他色調時，Paletton将會是您很好的選擇，它可以建立協同色彩組合工作，是強大的UI調色闆。
4）Check my Color
Check my Color是一款可以用于檢查所有DOM元素的前景和背景顔色組合的工具，也是一款能夠檢查不同網頁自己的顔色亮度和對比度差異的工具。
5） Chinaz
該網站提供了豐富的配色資源，包括線上調色闆，網頁常用色彩，web安全色以及網頁顔色選擇器，會使您UI 配色的一個很好的幫助。建議對色彩運用比較初級的設計師可以做一個參考。
**
注意：可用性是關鍵
建立華麗的UI界面永遠不是最終的目标。提供卓越的使用者體驗，為使用者的生活增添快樂和幸福才是我們設計的目的。是以，在UI 設計配色上，每位UI設計師應該記住，界面應該是符合高度實用和并且清晰明了的。
今天就到此為止，關于UI配色技巧的話題，還有太多需要探索的地方，有任何見解，歡迎留言。