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

顏色的運用

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

 pallete_classic_ui

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

顏色理論

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

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

 RGB_color

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

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

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

 color_ring

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

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

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

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

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

例如,

 color_palette1
 color_palette2
 color_palette3
 color_palette4

這些顏色都給出了對應的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。

 color_palette_choose1

Primary Dark Color

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

 color_palette_choose2

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

 color_palette_choose3

Accent Color

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

 color_palette_choose4

常用工具

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

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

 material_palette_too

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

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

除了CSDN發佈的文章,本系列最新的文章將會首先發布到我的專屬博客book.anddle.com。大家可以去那裏先睹爲快。

發佈了118 篇原創文章 · 獲贊 471 · 訪問量 90萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章