4.3 布局-响应式栅格

响应式栅格布局

Material Design的响应式栅格布局会适配屏幕的大小和方向，确保所有布局一致。

内容

列、间距和边距

自定义栅格

断点

栅格特性

UI区域

原型

列、间距和边距

Material Design的栅格布局由三种元素组成：列、间距、边距。

1. 列

2. 间距

3. 边距

列

内容放置在屏幕中列的区域。

列宽使用百分比来定义，而非固定值，这样可以使内容自由适配任何屏幕尺寸。在查看一个屏幕时，栅格中列的显示数量由断点范围（已提前确定的屏幕尺寸范围，如移动端、平板端或其他尺寸等）决定。

断点为360dp的移动端，栅格布局使用了4个列。

断点为600dp的平板端，栅格布局使用了8个列。

间距

间距是列之间的距离，它们有助于隔开内容。

间距在每个断点范围内的值是固定的。为了更好地适配屏幕，间距在不同的断点范围内可以改变。大间距适合大屏幕，因为它们在列之间创造了更多的留白。

断点为360dp的移动端，栅格布局使用了16dp的间距。

断点为600dp的平板端，栅格布局使用了24dp的间距。

边距

边距是内容与屏幕左右边缘的距离。

边距在每个断点范围内的值是固定的。为了更好地适配屏幕，边距在不同的断点范围内可以改变。大边距适合大屏幕，因为它们在内容周边创造了更多的留白。

断点为360dp的移动端，栅格布局使用了16dp的边距。

断点为600dp的小平板端，布局栅格使用了24dp的边距。

栅格自定义

栅格布局能通过调整来满足产品和不同设备尺寸的需求。

自定义间距

可以通过调节布局中的间距来增加或减少列之间的距离。

这个栅格布局使用8dp的间距，距离越小说明图片越相关，因此每个图片看起就是集合中的一部分。

这个栅格布局使用大间距（32dp），给列创造出了较大的差别。大距离使每个相册看起来就是个独立集合。

错误示例

不要把间距弄得过大，比如和列一样宽。太大的间距没有给内容留足够的空间，并且不利于统一显示。

自定义边距

可以通过调整边距来增大或减小内容与屏幕边缘之间的距离。边距在每个断点内都为固定值。

保持正文易读的理想长度是每行40-60字符。

这个栅格布局使用8dp的小边距，使图片占据更多的空间。

这个栅格布局使用64dp的大边距来控制内容宽度。

错误示例

不要把边距设置过大而导致内容空间不足。

间距与边距

在同一断点内，间距和边距可以不同。

1. 32dp边距

2. 8dp间距

水平栅格

可以为水平滚动的可触控UI来自定义Material Design栅格布局。列、间距和边距从左到右平铺，而非从上到下。屏幕高度决定了水平栅格中列的数量。

水平滚动在无触控和web平台上不常见。

这个高400dp的水平栅格布局使用了四个水平列。

1. 列

2. 间距

3. 边距

水平栅格适用不同的高度，可以预留空间给应用栏或者其他顶部UI区域。

这个水平栅格布局以顶部应用栏组件底部为起点，在316dp的高度内使用了4个水平列。

断点

断点是具有特定布局要求的预定屏幕尺寸范围。在所提供的断点范围内，将通过调整布局来适配屏幕的大小和方向。

断点系统

Material Design基于以下列的结构提供响应式布局。布局针对不同的屏幕、设备和方向使用4列、8列或者12列的栅格。

每个断点区域根据显示尺寸来确定列数、推荐边距和间距。

*边距和间距可以灵活使用，不一定要相同。

iOS断点

以下为应用在iOS屏幕、设备和方向上断点的列数、边距和间距。

*边距和间距可以灵活使用，不一定要和Material Design栅格系统相同。

栅格特性

弹性栅格

弹性栅格使用的列可以伸缩和重新调整内容尺寸。弹性栅格可以使用断点来决定布局是否需要做显著的改变。

列在最大栅格宽度中扩展

固定栅格

固定栅格使用固定大小的列，在不同断点中的弹性边距使内容保持不变。固定栅格布局仅能在指定断点中发生改变。

列在最大栅格宽度中扩展

固定栅格

固定栅格使用固定大小的列，在不同的断点中的流动边距使内容保持不变。固定栅格布局仅能在指定断点中改变。

边距在固定栅格中扩展。

UI区域

布局由多个UI区域组成，例如侧边导航、内容区域和应用栏。这些区域可以显示操作、内容或者导航目标。UI区域应该统一适配不同的屏幕尺寸断点。

为增加在不同设备上的相似性，桌面端的UI元素应该通过重新组织来与移动端UI保持一致。

不同尺寸屏幕上的布局变化。

永久UI区域

永久UI区域是可以显示在响应式栅格之外的区域，例如抽屉导航。这些区域不能被折叠。

当屏幕空间足够时，永久UI区域可显示内容。

常驻UI区域

常驻UI区域是指可在任意时间通过命令来显示的区域。它们可以通过切换来开启或关闭。显示时，它们会压缩内容和栅格。

当常驻UI区域可见时，它的可见性不会受界面中其它元素的影响。

打开这个常驻导航抽屉时压缩了栅格（及其内容）。

临时UI区域

临时UI区域只会临时出现，出现时不会影响响应式栅格。当此区域可见时，可通过点击其区域内的某选项或区域外来隐藏。

当UI区域可见时，屏幕中的其它元素不可交互。

打开这个临时抽屉导航不影响响应式栅格和屏幕内容。

原型

原型是指提供统一的布局、分层和投影方式的结构布局。它们是一个起点，用来调整匹配产品的特定需求。

1. 移动端

2. 桌面端

1. 移动端

2. 桌面端

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考