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 sizeMarginBodyLayout columns
Extra-small (phone)
0-599dp16dpFluid4
Small (tablet)
600-90432dpFluid8
905-1239Fluid840dp12
Medium (laptop)
1240-1439200dpFluid12
Large (desktop)
1440+Fluid104012

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

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. 参考文档

understanding material layout