Material Design 基础 - Layout

理解layout

material设计布局使用统一的元素和间距，以鼓励在多种平台、环境和屏幕尺寸之间的一致性。

原则

• Predictable(可预测的) 使用直观且可预测的布局，并具有一致的UI区域和空间组织。

• Consistent(一致的) 布局应始终使用网格、关键线和填充。

• Responsive(响应的) 布局是自适应的。它们对用户、设备和屏幕元素的输入做出反应。

布局解剖学

布局区域是互动体验的基础。它们是布局的构建块，由共享类似功能的元素和组件组成。布局区域还可以对较小的容器（如卡片）进行分组。

大屏幕布局有三个主要区域：

• App bars
• Navigation
• Body

在创建响应性布局系统时，为主体和边距建立最小和最大尺寸，以及允许每个区域适应不同形状因素的缩放行为是很有帮助的。以下指南描述了材料的基线尺寸和行为。

Body区域

Body区域用于显示应用程序中的大部分内容。它通常包含列表、卡片、按钮和图像等组件。

Body区域对三个参数使用缩放值：

垂直和水平尺寸

列数

边距

在非常小的断点处，边距的值为16dp。随着版面尺寸的增加，主体部分相对于屏幕宽度展开。当到达第一个断点（小；600dp宽）时，裕度增加到32dp。

当机身宽度达到840dp时，边距增加到最大宽度200dp。达到最大宽度后，身体部位再次变得灵敏，继续水平缩放。

响应式布局栅格

响应栅格由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

更多关于响应式布局栅格介绍, 请点击这里.

导航区域

导航区域包含导航组件和元素，例如导航抽屉或导航滑轨。它帮助用户在应用程序中的目的地之间导航，或访问重要操作。

App bar

Visual grouping

在布局中创建顺序的第一步是视觉分组。布局中具有类似内容或功能的元素可以组合在一起，并使用开放空间、排版和分隔符与其他元素分离。

Containment

在视觉分组之后，下一个要考虑的组是通过共享上下文关联的任何元素，例如图像及其标题或支持信息。这些上下文相关的元素可以使用包容的概念进行分组。Containment是通过在视觉分组之间建立边界来实现的。
方法1：隐式包容意味着通过将相关元素拉近来减少它们周围的开放空间。同时，这个分组之外的空间被增加，以创建一个清晰的概念边界。
方法2：或者，可以通过向一组相关图元添加轮廓或标高来创建显式包含。例如，从图像及其标题或支持文本创建一张卡片，使这两个元素通过卡片的提升边界更容易定义为一个组。

在组成包含文本的元素或组件时，请确保每个容器使用响应性尺寸标注，以便文本可以轻松缩放并保持可读性。

文本缩放

Material Design建议文本的理想行长为40-60个字符，以便在缩放包含文本的元素时保持可读性。
文本的理想行长为40-60个字符。这在缩放包含文本的元素（如卡片）时保持了可读性。当元素包含文本时，页边距和排版属性应该响应，以确保文本行在水平布局中不会过长。
如果需要更长的行长，可以考虑调整行高以提高可读性。

锚定和约束

缩放组件或布局容器时，请考虑它们的位置和对齐方式应如何缩放。随着父容器的缩放，内部元素可以定位到左侧、右侧或中心。内部元件也可以保持固定位置，例如在浮动操作按钮或导航抽屉。
部件的内部组成应符合其所在设备的人体工程学需求。例如，移动设备上的 horizontally-oriented card可以适应更大屏幕上的方形卡。这种变化使图像更加突出，并允许更大的字体样式来提高可读性。对于图标按钮，按钮内的图标和文本标签可以保持相互固定，在水平缩放时保持在按钮内的中心位置。

Material measurements

为了确保材料设计布局在视觉上保持平衡，大多数测量与8dp对齐，8dp对应于间距和总体布局。组件的大小以8dp为增量，确保每个屏幕的视觉一致。
较小的元素（如图标）可以与4dp网格对齐，而排版可以落在4dp基线网格上，这意味着每一行的排版基线与其相邻行之间的间隔为4dp。

资源

Figma上的材料设计工具包中有使用上述断点、柱网和边距模板的指南。可以从Material Design社区页面下载。

Material Design 系列文章

更多Material Design相关文章请访问 鹏叔的IT技术博客空间-Material Design

参考文档

understanding material layout