Sign in Subscribe
Design | 设计

Metrics & keylines

Tim Wu

• 9 min read
Metrics & keylines

Baseline grids

All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.

所有的元素在移动端，平板端和桌面端都以边长为 8dp 的正方形作为基线网格。toolbars（工具栏）的图标使用边长为 4dp 的正方形作为基线网格。

Example of baseline grid

layout_metrics_baseline2

Example of baseline grid

layout_metrics_baseline3

Type aligns to a 4dp baseline grid. See detailed information on typography.

文字排版对齐是以边长为 4dp 的基线网格。点击排版查看更多内容

Example of typography in a baseline grid

layout_metrics_baseline5

Keylines and spacing

The following templates and examples contain keylines, spacing guidance, and sample screens for elements on mobile, tablet, and desktop.

下面内容的模版和示例含关键线，间距指引，和各个元素在移动端，平板端，和桌面端不同屏幕尺寸下不同的展示。

Templates

download: Mobile layout template

下载：移动端布局模板

download: Tablet layout template

下载：平板布端布局模板

download: Desktop Layout Template

下载：桌面端布局模板

Mobile

List

A two-column, left-aligned list with a 56dp floating action button.

两栏布局，左对齐列表，带有 56dp 宽度的 floating action button（浮动操作按钮）。

Keylines and margins

Screen edge left and right margins: 16dp

屏幕左右页边距为：16dp

Content associated with an icon or avatar left margin: 72dp

icon 与 avatar 的内容区距离屏幕左边缘：72dp

Horizontal margins on mobile: 16dp

移动设备上的水平边距：16dp

layout_metrics_keyline_mobile2

Vertical spacing

  • Status bar: 24dp
  • Toolbar: 56dp
  • Subtitle: 48dp
  • List item: 72dp

layout_metrics_keyline_mobile3

Keylines and margins

Screen edge left and right margins: 16dp

屏幕左右页边距为：16dp

Content left margin from screen edge: 72dp

内容区距离屏幕左边缘：72dp

layout_metrics_keyline_mobile5

Vertical spacing

  • Status bar: 24dp
  • Toolbar: 56dp
  • Title and list items: 72dp
  • Subtitle: 48dp
  • Space between content areas: 8dp

layout_metrics_keyline_mobile6

Detail view

A detail card with a 56dp floating action button.

详情卡片与 56pd 宽度的 floating action button。

Keylines and margins

Screen edge left and right margins: 16dp

屏幕左右页边距为：16dp

Content left margin from screen edge: 72dp

内容区距离屏幕左边缘：72dp

Right-side icons align 32dp from the right edge to coordinate with the floating action button.

右侧 icons 与屏幕右边距离为32dp，与 floating action button 协调配合。

layout_metrics_keyline_mobile8

Vertical spacing

  • Status bar: 24dp
  • Toolbar: 56dp
  • Space between content areas: 8dp
  • List item: 72dp

layout_metrics_keyline_mobile9

Navigation drawer

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

侧边导航的菜单icons，avatars（头像），文字左对齐。其它 icons 右对齐。

Keylines and margins

Screen edge left and right margins: 16dp

屏幕左右外边距为：16dp

Content associated with an icon or avatar left margin: 72dp

内容和与之相关的 icons 和 avatar 距离屏幕左外边距：72dp

Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

侧边导航的宽度：屏幕的宽度减去 action bar 的高度，因此这里侧边栏的的宽度距离屏幕右边有 56dp。

layout_metrics_keyline_mobile14

Vertical spacing

  • Account menu and list items: 48dp
  • Space between content areas: 8dp
  • Navigation right margin: 56dp

layout_metrics_keyline_mobile15

Tablet

List with detail view

Left-aligned list with a right-aligned floating action button

左对齐菜单和右对齐 floating action button

Keylines and margins

Screen edge left and right margins: 24dp

屏幕左右外边距：24dp

Content left margin from screen edge: 80dp

内容距离屏幕左端距离：80dp

Card left and right padding: 24dp

卡片左右两端内边距：24dp

Card content left padding: 104dp

卡片内容区左内边距：104dp

layout_metrics_keyline_tablet2

Vertical spacing

Status bar and space above list: 24dp

List item: 64dp

Space between content areas: 8dp

List item: 72dp

layout_metrics_keyline_tablet3

List with detail view

Left-aligned list with a left-aligned floating action button

左对齐列表和左对齐 floating action button

Keylines and margins

Screen edge left and right padding: 24dp

屏幕左右页边距为：24dp

Icons’ vertical center distance from screen edge: 52dp

图标的垂直中心距离屏幕边缘：52dp

Nav item left padding from screen edge: 104dp

导航项目从屏幕边缘左边填充：104dp

Content left margin from screen edge: 80dp

内容左边距屏幕边缘：80 dp

Card left and right padding: 32dp

卡片左右内边距：32dp

Card nav item left padding: 96dp

卡片导航条目左内边距：96dp

layout_metrics_keyline_tablet5

Vertical spacing

  • Status bar: 24dp
  • Toolbar and list item: 64dp
  • Space between content areas: 8dp
  • Subtitle, list item, and slider: 48dp
  • Title: 80dp

layout_metrics_keyline_tablet6

Desktop

Keylines and spacing blocks for desktop inherit grid rules from tablet and mobile, depending on window size.

用于桌面的 关键线 和 间距快 继承于平板和移动端的网格规则，具体取决于窗口的大小。

Desktop full screen

桌面全屏

layout_metrics_keylines_desktop1

Resized windows

调整窗口大小

Horizontal window

水平窗口

layout_metrics_keylines_desktop3

Vertical window

垂直窗口

layout_metrics_keylines_desktop4

Ratio keylines

The proportion of an element’s width to its height (called the aspect ratio) applies to both UI elements and screen size. It is written as width:height.

元素比例指的是该元素宽度与高度的比例（通常称为 aspect ratio(宽高比))，常应用于 UI 元素和屏幕尺寸。一般写作 width:height。

These aspect ratios are recommended:

以下是常用比例推荐

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

For example:

例如：

  • A 1:1 aspect ratio means an element has equal height and width.
  • 1:1 aspect ratio 指该元素有着相同的宽度和高度
  • A 360dp wide image with a 2:3 aspect ratio has a height of 540.
  • 一个 2:3 aspect ratio 的图像，他的宽为 360dp ，那么它的高度则为 540dp

Determine the width or height of your element for a chosen aspect ratio using the below formulas. The aspect ratio is always expressed as a fraction. For example, 3:2 is treated as 3/2.

使用以下公式来根据已经选定的 aspect ratio 获取元素的宽度或高度。aspect ratio 通常使用分数表示。例如，3:2 可示为 3/2 。

Width = Aspect ratio * Height

宽度 = aspect ratio * 高度

Height = Width/Aspect ratio

高度 = 宽度／aspect ratio

Screen width

layout_metrics_ratiokeylines1

Example of screen width on mobile

layout_metrics_ratiokeylines2

Element width

layout_metrics_ratiokeylines3

Example of element width on mobile

layout_metrics_ratiokeylines4

Sizing by increments

An increment is a measurement used to determine the size and position of other elements in the app.

An increment（增量）是用于确定应用程序中其它元素的大小和位置的度量。

For example, you can define an increment as the height of a standard element, such as the action bar. If the action bar is 56dp tall, you may define one increment as equal to 56 x 56dp. Determine the size of other elements by how many 56dp increments wide or tall an element should be.

例如，您可以定义一个标准元素的高度为一个 increment（增量），比如 action bar。如果 action bar 的高度为 56dp，你可以定义一个 increment 的大小为 56dp * 56dp。可以通过决定有多少个 56dp 的 increments 来决定其它元素的大小。

If an element is 8 increments wide, using 56dp as the increment size, the width is equal to 448dp.

如果一个元素等于 8 倍 increment 的宽度，一个 increment 的宽度为 56dp，那么这个元素的宽度为 448dp。

Incremental keylines apply mostly to desktop, often to tablet, and infrequently to mobile. The number of increments varies based on window size.

incremental 的关键线最多于桌面端，然后是平板端，最不常用于移动端。到底是用多少个 increment 元素取决于窗口的大小

This example card width has a horizontal increment of 8x.

水平 8 倍 increment 宽度的卡片示例

layout_metrics_incremental2

The height of the example extended app bar is 2x the increment, and the width of the right panel is 5x the increment.

示例中 app bar 的高度为 2倍 increment，右面板的宽度则为 5倍 increment

layout_metrics_incremental3

Increments can work across many elements in material design UI.

increments 在 material design 中多个元素都能使用

layout_metrics_incremental4

Touch target size

To ensure balanced information density and usability, touch targets should be at least 48 x 48 dp. In most cases, there should be 8dp or more space between them.

为了保证信息密度与可用性的平衡，touch targets （触摸目标）的面积最少要 48dp * 48dp。在多个示例中，touch targets 之间至少要有 8dp 或者更多的宽度间隙。

Size elements at least 48dp high and wide to ensure a physical size of about 9mm regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.

元素的尺寸最少要有 48dp 的长度和宽度来保证在任何屏幕下大概物理尺寸约 9mm 空间。建议的触摸屏的 target size （触摸尺寸）一般约为 7-10mm。

  • Avatar: 40dp
  • Icon: 24dp
  • Touch target on both: 48dp

layout_metrics_touchtarget1

Example of touch targets

layout_metrics_touchtarget2

  • Touch target height: 48dp
  • Button height: 36dp

layout_metrics_touchtarget3

Example of touch targets and buttons

layout_metrics_touchtarget4