0 Comments

重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习

发布于:2014-12-29  |   作者:广州网站建设  |   已聚集:人围观

五、图标

桌面图标

桌面图标尺寸是48dp X 48dp。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

QQ20141228165008

桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:

  • 不要给彩色元素加投影
  • 层叠不要超过两层
  • 折角不要放在左上角
  • 带投影的元素要完整展现,不能被图标边缘裁剪
  • 如果有折痕,放在图片中央,并且最多只有一条
  • 带折叠效果的图标,表面不要有图案
  • 不能透视、弯曲
QQ20141228165131

常规形状可以遵循几套固定栅格设计。

小图标

优先使用material design默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。

icon framework

小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。

a-21

小图标同样有栅格系统。线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。

小图标的颜色使用纯黑与纯白,通过透明度调整:

黑色:[54% 正常状态] [26% 禁用状态]
白色:[100% 正常状态] [30% 禁用状态]

六、图片

选用图片

描述具体事物,优先使用照片。然后可以考虑使用插画。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

图片上的文字

图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。

可以使用半透明的主色盖住图片。

提取颜色

Android L可以从图片中提取主色,运用在其他UI元素上。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

图片加载过程

图片的加载过程非常讲究,透明度、曝光度、饱和度3个指标依次变化,效果相当细腻。

七、文字

字体

英文字体使用Roboto,中文字体使用Noto。

Roboto有6种字重:Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7种字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

文字排版

常用字号:

  • 12sp 小字提示
  • 14sp(桌面端13sp) 正文/按钮文字
  • 16sp(桌面端15sp) 小标题
  • 20sp Appbar文字
  • 24sp 大标题
  • 34sp/45sp/56sp/112sp 超大号文字

长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

八、布局

所有可操作元素最小点击区域尺寸:48dp X 48dp。

栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:

  • 顶部状态栏高度:24dp
  • Appbar最小高度:56dp
  • 底部导航栏高度:48dp
  • 悬浮按钮尺寸:56x56dp/40x40dp
  • 用户头像尺寸:64x64dp/40x40dp
  • 小图标点击区域:48x48dp
  • 侧边抽屉到屏幕右边的距离:56dp
  • 卡片间距:8dp
  • 分隔线上下留白:8dp
  • 大多元素的留白距离:16dp
  • 屏幕左右对齐基线:16dp
  • 文字左侧对齐基线:72dp

另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。

还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

标签:
飞机