Material Design 基础 - Layout
1. 理解layout
material设计布局使用统一的元素和间距，以鼓励在多种平台、环境和屏幕尺寸之间的一致性。
1.1. 原则
Predictable(可预测的) 使用直观且可预测的布局，并具有一致的UI区域和空间组织。
Consistent(一致的) 布局应始终使用网格、关键线和填充。
Responsive(响应的) 布局是自适应的。它们对用户、设备和屏幕元素的输入做出反应。
1.2. 布局解剖学
布局区域是互动体验的基础。它们是布局的构建块，由共享类似功能的元素和组件组成。布局区域还可以对较小的容器（如卡片）进行分组。
大屏幕布局有三个主要区域：
- App bars
- Navigation
- Body
在创建响应性布局系统时，为主体和边距建立最小和最大尺寸，以及允许每个区域适应不同形状因素的缩放行为是很有帮助的。以下指南描述了材料的基线尺寸和行为。
1.2.1. Body区域
Body区域用于显示应用程序中的大部分内容。它通常包含列表、卡片、按钮和图像等组件。
Body区域对三个参数使用缩放值：
垂直和水平尺寸
列数
边距
在非常小的断点处，边距的值为16dp。随着版面尺寸的增加，主体部分相对于屏幕宽度展开。当到达第一个断点（小；600dp宽）时，裕度增加到32dp。
当机身宽度达到840dp时，边距增加到最大宽度200dp。达到最大宽度后，身体部位再次变得灵敏，继续水平缩放。
1.2.2. 响应式布局栅格
响应栅格由column、槽和边距组成，为Body区域内的元素布局提供了方便的结构。组件、图像和文本与柱网对齐，以确保屏幕大小和方向的布局符合逻辑且一致。
随着Body区域大小的增大或减小，轴网柱的数量也会随之变化。
设备断点的建议网格行为
| Screen size | Margin | Body | Layout columns |
|---|---|---|---|
| Extra-small (phone) | |||
| 0-599dp | 16dp | Fluid | 4 |
| Small (tablet) | |||
| 600-904 | 32dp | Fluid | 8 |
| 905-1239 | Fluid | 840dp | 12 |
| Medium (laptop) | |||
| 1240-1439 | 200dp | Fluid | 12 |
| Large (desktop) | |||
| 1440+ | Fluid | 1040 | 12 |
更多关于响应式布局栅格介绍, 请点击这里.
1.2.3. 导航区域
导航区域包含导航组件和元素，例如导航抽屉或导航滑轨。它帮助用户在应用程序中的目的地之间导航，或访问重要操作。
1.2.4. App bar
1.2.4.1. Visual grouping
在布局中创建顺序的第一步是视觉分组。布局中具有类似内容或功能的元素可以组合在一起，并使用开放空间、排版和分隔符与其他元素分离。
1.2.4.2. Containment
在视觉分组之后，下一个要考虑的组是通过共享上下文关联的任何元素，例如图像及其标题或支持信息。这些上下文相关的元素可以使用包容的概念进行分组。Containment是通过在视觉分组之间建立边界来实现的。
方法1：隐式包容意味着通过将相关元素拉近来减少它们周围的开放空间。同时，这个分组之外的空间被增加，以创建一个清晰的概念边界。
方法2：或者，可以通过向一组相关图元添加轮廓或标高来创建显式包含。例如，从图像及其标题或支持文本创建一张卡片，使这两个元素通过卡片的提升边界更容易定义为一个组。
在组成包含文本的元素或组件时，请确保每个容器使用响应性尺寸标注，以便文本可以轻松缩放并保持可读性。
1.2.4.3. 文本缩放
Material Design建议文本的理想行长为40-60个字符，以便在缩放包含文本的元素时保持可读性。
文本的理想行长为40-60个字符。这在缩放包含文本的元素（如卡片）时保持了可读性。当元素包含文本时，页边距和排版属性应该响应，以确保文本行在水平布局中不会过长。
如果需要更长的行长，可以考虑调整行高以提高可读性。
1.2.4.4. 锚定和约束
缩放组件或布局容器时，请考虑它们的位置和对齐方式应如何缩放。随着父容器的缩放，内部元素可以定位到左侧、右侧或中心。内部元件也可以保持固定位置，例如在浮动操作按钮或导航抽屉。
部件的内部组成应符合其所在设备的人体工程学需求。例如，移动设备上的 horizontally-oriented card可以适应更大屏幕上的方形卡。这种变化使图像更加突出，并允许更大的字体样式来提高可读性。对于图标按钮，按钮内的图标和文本标签可以保持相互固定，在水平缩放时保持在按钮内的中心位置。
1.2.4.5. Material measurements
为了确保材料设计布局在视觉上保持平衡，大多数测量与8dp对齐，8dp对应于间距和总体布局。组件的大小以8dp为增量，确保每个屏幕的视觉一致。
较小的元素（如图标）可以与4dp网格对齐，而排版可以落在4dp基线网格上，这意味着每一行的排版基线与其相邻行之间的间隔为4dp。
2. 资源
Figma上的材料设计工具包中有使用上述断点、柱网和边距模板的指南。可以从Material Design社区页面下载。
3. Material Design 系列文章
最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design
4. 参考文档
Material Design 基础 - Layout