MD

http://www.xueui.cn/experience/app-experience/material-design-2.html

Style

颜色

颜色的使用应该基于调色板
http://www.xueui.cn/experience/app-experience/material-design-style-color.html

1.文字：白色背景上的文字 透明度87%，换算成16进制是de000000；次要文字透明度54%，8a000000；正文和标签中用于提示用户的文字透明度26%，42000000；
2.图标和分割线也应该具备透明度，具体值没看到。。。
3.状态栏用饱和度700的基础色；工具栏和大色块用饱和度500的基础色；内容背景用饱和度100的基础色；强调色用于主要操作和组件，也可用于左对齐的部分图标或章节标题；如果强调色无法正常显示，白色背景可以选择饱和度500的基础色作强调色，如果背景色是饱和度500的基础色，可以选择100%的白色或者54%的黑色做强调色。

字体

http://www.xueui.cn/experience/app-experience/material-design-style-typography.html
1.最基本的字体样式基于12，14，16，20，34。另外还有24，45，56，112sp；字体样式roboto不支持中文。。。

• 展示性文字34，45，56，112。
• headline用24，例如toolBar的title，对展示图片的描述文字。
• 列表中标题20；副标题16；内容14；提示12，类似时间。
• button和menu中字体14。
  字体亮度，行高，字间距，连字符略了。。。

layout

准则

http://www.xueui.cn/experience/app-experience/material-design-layout.html

• 两个页面有一个共用的长度相同的边就会产生缝合线，有缝合线的两个页面通常一起移动。
• 两个Z轴位置不同即有层叠线的页面彼此独立移动。

1.工具栏

• 工具栏主要用来展示操作，左边导航，右边当前页面操作。
• 工具栏宽度不能超过页面宽度，工具栏弹窗不能切割工具栏。
• 如果工具栏与下方页面呈层叠状态，下方页面滚动时，一般用工具栏做页面入口的卡点。
• 下方页面滚动时，工具栏可以由与页面的缝合状态变为层叠状态。
• 下方页面滚动时，工具栏可以保持缝合线一起滚动。
• 其他页面可以覆盖工具栏。
• 工具栏的高度在一个范围内可变。长按改变尺寸。

2.浮动操作
3.自适应准则
4.维度
考虑z轴空间。

• 系统UI在最上层，之后是FAB，Nav，工具栏，内容，背景。
• Button的不同状态应该有不同的Z轴高度，默认，获得焦点，按下。Z轴高度应该逐渐增高。

度量与边框

基准网格8dp,度量大小都是8的倍数。
http://www.xueui.cn/tutorials/other-tutorials/material-design-layout-measurement-and-borders.html
1.边框与间距

• 水平边距：左右各16dp边距；带有图标或者头像的内容左边距72；如果浮动按钮在右边，且内容里有小图标，右边距72dp；
• 垂直边距：状态栏24dp；工具栏56dp；副标题条目48dp；内容条目72dp；一个类型上下留8dp内间距;

2.比率边框

• 布局宽高比建议16:9;3:2;4:3;1:1;3:4;2:3;

3.触摸目标尺寸

• 最小触摸目标尺寸48dp

结构

http://www.xueui.cn/experience/app-experience/material-design-layout-structure.html
工具栏，应用栏，菜单，导航栏，白框。

components

分割线

http://www.xueui.cn/experience/app-experience/dividers.html
带锚点，内凹分割线，与内容左对齐；不带锚点，等屏宽分割线。

按钮

http://www.xueui.cn/tutorials/other-tutorials/bottom-sheets.html
按钮包括悬浮响应按钮FAB，浮动按钮和扁平按钮。

• 扁平按钮一般用于对话框或者工具栏， 可避免页面上过多无意义的层叠，内边距16dp；
• 如果需要一个对用户持续可见的功能按钮，应该首先考虑使用悬浮响应按钮。如果需要一个非主要、但是能快速定位到的按钮，则可以使用底部固定按钮，底部固定按钮应该用扁平按钮，高度48dp。
• 悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮，这些动作通常和变换、启动、以及它本身的转换锚点相关。默认尺寸56dp；迷你尺寸40dp；
• 浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。

卡片

列表

文本框

http://www.xueui.cn/experience/app-experience/material-design.html

1.单行文本框

• 输入框高度48dp；提示和输入字体16sp；文本顶部和底部填充16dp；文本字段分隔填充8dp；

2.带有图标的单行文本框

• 输入框高度48dp；提示和输入字体16sp；文本顶部和底部填充16dp；文本字段分隔填充8dp；图标尺寸48dp；

3.带有滚动条的单行文本框

• 当单行文本框的输入内容很长并需跨越多行的时候，则文本框应该以滚动形式容纳文本。在滚动文本框中，一个图形化的标志出现在标线的下面。点击省略号，光标返回到字符的开头。

4.带浮动标签单行文本框

• 输入框高度72dp；提示和输入字体16sp；标签字体12sp；文本顶部和底部填充16dp；文本字段分隔填充8dp；

5.多行文本框

• 提示和输入字体：16 sp；标签字体12sp；文本顶部和底部填充16dp；文本字段分隔填充8dp；只有一行内容时高度56，怎么计算的？？？

6.全宽文本框

• 文本宽度为屏幕宽度。

7.字符计数器

• 计数器文本12sp；

8.自带补全文本框和搜索过滤器