干貨分享!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í)!
本文地址:http://m.likemindfilms.com/tutorial/ui3389.html
您可能還喜歡
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏