Metrics & keylines - 指標和方法

Baseline grids - 基線網(wǎng)格

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方形基線網(wǎng)格。工具欄中的圖標與4dp正方形基線網(wǎng)格對齊。

Example of baseline grid

【翻譯】
基線網(wǎng)格示例

Example of baseline grid

【翻譯】
基線網(wǎng)格示例

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

【翻譯】
字體與4dp基線網(wǎng)格對齊。查看有關(guān)排版的詳細信息。

Example of typography in a baseline grid

【翻譯】
基線網(wǎng)格中排版的示例

Keylines and spacing - 邊框與間距

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

【翻譯】
以下模板和示例包含移動設(shè)備，平板電腦和桌面上的元素的鍵盤，間距指南和示例屏幕。

Mobile - 移動設(shè)備

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
與圖標或頭像左邊距相關(guān)聯(lián)的內(nèi)容：72dp
移動設(shè)備上的水平邊距：16dp

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

【翻譯】
垂直間距
狀態(tài)欄：24dp
工具欄：56dp
子標題：48dp
列表項：72dp

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

【翻譯】
邊框與間距
屏幕邊緣左右邊距：16dp
內(nèi)容左邊距屏幕邊緣：72dp

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

【翻譯】
垂直間距
狀態(tài)欄：24dp
工具欄：56dp
標題和列表項：72dp
子標題：48dp
內(nèi)容區(qū)域之間的空間：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
內(nèi)容左邊距屏幕邊緣：72dp
右側(cè)圖標從右邊緣對齊32dp，以與浮動操作按鈕進行協(xié)調(diào)。

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

【翻譯】
垂直間距
狀態(tài)欄：24dp
工具欄：56dp
內(nèi)容區(qū)域之間的空間：8dp
列表項：72dp

**Navigation drawer - 導(dǎo)航抽屜 **
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

【翻譯】
側(cè)面導(dǎo)航菜單，其圖標，頭像和文字在左側(cè)對齊。其他圖標在右邊對齊。

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
與圖標或頭像左邊距相關(guān)聯(lián)的內(nèi)容：72dp
邊欄寬度：屏幕寬度減去操作欄的高度。這里，寬度是從右邊緣開始的56dp。

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

【翻譯】
垂直間距
帳戶菜單和列表項：48dp
內(nèi)容區(qū)域之間的空間：8dp
導(dǎo)航右邊距：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
內(nèi)容左邊距屏幕邊緣：80dp
卡片左和右填充邊距：24dp
卡內(nèi)容左填充邊距：104dp

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

【翻譯】
垂直間距
狀態(tài)欄和空間上面的列表：24dp
列表項：64dp
內(nèi)容區(qū)域之間的空間：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
導(dǎo)航項目從屏幕邊緣左邊填充：104dp
內(nèi)容左邊距屏幕邊緣：80dp
卡左右填充：32dp
卡導(dǎo)航項目左填充：96dp

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

【翻譯】
垂直間距
狀態(tài)欄：24dp
工具欄和列表項：64dp
內(nèi)容區(qū)域之間的空間：8dp
子標題，列表項和滑塊：48dp
標題：80dp

Desktop - 桌面

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

【翻譯】
用于桌面的鍵盤和間距塊從平板電腦和移動設(shè)備繼承網(wǎng)格規(guī)則，具體取決于窗口大小。

Desktop full screen

【翻譯】
桌面全屏

Resized windows

【翻譯】
調(diào)整大小的窗口

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的高度。
使用以下公式為選定的寬高比確定元素的寬度或高度。 縱橫比總是表示為分數(shù)。 例如，3：2被視為3/2。
寬度=長寬比*高度
高度=寬度/長寬比

Screen width

【翻譯】
屏幕寬度

Example of screen width on mobile

【翻譯】
移動設(shè)備上的屏幕寬度示例

Element width

【翻譯】
元素寬度

Example of element width on mobile

【翻譯】
移動設(shè)備上元素寬度的示例

Sizing by increments - 按增量調(diào)整大小

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.

【翻譯】
增量是用于確定應(yīng)用程序中其他元素的大小和位置的度量。
例如，您可以將增量定義為標準元素（如操作欄）的高度。 如果操作欄的高度為56dp，則可以將一個增量定義為等于56 x 56dp。 通過多少56dp增量寬或高元素確定其他元素的大小。
如果元素是8個增量寬，使用56dp作為增量大小，則寬度等于448dp。
增量密鑰主要應(yīng)用于桌面，通常是平板電腦，而不常用于移動。 增量的數(shù)量根據(jù)窗口大小而變化。

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.

【翻譯】

示例擴展應(yīng)用欄的高度為增量的2倍，右面板的寬度為增量的5倍。

Increments can work across many elements in material design UI.

【翻譯】
增量可以在材料設(shè)計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.

【翻譯】
為了確保平衡的信息密度和可用性，觸摸目標應(yīng)至少為48 x 48 dp。在大多數(shù)情況下，它們之間應(yīng)該有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

【翻譯】
觸摸目標和按鈕示例