UI設(shè)計中如何配色?

2022-5-29    純純

顏色跟其他事物一樣,使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色,您將獲得更好的效果。將顏色應(yīng)用于設(shè)計項目中,要保持色彩平衡,您使用的顏色越多,越難保持平衡。


顏色不會增加設(shè)計品質(zhì) - 它只是加強了設(shè)計的品質(zhì)感

皮埃爾·波納德(Pierre Bonnard)


如果您需要調(diào)色板中定義的顏色以外的其他顏色,請使用明度和色調(diào)進行調(diào)整。他們將提供不同的顏色基調(diào)與之配合。



60–30–10 規(guī)則


室內(nèi)設(shè)計規(guī)則是一種永恒的裝飾技術(shù),可以幫助您輕松地將配色方案放在一起。 60%+ 30%+ 10%的比例是為了保持顏色平衡。這個公式非常有用,因為它創(chuàng)造出一種平衡的感覺,并允許眼睛從一個焦點到另一個焦點舒適地移動。 使用也非常簡單。


60%是主色調(diào),30%是副色和10%用于強調(diào)色。


e1f458de0ea5a801219c77abf06a.jpg


墻面漆(60%),家具(30%),配飾(10%)


顏色的含義


幾個世紀以來,科學家已經(jīng)研究出某些顏色的生理效應(yīng)。 除了美學,顏色也是情感交流的創(chuàng)造者。 顏色的含義可能因文化差異而不同。這就是為什么你看到時裝店鋪的設(shè)計是黑白配色。 他們希望看起來優(yōu)雅而高貴。


a18858de0ebca801219c77eecdb0.jpg


Asos采用純黑白配色搭配綠色按鈕設(shè)計,這種配色是有原因的。


  • 紅色:激情,愛,危險

  • 藍色:平靜,負責,安全

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

  • 白色:純凈,沉默,清潔

  • 綠色:新生,新鮮,自然


首先考慮單色設(shè)計


在項目設(shè)計初期,我們通常傾向于嘗試不同的顏色進行調(diào)整,但這種行為會很快違背你的初衷,當你發(fā)現(xiàn)的時候,已經(jīng)花費了3個小時調(diào)整基礎(chǔ)色...這確實很誘人,但你應(yīng)該學會避免這種態(tài)度。

相反,你應(yīng)當專注于元素的間距和整體布局。它會節(jié)省你很多時間。 這種約束是非常有成效的。從另一方面講,它看起來并不乏味。如果你想讓整個作品看起來更好,嘗試不同的顏色選擇。


43da58de08aaa801219c7791a8c3.jpg


我在追波(dribbble)上的作品之一。簡約單色處理,專注于元素之間的使用。


避免使用灰色和黑色


我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現(xiàn)實生活中,純灰色幾乎不存在。 黑色也是如此。

b6d358de08d0a801219c7750613e.jpg

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


始終記著給你的顏色增加飽和度。潛意識里會顯得更自然,為用戶所熟悉。


667258de08f5a801219c77147ee4.jpg


相信自然


最好的顏色組合來自大自然。 他們看起來總是很自然。 尋找顏色設(shè)計的解決方案,最好的辦法是調(diào)色板總是發(fā)生變化。


為了得到設(shè)計靈感,我們只需環(huán)顧四周。


975d58de0910a801219c7714bed0.jpg


保持對比


一些顏色相互融合,而其他顏色一起使用會發(fā)生沖突。 有一個明確的規(guī)則,想要了解不同顏色之間如何融合,最好的辦法是觀察一個色輪。 你應(yīng)該知道這個方法,但是沒有必要動手操作。


f09d58de095fa801219c77f5485c.jpg


獲取靈感


當我們在談?wù)揢I參考時,dribbble是最佳選擇。它還具有通過顏色搜索的工具,所以當你想對其他設(shè)計師使用特定顏色進行視覺研究時,然后去這里:dribbble.com/colors


5ce458de097ba801219c77aa763e.jpg


視頻,平面廣告設(shè)計,室內(nèi)設(shè)計,時裝......有這么多鼓舞人心的地方可供收集。如果說根本就沒有配色參考,那一定是懶惰的原因,把那些調(diào)色板保存下來,一切看起來都非常有趣。


通常我喜歡從KPOP(韓國流行音樂)視頻剪輯中選取顏色,他們看起來很華麗。


配色工具推薦


為了方便起見,我搜集了一些最好的配色工具可供選擇,在2017年獲取調(diào)色板,他們會為您節(jié)省大量的時間。



Coolors.co


這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色并按空格即可生成調(diào)色板。 Coolors還可讓您上傳圖像并從中調(diào)出調(diào)色板。 很酷的事情是,你不僅僅是一個結(jié)果,而是有一個選擇器,允許你修改參考點。


a68a58de0c65a801219c77885e56.jpg

網(wǎng)址鏈接:https://coolors.co

(請使用科學上網(wǎng)工具打開)


Kuler


這款Adobe旗下的配色工具已經(jīng)和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本,則可以將配色方案導出到Photoshop中。


296e58de0c83a801219c77fbb98e.jpg

網(wǎng)址鏈接:https://color.adobe.com

Paletton


它類似于Kuler,但不同的是,您不僅限于5個色調(diào)。 當您擁有原色并希望使用其他色調(diào)時,您可以使用這款很棒的工具。


92ba58de0c94a801219c77d2592b.jpg

網(wǎng)址鏈接:http://paletton.com

(請使用科學上網(wǎng)工具打開)



Designspiration.net


試想一下,你有自己的配色的想法,但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色,并搜索符合您的查詢的圖像。 真的很好,不僅用于找到具有特定調(diào)色板的圖像,還可以在設(shè)計中實現(xiàn)它們。


52a358de09e9a801219c774d8bb5.jpg網(wǎng)址鏈接:http://designspiration.net

(請使用科學上網(wǎng)工具打開)


ShutterstockLab Spectrum


你可能會問:如果我想用我所選擇的顏色搜索照片? 那么,Shutterstock有一個叫做Spectrum的工具,你可以用特定的語氣搜索照片。 您甚至不需要訂閱,因為具有水印的小預覽圖像將足以生成調(diào)色板。


cc6c58de0a22a801219c77af34c9.jpg網(wǎng)址鏈接:https://www.shutterstock.com/labs/spectrum/

(請使用科學上網(wǎng)工具打開)


Tineye Multicolr


但是,如果你想搜索照片中的顏色混合,甚至指定每個顏色的數(shù)量,那么Tineye會幫助你。 本網(wǎng)站使用了來自Flickr千萬張共享圖像的數(shù)據(jù)庫。

64dd58de0aa0a801219c77382a00.jpg

網(wǎng)址鏈接:http://labs.tineye.com



作者:Norman_HU

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

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

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

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司




分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔