每當(dāng)我看到一個(gè)漂亮谤职，優(yōu)雅并且簡潔美觀的界面，就會(huì)忍不住保存下來∫谙剩現(xiàn)在允蜈，我已經(jīng)收集了100多個(gè)美不勝收的UI 界面。在一次次觀摩蒿柳，欣賞和學(xué)習(xí)后陷寝，我發(fā)現(xiàn)這些界面有很多共同點(diǎn)∑淞螅可究竟是什么讓我對它們一見鐘情呢凤跑？現(xiàn)在我找到了答案，是色彩叛复。
本文中仔引，結(jié)合自身經(jīng)歷，我總結(jié)了一些UI 設(shè)計(jì)配色技巧褐奥。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計(jì)師咖耘，但是我保證，這些為你量身打造的UI 設(shè)計(jì)配色技巧撬码，定會(huì)讓你受益匪淺儿倒。
1. 色彩的魔力
色彩是會(huì)說話的，甚至可以像語言一樣強(qiáng)大呜笑》蚍瘢回想以下，每當(dāng)你初見一個(gè)網(wǎng)站或產(chǎn)品叫胁，給你留下第一印象的是什么呢凰慈？是視覺外觀，而視覺外觀很大程度上是取決于色彩運(yùn)用驼鹅。
那么微谓，在UI設(shè)計(jì)中森篷，色彩究竟可以做些什么？
1）反映品牌的內(nèi)涵和品質(zhì)
顏色可以為品牌設(shè)定基調(diào)豺型。 CCICOLOR的一項(xiàng)研究表明仲智，用戶在評估一款在線商品時(shí)，只需花費(fèi)短短90秒姻氨，而判斷的依據(jù)高達(dá)62％至90％將取決于配色方案坎藐。
2）實(shí)現(xiàn)更佳的用戶體驗(yàn)
色彩的有效運(yùn)用能提升整體美感，提供更優(yōu)的閱讀體驗(yàn)哼绑，創(chuàng)造清晰和諧的風(fēng)格。
3）影響購買決策
根據(jù)Kissmetrics的說法碉咆，產(chǎn)品的視覺外觀是影響消費(fèi)者購買決策的首要因素抖韩。此外，QuickSprout的研究也表明疫铜，90％的產(chǎn)品評估都與顏色有關(guān)茂浮。Neil Patel曾寫到，“顏色在你購買特定產(chǎn)品的原因中占據(jù)85％的分量”壳咕。正因如此席揽，顏色已成為當(dāng)今重要的營銷手段之一。
2. 色彩的基本概念
色彩被長久的文化生活賦予了很多約定俗成的含義和寓意谓厘。每種色彩都形成了自己獨(dú)特的語言和象征幌羞。解讀色彩的語言，請看下表：
3. UI 設(shè)計(jì)配色技巧
1） 色彩使用也講究“天時(shí)地利人和”
存在即合理竟稳，沒有哪一個(gè)色彩本身就是丑陋和不具備美感的属桦，只能說，如果我們錯(cuò)誤的使用了色彩他爸，那么它的美一旦被破壞聂宾，就只剩下丑陋和別扭了。
想象一下诊笤，如果麥當(dāng)勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色系谐，你還對他們的炸雞充滿饑腸轆轆的感覺嗎？女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對讨跟，為什么纪他？因?yàn)檫@樣會(huì)讓她們看起來性感迷人。
不同的顏色傳達(dá)不同的含義和感覺晾匠。如何明智地進(jìn)行選取和搭配呢止喷？這里請注意5點(diǎn)：選取合適的顏色，運(yùn)用于合適的設(shè)計(jì)場景混聊，注意時(shí)間變化弹谁，關(guān)注目標(biāo)用戶乾巧，明確想要達(dá)到的目的。
這里請認(rèn)真查看上圖预愤，明確顏色的意義沟于。但如果你非要冒險(xiǎn)追求獨(dú)一無二的設(shè)計(jì)，那么祝您好運(yùn)植康。
2）留心藍(lán)色
為什么專門談藍(lán)色旷太？藍(lán)色不是海洋天空的專屬色，藍(lán)色也是UI 設(shè)計(jì)的青睞色销睁。
看看你常用的一些比較有名的APP或者網(wǎng)站供璧，比如Facebook，Safari以及辦公軟件等等冻记。有什么發(fā)現(xiàn)呢睡毒？是的，它們的界面都是藍(lán)色冗栗，各種層次的藍(lán)色演顾。
有研究表明，藍(lán)色是唯一一種讓女性和男性都鐘愛的顏色隅居。藍(lán)色幾乎無處不在羡洛，大自然中诀豁，各網(wǎng)站的UI界面钱豁，服飾衣物等瓜喇，藍(lán)色隨處可見。包括我此刻寫入文章的Microsoft Word涕蚤，界面也是藍(lán)色的掰盘。
藍(lán)色無疑是一種安全的顏色，它能最大程度上獲得用戶的信任并被廣泛接受赞季，藍(lán)色可以說是UI配色中的典型例子愧捕。如果你的UI界面沒有更好的選擇，請用藍(lán)色申钩。
3）背景色和元素之間的色彩變化技巧
看看以下的界面：
（來源）
這里暫且不談這又是關(guān)于藍(lán)色的UI界面次绘，讓我們專注于它的色彩變化。主題顏色是藍(lán)色撒遣，其他元素是較暗的藍(lán)色和更明亮的藍(lán)色邮偎。整體看上去，各層次的顏色平衡和諧且又脈絡(luò)清晰义黎。
怎么做到自然而又極具美感的色彩變化禾进？
只是一個(gè)簡單的黃金法則：通過降低亮度和增加飽和度可以使色彩變得更深；通過增加亮度和降低飽和度來使色彩變得更淺廉涕。
4）色彩組合的黃金比例——（6：3：1）規(guī)則
在設(shè)計(jì)時(shí)泻云，色彩組合必不可免艇拍。組合顏色很容易，但組合后如何避免色彩混亂和累贅宠纯？如何既能夠不顯得單調(diào)又展示設(shè)計(jì)感卸夕？
記住二個(gè)原則：
第一個(gè)：6：3：1規(guī)則
60％+ 30％+ 10％的比例是為了平衡顏色。這個(gè)公式能創(chuàng)造出一種平衡的感覺婆瓜，并能提供更佳的用戶體驗(yàn)快集，可以讓用戶的實(shí)現(xiàn)從一個(gè)點(diǎn)舒緩的移動(dòng)到另一個(gè)點(diǎn)。
第二個(gè)：最多3個(gè)原色
這個(gè)規(guī)則與黃金（6：3：1）規(guī)則相匹配廉白。這是避免混亂并保持平衡的最佳辦法个初。
5）顏色組合和互補(bǔ)
提供和諧的配色方案時(shí)，需要注意些什么猴蹂？在這個(gè)過程中需要考慮以下方面：
第一院溺， 色調(diào)
您可以在色環(huán)上生成單個(gè)“色度”的許多變體。通過添加白色晕讲，黑色和灰色來生成不同的色調(diào)。
實(shí)現(xiàn)平衡色調(diào)马澈，最簡單的方案是單色（單色）方案瓢省。
第二， 對比
顏色的不同對比可以喚起不同的情感反應(yīng)痊班。色輪上相對的兩種顏色可以提供最高的對比度勤婚，比如黑色和白色。強(qiáng)烈的對比度可以讓人集中精力涤伐，并且產(chǎn)生緊張的心情; 柔和的對比度則適用于輕松馒胆、休閑的UI設(shè)計(jì)。
注意：對比的使用不要過火凝果，這樣容易使用戶產(chǎn)生困擾祝迂。
6）黑白色搭配不過時(shí)
黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色器净。黑色是一個(gè)很好的選擇型雳，有種高端和永恒的感覺，而白色可以帶給用戶自由山害，寬敞和透氣的感覺纠俭。如上所述，黑色和白色也是最大的對比色浪慌，如果合理的使用黑色配合白色冤荆，會(huì)營造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面权纤。
7）從自然和藝術(shù)中獲得靈感
自然與藝術(shù)是靈感的主要源泉钓简。抬頭看看天空乌妒，你會(huì)發(fā)現(xiàn)藍(lán)色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計(jì)更加切合用戶的審美涌庭，非常自然芥被，不帶刻意的痕跡。而藝術(shù)是對自然的直接反映坐榆，是非常寶貴的資源拴魄，值得好好利用。
8）顏色心理學(xué) – 避免性別誤區(qū)
或許天生如此席镀，女人不喜歡灰色匹中，橙色和棕色。她們鐘愛藍(lán)色豪诲，紫色和綠色顶捷。而男人不喜歡紫色，橙色和棕色屎篱。男人喜歡藍(lán)色服赎，綠色和黑色。只要記住交播，當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時(shí)重虑，選擇能傳達(dá)男性氣概的色彩。如果你把運(yùn)動(dòng)類App的界面使用了女性色彩秦士，結(jié)果可想而知缺厉。
還有一個(gè)誤區(qū)，人們以為粉色是女性的喜愛隧土，但結(jié)果也許會(huì)讓你大跌眼鏡提针。
4. 工具和模板
這里我總結(jié)了一些有助于UI配色的工具和模板，希望對您有所幫助：
Coolors.co是挑選顏色的好工具曹傀。只需鎖定所選顏色并按空格即可生成調(diào)色板辐脖，還提供了鎖定部分色卡再次生成顏色的功能。包括HEX皆愉、HSB揖曾、RGB、CMYK等四種色彩模式亥啦。
2）Mockplus
Mockplus是一款非常方便的UI / UX設(shè)計(jì)工具炭剪，其啟動(dòng)頁面加入了配色精美的示例項(xiàng)目和模板，可直接導(dǎo)入桌面客戶端翔脱。其編輯器中奴拦，可對組件進(jìn)行多樣的色彩設(shè)置和編輯，內(nèi)部也包含完整的顏色選擇器届吁，支持導(dǎo)入圖片和GIF错妖，如果您是要在原型設(shè)計(jì)過程中產(chǎn)出精美的UI 界面绿鸣，Mockplus能滿足您的需求。
3）Paletton
Paletton有點(diǎn)類似于Kuler暂氯，但又不僅限于5個(gè)色調(diào)潮模。當(dāng)您已經(jīng)擁有原色并想要使用其他色調(diào)時(shí)，Paletton將會(huì)是您很好的選擇痴施，它可以創(chuàng)建協(xié)同色彩組合工作擎厢，是強(qiáng)大的UI調(diào)色板。
Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具辣吃，也是一款能夠檢查不同網(wǎng)頁自己的顏色亮度和對比度差異的工具动遭。
5）Chinaz
該網(wǎng)站提供了豐富的配色資源，包括在線調(diào)色板神得，網(wǎng)頁常用色彩厘惦，web安全色以及網(wǎng)頁顏色選擇器，會(huì)使您UI 配色的一個(gè)很好的幫助哩簿。建議對色彩運(yùn)用比較初級(jí)的設(shè)計(jì)師可以做一個(gè)參考宵蕉。
注意：可用性是關(guān)鍵
創(chuàng)建華麗的UI界面永遠(yuǎn)不是最終的目標(biāo)。提供卓越的用戶體驗(yàn)节榜，為用戶的生活增添快樂和幸福才是我們設(shè)計(jì)的目的羡玛。因此，在UI 設(shè)計(jì)配色上全跨，每位UI設(shè)計(jì)師應(yīng)該記住缝左，界面應(yīng)該是符合高度實(shí)用和并且清晰明了的亿遂。
