干貨分享！UI設(shè)計中的顏色運用

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

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

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

60-30-10法則

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

60%是你的主色調(diào)，30%的二次色，10%是你的強調(diào)色

墻漆、 家具、飾品

顏色的意義

科學(xué)家們幾個世紀以來對顏色的物理效應(yīng)進行研究。除了美學(xué)以外，顏色還是情緒和聯(lián)想的創(chuàng)造者。顏色所表達的意義取決于不同的環(huán)境和文化。這就是為什么你會看黑白時尚商店，因為它們也希望被優(yōu)雅而高尚地展現(xiàn)出來。

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

紅色：激情、愛、危險

藍色：寧靜、負責(zé)、安全

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

白色：純潔、沉默、清潔

綠色：嶄新、新鮮、自然

如果你想知道更多，請參照如下顏色文化：

灰度第一

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

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

這是我發(fā)布在追波上的一個作品，運用了單色并且視覺焦點集中在了元素上。

遠離純灰度和黑色

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

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

記住要在顏色上增加飽合度。這樣，潛意識里會看起來更自然讓用戶更舒服。

相信大自然

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

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

保持對比

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

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

獲得靈感

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

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

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

工具

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

Coolors.co

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

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

Kuler

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

Paletton

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

Designspiration.net

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

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

Shutterstock Lab Spectrum

你可能會問：如果我想根據(jù)我選的顏色搜索圖片該 怎么辦？，那么，SHUTTERSTOCKE 有一個叫做SPECTRUM的工具，你可以用它來搜索指定色調(diào)的圖片。你甚至不用保存下來，因為帶水印的小預(yù)覽圖已經(jīng)足以生成一個調(diào)色板了。

Tineye Multicolr

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

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

最后的思考

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