每个APP独立性非常严谨，互相不能互窜图层。如果有APP本身包含多图层，那么会有一些控件是用于连接这些图层的，那么它将会一直浮现在所有图层之上。还有一些守则，比如系统的提示永远在图层最上面，这也是所谓的『深度』效果了，所有图层都有它在3D上的『深度』，在Z轴上有自己的位置，而每个图层上它们都有他们的阴影来暗示它们距离最下面的Z平面有多高（虽然我觉得有时候这个处理方法有点太过头了，尤其层高高的时候阴影简直吓人）。

关于各种元素之间的间隙尺寸，Material Design都有非常成熟的尺寸规定，水平和垂直部分都有。而所有这些被定死的尺寸以外，都是由内容和留白来占据的，这就是它灵活处理的部分了。即使在平板和PC上，也是同样的处理法则。遇到棘手的尺寸，就用倍数法则：

这里要说到更深层次的东西，关于交互逻辑了。其实UI页面之间有三种联系：一个屏幕完成所有事情，如计算器App；同一个层页面但是不同Bar切换，比如拨号界面直接推拉出收藏夹这些；复杂应用，多层页面，数据较多，比如有分类功能的购物App，包含预览功能的文件夹。这种已经非常接近不同App之间的逻辑了，但是又稍微不同；这时候你不仅要考虑单个页面设计了，要考虑整体的UI设计以及设计过程要保持头脑清醒（这时候你更像个导演或者建筑师，纯美工级别的请跳过以下内容……），首先出来的这个页面一定是用户最想看到了。而且你要做到不要混淆视觉，如果满屏幕都是导航栏将会使得用户非常迷茫（就像以前版本的Android打开App会出来一大堆的Bar，极其丑陋），另外Icon设计的辨识度、能否清晰的表达出直接访问路径的内容，都是非常重要的。如果实在太多功能，先考虑精简，然后考虑平铺，再考虑侧滑，尽量少的让用户产生多余的使用步骤（当然如果你是在做Motion动画，这个观点也是值得采用的）。

如果你的应用页面有大量同级的『纸张』，你可以加入边选栏或者侧边栏来管理这些复杂的List，但是这是需要一点学习成本的，因为它们不是一打开就能看到。当然如果是在平板或者PC上看的话，可以做出一点小改变，比如工具栏可以长期在上面，而底栏未必出现。一般来说尺寸设计：（手机上）侧边导航栏宽度=屏幕宽度-应用栏高度；

工具栏设计未必会限制得很死，有些情况它甚至能做出很大的变动，但是基本样式以及分级是务必十分明显的：

当然，在Material Design里面其实这些工具栏也是有尺寸要求的，和之前的水平上的尺寸要求类似，工具栏和底栏边栏上，内容和空白可以自由去填补剩下没有硬性要求的部分：

4.组件

在点选一个项目的时候（比如一个人的联系方式），如果这个项目能操作的项目超过了3项，那么就务必要用到底部动作条这种『大工程』的控件了，普通的那种两个三个按钮的对话框没办法满足。当然也是有一定的尺寸标准的：

按钮是Material Design里面的一个非常重要的部件，不可以把它当成纯装饰元素，当然按钮分为『圆形Icon式』FAB和『有背景色Raised /无背景色Flat文字的普通按钮』，虽然点击后都有涟漪效果，但是三者功能完全不一样：

这三者的选用一般是基于图层高低来确定的，还记得我之前的那个图吧？仔细想想你需要赋予这个按钮在哪个3D图层、有什么功能（要准备推拉和弹出一堆同一个图层信息的就用FAB、连续一片的卡片式或者接缝式的图层上一般就用Raised、一堆文字对话框伴随的一般就是Flat），然后就你知道应该用什么按钮了。另外按钮的位置也是有尺寸标准：

关于按钮的动作，在每一步上它的颜色都是不一样的，一般来说参数如下：

Raised Dark/Dark Color

最小宽度: 88 dp，高度: 36 do正常状态: Color 500，覆盖状态: Color 600，点击状态: Color 700，不可用状态: 10% #ccc

遇到特殊页面，按钮的界限有点模糊，形状也可以有变化，但是响应面积依然要注意；

在Material Design里面的下拉菜单有一个非常重要的注意点，就是不能把之前的图层切断，所以只能在边缘部分往下面展开，如上图；

下拉菜单也有几种，一种常规的就是什么都不显示，第二种就是有默认选项和下拉按钮，第三种是有默认值和下拉按钮而且还能自己编辑，他们也是有响应动作的。多种选项和下拉菜单连在一起的时候也有版式要求，如上图。

和大家想象的不一样就是在Materila里面的卡片其实还是有小小的拟物化的，圆角和阴影是必备要素。卡片的内容类型都可以不一样，而且还能互动，例如添加评论点赞之类，但是不宜过多，表示出它的基本功能即可（控制在两项以内）。

网格设计展示图片和文字必须简洁明了，编排禁止混乱和滥用阴影。千万不要在图片下面加入分散注意力的部件，如下：

在布局上，也是有一定讲究，比如：

字体设计

正文：14 sp或16 sp

标题：24 sp或更大

扁平按钮：Roboto Medium, 14 sp, 10 sp字间距

移动设备上的卡片间距

屏幕边界与卡片间留白：8 dp

卡片间留白：8 dp

内容留白：16 dp

和这种卡片有点类似的就是纸片。所谓纸片就是包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息的小卡片，如上图。

这种提示框一般用于警告，偶尔用于输入WIFI密码之类的。之前在按钮里面有说过一下，其实和文本有点类似，也有标题和正文之类的。涉及到操作的时候，一般在固定高度的提示框里面，注意一下有滚动条时候，哪些元素是不能够和滚动条一起动的。

分割线也是Material组成要素。不需要每次都处理成等屏宽，尤其是比较密集的时候，需要一些缩进留出空白，另外给点文字提示也有助于信息筛选：网格一般用于存储同类内容，处理办法和卡片类似但是有点不同，比如它完全不需要拟物化的圆角和阴影。有时候你要在上面加入可用的控件和文字，那么处理方式和卡片基本一样。

每一类（比如图标）千万不要放在一起使用，比如头像和复选框，选择那个是首选哪个只是视觉辅助。比如下面这种排版，根据情况是头像重要还是选项重要，决定后，二选一：

遇到折叠的时候，就按照分隔线情况处理。滑动式删除这种行为可以两边滑动都做到支持：

菜单设计一般在靠下面或者直接在上面出现，并且顶对齐原来的选框，然后比例也保持一致。多级菜单的时候也是一样的处理。动态上，还记得之前的中心点开吧？

进度条有几种，包活线形的还有圆形的，以及确定的和不确定的。『要用户没有目标的白等是不道德的』

Snackbar，也可以理解为小型弹出框，屏幕上同时最多只能现实一个Snackbar。还有一种类似的，胶囊状的提示框Toast，不含操作也不能关闭。他们都有规定就是务必要非常简洁，不能出现过多两个控件、图标这种干扰，纯文字。也不能遮住界面元素，只能在底部出现。

在普通场合，以及有栅格排列的界面中，副标题应该如上处理。

关于选择框和开关，除了和之前说的一样要涟漪等物理效果和满足版式要求以外，这里涟漪一般要扩大更大的范围。

Tabs是一种节省空间的做法，并且可以便于空间分组管理。但是前提是，不能把它当成高级别的内容切换。放在地图上它就只能区别交通工具（所以它展开的起点终点会一直保持不变），但是绝对不能用来切换成设置，这样逻辑会变得很混乱：

（这也是不可取的，因为ALL和CAMERA的关系会让人引