淺析UI設計中的顏色運用

2022-08-10    分類: 網站建設

顏色是ui設計中不可避免要考慮的問題,也是所有設計甚至是生活中的穿衣,室內搭配等等都需要考慮顏色的搭配。顏色并不能提升你設計的質量,但它可以強化你的設計質量。顏色與其它東西一樣,適量才會運用得當。如果在你的配色計劃中堅持使用馬克斯三原色的話,你會得到更好的配色結果。如果你想獲得調色板之外更高一級的顏色,那么你可以使用色調和飽和度,它們可以給你提供不同的風格。下面講一下UI設計中的顏色運用。
60-30-10法則
這個配色秘訣是一個省時的技巧,可以幫助你把顏色更好地組織起來。60%+30%+10%的比例可以讓你的配色達到平衡。這個公式的秘訣在于它能營造出平衡的感覺,讓眼睛很舒服地從一個視覺焦點移動到另一個視覺焦點,并且這個公式用起來很簡單。
60%是你的主色調,30%的二次色,10%是你的強調色


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


Asos用純黑白和濃度較低的綠色搭配,它這么設計是有原因的。
紅色:激情、愛、危險
藍色:寧靜、負責、安全
黑色:神秘、優(yōu)雅、邪惡
白色:純潔、沉默、清潔
綠色:嶄新、新鮮、自然
如果你想知道更多,請參照如下顏色文化:


灰度一
我們喜歡在做設計時,一件事情就是玩顏色和色調,當你感覺到你經花了3個小時在調整原色和配色時,你發(fā)現這種行為其實是背叛你的。它實在是有吸引力但是你需要避免這種態(tài)度。
也不要讓你自己的注意力集中在間距和元素布局上,從而節(jié)省大量時間,這樣約束自己產生的效率是非常高的。另一方面,也沒必要一直看到讓自己煩燥的地步。如果你想讓它好看一此,可以多嘗試幾種風格。


這是我發(fā)布在追波上的一個作品,運用了單色并且視覺焦點集中在了元素上。
遠離純灰度和黑色
我曾學到一個重要的配色技巧是,避免使用不飽合的灰色。在現實生活當中,不存在純灰,純黑也一樣。


這張圖上最黑的顏色,不是#000,而是#0A0A10
記住要在顏色上增加飽合度。這樣,潛意識里會看起來更自然讓用戶更舒服。


相信大自然
的配色來自大自然。他們看起來總是很舒適。觀察環(huán)境來獲取配色靈感的大優(yōu)勢是大自然的調色板是一直變化的。
我們只要看看周圍就可以獲得配色靈感了。
保持對比
有一些顏色搭配在一起很和諧,可是和別的顏色搭在一起就會起沖突。觀察色輪可以明顯地發(fā)現顏色之間是怎樣相互影響的。你應該掌握這種方法,但這也不是必須的。


獲得靈感
眾所周知追波是UI設計找參考的網站。追波提供一種根據顏色查找的工具,當你想根據視覺搜索,看一下其它設計師是怎樣運用流行色的時候,可以來這里查看:dribbble.com/colors.


從很多靈感來源,像視頻、平面設計、室內設計、時尚設計等。不要僅僅局限說當前的調色板,你可以隨時保存下那些看起來不錯的顏色。


我喜歡常常從韓國的流行文化短片偷取顏色,它們看起來很絢麗。
工具
工欲善其事,必先利其器。我收集了一些的顏色選擇工具,2017年可以用來選擇實用的調色板。它們會為我節(jié)省很多時間。
Coolors.co
這是我最喜歡的一款拾色器。你可以輕松地鎖定選中的顏色,按空格鍵生成調色板。Coolors還提供上傳圖片生成色板的服務。而最酷的是使用這個工具的時候,不僅可以輸出,而可以用拾色器讓你修改參考點。


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


Paletton
這一款工具和KULER類似,不同的是這款工具不限于5種色調。當你有了主要顏色,并且想要更多的色調的時候,這絕對是一款非常贊的工具。


Designspiration.net
想象一下,你已經有了一套配色方案,你想看下這個方案在實際運用中是啥樣的,這時候,Designispiration絕對是一款非常贊的工具!你可以吸5種顏色,根據這5種顏色搜索圖片,因此它可以滿足你的需求。最酷的點在于,不僅可以用這個特殊的調色板搜索圖片,而且能真實地運用到設計當中。


Shutterstock Lab Spectrum
你可能會問:如果我想根據我選的顏色搜索圖片該 怎么辦?,那么,SHUTTERSTOCKE 有一個叫做SPECTRUM的工具,你可以用它來搜索指定色調的圖片。你甚至不用保存下來,因為帶水印的小預覽圖已經足以生成一個調色板了。


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


最后的思考
顏色是一種比較難把握的概念,尤其是在數字時代。上面提到的技巧可以在工作中幫助你容易地找到合適顏色。想要創(chuàng)建出驚艷的配色方案,方法是不斷的練習,把他當成你熱衷的興趣,把練習顏色搭配當成你的玩伴去練習!那今天的淺析UI設計中的顏色運用就到這里了。

當前標題:淺析UI設計中的顏色運用
標題URL:http://bm7419.com/news/188288.html

成都網站建設公司_創(chuàng)新互聯,為您提供面包屑導航網站改版、動態(tài)網站關鍵詞優(yōu)化、手機網站建設網頁設計公司

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯

搜索引擎優(yōu)化