header_v0.7.32

追随Google的脚步,知乎安卓客户端Material Design实战!

2年前发布

原创文章 / 多领域 / 观点
夜愿0o 原创,如需商业用途或转载请与夜愿0o联系,谢谢配合。

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

——————————————————————————————————-————

可以这个链接查看效果图

197
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功