顏色的運用
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 Color
(Accent color
接下來會馬上介紹到。)。
通過數字給顏色編號,這是爲了方便設計師與開發者之間的溝通,給這些顏色取的名字。當他們談論某個顏色的時候,只需要說出顏色的名字,大家腦中就會產生一個直觀的印象。如果他們講RGB值,大家都會覺得很難想象。
選擇顏色
通常來講,一個應用界面當中,不要超過三種不同的色調,否則色調的差異就會過多的吸引使用者的注意,把關注點從內容上分散到各個不同的顏色上去了。
爲了簡化設計師的工作,Google的Material Design
只需要選擇Primary Color
Primary Dark Color
Accent Color
三種顏色,就能確定整個應用的整體配色方案。
當設計師要給一個應用選擇顏色的時候,
可以會從色環當中選擇一個設計師認爲合適的顏色。
也可以從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 Color
與Accent Color
是不同色調,設計師可以自由的選擇;如果Primary Color
與Accent Color
都是同一種色調,那麼確定Accent Color
的時候,通常使用Google調色板中名字裏帶A
的顏色,例如A100~A700
.
常用工具
使用Google提供的調色板進行配色的時候,如果能夠快速的查看配色完成後的效果就好了。
Material Palette
爲我們提供了這樣的方便。當選中期望的Primary Color
和Accent Color
以後,右邊的預覽界面就會立刻看到搭配的效果。確認搭配方案之後,還可以下載配色的方案到本地,便於將調色板導入界面設計的軟件當中直接使用。
本文是《從設計到實現-手把手教你做android應用開發》系列文檔中的一篇。感謝您的閱讀和反饋,對本文有任何的意見和建議請留言,我都會盡量一一回復。
如果您覺得本文對你有幫助,請推薦給更多的朋友;或者加入我們的QQ羣348702074和更多的小夥伴一起討論;也希望大家能給我出出主意,讓這些文檔能講的更好,能最大化的幫助到希望學習開發的夥伴們。
除了CSDN發佈的文章,本系列最新的文章將會首先發布到我的專屬博客book.anddle.com。大家可以去那裏先睹爲快。