基準網(wǎng)絡

所有組件都與間隔為 8dp 的基準網(wǎng)格對齊。排版/文字（Type）與間隔為 4dp 的基準網(wǎng)格對齊。在工具條中的圖標同樣與間隔為 4dp 的基準網(wǎng)格對齊。這些規(guī)則適用于移動設備、平板設備以及桌面應用程序。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-baselinegrids-01-8dp-baselinea_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-baselinegrids-01-8dp-baselineb_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-baselinegrids-01-8dp-baselinec_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-baselinegrids-02-8dp-baseline_large_mdpi.png" alt="" />

有關詳細信息請參見組件一節(jié)。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-baselinegrids-baseline-03_large_mdpi.png" alt="" />

有關詳細信息請參見字體排版一節(jié)。

邊框與間距

移動設備

移動設備布局模板包含了多種多樣的屏幕和信息，這些信息描述了邊框與間距如何應用于屏幕邊界和元素。下面是一個有關屏幕的實例，這個實例可以通過如下的鏈接獲得。

移動設備布局模板 - 2.4 MB(.ai)

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi.png" alt="" />

內容

該屏幕演示圖標、頭像和一個 2 行文本的列表如何左對齊，以及一個 56dp 的浮動動作按鈕和文本如何右對齊。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi.png" alt="" />

垂直邊框和水平外邊距

左右各有 16dp 的垂直邊框。帶有圖標或者頭像的內容有 72dp 的左邊距。

在移動設備上有 16dp 的水平外邊距。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi.png" alt="" />
垂直邊距

1. 24dp
2. 56dp
3. 48dp
4. 72dp

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-02ba_large_mdpi.png" alt="" />
內容

該屏幕演示圖標、頭像、2 行文本列表、子標題和 40dp 的浮動動作按鈕如何左對齊。小圖標右對齊。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-02bb_large_mdpi.png" alt="" />
垂直邊框和水平邊距

圖標（大小圖標）有 16dp 的左右垂直邊框。帶有圖標或者頭像的內容有 72dp 的左邊距。

在移動設備上有 16dp 的水平外邊距。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-02bc_large_mdpi.png" alt="" />
垂直邊距

1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-03ba_large_mdpi.png" alt="" />
內容

該屏幕演示圖標如何左對齊，以及圖標和一個 56dp 的浮動動作按鈕如何右對齊。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-03bb_large_mdpi.png" alt="" />
垂直邊框和水平邊距

圖標有 16dp 的左垂直邊框。帶有圖標或頭像的內容有 72dp 的左邊距，32dp 的右邊距（考慮到 56dp 的圓形浮動動作按鈕）。這樣圓形浮動動作按鈕下的圖標也對齊了。

在移動設備上有 16dp 的水平外邊距。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-03bc_large_mdpi.png" alt="" />
垂直邊距

1. 24dp
2. 56dp
3. 8dp
4. 72dp

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-04ba_large_mdpi.png" alt="" />
內容

該屏幕演示圖標、頭像和文本如何左對齊，浮動動作按鈕、圖標和文本如何右對齊。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-04bb_large_mdpi.png" alt="" />
垂直邊框和水平邊距

圖標有 16dp 的左右垂直邊框。帶有圖標或頭像的內容區(qū)域左對齊，距左邊界 72dp。

在移動設備上有 16dp 的水平邊距。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-04bc_large_mdpi.png" alt="" />
垂直邊距

1. 24dp
2. 56dp
3. 48dp
4. 8dp

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-05ba_large_mdpi.png" alt="" />
內容

該屏幕演示了側邊導航菜單的寬度，以及圖標、頭像和文本如何左對齊，小圖標如何右對齊。 http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-05bb_large_mdpi.png" alt="" />
垂直邊框和水平邊距

圖標距側邊導航菜單的左右邊界分別有 16dp 的垂直邊框。帶有圖標或者頭像的內容距側邊導航菜單的左邊界 72dp。側邊導航菜單的寬度等于屏幕的寬度減去動作條的高度，即在本例中距屏幕右側 56dp 的寬。

在移動設備上有 16dp 的水平外邊距。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-mobile-05bc_large_mdpi.png" alt="" />
垂直邊距

1. 48dp
2. 8dp
3. 56dp

平板設備

平板設備布局模板包含了 14 種不同的屏幕，顯示了邊框和邊距如何應用于屏幕的邊界和元素。下面的實例是 14 種模板的兩個，可以通過下面的鏈接獲取。

平板設備布局模板

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-tablet-01_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-tablet-01a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-tablet-01b_large_mdpi.png" alt="" />

1. 24dp
2. 64dp
3. 8dp
4. 72dp

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-tablet-02_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-tablet-02a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-spacing-tablet-02b_large_mdpi.png" alt="" />

1. 24dp
2. 64dp
3. 8dp
4. 48dp
5. 80dp

桌面應用程序

桌面應用程序布局模板包含了 4 個不同的屏幕，每一個屏幕又包括了 4 個不同的窗口尺寸，顯示了邊框和邊距如何應用于窗口和元素。下面是一個屏幕的實例，可以通過下面所示的鏈接下載?；诓煌拇翱诔叽纾吙蚝瓦吘鄩K會沿襲平板設備和移動設備的網(wǎng)格規(guī)則。

桌面應用程序布局模板

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-desktopa_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-keylines-keylines-desktopc_large_mdpi.png" alt="" />

比率邊框

應用于移動設備屏幕的寬度和移動設備、平板設備以及桌面應用程序中 UI 元素的寬度。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-ratiokeylines-keylines_15_large_mdpi.png" alt="" />
屏幕的寬度

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-ratiokeylines-ratiokeylines-02_large_mdpi.png" alt="" />
示例

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-ratiokeylines-keylines_19_large_mdpi.png" alt="" />
元素的寬度

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-ratiokeylines-keylines_18_large_mdpi.png" alt="" />
示例

增量邊框

增量邊框

增量邊框定義了一個增量，比如動作條的高度，然后使用幾倍于這個增量的數(shù)字來決定應用中其它元素的尺寸和位置。

大多數(shù)應用于桌面應用程序，有些也適用于平板設備，很少應用在移動設備中。增量的數(shù)量會根據(jù)窗口的尺寸來改變。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-incrementalkeylines-incrementalkeylines-01_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-incrementalkeylines-incrementalkeylines-02_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-incrementalkeylines-incrementalkeylines-03_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-incrementalkeylines-incrementalkeylines-04_large_mdpi.png" alt="" />

觸摸目標尺寸

最小的觸摸目標尺寸是 48dp。在布局中，當為圖標（24dp）或者頭像（40dp）設置邊距時，要時刻記得。觸摸目標不能重疊。

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-touchtarget-touch-target-02a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-metrics-touchtarget-touch-target-02b_large_mdpi.png" alt="" />

原文：Metrics and Keylines 翻譯：CodeDiving 校對：cxytomo