收藏本站 关于我们

追随Google的脚步,知乎安卓客户端Material De

发布时间:2015-06-06 00:55:46   来源:PS教程   人气:0

前言:主要改变:  一、尺寸(以下尺寸,如若没标注,单位全部为dp,在1080P屏幕中,1dp=3px) 栅格系统的最小单位是8dp,一切距离、尺


主要改变:


一、尺寸(以下尺寸,如若没标注,单位全部为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

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

可以这个链接查看效果图

本文来自PS教程网www.46PS.com,转载请注明!关键词:案例解析案例解析教程酷友观点经验


PS教程