Material Design常用设计标准

1. Material Design(原质化设计)
Material环境是一个三维空间，z轴用来显示平面，并用来延伸用户视角，每个物质在z轴上占据一定的位置并且有1dp的厚度为标准。在网页上z轴被用来分层而3不是为了视角。3D空间是用y轴来进行仿真。
光影关系在物质的环境中，虚拟光线照射使用场景中的对象投出阴影，主光源投射出一个定向阴影，环境光从各个角度投射出连贯而柔和的阴影。

• Material属性

• 物理特性
  材料拥有变化的长宽尺寸（*dp），和均匀的厚度（1dp）。
  材料总是1dp的厚度，就会形成阴影，阴影是由原件之间的相对高度（Z轴的位置）产生的。

• 元素的参考阴影
  应用条 4dp;
  浮动按钮 静态 2dp，敲击状态 8dp;
  浮动动作按钮（FAB）静态 6dp，敲击状态 12dp;
  卡片 静态 2dp，选中状态 8dp;
  菜单和子菜单 菜单 8dp，子菜单 9dp;
  对话框 24dp;
  导航抽屉和右抽屉 16dp;
  底部单页 16dp;
  刷新按钮 3dp;
  快速查询/搜索条 静止状态 2dp，滚动状态 3dp;
  snackbar 6dp;
  切换按钮 1dp;

• 阴影特效
  elevation：高度，静态属性。
  transitionz：z轴相对于高度的位置，用于实现动画的动态属性。

  色彩的选择
  1)工具栏和大色块选择饱和度500的基础色，状态栏使用饱和度700的基础色
  2)鲜艳的强调色用于主要操作按钮以及组件。如开关和滑片，左对齐的部分 图标或章节标题。
  3)备用强调色如果你的强调色相对于背景颜色太深或太浅，默认的做法是选 择更深或更浅的备用颜色。如果你的强调的颜色无法正常显示，那么在白色背景上使用饱和度500的基础色，如果背景是饱和度为500的基础色就使用100%的白色或54%的黑色。

• 字体的排版(textSize)
  基于最基本的样式集合12、14、16、20、34号的字体进行缩放。
  Display 1 Regular 34sp
  Headline Regular 24sp
  Title Medium 20sp
  Subhead Regular 16sp
  Body2 Medium 14sp
  Body1 Regular 14sp
  Caption Regular 12sp
  Menu Medium 14sp
  Button Medium 14sp

• 行高（lineSpacingExtra）
  Display Type 34sp Leading 40 pt
  Headline Type 24sp Leading 32 pt
  subhead2 Type 16sp Leading 28 pt
  subhead1 Type 15sp Leading 24 pt
  Body2 Type 14sp Leading 24 pt
  Body1 Type 13sp Leading 20 pt

• 换行规则和连字符
  每行包含60个字符左右.
  字间距（textScaleX）
  Display 1 0pt;
  Headline 0pt;
  Title 5pt;
  Subhead 10pt;
  Body2 10pt;
  Body1 10pt;
  Caption 20pt;
  Menu 10pt;
  Button 10pt;

• 列表在屏幕的布局
  从上到下的外边距依次 24 56 48 72 8(顺序不唯一)，整体内容左右各留16dp;

• 触摸目标的尺寸
  48dp;布局中图标24dp或者头像40dp设置边距时，触摸目标不能重叠。

• 应用栏（操作栏）
  手机竖屏默认高度 56dp;
  手机横屏默认高度 48dp;
  对于拉高了的选单，它的高度等于默认高度加上内容高度。
  侧边导航栏宽度=屏幕宽度-应用栏的高度