追隨Google的腳步,知乎安卓客戶端Material Design實戰(zhàn)!
Google I/O 2014上著重展示的Material Design,以非常高調(diào)的方式,宣布了Google Design的存在:不欣賞設(shè)計,對設(shè)計毫無感覺的Google已是昨日。
時隔一年,有時間拿慘不忍睹的知乎安卓客戶端練練手。

主要改變:
一、尺寸(以下尺寸,如若沒標(biāo)注,單位全部為dp,在1080P屏幕中,1dp=3px)
柵格系統(tǒng)的最小單位是8dp,一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。
以下是一些常見的尺寸與距離:
· 頂部狀態(tài)欄高度:24dp
· Appbar最小高度:56dp
· 底部導(dǎo)航欄高度:48dp
· 懸浮按鈕尺寸:56x56dp/40x40dp
· 用戶頭像尺寸:64x64dp/40x40dp
· 小圖標(biāo)點擊區(qū)域:48x48dp
· 側(cè)邊抽屜到屏幕右邊的距離:56dp
· 卡片間距:8dp
· 分隔線上下留白:8dp
· 大多元素的留白距離:16dp
· 屏幕左右對齊基線:16dp
· 文字左側(cè)對齊基線:72dp
· 卡片圓角:2dp
· tab選中項的下劃線高度:2dp




↑由于漢字和英文有些差異,所以這里沒有嚴(yán)格按照規(guī)范來,這里采取了居中的樣式。
二、顏色
顏色不宜過多。選取一種主色、一種輔助色(非必需),在此基礎(chǔ)上進行明度、飽和度變化,構(gòu)成配色方案。

這里采取了藍(lán)色#0077d9為主色,改透明度衍生兩個淺藍(lán)色。
橙色#eb6100作為收藏的顏色,黃色#f9ea38作為tab選中的下劃線顏色。
分割線采用黑色#000000,50%不透明度
具體可以參見下圖:
三、文字
中文字體使用Noto

英文字體使用Roboto

四、文字排版
常用字號:
o 12sp 小字提示
o 14sp(桌面端13sp) 正文/按鈕文字
o 16sp(桌面端15sp) 小標(biāo)題
o 20sp Appbar文字
o 24sp 大標(biāo)題
o 34sp/45sp/56sp/112sp 超大號文字
長篇幅正文,每行建議60字符(英文)左右。短文本,建議每行30字符(英文)左右。
五、圖標(biāo)
小圖標(biāo)尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區(qū)域內(nèi)。
五、具體改變對比























六、參考文獻(xiàn):
Google官方文檔:
http://www.google.com/design/spec/material-design/introduction.html
優(yōu)設(shè)網(wǎng)翻譯:
http://www.uisdc.com/comprehensive-material-design-note
——————————————————————————————————-————
http://www.zuodeer.cn/work/ZMTI0MTE2MjQ=.html
——————————————————————————————————-————
可以這個鏈接查看效果圖

























