每當我看到乙個漂亮，優雅並且簡潔美觀的介面，就會忍不住儲存下來。現在，我已經收集了100多個美不勝收的ui 介面。在一次次觀摩，欣賞和學習後，我發現這些介面有很多共同點。可究竟是什麼讓我對它們一見鐘情呢？現在我找到了答案，是色彩。
本文中，結合自身經歷，我總結了一些ui 設計配色技巧。雖然它們不能像魔術一樣讓你搖身一變成為最優秀的ui設計師，但是我保證，這些為你量身打造的ui 設計配色技巧，定會讓你受益匪淺。
色彩是會說話的，甚至可以像語言一樣強大。回想以下，每當你初見乙個**或產品，給你留下第一印象的是什麼呢？是視覺外觀，而視覺外觀很大程度上是取決於色彩運用。
那麼，在ui設計中，色彩究竟可以做些什麼？
1）反映品牌的內涵和品質
2）實現更佳的使用者體驗
色彩的有效運用能提公升整體美感，提供更優的閱讀體驗，創造清晰和諧的風格。
3）影響購買決策
根據kissmetrics的說法，產品的視覺外觀是影響消費者購買決策的首要因素。此外，quicksprout的研究也表明，90％的產品評估都與顏色有關。neil patel曾寫到，「顏色在你購買特定產品的原因中佔據85％的分量」。正因如此，顏色已成為當今重要的營銷手段之一。
色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象徵。解讀色彩的語言，請看下表：
1） 色彩使用也講究「天時地利人和」
存在即合理，沒有哪乙個色彩本身就是醜陋和不具備美感的，只能說，如果我們錯誤的使用了色彩，那麼它的美一旦被破壞，就只剩下醜陋和彆扭了。
想象一下，如果麥當勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對他們的炸雞充滿飢腸轆轆的感覺嗎？女人喜歡穿著黑色禮服搭配鮮豔口紅參加派對，為什麼？因為這樣會讓她們看起來**迷人。
這裡請認真檢視上圖，明確顏色的意義。但如果你非要冒險追求獨一無二的設計，那麼祝您好運。
red-yellow.png
2）留心藍色
為什麼專門談藍色？藍色不是海洋天空的專屬色，藍色也是ui 設計的青睞色。
有研究表明，藍色是唯一一種讓女性和男性都鍾愛的顏色。藍色幾乎無處不在，大自然中，各**的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）顏色心理學 – 避免性別誤區
還有乙個誤區，人們以為粉色是女性的喜愛，但結果也許會讓你大跌眼鏡。
color-gender.png
**這裡我總結了一些有助於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
注意：可用性是關鍵
建立華麗的ui介面永遠不是最終的目標。提供卓越的使用者體驗，為使用者的生活增添快樂和幸福才是我們設計的目的。因此，在ui 設計配色上，每位ui設計師應該記住，介面應該是符合高度實用和並且清晰明了的。
平面設計配色搭配技巧
於網路 整理於 這是乙個很基本的法則。設計師都知道 60 30 10，主色彩是60 的比例，次要色彩是30 的比例，輔助色彩是10 的比例。比如乙個男士的上裝，打乙個比方，外套可以用60 那麼襯 衫是30 領帶就是10 如果室內空間的話，牆壁用60 的比例，家居床品 創聯之內就是30 那麼10 就是...
Linux C C 不可錯過的好書
id shouwangxiansheng 經常有讀者讓我推薦書籍，這次我就把我私藏的計算機書單分享給你們！不過由於時間匆忙，不會進行更加詳細的介紹。由於每個人的情況不一樣，推薦的書並不一定適合你，也不一定適合當前階段的你，有的書籍可能存在內容重複，所以根據自己的階段情況進行選擇即可。雖說如此，以下書...
Linux C C 不可錯過的好書
經常有讀者讓我推薦書籍，這次我就把我私藏的計算機書單分享給你們！不過由於時間匆忙，不會進行更加詳細的介紹。由於每個人的情況不一樣，推薦的書並不一定適合你，也不一定適合當前階段的你，有的書籍可能存在內容重複，所以根據自己的階段情況進行選擇即可。雖說如此，以下書單中提單的書均為優質書籍。另外說，本人從事...