[Material Design]從顏色說起

  • 從三類顏色說起------Primary color,Secondary color,Accent color
    先打開AndroidStudio,新建一個項目,在res/values/color中有如下代碼


    res/values/color

谷歌在MD官方提到了在設計中的三類顏色Primary color,Secondary color,和Accent color:

Primary color
Secondary color
Accent color

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

谷歌官方調色板其一

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

MD設計官方插圖

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

MD設計官方插圖

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

MD設計官方插圖

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

MD設計官方插圖

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

MD設計官方插圖

有時會遇到上圖右圖中的問題,這時候就需要用亮色的強調色代替。

掌握了上面三類顏色,就能寫出符合MD設計的主題了,以此來達到規(guī)范的目的

  • 不可不提的不透明度
    在App開發(fā)中會接觸到不同的數(shù)據(jù),在展示這些數(shù)據(jù)過程中,有個優(yōu)先級的問題,即哪些數(shù)據(jù)是最主要的,應該強調展示,哪些次之。那么谷歌是怎么做的呢?
亮色背景下
暗色背景下

可以看到文字的不透明度被分成了3個層次,有點兩點需要注意

  1. 在暗色和亮色背景下各層成的透明度是不同的
  2. 主色調與強調色的不透明度都是100%

參考Material Design官方寫的一篇文章,個人非常喜歡MD設計,剛開始寫博客,不知道寫什么好,于是從MD設計寫了。

嗯,2017.2.24,第一篇博客。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容