接着上一篇，在（一）中讲了material design的三个基本构成，即材质、设计和动画，材质已经介绍了，下面讲讲设计方面的。
材质化设计以印刷设计为指导，参照了其中的文字排版、网格、间距、尺寸、颜色和布局等概念，创造出层级、意义、以及焦点，以此提升用户体验。
在材质化设计中，纸张的物理特性被转化到屏幕上，应用的背景就像是一张纸片，应用的行为也与纸片行为很相似，能够改变大小，随意移动，多个纸片可以连接在一起，也可以叠着。这一部分可以参考（一）中讲到的材质的属性。
1、单位：像素密度、密度独立像素、可扩展像素
像素密度是指每英寸的范围内有多少像素，像素越多，密度越大。对于一个像素固定的控件，比如一个30像素的按钮，在高像素密度的屏幕上显示出来比在低密度的屏幕上显示出来要小。这样一来，同样像素大小的控件在不同屏幕上的显示是不一样的，这会给设计带来很大麻烦，因此就有了密度独立像素。
高像素密度
低像素密度
密度独立像素，即dp，简单地讲，1dp的元素，不管在哪个屏幕上，看起来大小都是一样的，不会受屏幕的特性的影响，所以称为独立像素。
公式如下：dp = (width in pixels * 160) / screen density
其中规定，1dp是1个像素在一个像素密度为160的屏幕的大小。
在安卓应用的设计中直接用dp就好，但是在CSS中不支持dp，所以要使用上面的公式将dp转化为px。
与之相对应的是可拓展像素，即sp。跟dp是一个道理，只是sp用于文字，dp用于图像。
2、基线网格
这里采用的是大小为8dp的基线网格，所有的设计元素都要和这个网格对其。文字和工具栏上的图标的基线网格是4dp。关于基线网格布局，谷歌提供了很多排版的例子供参考，大家有兴趣可以去看看。
https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
基线网格
文字基线网格
3、比例线
比例指元素宽高比，一般有16：9、3：2、4：3、1：1、3：4、2：3这几个尺寸，可以通过这些比例对页面进行排版布局。例子如下：
4、增量尺寸
指定一个元素的尺寸为标准，一个增量就是这个标准值的一倍。
比如以工具栏的高度为标准，工具栏是56dp高，那么一个增量就是56dp，八个就是448dp。其他元素的使用增量作为基本单位，这样其他元素都和工具栏的高度相关，每次修改时只要改工具栏的，其他会相应改变。
增量尺寸
那增量应该多少才合适，这里就涉及到一个最小尺寸的问题。为了平衡信息的密度以及可用性，触摸目标的大小至少应该为48*48dp。从物理尺寸来讲，应该在7-10mm之间。
5、页面布局
页面布局的基本元素包括工具栏，应用栏，导航栏，系统栏等，下面是几个布局的例子：
具体的各个控件怎么选择，相对位置应该怎么设置比较合适，在后面对控件的详细介绍中会涉及。这里只是提一些大概的思路。
- 先定义一个主要的分隔方向，是左右排列还是上下排列。
- 在前面的主要分隔方向的基础上，不要嵌套太多层，如果需要多个区域安排内容，可以多使用空格。
- 可以用卡片或者浮动按钮来打破分隔线（卡片和浮动按钮之后会有介绍）。
- 可以使用卡片来包含多种样式的内容。
- 工具栏形式多种多样，可以直接在应用栏上显示，可以以一列的形式显示，可以用于卡片上，可以浮动，可以用一个独立的工具画板，底部的工具栏可以随着键盘或者其他元素的出现而升起，或者因为自身的展开而升起。
浮动工具栏
卡片工具栏
工具画板
底部展开工具栏
- 应用栏
应用栏有左中右三部分。
位于左边的导航图标可以是以下这几种形式：
1）可以打开导航抽屉的控制器 2）可以返回到上一级的箭头 3）如果此处不需要导航，则会隐藏。
中间的标题可以表示目前的位置、可以是这个应用的名字、可以是这个页面的名字、也可以是一个页面筛选器。
右边的图标一般是与应用相关的操作，菜单图标可以打开一个溢出菜单，里面可以包含二级操作以及其他菜单项，如帮助、设置、反馈等。菜单应该盖住应用栏，而不是作为应用栏的扩展表现出来。
应用栏的中元素应该具有相同的颜色，不过如果需要，可以对标题进行强调，使用与背景差别比较明显的颜色。
应用栏
- 侧边导航栏
侧边导航栏可以永久地固定在侧边，也可以只在需要的时候弹出，使用完毕再收回去，主要取决于屏幕的空间。
侧边导航栏可以位于左边，也可以位于右边。但是一般左边是用于主导航，右边是用于该页面的次级导航。在之后的控件中会详细讲到。
针对页面布局这部分，谷歌提供了一些空白的布局可以供我们直接使用。可以在下面这个网址中下载ai或者sketch文件。
https://material.google.com/resources/layout-templates.html#layout-templates-desktop
6、响应式UI
响应式UI指的是界面元素和布局能够随着设备和屏幕的变化而变化，能够更好地在不同设备之间构造一致的用户体验。
响应式设计的基础是网格和断点。网格将页面分为多个列和多个分隔线。如下图所示，界面中的元素要和网格对齐，跟前面提到的基线网格设计是一样的。
这里的不同之处在于网格是会动态变化的，包括列的数目，分隔线的宽度。断点就是决定这些的机制。不同的屏幕尺寸，列的数目是不同的，比如在480dp以内是4列，480dp到840dp是8列。分隔线也是一样，谷歌的文档中也做出了规定，在不同的屏幕下分隔线的宽度不同。
断点
由于只规定了列数和分隔宽度，所以列的宽度是会在一定范围内变化的，这时相关的界面元素就会跟着变化。一旦变化到了断点处，就会进行重新布局。重新布局要涉及到原先界面的宽度，元素的行为，可以针对不同软件的特点进行设计。
谷歌官方给了一些参考的模式，具体见下图：
详细介绍请查阅官方文档
https://material.google.com/layout/responsive-ui.html#responsive-ui-patterns
网友评论