Material Design 设计规范总结

一、核心思想

  • Material design 的核心思想是把物理世界的体验带进屏幕。保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

二、材质与空间

  • 材质
    • Material design中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。
  • 空间
    • Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值越高,元素离界面底层越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

三、动画

  • Material design重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。
    • 1.缓动(easing)
    • 物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真
    • 2.水波反馈(wave)
    • 3.转场效果(transitions
    • 4.细节动画(detail)

四、颜色

  • (1)颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。
  • (2)App bar背景使用主色,状态栏背景使用深一级的主色或20%透明度的纯黑。
  • (3)小面积需要高亮显示的地方使用辅助色。
  • (4)其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现(包括图标和分隔线),而且透明度限定了几个值。

  • 黑色:[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]
  • 白色:[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

五、图标

  • 1.桌面图标
    • 面图标尺寸是48dp X 48dp。桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:
      • 层叠不要超过两层
      • 折角不要放在左上角
      • 带投影的元素要完整展现,不能被图标边缘裁剪
      • 如果有折痕,放在图片中央,并且最多只有一条
      • 带折叠效果的图标,表面不要有图案
      • 不能透视、弯曲
  • 2.小图标
    • (1)小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。优先使用material design默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。
    • (2)线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。
    • (3)小图标的颜色使用纯黑与纯白,通过透明度调整:
      • 黑色:[54% 正常状态] [26% 禁用状态]
      • 白色:[100% 正常状态] [30% 禁用状态]

六、图片

  • 1.选用图片
    • 描述具体事物,优先使用照片。然后可以考虑使用插画。
  • 2.图片上的文字
    • (1)图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。
    • (2)对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。
    • (3)可以使用半透明的主色盖住图片。
  • 3.图片加载过程
    • 图片的加载过程非常讲究,透明度、曝光度、饱和度3个指标依次变化,效果相当细腻。

七、文字

  • 字体
    • (1)英文字体使用Roboto,中文字体使用Noto。
    • (2)Roboto有6种字重:Thin、Light、Regular、Medium、Bold 和 Black
    • (3)Noto有7种字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
  • 文字排版
    • 12sp 小字提示
    • 14sp(桌面端13sp) 正文/按钮文字
    • 16sp(桌面端15sp) 小标题
    • 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
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值