布局 度量标准 & 关键线

度量标准 & 关键线

基准网格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

手机、平板和桌面设备的所有组件都与 8dp 的基准网格对齐。工具栏上的插图则与 4dp 的基准网格对齐。

基准网格示例

基准网格示例

文字与 4dp 的基准网格对齐。更过内容请参考排版

文字的基准网格

关键线和间距 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

以下模版中包含了关键线、间距指南以及在手机、平板和桌面上的相同元素。

模版

手机

列表

两列,左对齐且有一个 56dp 的浮动操作按钮。

关键线和外边距

屏幕边缘的左右边距:16dp
图标或头像的左边距: 72dp
手机上的水平边距:16dp

垂直空间

  1. 状态栏:24dp
  2. 工具栏:56dp
  3. 子标题:48dp
  4. 列表项:72dp

关键线和外边距

屏幕边缘的左右边距:16dp 16dp
内容与屏幕的左边距:72dp

垂直空间

  1. 状态栏:24dp
  2. 工具栏:56dp
  3. 标题和列表项:72dp
  4. 子标题:48dp
  5. 内容区的间隔:8dp

详情视图

详情卡片,包含一个 56dp 的浮动操作按钮。

关键线和外边距

屏幕边缘的左右边距:16dp
内容与屏幕的左边距:72dp
为了协调浮动操作按钮,右侧图标距离屏幕的右边距为 32dp。

垂直空间

  1. 状态栏:24dp
  2. 工具栏:56dp
  3. 内容区的间隔:8dp
  4. 列表项:72dp

抽屉导航

侧栏导航菜单,包含有图标、头像和左对齐的文字。其他图标右对齐。

关键线和外边距

屏幕边缘的左右边距:16dp
为了协调图标或头像,内容的左边距为:72dp
侧栏导航宽度:屏幕宽度减去操作栏高度。本例中,导航的宽度是屏幕宽度减去 56dp。

垂直空间

  1. 账户菜单和列表项:48dp
  2. 内容区的间隔:8dp
  3. 导航栏右边距:56dp

平板

有列表的详情视图

左对齐的列表和右对齐的浮动操作按钮

关键线和边距

屏幕边缘的左右边距:24dp
内容与屏幕的左边距:80dp
卡片的左右内边距:24dp
卡片内容的左边距:104dp

垂直空间

  1. 状态栏和列表顶部间隔:24dp
  2. 列表项:64dp
  3. 内容区的间隔:8dp
  4. 列表项:72dp

有列表的详情视图

左对齐的列表和右对齐的浮动操作按钮

关键线和外边距

屏幕边缘的左右边距:24dp
图标的垂直中线与屏幕的距离为:52dp
导航项目距离屏幕的左边距是:104dp
内容与屏幕的左边距:80dp
卡片的左右内边距:32dp
卡片导航项目的左边距:96dp

垂直空间

  1. 状态栏:24dp
  2. 工具栏和列表项:64dp
  3. 内容区的间隔:8dp
  4. 子标题、列表项和开关项:48dp
  5. 标题:80dp

桌面

根据窗口大小,桌面的关键线和区域间隔会从平板和手机继承一部分。

全屏

窗口视图

横向窗口

纵向窗口

比例关键线 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

元素的宽度与高度的比例(也就是宽高比),可以应用于所有的 UI 元素和屏幕尺寸。写作的方式是 宽:高。

推荐的宽高比:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3

例如:

  • 1:1 的宽高比意味着元素的宽高是相等的。
  • 按照 2:3 的宽高比,宽为 360dp 图片,高度为 540dp。

根据比例来计算元素的宽高可以使用下面的公式。宽高比也可以用分数来表示。例如 3:2 也可以写成 3/2。

宽度 = 宽高比 * 高度

高度 = 宽度 / 宽高比

按屏幕宽度

按手机屏幕宽度的示例

按元素宽度

按手机元素宽度的示例

使用增量调整 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

增量是一个尺寸,用来计算应用内元素的尺寸和位置。

例如:你可以利用一个标准元素(例如操作栏)的高度来定义增量。如果操作栏的高度是 56dp,你的增量就等于 56 x 56dp。然后确保其他元素的宽或高是 56dp 的倍数。

使用 56dp 来作为增量,那么 8x 增量的元素宽度应该是 448dp。

增量主要应用在桌面上,偶尔也会用在平板上,但在手机上就很少使用。使用多少个增量通常取决于窗口大小。

8x 水平增量的卡片示例

扩展了 2x 高度增量的应用栏,以及 5x 增量的右侧面板。

在 Material Design 的 UI 设计中,增量可以跨元素使用。

触控范围 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

为了确保信息密度和可用性的平衡,触控目标的尺寸应至少为 48 x 48dp。多数情况下,触控目标之间还有 8dp 的间隔。

调整元素的尺寸至少为 48dp 的宽高,确保在任何屏幕中元素的物理尺寸都至少为 9mm。建议的触控对象大小为 7-10mm。

头像尺寸:40dp
图标尺寸:24dp
触控范围均为:48dp

触控高度:48dp
按钮高度:36dp

触控范围示例

触控范围和按钮示例