追随Google的脚步,知乎安卓客户端Material Design实战!
Google I/O 2014上着重展示的Material Design,以非常高调的方式,宣布了Google Design的存在:不欣赏设计,对设计毫无感觉的Google已是昨日。
时隔一年,有时间拿惨不忍睹的知乎安卓客户端练练手。

主要改变:
一、尺寸(以下尺寸,如若没标注,单位全部为dp,在1080P屏幕中,1dp=3px)
栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。
以下是一些常见的尺寸与距离:
· 顶部状态栏高度:24dp
· Appbar最小高度:56dp
· 底部导航栏高度:48dp
· 悬浮按钮尺寸:56x56dp/40x40dp
· 用户头像尺寸:64x64dp/40x40dp
· 小图标点击区域:48x48dp
· 侧边抽屉到屏幕右边的距离:56dp
· 卡片间距:8dp
· 分隔线上下留白:8dp
· 大多元素的留白距离:16dp
· 屏幕左右对齐基线:16dp
· 文字左侧对齐基线:72dp
· 卡片圆角:2dp
· tab选中项的下划线高度:2dp




↑由于汉字和英文有些差异,所以这里没有严格按照规范来,这里采取了居中的样式。
二、颜色
颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。

这里采取了蓝色#0077d9为主色,改透明度衍生两个浅蓝色。
橙色#eb6100作为收藏的颜色,黄色#f9ea38作为tab选中的下划线颜色。
分割线采用黑色#000000,50%不透明度
具体可以参见下图:
三、文字
中文字体使用Noto

英文字体使用Roboto

四、文字排版
常用字号:
o 12sp 小字提示
o 14sp(桌面端13sp) 正文/按钮文字
o 16sp(桌面端15sp) 小标题
o 20sp Appbar文字
o 24sp 大标题
o 34sp/45sp/56sp/112sp 超大号文字
长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。
五、图标
小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。
五、具体改变对比























六、参考文献:
Google官方文档:
http://www.google.com/design/spec/material-design/introduction.html
优设网翻译:
http://www.uisdc.com/comprehensive-material-design-note
——————————————————————————————————-————
http://www.zcool.com.cn/work/ZMTI0MTE2MjQ=.html
——————————————————————————————————-————
可以这个链接查看效果图

























