前言：
把物理世界的体验带进屏幕。去除现实中的杂志和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。
1、运用比喻
2、大胆，形象目的明确
3、动效表意
一、魔法纸片
魔法纸片的特性
1、纸片可以伸缩、改变形状
2、纸片变形时可以裁剪内容，比如之前缩小时，内容大小不变，而是隐藏超出部分
3、多张之前可以拼接成一张
4、一张纸片可以分裂成多张
5、纸片可以在任何位置凭空出现
魔法纸片的禁止效果
1、一项操作不能同时触发两张纸片的反馈
2、层叠的纸片，高度不能相同
3、纸片不能互相穿透
4、纸片不能弯折
5、纸片不能产生透视，必须平衡于屏幕
二、空间
引入Z轴的概念，Z轴垂直于屏幕，用来表示元素的层叠关系。Z值（海拔高度）越高，元素离界面低层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。
三、动画
动画只是装饰，它有含义，能表达元素、界面之间的关系，具有功能上的功能。（现实世界的运动规律）
水波反馈：所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，提现Material Design动画的功能性。
1、通过过渡动画，表达界面之间的空间、层次关系，并且跨界面传递信息。
2、从父界面进去子界面，需要先抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。
3、多个相似元素，动画设计要有先后次序，起到引导视线的作用。
4、相似元素的运动，要符合统一的规律。
5、通过图标的变化和一些细节来达到令人愉悦的效果。
四、色彩规范
1、颜色不宜过多，选取一种主色，一种辅助色（非必须），在此基础上进行明度、饱和度的变化，构成配色方案。
2、Appbar（头部导航条）背景使用主色（色卡值500），状态栏背景使用深一级的主色或20％透明度的纯黑。（色值卡700）
3、其余颜色
黑色：〔87％普通文字〕〔54％减淡文字〕〔26％禁用状态/提示文字〕〔12％分隔线〕
白色：〔100％普通文字〕〔70％减淡文字〕〔30％禁用状态/提示文字〕〔12％分隔线〕
五、图标
1、桌面图标的尺寸是48dp*48dp。桌面图标建议模仿现实中的折纸效果，通过扁平化色彩表现空间和光影。
2、小图标尺寸是24dp*24dp。图形限制在中央20dp*20dp区域内。 小图标同样有栅格系统。线条、间隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。
3、小图标的颜色使用纯黑与纯白，通过透明度调整：
黑色：〔51％正常状态〕〔26％禁用状态〕
白色：〔100％正常状态〕〔30％禁用状态〕
六、图片
1、描述具体事物，优先使用照片。然后可以考虑使用插画。
2、图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20％-40％之间，浅色的遮罩透明度在40％-60％之间。
3、Android L可以从图片中提取主色，运用在其它UI元素上。
七、文字
1、英文
英文字体使用Roboto Roboto有6种字重：Thin、Light、Regular、Meaium、Bold和Black
2、中文
中文字体使用Noto Noto有7种字重：Thin、Light、Demilight、Regular、Medium、Bold和Black。
3、常用字号（1倍）
① 12sp小字提示
② 14sp（桌面端13sp） 正文/按钮文字
③ 16sp（桌面端15sp） 小标题
④ 20sp Appbar文字
⑤ 24sp大标题
⑥ 34sp/45sp/56sp/112sp超大号文字
⑦ 长篇幅正文，每行建议60字符（英文，中文30）左右。短文本，建议每行30字符（英文，中文15）左右。
八、布局
所有可操作元素最小点击区域尺寸：48dp*48dp。（IOS是44dp*44dp）（原因：同等配置屏幕精度苹果高）
栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。
常见的尺寸与距离
• 顶部导航栏高度：24dp
• Appbar最小高度：56dp
• 底部导航栏高度：48dp
• 用户头像尺寸：64dp*64dp/40dp*40dp
• 小图标点击区域：48dp*48dp
• 侧边抽屉到屏幕右边的距离：56dp
• 卡片间距：8dp
• 分隔线上下留白：8dp
• 大多元素的留白距离：16dp
• 屏幕左右对齐基线：16dp
• 文字左侧对齐基线：72dp
九、组件
1、底部动作条
①通常以列表形式出现，支持上下滚动。
②也可以是网格式的。
2、按钮
• 层级权限从高到低排列
①悬浮按钮
②凸起按钮
③扁平按钮
• 重要性
①最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。扁平按钮适用在简单的页面，例如对话框中。
• 悬浮按钮使用规则
①建议只用一个悬浮按钮
②悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘
③悬浮按钮不能被其它元素盖住，也不能挡住其它按钮
④列表滚动至底部时，悬浮按钮应该隐藏，防止它挡住列表项。
⑤悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线。
• 其它
悬浮按钮通常触发正向的操作，添加、创建、收藏之类。不能触发负面、破坏性或不重要的操作，也不应该有数字角标。左图就是悬浮按钮的错误使用。
〔悬浮按钮有两种尺寸：56*56dp/40*40dp〕
3、卡片
①即使在同一列表中，卡片的内容和布局方式也可以不一样。
②卡片统一带走2dp的圆角。
③卡片的使用规则
A、同时展现多种不同内容
B、卡片内容之间不需要比较
C、包含了长度不确定的内容，比如评论
D、包含了丰富的内容与操作项，比如赞、滚动 条、评论
E、本该是列表，但文字超过3行
F、本该是网格，但需要展现更多文字
④卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其它部分都是主操作区。
4、弹窗
狭小空间表现复杂信息的一个组件，比如日期、联系人选择器。
5、弹出框
①对话框包含标题、内容、操作项。点击对话框 外的区域，不会关闭对话框
②通常情况，避免出现滚动条。空间不足时允许滚动，滚动条建议默认显示。
③对话框中，取消类操作放左边，引起变化的操作项放右边。要写明操作项的具体效果，不要只写“是”和“否”。标题文字要明确，即使不读正文内容也能知道在干什么，标题不要用“确定吗”这样的含糊措辞。
④再对话框中改变内容，不会提交数据，点击确定后，才会发生变化。对话框上方不能在叠加对话框。
⑤还有一种简单对话框，不带操作项。点击列表内容触发相应操作，并关闭对话框。点击简易对话框外面，对话框会关闭，操作取消。
⑥
A、对话框可以是全屏式的，全屏对话框上方可以 再层叠对话框。全屏式对话框，其中的任何改 动，要点击保存后才生效，点击返回取消。
B、全屏对话框右上角的操作项，可以是诸如保 存、发送、添加、分享、更新、创建之类的操 作，不要使用完成、OK、关闭这样含糊的措 辞。
C、只有必填项都填了，右上角的操作才变为可点 击状态。内容发生了改变，点击关闭需要有个 确认对话框，提示是否忽略修改。
D、内容没有发生改变，点击关闭，直接退出全屏 对话框。
E、对话框四周留白比较大，通常是24dp
6、分隔线
①列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。
②没有头像、图标等元素时，需要用通栏分隔线。
③图片本身就起到划分区域的作用，相册列表不需要分隔线。
④谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。
⑤通栏分隔线的层级高于内嵌分隔线。
7、列表
①列表由行构成，行内包含瓦片。如果列表内容文字超过3行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。
②列表包含主操作区域与副操作区域。副操作区位于列表右侧，其余都是主操作区。在同一个列表中，主、副操作区的内容与位置要保持一致。
③在同一个列表中，滑动手势操作保持一致。
④主操作区域与副操作区的图标或图形元素是列表控制项，列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作，也可以包含快捷键提示、二级菜单等提示信息。
8、开关
①必须所有选项保持可见时，才用Radio button（圆形的单选开关）。不然可以使用下拉菜单，节省空间。
②在同一个列表中有多项开关，建议使用Checkbox（框形的复选开关）。
③单个开关建议使用Switch（圆矩形的滑动开关。在IOS中，开关是在矩形框中，而在Material Design中，开关是浮起来变大且有投影的）。
9、动作条
①Tap只用来展示不同类型的内容，不能当导航菜单使用。Tab至少2项，至多6项。
②超出6项，Tab需要变为滚动模式，左右翻页。
③
A、Tab文字要显示完整，字号保持一致，不能 折 行，文字与图标不能混用。
B、Tab选中项的下划线高度是2dp。
10、文本框
①激活状态和错误状态，横线的宽度为2dp，颜色改变。
②输入点击区域高度至少48dp，但横线并不在点击区域底部，还有8dp的距离。
③整个点击区域增高，提示文字也是点击区域的一部分。
④字数限制与错误提示都会使点击区域增高。
11、抽屉导航
①侧边抽屉从左侧滑出，占据整个屏幕高度，遵循列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。
②列表较短不需要滚动时，设置和帮助反馈跟随在列表后面。
