配色 | 總監(jiān)說顏色丑，我調(diào)了調(diào)確實(shí)好看多了！！

2021-12-6    seo達(dá)人


圖片 
我曾經(jīng)也碰到過這個問題，在動手之前，或許腦海里會有個大致的色彩感覺。但實(shí)際上軟件一操作，發(fā)現(xiàn)怎么配都很難配出特滿意的色彩。
其實(shí)這種屬于正?，F(xiàn)象，更多的是經(jīng)驗(yàn)層面的缺乏，只要多練習(xí)，慢慢的這種眼高手低的感覺就會越來越少。
圖片 
并且練的多了后，發(fā)現(xiàn)配色真的沒那么難，只要有一點(diǎn)積累，有一點(diǎn)審美，稍微掌握一點(diǎn)方法，就能讓自己在配色的能力上有個很大的改善。
圖片 
審美跟積累很早之前的文章里頭其實(shí)就說了，可以多建幾個畫板，把不同的色彩歸類收集起來，分析這些色彩的飽和度及明度，逐漸感受到色彩的張力。
 
圖片
圖片 
人有著很強(qiáng)的適應(yīng)環(huán)境及學(xué)習(xí)能力，比如你在一個地方呆長了，其實(shí)口音也會越來越接近當(dāng)?shù)亍?/section>
審美也是一樣，只要你不斷地去收集、積累那些真的很美的圖片，那么你的審美也會發(fā)生改變，自然也會越來越高。
比如以前你認(rèn)為這樣的配色就很美，視覺沖擊力強(qiáng)
圖片 
但后面慢慢發(fā)現(xiàn)，原來這種平淡的才是驚艷之作，非常的耐看。
圖片 
審美提升上來了，其實(shí)剩下的就是靠大量的練習(xí)以及方法的積累。練習(xí)也很簡單，無非是多做一些Redesgin，多做一些概念方案。
Dribbble上也有非常多的案例可以參考，比如下面這種
圖片
提升審美需要依靠點(diǎn)滴積累。
而方法的積累，其實(shí)真的就是三點(diǎn)。只要把這三點(diǎn)掌握好了，配出來的顏色都不會太low，顯得較為高級。 
 

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

有些同學(xué)總是認(rèn)為配色嘛，肯定要多配幾種顏色，才會美。
但其實(shí)錯了，顏色配的越多，越顯得臟亂，并且對設(shè)計(jì)師的色彩能力也要求越高，ta必須要把所有的顏色選到一個最大的公約數(shù)，搭配起來才能非常時尚。
圖片
一般能像上面這樣的，能同時hold住三種顏色同時在一個畫面上的，大多數(shù)也都是王者段位了。
如果自己作為青銅、白銀級選手，我建議還是首先要從控制顏色的數(shù)量還是入手。 
 
控制的不好，就是下面這個例子：
圖片 
總結(jié)：控制色相數(shù)量，增加色彩明度梯制  
先把顏色的明度系數(shù)理解到位了，再理解不同色相帶來的情緒。同一個畫面色彩越多，越難掌控，而且也會讓人視線越不知道放哪，產(chǎn)生一種煩躁焦慮感。
比如看看這些作品，高級都是因?yàn)樯时豢刂频暮芎?/section>
圖片
圖片
圖片 
再來幾組比較花的，是不是就要掉檔次的多？
圖片
圖片 
 

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

好看的顏色會讓人引起共鳴，不好看的顏色一眼都不想再看。臟臟的顏色會讓人覺得這個東西不高級，不夠養(yǎng)眼。
那么什么顏色會顯得臟？帶大家看幾個辣眼睛的：
1、飽和度中性的重色 ?
圖片 
2、飽和度過高的中性色 ?
圖片 
3、飽和度過低的淺性色 ?
圖片 
上面這幾種辣眼睛的情況，咱們要盡量避免。
 
重色要么為偏灰色，要么帶強(qiáng)顏色屬性；中性色飽和度盡量需要往下收，收到直到比較溫和為止；淺色的色彩盡量明快飽和度高一點(diǎn)，不要過灰，不然也會顯得臟。
比如下面這些改好了的。
1、重色系 ?
圖片 
2、中性色 ?
圖片 
3、淺色系 ?
圖片 
再對比一下上面的幾個辣眼睛色塊，發(fā)現(xiàn)是不是差別還挺大。
 總結(jié)：根據(jù)顏色明度來控制顏色的飽和度  
說到這兒，其實(shí)學(xué)過美術(shù)的同學(xué)應(yīng)該都知道，這個跟畫色彩作品差不多，亮部盡量多給一些鮮艷的色彩，中間層盡量灰下去，暗部色彩可以稍微豐富一丟丟。
圖片 

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

在實(shí)際業(yè)務(wù)場景，非純工具型應(yīng)用，很難只用到一種色彩，因?yàn)椴煌墓δ苄枰褂貌煌纳蕘磉M(jìn)行區(qū)分。
因此大部分實(shí)際的界面設(shè)計(jì)需求當(dāng)中，我們還是要用到兩種到三種的色彩。
圖片 
不過在搭配的時候，需要注意的是，顏色的主色跟次色一定要顯而易見可以區(qū)分得清楚。
其中主色應(yīng)該占據(jù)60%-70%及以上的面積，次色加在一起，不可超過主色的面積區(qū)域。
圖片
這樣做的原因，也是為了防止眼睛失焦，導(dǎo)致審美疲勞。色彩越多，主次越難分清楚，眼睛對于信息的視覺需要越耗精力，所以自然看著不舒服。
總結(jié)：讓頁面的色彩主次顯而易見。 
 
這一點(diǎn)在室內(nèi)的裝潢上，也有講究。
室內(nèi)設(shè)計(jì)講究的主次色搭配，黃金配色比例70% : 25% : 5%；
圖片 
70%的基礎(chǔ)色，包括墻面、地板和天花板。一般情況下，同一空間的這三者顏色盡量控制在2種，最多不能超過3種（畢竟現(xiàn)在很多人喜歡涂一面有色的墻）
圖片 
比如你發(fā)現(xiàn)這些很好看的室內(nèi)設(shè)計(jì)圖，都差不多是這樣。從室內(nèi)設(shè)計(jì)的裝潢里找取配色靈感，也是不錯的一些選擇。
圖片
上面的這些，就是最重要的三個方法。把這三個方法掌握了，其實(shí)配色起來就容易多了，而且不容易犯錯誤。 
 
另外，好的習(xí)慣也很重要
另外方法很重要，但習(xí)慣也不可忽視，所以還是得養(yǎng)成一些比較好的配色習(xí)慣，這樣才能最快的成長，鞏固自己對于配色的認(rèn)知以及理解。
比如多收藏美圖，提升審美。這點(diǎn)雖然很不起眼，但對于培養(yǎng)自己的審美，是有著絕大的好處的。在收藏了100個不同色彩的圖板之后，相信你就能感受到其中的差距了。

圖片

 

 

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

圖片

圖片

 

 

顏色無非就那么幾種，多吸一吸也不是啥壞事。
比如你現(xiàn)在要讓我設(shè)計(jì)一個綠色界面的UI，我肯定會先去吸一下微信的綠色，跟360的綠色，然后結(jié)合這兩個綠色，做一下微調(diào)，搭配出一個嶄新的綠色。
圖片 
畢竟是在巨人的肩膀上前行，自然也不會太差。 
 
還有，理解色彩的情緒
最后一個，就是配色前的思考與判斷也很重要，色彩的情緒需要與實(shí)際的場景想吻合。不要做出跟場景預(yù)期不符合的顏色，高端場景用大紫大綠不合適。

圖片

 

原文地址：UX小學(xué)（公眾號）

作者：小學(xué)鴨

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》配色 | 總監(jiān)說顏色丑，我調(diào)了調(diào)確實(shí)好看多了??！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至：

日歷

鏈接

個人資料

存檔