您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 視覺設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

干貨分享!UI設(shè)計(jì)中的顏色運(yùn)用

顏色與其它東西一樣,適量才會(huì)運(yùn)用得當(dāng)。如果在你的配色計(jì)劃中堅(jiān)持使用馬克斯三原色的話,你會(huì)得到更好的配色結(jié)果。為一個(gè)項(xiàng)目配色時(shí),在眾多顏色中尋找平衡需要做很多工作,越想達(dá)到平衡越復(fù)雜。

 

顏色并不能提升你設(shè)計(jì)的質(zhì)量---但它可以強(qiáng)化你的設(shè)計(jì)質(zhì)量

 

如果你想獲得調(diào)色板之外更高一級(jí)的顏色,那么你可以使用色調(diào)和飽和度,它們可以給你提供不同的風(fēng)格。

 

60-30-10法則

這個(gè)配色秘訣是一個(gè)省時(shí)的技巧,可以幫助你把顏色更好地組織起來。60%+30%+10%的比例可以讓你的配色達(dá)到平衡。這個(gè)公式的秘訣在于它能營(yíng)造出平衡的感覺,讓眼睛很舒服地從一個(gè)視覺焦點(diǎn)移動(dòng)到另一個(gè)視覺焦點(diǎn),并且這個(gè)公式用起來很簡(jiǎn)單。

 

60%是你的主色調(diào),30%的二次色,10%是你的強(qiáng)調(diào)色

 

墻漆、 家具、飾品

 

顏色的意義

科學(xué)家們幾個(gè)世紀(jì)以來對(duì)顏色的物理效應(yīng)進(jìn)行研究。除了美學(xué)以外,顏色還是情緒和聯(lián)想的創(chuàng)造者。顏色所表達(dá)的意義取決于不同的環(huán)境和文化。這就是為什么你會(huì)看黑白時(shí)尚商店,因?yàn)樗鼈円蚕M粌?yōu)雅而高尚地展現(xiàn)出來。

Asos用純黑白和濃度較低的綠色搭配,它這么設(shè)計(jì)是有原因的。


紅色:激情、愛、危險(xiǎn)

藍(lán)色:寧?kù)o、負(fù)責(zé)、安全

黑色:神秘、優(yōu)雅、邪惡

白色:純潔、沉默、清潔

綠色:嶄新、新鮮、自然

 


如果你想知道更多,請(qǐng)參照如下顏色文化:

 

灰度第一

我們喜歡在做設(shè)計(jì)時(shí),第一件事情就是玩顏色和色調(diào),當(dāng)你感覺到你經(jīng)花了3個(gè)小時(shí)在調(diào)整原色和配色時(shí),你發(fā)現(xiàn)這種行為其實(shí)是背叛你的。它實(shí)在是有吸引力但是你需要避免這種態(tài)度。

 

也不要讓你自己的注意力集中在間距和元素布局上,從而節(jié)省大量時(shí)間,這樣約束自己產(chǎn)生的效率是非常高的。另一方面,也沒必要一直看到讓自己煩燥的地步。如果你想讓它好看一此,可以多嘗試幾種風(fēng)格。

 

這是我發(fā)布在追波上的一個(gè)作品,運(yùn)用了單色并且視覺焦點(diǎn)集中在了元素上。


 

遠(yuǎn)離純灰度和黑色

我曾學(xué)到一個(gè)重要的配色技巧是,避免使用不飽合的灰色。在現(xiàn)實(shí)生活當(dāng)中,不存在純灰,純黑也一樣。

 

 

這張圖上最黑的顏色,不是#000,而是#0A0A10


 

記住要在顏色上增加飽合度。這樣,潛意識(shí)里會(huì)看起來更自然讓用戶更舒服。

 

 

相信大自然

最好的配色來自大自然。他們看起來總是很舒適。觀察環(huán)境來獲取配色靈感的最大優(yōu)勢(shì)是大自然的調(diào)色板是一直變化的。

 

我們只要看看周圍就可以獲得配色靈感了。


 

保持對(duì)比

有一些顏色搭配在一起很和諧,可是和別的顏色搭在一起就會(huì)起沖突。觀察色輪可以明顯地發(fā)現(xiàn)顏色之間是怎樣相互影響的。你應(yīng)該掌握這種方法,但這也不是必須的。

 

如果你想知道更多顏色理論,可以點(diǎn)擊這個(gè)鏈接:設(shè)計(jì)師的顏色理論-建立你自己的調(diào)色板(https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

 

 

獲得靈感

 

眾所周知追波是UI設(shè)計(jì)找參考最好的網(wǎng)站。追波提供一種根據(jù)顏色查找的工具,當(dāng)你想根據(jù)視覺搜索,看一下其它設(shè)計(jì)師是怎樣運(yùn)用流行色的時(shí)候,可以來這里查看:dribbble.com/colors.

 

從很多靈感來源,像視頻、平面設(shè)計(jì)、室內(nèi)設(shè)計(jì)、時(shí)尚設(shè)計(jì)等。不要僅僅局限說當(dāng)前的調(diào)色板,你可以隨時(shí)保存下那些看起來不錯(cuò)的顏色。

 

我喜歡常常從韓國(guó)的流行文化短片偷取顏色,它們看起來很絢麗。


 

工具

工欲善其事,必先利其器。我收集了一些最好的顏色選擇工具,2017年可以用來選擇實(shí)用的調(diào)色板。它們會(huì)為我節(jié)省很多時(shí)間。

 

Coolors.co

這是我最喜歡的一款拾色器。你可以輕松地鎖定選中的顏色,按空格鍵生成調(diào)色板。Coolors還提供上傳圖片生成色板的服務(wù)。而最酷的是使用這個(gè)工具的時(shí)候,不僅可以輸出,而可以用拾色器讓你修改參考點(diǎn)。

 

視頻地址:https://vimeo.com.zcool.cn.zcool.cn/200337992

 

 


Kuler

這是一款來自Adobe的工具,已經(jīng)問世很久了,它可以在瀏覽器中使用。也有桌面版本。如果你使用桌面版本,你可以直接把顏色導(dǎo)入到ps里。

 

 

 

Paletton

這一款工具和KULER類似,不同的是這款工具不限于5種色調(diào)。當(dāng)你有了主要顏色,并且想要更多的色調(diào)的時(shí)候,這絕對(duì)是一款非常贊的工具。



Designspiration.net

想象一下,你已經(jīng)有了一套配色方案,你想看下這個(gè)方案在實(shí)際運(yùn)用中是啥樣的,這時(shí)候,Designispiration絕對(duì)是一款非常贊的工具!你可以吸5種顏色,根據(jù)這5種顏色搜索圖片,因此它可以滿足你的需求。最酷的點(diǎn)在于,不僅可以用這個(gè)特殊的調(diào)色板搜索圖片,而且能真實(shí)地運(yùn)用到設(shè)計(jì)當(dāng)中。

視頻地址:https://vimeo.com.zcool.cn.zcool.cn/200319959

 

 

Shutterstock Lab Spectrum

你可能會(huì)問:如果我想根據(jù)我選的顏色搜索圖片該 怎么辦?,那么,SHUTTERSTOCKE 有一個(gè)叫做SPECTRUM的工具,你可以用它來搜索指定色調(diào)的圖片。你甚至不用保存下來,因?yàn)閹〉男☆A(yù)覽圖已經(jīng)足以生成一個(gè)調(diào)色板了。

 



Tineye Multicolr

如果你想在圖片中搜索混合顏色甚至指定數(shù)量的顏色,那么TINEYE可以幫助你。這個(gè)網(wǎng)站從Flickr獲取了一千萬知識(shí)共享照片,組成了數(shù)據(jù)庫(kù)。

 

 視頻地址:https://vimeo.com.zcool.cn.zcool.cn/200342210


 

最后的思考

 

顏色是一種比較難把握的概念,尤其是在數(shù)字時(shí)代。上面提到的技巧可以在工作中幫助你容易地找到合適顏色。想要?jiǎng)?chuàng)建出驚艷的配色方案,最好方法是不斷的練習(xí),把他當(dāng)成你熱衷的興趣,把練習(xí)顏色搭配當(dāng)成你的玩伴去練習(xí)!


[教程作者:pugoyn]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui3389.html
2017UI流行趨勢(shì) - 漸變色彩探索
網(wǎng)頁(yè)視覺設(shè)計(jì)師設(shè)計(jì)基本手冊(cè)( 二 )
圖趣網(wǎng)微信
建議反饋
×