當前位置:首頁 > 新聞 > 熱點話題

UI設計中如何配色?

發布時間:2017-04-05 10:14:20來源:關鍵詞:
分享:
UI設計中如何配色?

 
顏色跟其他事物一樣,使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色,您將獲得更好的效果。將顏色應用于設計項目中,要保持色彩平衡,您使用的顏色越多,越難保持平衡。
 
顏色不會增加設計品質 - 它只是加強了設計的品質感
皮埃爾·波納德(Pierre Bonnard)
如果您需要調色板中定義的顏色以外的其他顏色,請使用明度和色調進行調整。他們將提供不同的顏色基調與之配合。

60–30–10 規則

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

 
60%是主色調,30%是副色和10%用于強調色。

 
UI設計中如何配色?

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

 
顏色的含義

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

 
UI設計中如何配色?

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

 
  • 紅色:激情,愛,危險
  • 藍色:平靜,負責,安全
  • 黑色:神秘,優雅,邪惡
  • 白色:純凈,沉默,清潔
  • 綠色:新生,新鮮,自然

首先考慮單色設計

 
在項目設計初期,我們通常傾向于嘗試不同的顏色進行調整,但這種行為會很快違背你的初衷,當你發現的時候,已經花費了3個小時調整基礎色...這確實很誘人,但你應該學會避免這種態度。
相反,你應當專注于元素的間距和整體布局。它會節省你很多時間。 這種約束是非常有成效的。從另一方面講,它看起來并不乏味。如果你想讓整個作品看起來更好,嘗試不同的顏色選擇。

 
43da58de08aaa801219c7791a8c3.jpg

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

避免使用灰色和黑色

 
我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現實生活中,純灰色幾乎不存在。 黑色也是如此。
b6d358de08d0a801219c7750613e.jpg
這張圖片最黑的顏色不是#000,而是#0A0A10

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

 
667258de08f5a801219c77147ee4.jpg

 
相信自然

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

 
為了得到設計靈感,我們只需環顧四周。

 
975d58de0910a801219c7714bed0.jpg

 
保持對比

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

 
UI設計中如何配色?

獲取靈感

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

 
UI設計中如何配色?

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

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

配色工具推薦

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

 

Coolors.co
 

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

 
UI設計中如何配色?
網址鏈接:https://coolors.co
(請使用科學上網工具打開)

 
Kuler

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

 
UI設計中如何配色?
網址鏈接:https://color.adobe.com
Paletton

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

 
UI設計中如何配色?
網址鏈接:http://paletton.com
(請使用科學上網工具打開)

 

Designspiration.net

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

 
UI設計中如何配色?
網址鏈接:http://designspiration.net
(請使用科學上網工具打開)

ShutterstockLab Spectrum

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

 
UI設計中如何配色?
網址鏈接:https://www.shutterstock.com/labs/spectrum/
(請使用科學上網工具打開)

Tineye Multicolr

但是,如果你想搜索照片中的顏色混合,甚至指定每個顏色的數量,那么Tineye會幫助你。 本網站使用了來自Flickr千萬張共享圖像的數據庫。
UI設計中如何配色?
網址鏈接:http://labs.tineye.com

 

 
最后的想法

掌握配色技巧是一件苦差事,特別是在數字時代。 上面提到的技巧將會減輕工作中尋找正確顏色方案的困難度。 學習創造令人驚嘆的配色方案,最佳方法是練習,讓自己有所幫助,用玩的心態去使用顏色。
 
本文轉載自:https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753
 
       了解插畫,漫畫設計,原畫設計,更多咨詢可以加老師QQ800001712  15007122639
       加奇天CG學院官方微信公眾號:qtch2006  
       奇天CG學院官網了解:www.www559559.com
 
奇天CG學院內容分割線
奇天CG學院首頁

更多深度好文

奇天官方微信

CONTACT US

咨詢熱線

180-40515575

189-86223023

1449340206

奇天地址:武漢市洪山區南湖創意天地11號樓11層(地鐵8號線馬湖站,7號線板橋站)

鄂ICP備12012438號-4 武漢奇天動漫插畫有限公司 版權所有 百度地圖 | 網站地圖

夜夜躁狠狠躁日日躁视频