度量與邊框

基準(zhǔn)網(wǎng)絡(luò)

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

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="" />

有關(guān)詳細(xì)信息請(qǐng)參見(jiàn)組件一節(jié)。

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

有關(guān)詳細(xì)信息請(qǐng)參見(jiàn)字體排版一節(jié)。

邊框與間距

移動(dòng)設(shè)備

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

移動(dòng)設(shè)備布局模板 - 2.4 MB(.ai)

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

內(nèi)容

該屏幕演示圖標(biāo)、頭像和一個(gè) 2 行文本的列表如何左對(duì)齊，以及一個(gè) 56dp 的浮動(dòng)動(dòng)作按鈕和文本如何右對(duì)齊。

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

垂直邊框和水平外邊距

左右各有 16dp 的垂直邊框。帶有圖標(biāo)或者頭像的內(nèi)容有 72dp 的左邊距。

在移動(dòng)設(shè)備上有 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="" />
內(nèi)容

該屏幕演示圖標(biāo)、頭像、2 行文本列表、子標(biāo)題和 40dp 的浮動(dòng)動(dòng)作按鈕如何左對(duì)齊。小圖標(biāo)右對(duì)齊。

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

圖標(biāo)（大小圖標(biāo)）有 16dp 的左右垂直邊框。帶有圖標(biāo)或者頭像的內(nèi)容有 72dp 的左邊距。

在移動(dòng)設(shè)備上有 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="" />
內(nèi)容

該屏幕演示圖標(biāo)如何左對(duì)齊，以及圖標(biāo)和一個(gè) 56dp 的浮動(dòng)動(dòng)作按鈕如何右對(duì)齊。

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

圖標(biāo)有 16dp 的左垂直邊框。帶有圖標(biāo)或頭像的內(nèi)容有 72dp 的左邊距，32dp 的右邊距（考慮到 56dp 的圓形浮動(dòng)動(dòng)作按鈕）。這樣圓形浮動(dòng)動(dòng)作按鈕下的圖標(biāo)也對(duì)齊了。

在移動(dòng)設(shè)備上有 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="" />
內(nèi)容

該屏幕演示圖標(biāo)、頭像和文本如何左對(duì)齊，浮動(dòng)動(dòng)作按鈕、圖標(biāo)和文本如何右對(duì)齊。

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

圖標(biāo)有 16dp 的左右垂直邊框。帶有圖標(biāo)或頭像的內(nèi)容區(qū)域左對(duì)齊，距左邊界 72dp。

在移動(dòng)設(shè)備上有 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="" />
內(nèi)容

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

圖標(biāo)距側(cè)邊導(dǎo)航菜單的左右邊界分別有 16dp 的垂直邊框。帶有圖標(biāo)或者頭像的內(nèi)容距側(cè)邊導(dǎo)航菜單的左邊界 72dp。側(cè)邊導(dǎo)航菜單的寬度等于屏幕的寬度減去動(dòng)作條的高度，即在本例中距屏幕右側(cè) 56dp 的寬。

在移動(dòng)設(shè)備上有 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

平板設(shè)備

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

平板設(shè)備布局模板

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

桌面應(yīng)用程序

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

桌面應(yīng)用程序布局模板

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="" />

比率邊框

應(yīng)用于移動(dòng)設(shè)備屏幕的寬度和移動(dòng)設(shè)備、平板設(shè)備以及桌面應(yīng)用程序中 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="" />
示例

增量邊框

增量邊框

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

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

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="" />

觸摸目標(biāo)尺寸

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

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 校對(duì)：cxytomo