歡迎大家關(guān)注我的UI中國(guó)，不知不覺(jué)七千多個(gè)粉絲啦，嘻嘻~~

很多同學(xué)，總是苦惱自己配不出高級(jí)、干凈的顏色，雖然看了很多文章跟方法，但一看都會(huì)，一動(dòng)手全廢。

我曾經(jīng)也碰到過(guò)這個(gè)問(wèn)題，在動(dòng)手之前，或許腦海里會(huì)有個(gè)大致的色彩感覺(jué)。但實(shí)際上軟件一操作，發(fā)現(xiàn)怎么配都很難配出特滿意的色彩。

其實(shí)這種屬于正?，F(xiàn)象，更多的是經(jīng)驗(yàn)層面的缺乏，只要多練習(xí)，慢慢的這種眼高手低的感覺(jué)就會(huì)越來(lái)越少。

并且練的多了后，發(fā)現(xiàn)配色真的沒(méi)那么難，只要有一點(diǎn)積累，有一點(diǎn)審美，稍微掌握一點(diǎn)方法，就能讓自己在配色的能力上有個(gè)很大的改善。

審美跟積累很早之前的文章里頭其實(shí)就說(shuō)了，可以多建幾個(gè)畫板，把不同的色彩歸類收集起來(lái)，分析這些色彩的飽和度及明度，逐漸感受到色彩的張力。

人有著很強(qiáng)的適應(yīng)環(huán)境及學(xué)習(xí)能力，比如你在一個(gè)地方呆長(zhǎng)了，其實(shí)口音也會(huì)越來(lái)越接近當(dāng)?shù)亍?/p>

審美也是一樣，只要你不斷地去收集、積累那些真的很美的圖片，那么你的審美也會(huì)發(fā)生改變，自然也會(huì)越來(lái)越高。

比如以前你認(rèn)為這樣的配色就很美，視覺(jué)沖擊力強(qiáng)

但后面慢慢發(fā)現(xiàn)，原來(lái)這種平淡的才是驚艷之作，非常的耐看。

審美提升上來(lái)了，其實(shí)剩下的就是靠大量的練習(xí)以及方法的積累。練習(xí)也很簡(jiǎn)單，無(wú)非是多做一些Redesgin，多做一些概念方案。

Dribbble上也有非常多的案例可以參考，比如下面這種

提升審美需要依靠點(diǎn)滴積累。

而方法的積累，其實(shí)真的就是三點(diǎn)。只要把這三點(diǎn)掌握好了，配出來(lái)的顏色都不會(huì)太low，顯得較為高級(jí)。

第一點(diǎn)：顏色不要花

有些同學(xué)總是認(rèn)為配色嘛，肯定要多配幾種顏色，才會(huì)美。

但其實(shí)錯(cuò)了，顏色配的越多，越顯得臟亂，并且對(duì)設(shè)計(jì)師的色彩能力也要求越高，ta必須要把所有的顏色選到一個(gè)最大的公約數(shù)，搭配起來(lái)才能非常時(shí)尚。

一般能像上面這樣的，能同時(shí)hold住三種顏色同時(shí)在一個(gè)畫面上的，大多數(shù)也都是王者段位了。

如果自己作為青銅、白銀級(jí)選手，我建議還是首先要從控制顏色的數(shù)量還是入手。

控制的不好，就是下面這個(gè)例子：

總結(jié)：控制色相數(shù)量，增加色彩明度梯制 

先把顏色的明度系數(shù)理解到位了，再理解不同色相帶來(lái)的情緒。同一個(gè)畫面色彩越多，越難掌控，而且也會(huì)讓人視線越不知道放哪，產(chǎn)生一種煩躁焦慮感。

比如看看這些作品，高級(jí)都是因?yàn)樯时豢刂频暮芎?/p>

再來(lái)幾組比較花的，是不是就要掉檔次的多？

第二點(diǎn)：不要臟

好看的顏色會(huì)讓人引起共鳴，不好看的顏色一眼都不想再看。臟臟的顏色會(huì)讓人覺(jué)得這個(gè)東西不高級(jí)，不夠養(yǎng)眼。

那么什么顏色會(huì)顯得臟？帶大家看幾個(gè)辣眼睛的：

1、飽和度中性的重色 ?

2、飽和度過(guò)高的中性色 ?

3、飽和度過(guò)低的淺性色 ?

上面這幾種辣眼睛的情況，咱們要盡量避免。

重色要么為偏灰色，要么帶強(qiáng)顏色屬性；中性色飽和度盡量需要往下收，收到直到比較溫和為止；淺色的色彩盡量明快飽和度高一點(diǎn)，不要過(guò)灰，不然也會(huì)顯得臟。

比如下面這些改好了的。

1、重色系 ?

2、中性色 ?

3、淺色系 ?

再對(duì)比一下上面的幾個(gè)辣眼睛色塊，發(fā)現(xiàn)是不是差別還挺大。 

總結(jié)：根據(jù)顏色明度來(lái)控制顏色的飽和度

說(shuō)到這兒，其實(shí)學(xué)過(guò)美術(shù)的同學(xué)應(yīng)該都知道，這個(gè)跟畫色彩作品差不多，亮部盡量多給一些鮮艷的色彩，中間層盡量灰下去，暗部色彩可以稍微豐富一丟丟。

第三點(diǎn)：顏色要有主次之分，什么是主色，什么是次色，要分清楚

在實(shí)際業(yè)務(wù)場(chǎng)景，非純工具型應(yīng)用，很難只用到一種色彩，因?yàn)椴煌墓δ苄枰褂貌煌纳蕘?lái)進(jìn)行區(qū)分。

因此大部分實(shí)際的界面設(shè)計(jì)需求當(dāng)中，我們還是要用到兩種到三種的色彩。

不過(guò)在搭配的時(shí)候，需要注意的是，顏色的主色跟次色一定要顯而易見(jiàn)可以區(qū)分得清楚。

其中主色應(yīng)該占據(jù)60%-70%及以上的面積，次色加在一起，不可超過(guò)主色的面積區(qū)域。

這樣做的原因，也是為了防止眼睛失焦，導(dǎo)致審美疲勞。色彩越多，主次越難分清楚，眼睛對(duì)于信息的視覺(jué)需要越耗精力，所以自然看著不舒服。

總結(jié)：讓頁(yè)面的色彩主次顯而易見(jiàn)。

這一點(diǎn)在室內(nèi)的裝潢上，也有講究。

室內(nèi)設(shè)計(jì)講究的主次色搭配，黃金配色比例70% : 25% : 5%；

70%的基礎(chǔ)色，包括墻面、地板和天花板。一般情況下，同一空間的這三者顏色盡量控制在2種，最多不能超過(guò)3種（畢竟現(xiàn)在很多人喜歡涂一面有色的墻）

比如你發(fā)現(xiàn)這些很好看的室內(nèi)設(shè)計(jì)圖，都差不多是這樣。從室內(nèi)設(shè)計(jì)的裝潢里找取配色靈感，也是不錯(cuò)的一些選擇。

上面的這些，就是最重要的三個(gè)方法。把這三個(gè)方法掌握了，其實(shí)配色起來(lái)就容易多了，而且不容易犯錯(cuò)誤。

好的習(xí)慣也很重要

另外方法很重要，但習(xí)慣也不可忽視，所以還是得養(yǎng)成一些比較好的配色習(xí)慣，這樣才能最快的成長(zhǎng)，鞏固自己對(duì)于配色的認(rèn)知以及理解。

比如多收藏美圖，提升審美。這點(diǎn)雖然很不起眼，但對(duì)于培養(yǎng)自己的審美，是有著絕大的好處的。在收藏了100個(gè)不同色彩的圖板之后，相信你就能感受到其中的差距了。

另外在初期階段，哪怕按照上面的方法去調(diào)整了。還是感覺(jué)自己配出來(lái)的顏色總是缺了點(diǎn)什么。那么不妨去吸一吸別人的顏色，在別人的顏色上借鑒。

顏色無(wú)非就那么幾種，多吸一吸也不是啥壞事。

比如你現(xiàn)在要讓我設(shè)計(jì)一個(gè)綠色界面的UI，我肯定會(huì)先去吸一下微信的綠色，跟360的綠色，然后結(jié)合這兩個(gè)綠色，做一下微調(diào)，搭配出一個(gè)嶄新的綠色。

畢竟是在巨人的肩膀上前行，自然也不會(huì)太差。

理解色彩的情緒

最后一個(gè)，就是配色前的思考與判斷也很重要，色彩的情緒需要與實(shí)際的場(chǎng)景想吻合。不要做出跟場(chǎng)景預(yù)期不符合的顏色，高端場(chǎng)景用大紫大綠不合適。

這塊其實(shí)也有一些方法，不過(guò)就不在本篇文章里講了。

后面我也會(huì)單獨(dú)寫一篇關(guān)于情緒板的文章，如何根據(jù)業(yè)務(wù)特色，來(lái)搭配出具備情緒的色彩，傳遞出業(yè)務(wù)的內(nèi)在價(jià)值。

關(guān)注公眾號(hào)UX小學(xué)后，把咱們星標(biāo)，這樣就能接到及時(shí)推送了。

打包案例集合

肯定會(huì)有同學(xué)想問(wèn)我，咱們這篇文章里這么多好看的設(shè)計(jì)作品，都是從哪來(lái)的？其實(shí)是咱們?cè)谝曨l號(hào)『設(shè)計(jì)新視界』上開(kāi)了一期節(jié)目，叫做UI/UX設(shè)計(jì)趨勢(shì)，每一期都會(huì)在全球各大平臺(tái)上，精挑細(xì)選一些非常nice的作品。

這些作品對(duì)于提升自己的審美，增加參考標(biāo)準(zhǔn)很有幫助。

所以我為大家打包了一份，大概里面有兩百多張我精挑細(xì)選的UI作品集合，用來(lái)收藏到自己的本地電腦里，平時(shí)沒(méi)事打開(kāi)看看，自然是非常合適的。

一共有7期，每一期都有30張圖左右，每張都是精挑細(xì)選下來(lái)的結(jié)果，所以效果非常高級(jí)。

資源下載方式：

方法1：點(diǎn)擊文末收藏旁邊的的下載按鈕，根據(jù)操作即可下載

方法2：微信手動(dòng)搜索公眾號(hào)『 UX小學(xué) 』，發(fā)送關(guān)鍵詞『 UI案例打包 』

已超1000+人下載

PS：最近咱們跟阿里、騰訊的同學(xué)，一起建了個(gè)一線設(shè)計(jì)師微信交流群，感興趣的同學(xué)，可以添加小哆啦微信號(hào)『 Dollam 』，備注『  UXD FANS  』加入?。ㄖ幻嫦蛐菢?biāo)了公眾號(hào)UX小學(xué)的粉絲 ）

Powered by Froala Editor