接着上一篇，在（一）中讲了material design的三个基本构成，即材质、设计和动画，材质已经介绍了，下面讲讲设计方面的。
材质化设计以印刷设计为指导，参照了其中的文字排版、网格、间距、尺寸、颜色和布局等概念，创造出层级、意义、以及焦点，以此提升用户体验。
在材质化设计中，纸张的物理特性被转化到屏幕上，应用的背景就像是一张纸片，应用的行为也与纸片行为很相似，能够改变大小，随意移动，多个纸片可以连接在一起，也可以叠着。这一部分可以参考（一）中讲到的材质的属性。
像素密度是指每英寸的范围内有多少像素，像素越多，密度越大。对于一个像素固定的控件，比如一个30像素的按钮，在高像素密度的屏幕上显示出来比在低密度的屏幕上显示出来要小。这样一来，同样像素大小的控件在不同屏幕上的显示是不一样的，这会给设计带来很大麻烦，因此就有了密度独立像素。
密度独立像素，即dp，简单地讲，1dp的元素，不管在哪个屏幕上，看起来大小都是一样的，不会受屏幕的特性的影响，所以称为独立像素。
公式如下：dp = (width in pixels * 160) / screen density
其中规定，1dp是1个像素在一个像素密度为160的屏幕的大小。
在安卓应用的设计中直接用dp就好，但是在CSS中不支持dp，所以要使用上面的公式将dp转化为px。
与之相对应的是可拓展像素，即sp。跟dp是一个道理，只是sp用于文字，dp用于图像。
这里采用的是大小为8dp的基线网格，所有的设计元素都要和这个网格对其。文字和工具栏上的图标的基线网格是4dp。关于基线网格布局，谷歌提供了很多排版的例子供参考，大家有兴趣可以去看看。
https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
比例指元素宽高比，一般有16：9、3：2、4：3、1：1、3：4、2：3这几个尺寸，可以通过这些比例对页面进行排版布局。例子如下：
指定一个元素的尺寸为标准，一个增量就是这个标准值的一倍。
比如以工具栏的高度为标准，工具栏是56dp高，那么一个增量就是56dp，八个就是448dp。其他元素的使用增量作为基本单位，这样其他元素都和工具栏的高度相关，每次修改时只要改工具栏的，其他会相应改变。
那增量应该多少才合适，这里就涉及到一个最小尺寸的问题。为了平衡信息的密度以及可用性，触摸目标的大小至少应该为48*48dp。从物理尺寸来讲，应该在7-10mm之间。
页面布局的基本元素包括工具栏，应用栏，导航栏，系统栏等，下面是几个布局的例子：
具体的各个控件怎么选择，相对位置应该怎么设置比较合适，在后面对控件的详细介绍中会涉及。这里只是提一些大概的思路。
响应式UI指的是界面元素和布局能够随着设备和屏幕的变化而变化，能够更好地在不同设备之间构造一致的用户体验。
响应式设计的基础是网格和断点。网格将页面分为多个列和多个分隔线。如下图所示，界面中的元素要和网格对齐，跟前面提到的基线网格设计是一样的。
这里的不同之处在于网格是会动态变化的，包括列的数目，分隔线的宽度。断点就是决定这些的机制。不同的屏幕尺寸，列的数目是不同的，比如在480dp以内是4列，480dp到840dp是8列。分隔线也是一样，谷歌的文档中也做出了规定，在不同的屏幕下分隔线的宽度不同。
由于只规定了列数和分隔宽度，所以列的宽度是会在一定范围内变化的，这时相关的界面元素就会跟着变化。一旦变化到了断点处，就会进行重新布局。重新布局要涉及到原先界面的宽度，元素的行为，可以针对不同软件的特点进行设计。
谷歌官方给了一些参考的模式，具体见下图：
详细介绍请查阅官方文档
https://material.google.com/layout/responsive-ui.html#responsive-ui-patterns
联系客服
