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方形基线网格。工具栏中的图标与4dp正方形基线网格对齐。

Example of baseline grid

【翻译】
基线网格示例

Example of baseline grid

【翻译】
基线网格示例

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

【翻译】
字体与4dp基线网格对齐。查看有关排版的详细信息。

Example of typography in a baseline grid

【翻译】
基线网格中排版的示例

Keylines and spacing - 边框与间距

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

【翻译】
以下模板和示例包含移动设备，平板电脑和桌面上的元素的键盘，间距指南和示例屏幕。

Mobile - 移动设备

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

【翻译】
两列，左对齐列表，带有56dp浮动操作按钮。

Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp

【翻译】
边框与间距
屏幕边缘左右边距：16dp
与图标或头像左边距相关联的内容：72dp
移动设备上的水平边距：16dp

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

【翻译】
垂直间距
状态栏：24dp
工具栏：56dp
子标题：48dp
列表项：72dp

Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp

【翻译】
边框与间距
屏幕边缘左右边距：16dp
内容左边距屏幕边缘：72dp

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

【翻译】
垂直间距
状态栏：24dp
工具栏：56dp
标题和列表项：72dp
子标题：48dp
内容区域之间的空间：8dp

**Detail view - 详细视图 **
A detail card with a 56dp floating action button.
一个有56dp浮动操作按钮的详细卡。

Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.

【翻译】
边框与间距
屏幕边缘左右边距：16dp
内容左边距屏幕边缘：72dp
右侧图标从右边缘对齐32dp，以与浮动操作按钮进行协调。

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

【翻译】
垂直间距
状态栏：24dp
工具栏：56dp
内容区域之间的空间：8dp
列表项：72dp

**Navigation drawer - 导航抽屉 **
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

【翻译】
侧面导航菜单，其图标，头像和文字在左侧对齐。其他图标在右边对齐。

Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

【翻译】
边框与间距
屏幕边缘左右边距：16dp
与图标或头像左边距相关联的内容：72dp
边栏宽度：屏幕宽度减去操作栏的高度。这里，宽度是从右边缘开始的56dp。

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

【翻译】
垂直间距
帐户菜单和列表项：48dp
内容区域之间的空间：8dp
导航右边距：56dp

Tablet - 平板电脑

List with detail view - 列出详细视图
Left-aligned list with a right-aligned floating action button

【翻译】
具有右对齐浮动操作按钮的左对齐列表

Keylines and margins
Screen edge left and right margins: 24dp
Content left margin from screen edge: 80dp
Card left and right padding: 24dp
Card content left padding: 104dp

【翻译】
边框与间距
屏幕边缘左右边距：24dp
内容左边距屏幕边缘：80dp
卡片左和右填充边距：24dp
卡内容左填充边距：104dp

Vertical spacing
Status bar and space above list: 24dp
List item: 64dp
Space between content areas: 8dp
List item: 72dp

【翻译】
垂直间距
状态栏和空间上面的列表：24dp
列表项：64dp
内容区域之间的空间：8dp
列表项：72dp

**List with detail view - 列出详细视图 **
Left-aligned list with a left-aligned floating action button

【翻译】
具有左对齐浮动操作按钮的左对齐列表

Keylines and margins
Screen edge left and right padding: 24dp
Icons’ vertical center distance from screen edge: 52dp
Nav item left padding from screen edge: 104dp
Content left margin from screen edge: 80dp
Card left and right padding: 32dp
Card nav item left padding: 96dp

【翻译】
边框与间距
屏幕边缘左右填充：24dp
图标的垂直中心距离屏幕边缘：52dp
导航项目从屏幕边缘左边填充：104dp
内容左边距屏幕边缘：80dp
卡左右填充：32dp
卡导航项目左填充：96dp

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

【翻译】
垂直间距
状态栏：24dp
工具栏和列表项：64dp
内容区域之间的空间：8dp
子标题，列表项和滑块：48dp
标题：80dp

Desktop - 桌面

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

【翻译】
用于桌面的键盘和间距块从平板电脑和移动设备继承网格规则，具体取决于窗口大小。

Desktop full screen

【翻译】
桌面全屏

Resized windows

【翻译】
调整大小的窗口

Horizontal window

【翻译】
水平窗口

Vertical window

【翻译】
垂直窗口

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.

【翻译】
元素的宽度与其高度的比例（称为宽高比）适用于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.
A 360dp wide image with a 2:3 aspect ratio has a height of 540.

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.
Width = Aspect ratio * Height
Height = Width/Aspect ratio

【翻译】
例如：
1：1宽高比意味着元素具有相等的高度和宽度。
具有2：3宽高比的360dp宽图像具有540的高度。
使用以下公式为选定的宽高比确定元素的宽度或高度。 纵横比总是表示为分数。 例如，3：2被视为3/2。
宽度=长宽比*高度
高度=宽度/长宽比

Screen width

【翻译】
屏幕宽度

Example of screen width on mobile

【翻译】
移动设备上的屏幕宽度示例

Element width

【翻译】
元素宽度

Example of element width on mobile

【翻译】
移动设备上元素宽度的示例

Sizing by increments - 按增量调整大小

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

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.

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

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

【翻译】
增量是用于确定应用程序中其他元素的大小和位置的度量。
例如，您可以将增量定义为标准元素（如操作栏）的高度。 如果操作栏的高度为56dp，则可以将一个增量定义为等于56 x 56dp。 通过多少56dp增量宽或高元素确定其他元素的大小。
如果元素是8个增量宽，使用56dp作为增量大小，则宽度等于448dp。
增量密钥主要应用于桌面，通常是平板电脑，而不常用于移动。 增量的数量根据窗口大小而变化。

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

【翻译】
此示例卡宽度的水平增量为8x。

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

【翻译】

示例扩展应用栏的高度为增量的2倍，右面板的宽度为增量的5倍。

Increments can work across many elements in material design UI.

【翻译】
增量可以在材料设计UI中的许多元素上工作。

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.

【翻译】
为了确保平衡的信息密度和可用性，触摸目标应至少为48 x 48 dp。在大多数情况下，它们之间应该有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，不管屏幕尺寸。触摸屏对象的建议目标大小为7-10mm。

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

【翻译】
头像：40dp
图标：24dp
触摸目标：48dp

Example of touch targets

【翻译】
触摸目标的示例

Touch target height: 48dp
Button height: 36dp

【翻译】
触摸目标高度：48dp
按钮高度：36dp

Example of touch targets and buttons

【翻译】
触摸目标和按钮示例