作為一名UI設(shè)計(jì)師(或視覺設(shè)計(jì)師)告组，對(duì)顏色的敏感度箩溃、顏色運(yùn)用常識(shí)總是非常重要的。今天的文章將幫助你更加了解UI配色中的技巧恐似、理論知識(shí)以及如何運(yùn)用它們杜跷。
我們先從色輪開始。當(dāng)談到顏色矫夷、對(duì)比葱椭、和諧時(shí)，我們的腦海中必須有這樣的畫面:
這里有3個(gè)重要元素值得我們注意口四，分別是色調(diào)孵运、明度和飽和度。下面我將逐一解釋
1色調(diào)?
色調(diào)是最原始狀態(tài)下的顏色蔓彩。例如藍(lán)色治笨、綠色、黃色赤嚼、紅色等旷赖，它不受任何光線和陰影的變化影響。這里有一個(gè)便于理解例子：色調(diào)就是你在色輪中看到的色彩更卒，它與任何明暗或飽和度因素?zé)o關(guān)等孵。
2明度?
明度表示了色彩的明暗程度。當(dāng)我們走在路上蹂空，可以看到一些元素早上和晚上的顏色改變俯萌。例如，一座山的顏色是棕色上枕，早晨的色調(diào)較淺咐熙，晚上的色調(diào)較暗。
在UI中辨萍，明度扮演著重要角色棋恼，不但有助于我們獲得良好的對(duì)比度，還能幫助我們?cè)诮缑嬷袠?gòu)建出不同的層次結(jié)構(gòu)。
以谷歌的Material Design為例爪飘，上圖中就使用了不同的明度來凸顯重要元素义起。
明度的不同表現(xiàn)可以給我們一種層次感。當(dāng)一種顏色的亮度為100%時(shí)师崎，就會(huì)得到白色并扇。當(dāng)一種顏色的亮度為0%時(shí)，它會(huì)生成黑色抡诞。下面這張圖片可以幫助大家理解穷蛹。
3飽和度?
現(xiàn)在我們來談?wù)勶柡投龋?b>飽和度指的是色彩的鮮艷程度。當(dāng)我們提升顏色的飽和度時(shí)昼汗，色彩就會(huì)變得更強(qiáng)烈和生動(dòng)肴熏。當(dāng)我們降低色彩的飽和度時(shí)，顏色就會(huì)變得更加黯淡顷窒，而當(dāng)我們把飽和度降到最低時(shí)蛙吏，色彩就變成了灰色。
需要注意的是鞋吉，由于在現(xiàn)實(shí)世界中鸦做，我們對(duì)顏色飽和度的表現(xiàn)是有限制的，所以在印刷谓着、例如書籍或海報(bào)等領(lǐng)域不宜使用過多泼诱。而在數(shù)字世界，我們顯然擁有更多的可能性赊锚。
回到最初的話題——
當(dāng)我們談?wù)擃伾珪r(shí)治筒，另一個(gè)重要的命題就是如何組合顏色。關(guān)于這個(gè)我們總是會(huì)想起曾學(xué)過的色彩理論課舷蒲，尤其是對(duì)比與和諧部分耸袜，但對(duì)比并不總是意味著和諧。
從上圖我們可以看出牲平，相反的顏色雖然會(huì)擁有更高的對(duì)比度堤框，但相近的顏色卻之間更加和諧。
]1.?[endif]規(guī)則60 30 10
「規(guī)則60 30 10」纵柿，這不是對(duì)超模的標(biāo)準(zhǔn)測(cè)量蜈抓，而是成功組合顏色的比例。我們首先要選擇一種主色調(diào)藐窄，然后運(yùn)用到60%的空間中资昧。再選擇一種次要色調(diào)，在30%的空間中使用荆忍，最后剩下10%的空間使用最后一種顏色。這一理論曾在室內(nèi)設(shè)計(jì)中被大量使用。
如上圖所示刹枉，空間中一共使用了三種顏色：白色叽唱，粉色和綠色，綠色給人以強(qiáng)調(diào)的感覺微宝。如果我們把這個(gè)理論帶到界面設(shè)計(jì)中棺亭，強(qiáng)調(diào)色就可以作為我們的CTA(行動(dòng)號(hào)召)的顏色。
2.?[endif]受大自然啟發(fā)
你知道人類的眼睛可以看到超過1000萬種顏色嗎?
大自然的調(diào)色板總是出乎我們意料的和諧蟋软。樹木镶摘、動(dòng)物，空間岳守、每樣?xùn)|西都有自己專屬的色彩凄敢，我們只需集中注意力發(fā)掘即可。
3.?[endif]暗≠黑湿痢、亮≠白
當(dāng)我們使用顏色來表達(dá)明暗時(shí)涝缝，有一個(gè)很普遍的錯(cuò)誤，那就是使用不透明度的黑色表達(dá)陰影譬重，不透明度的白色來表達(dá)光亮拒逮。
但如果我們借鑒一下現(xiàn)實(shí)生活，會(huì)發(fā)現(xiàn)黑暗總是有一些基調(diào)的臀规。
黑暗從來都不是黑色的滩援，黑暗只是被物體明度遮蔽的色調(diào)。就如上圖中塔嬉，檸檬的影子是非常深的綠色狠怨，而木板的影子是非常的深棕色，它們都不是黑色的邑遏。只有在完全沒有光線的情況下佣赖，才會(huì)出現(xiàn)黑色。
4.?[endif]飽和度測(cè)試顏色和諧度
想要讓我們作品中的配色更加和諧记盒，可以將色調(diào)從顏色中移除憎蛤，只保留光和影，光影會(huì)給人以真實(shí)感和深度纪吮。
當(dāng)只剩下灰度時(shí)俩檬，我們可以清晰的觀察到明暗之間的差異，這將有助于我們調(diào)整色彩之間的明暗程度和透明度碾盟，以搭配出更和諧的配色棚辽。
5.?[endif]靈活改變色調(diào)
如今，不光界面變得越來越干凈冰肴，連排版和文字也變得更加清晰屈藐。
左邊文本的顏色是黑色#000000榔组，右邊是深藍(lán)色#15163D。雖然它們看起來都是黑色的联逻，但其中的差異卻相當(dāng)重要搓扯，為什么?請(qǐng)看下面的圖片。
雖然兩者都具有相同的不透明度包归，但其結(jié)果完全不同锨推。一個(gè)是灰色的，另一個(gè)是灰藍(lán)色的公壤。而當(dāng)我們使用某種色調(diào)的背景時(shí)换可，具有相同色調(diào)的文本顯然會(huì)更加和諧。
所以厦幅，要使顏色之間和諧沾鳄，其中一個(gè)技巧就是讓它們存在一定數(shù)量來自對(duì)方顏色的色彩。
在上圖中慨削，雖然最深的兩種顏色看起來都是黑色的洞渔，但由于右邊的色彩來源于紫羅蘭色，與黃色互補(bǔ)缚态，所以既能達(dá)到對(duì)比磁椒，又能達(dá)到和諧。
那就是說用黑色和灰色不好玫芦？不浆熔！這完全取決于你想做什么。黑色是中性色桥帆，與任何顏色搭配都很好看医增。但是有時(shí)候，比如在這個(gè)例子中老虫，由于有黃色的存在叶骨，所以添加了與之互補(bǔ)的其他色調(diào)，效果顯然更好祈匙。
6.?[endif]如何對(duì)色彩更敏銳忽刽？
我們中的許多人看到的顏色不夠飽和或不夠鮮艷，這是正常的夺欲，因?yàn)槭澜绮⒉煌昝拦虻郏伾膊煌昝馈Ｎ覀兇蟛糠秩硕紒碜杂谝粋€(gè)只使用CMYK和顏色有限制的物理世界些阅。
而處于數(shù)字世界中時(shí)伞剑，顏色的可能性是很多的，我們必須做好準(zhǔn)備市埋。所以我強(qiáng)烈推薦大家每天都要瀏覽一些靈感作品黎泣，汲取他們的優(yōu)秀之處恕刘。（小編偷偷插一句，我們每天都有最新鮮聘裁、優(yōu)質(zhì)的靈感作品推送哦~喜歡的小伙伴們一定不要錯(cuò)過了~）
7.?[endif]總結(jié)
就像生活中的每一件小事一樣雪营，配色也需要我們反復(fù)的練習(xí)弓千。剛開始或許會(huì)非常困難和復(fù)雜,但只要堅(jiān)持下去衡便，后面就會(huì)容易的多。重要的是：永遠(yuǎn)不要停止學(xué)習(xí)洋访。
