android應用開發-從設計到實現 2-3 顏色的運用


顏色的運用


Material Design采用的是扁平化的設計,可以看到一大塊一大塊區域的顏色。這些顏色大多亮麗引人,整個界面上搭配的顏色也不會太多,基本保持在三種顏色以內。



“沒有錯誤的顏色的,隻有錯誤的搭配”。顏色是沒有對錯的,我們要用經驗和直覺來搭配它們,所以要先來認識認識顏色。


顏色理論


顏色是有語言的,紅色代表這熱情奔放,藍色代表的沉著安靜,綠色代表著生機活力。搭配一組顏色,就是表達作品要傳遞的含義。


我們大部分人都知道RGB顏色,它的理論依據是:任何顏色都是通過不同強度的紅色R綠色G藍色B組合而成的,改變它們的組合就能得到任何顏色。在計算機領域,這三種顏色分別具有0~255個不同的數值。



對於設計師配色來講,還會使用另外一個體系的顏色理論-HSB:色調H,飽和度S,亮度B。


我們人在談論顏色的時候,總是說這個顏色很紅、有點綠、偏藍。


當我們說很紅的時候,就是給顏色設定瞭一個基調-紅色。這種基調稱為色調。色調成圓環形狀的分佈,依次漸變的呈現出赤橙黃綠青藍紫各種顏色。



色環具有360度,因此色調的數值就是0~359度。色調數值從0到359變化,也代表著顏色從暖色逐步過渡到冷色。你是不是看到紅色就覺得溫暖,而看到深藍色就覺得冷颼颼的呢?


很紅字,就要通過飽和度和亮度來體現瞭,



  • 飽和度:可以理解成把一種純粹的顏色溶解到水裡面,如果水很多,顏色就很淡;如果水很少,顏色就很純。因此它具有0%~100%的數值。


  • 亮度:我們能看到物體是因為光線照在物體上面的緣故。如果一點光沒有,不管什麼樣的顏色,看起來都是黑的,隻有充足的光線才能反映出物體本來的顏色。因此它具有0%~100%的數值。0%說明沒有光照,那麼就會是黑色。


如果你的本行並不是設計師或者剛入行不久,在給安卓應用配色的時候一定會犯迷糊,不知如何選擇。幸好Google已經考慮到瞭這點。它從360度的色環當中,為大傢選擇出瞭非常適合做界面設計的色調,並通過調整這些色調的飽和度和亮度,得到瞭一系列可以與主色調搭配和諧的顏色(實際上,這些色調與主色調可能有細微的偏差,比如說3度)。這些顏色放在一起,被形象的叫做調色板。


例如,






這些顏色都給出瞭對應的RGB數值,也給出瞭它們自己的名字,例如500,100,200,……,A700,數值越高,顏色越深。其中帶A的,表示這個顏色推薦用來作為Accent ColorAccent color接下來會馬上介紹到。)。


通過數字給顏色編號,這是為瞭方便設計師與開發者之間的溝通,給這些顏色取的名字。當他們談論某個顏色的時候,隻需要說出顏色的名字,大傢腦中就會產生一個直觀的印象。如果他們講RGB值,大傢都會覺得很難想象。


選擇顏色


通常來講,一個應用界面當中,不要超過三種不同的色調,否則色調的差異就會過多的吸引使用者的註意,把關註點從內容上分散到各個不同的顏色上去瞭。


為瞭簡化設計師的工作,Google的Material Design隻需要選擇Primary Color Primary Dark Color Accent Color三種顏色,就能確定整個應用的整體配色方案。


當設計師要給一個應用選擇顏色的時候,



  1. 可以會從色環當中選擇一個設計師認為合適的顏色。

  2. 也可以從Google提供的調色板中選取。這些顏色都是Google千挑萬選後的結果,如果大傢沒有特別的原因,就使用這種表現穩健的顏色吧。


Primary Color


Primary Color是一個應用使用最為廣泛的顏色,它決定瞭一個應用整體的基調。界面中很多的元素都會使用到這個顏色。


比如,主顏色選取Indigo 500。



Primary Dark Color


選定主顏色之後,通常還會在主顏色的附近,選擇一個暗色作為搭配,例如Indigo 600~900作為深色。這個顏色通常隻是體現在狀態欄的顏色上。



除瞭暗色,有時還需要使用與主顏色相配合的亮色,例如Indigo 500作為主色之後,Indigo 50~400,都是亮色可選的對象。



Accent Color


Accent Color是與Primary Color完全不同的一個色調,用來吸引用戶的註意力,比如用在按鈕、進度條等等需要用戶關註的、有交互功能的組件上面。如果Primary ColorAccent Color是不同色調,設計師可以自由的選擇;如果Primary ColorAccent Color都是同一種色調,那麼確定Accent Color的時候,通常使用Google調色板中名字裡帶A的顏色,例如A100~A700.



常用工具


使用Google提供的調色板進行配色的時候,如果能夠快速的查看配色完成後的效果就好瞭。


Material Palette為我們提供瞭這樣的方便。當選中期望的Primary ColorAccent Color以後,右邊的預覽界面就會立刻看到搭配的效果。確認搭配方案之後,還可以下載配色的方案到本地,便於將調色板導入界面設計的軟件當中直接使用。





本文是《從設計到實現-手把手教你做android應用開發》系列文檔中的一篇。感謝您的閱讀和反饋,對本文有任何的意見和建議請留言,我都會盡量一一回復。


如果您覺得本文對你有幫助,請推薦給更多的朋友;或者加入我們的QQ群348702074和更多的小夥伴一起討論;也希望大傢能給我出出主意,讓這些文檔能講的更好,能最大化的幫助到希望學習開發的夥伴們。


除瞭CSDN發佈的文章,本系列最新的文章將會首先發佈到我的專屬博客book.anddle.com。大傢可以去那裡先睹為快。

0 個評論

要回覆文章請先登錄註冊