
-
從三類顏色說起------Primary color,Secondary color,Accent color
先打開AndroidStudio,新建一個項目,在res/values/color中有如下代碼
res/values/color
谷歌在MD官方提到了在設計中的三類顏色Primary color,Secondary color,和Accent color:



Primary color其實就是App的主色調,參考谷歌官方貼出的調試板,推薦飽和度為500,也就是下圖中最上面的色彩

對比第一幅圖中的colorPrimary值正是#3F51B5,Primary color作為主色調,應該在屏幕和組件中最廣泛的使用。
colorPrimary了解了,colorPrimaryDark又是干什么的呢?這也就是接下來說的Second color(第二顏色???),應該翻譯成輔助顏色才正確,作為輔助顏色,顏色應該與主色調保持相似,即在主色調的基礎上加深或者變淺,官方并未明確具體使用多少飽和度的顏色(調色板給出了九種(除開500)為開發(fā)者提選擇),下圖是官方的介紹Secondary color時的一個插圖

值得注意的是這里的Second color有兩種顏色,除了飽和度為700的#303F9F還有一個飽和度為100的淺藍色,中間是Primary color。Second color起過度的作用,體現(xiàn)層次感。比如在狀態(tài)欄(谷歌推薦飽和度為700)中的使用。當然你也可以在你的App中想其過度的地方使用輔助顏色。比如下面這幅圖:

最后一個也就是colorAccent ,翻譯叫做強調色,其實在谷歌官方的調色版中有這樣一排顏色

飽和度從50上升到900然后就突然變成了A100,中間似乎還有點隔斷,故意區(qū)分開來,其實這個A也就是colorAccent中Accent的縮寫,沒錯,這就是強調色,驗證這個的是初始項目中的粉色#FF4081正是粉色的強調色

強調色的作用故名思義就是起強調作用(一般顏色都比較艷麗,比如這里的粉色),在Progressbar,一些重要鏈接 ,光標,選中文字顏色等中使用。

有時會遇到上圖右圖中的問題,這時候就需要用亮色的強調色代替。
掌握了上面三類顏色,就能寫出符合MD設計的主題了,以此來達到規(guī)范的目的
- 不可不提的不透明度
在App開發(fā)中會接觸到不同的數(shù)據(jù),在展示這些數(shù)據(jù)過程中,有個優(yōu)先級的問題,即哪些數(shù)據(jù)是最主要的,應該強調展示,哪些次之。那么谷歌是怎么做的呢?


可以看到文字的不透明度被分成了3個層次,有點兩點需要注意
- 在暗色和亮色背景下各層成的透明度是不同的
- 主色調與強調色的不透明度都是100%
參考Material Design官方寫的一篇文章,個人非常喜歡MD設計,剛開始寫博客,不知道寫什么好,于是從MD設計寫了。
嗯,2017.2.24,第一篇博客。
