三、度量和參考線（Metrics & keylines）

基線網(wǎng)格（Baseline grids）

無論是移動(dòng)端、平板端還是桌面端上，所有的應(yīng)用組件都對(duì)齊至8dp單位的方形基線網(wǎng)格上。但工具欄中的圖則對(duì)齊至4dp單位的方形基線網(wǎng)格上。

基線網(wǎng)格的例子
基線網(wǎng)格的例子

文字于4dp單位的方形基線網(wǎng)格對(duì)齊。詳細(xì)信息請(qǐng)參見 [排material.google.com/style/typog…)

在一個(gè)基線網(wǎng)格進(jìn)行文字排版

參考線和間距（Keylines and spacing）

以下模板包含參考線和間距指南。還有在移動(dòng)端、平板端和桌面端上UI元素的布局效果。
模板：
移動(dòng)端上的布局模板
2.23MB（.ai）

平板端上的布局模板
1.39MB（.ai）

桌面端上的布局模板
89.40MB（.ai）

移動(dòng)端
列表
下圖演示了頭像、列表以及一個(gè)56dp的浮動(dòng)按鈕在頁面中的對(duì)齊關(guān)系。

參考線和外邊距 頁面左右邊緣預(yù)留外邊距：16dp
內(nèi)容左側(cè)有icon或頭像時(shí)預(yù)留外邊距：72dp
移動(dòng)端上水平方向上的外邊距：16dp

垂直間距 狀態(tài)欄：24dp
工具欄：56dp
副標(biāo)題： 48dp
列表項(xiàng)：72dp

參考線和外邊距 頁面左右邊緣預(yù)留外邊距：16dp
內(nèi)容左側(cè)有icon或頭像時(shí)預(yù)留外邊距：72dp

垂直間距 狀態(tài)欄：24dp
工具欄：56dp
標(biāo)題和列表項(xiàng)： 72dp
副標(biāo)題： 48dp
內(nèi)容區(qū)域間距：8dp

詳情頁
帶56dp大小浮動(dòng)按鈕的卡片詳情頁。

參考線和外邊距 頁面左右邊緣預(yù)留外邊距：16dp
內(nèi)容左側(cè)有icon或頭像時(shí)預(yù)留外邊距：72dp
在有浮動(dòng)按鈕的頁面上，右對(duì)齊的icons距離右邊緣的距離是32dp

垂直間距 狀態(tài)欄：24dp
工具欄：56dp
列表項(xiàng)： 72dp
內(nèi)容區(qū)域間距：8dp

抽屜式導(dǎo)航
在抽屜式導(dǎo)航zho中，icons、頭像和文本左對(duì)齊，其他icons右對(duì)齊。

參考線和外邊距 頁面左右邊緣預(yù)留外邊距：16dp
內(nèi)容左側(cè)有icon或頭像時(shí)預(yù)留外邊距：72dp
側(cè)邊欄寬：從屏幕右邊緣到側(cè)邊欄的最右邊的距離是：56dp

垂直間距 用戶菜單和列表項(xiàng)：48dp
內(nèi)容區(qū)域間距：8dp
從側(cè)邊欄最右邊到屏幕右邊緣的距離是：56dp

平板端
列表和詳情頁
列表左對(duì)齊，浮動(dòng)按鈕右對(duì)齊。

參考線和外邊距 頁面左右邊緣預(yù)留外邊距：24dp
內(nèi)容左側(cè)有icon或頭像時(shí)預(yù)留外邊距：80dp
卡片左右兩側(cè)內(nèi)邊距：24dp
卡片內(nèi)容左內(nèi)邊距：104dp

垂直間距 狀態(tài)欄以及列表上方間距：24dp
列表項(xiàng)： 64dp
內(nèi)容區(qū)域間距：8dp
列表項(xiàng)：72dp

列表和詳情頁
列表、浮動(dòng)按鈕左對(duì)齊。

參考線和外邊距 頁面左右邊緣預(yù)留外邊距：24dp
Icons垂直對(duì)齊并距離屏幕邊緣：52dp
導(dǎo)航列表項(xiàng)距離屏幕左邊緣內(nèi)邊距：104dp
內(nèi)容距屏幕邊緣的左外邊距：80dp
卡片左右兩側(cè)內(nèi)邊距：32dp
卡片導(dǎo)航列表項(xiàng)的左內(nèi)邊距：96dp

垂直間距 狀態(tài)欄：24dp
工具欄和列表項(xiàng)： 64dp
內(nèi)容區(qū)域間距：8dp
副標(biāo)題、列表項(xiàng)以及滑塊：48dp
標(biāo)題：80dp

桌面端
桌面端的參考線以及間距延續(xù)了移動(dòng)端和平板端的設(shè)計(jì)，但實(shí)際會(huì)根據(jù)窗口大小來進(jìn)行細(xì)調(diào)。

全屏桌面

縮放窗口

水平窗口

垂直窗口

參考線比率（Ratio keylines）

寬高比可用于UI元素和屏幕尺寸。這是我們直接寫為寬：高。
以下是我們建議的寬高比：

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

舉個(gè)例子：
1:1比例表示著元素有著相同高和寬。
寬360dp的圖像寬高比是2:3時(shí)，它的高就是540dp。

以下是有關(guān)寬高比的計(jì)算方式。寬高比以分?jǐn)?shù)形式表示。例如3:2表示為3/2。
寬=寬高比*高
高=寬/寬高比

不同的寬高比

移動(dòng)端上頁面寬高比的例子

元素寬高比

移動(dòng)端上元素寬高比的例子

運(yùn)用增量來調(diào)整尺寸（Sizing by increments）

增量是度量單位。它決定了應(yīng)用中其它元素的大小和位置。

舉個(gè)例子，你可以將一個(gè)增量定義為某個(gè)標(biāo)準(zhǔn)元素的高（如操作欄）。這里我們假設(shè)操作欄高56dp，那么一個(gè)增量就等于56 x 56dp。以此通過這個(gè)我們定義的標(biāo)準(zhǔn)元素的大小來確定其他元素的大小。

再舉個(gè)例子：在一個(gè)增量單位是56dp的情況下，有個(gè)元素的寬是8個(gè)增量單位大小，那么這個(gè)元素的寬就是8*56=448dp。

運(yùn)用增量的參考線一般用于桌面端（用得最多）和平板端，在移動(dòng)端上很少使用。因?yàn)樵隽繑?shù)會(huì)根據(jù)窗口的大小變化而改變。

案例：卡片的寬是水平方向上8倍增量

案例：展開的應(yīng)用欄的高度是2倍增量，右側(cè)面板的寬是5倍增量

在material design UI中，增量可以不同元素間使用。

觸發(fā)區(qū)域大小（Touch target size）

為了確保平衡信息密度和可用性，觸發(fā)區(qū)域大小至少是 48 x 48 dp。在大多數(shù)情況下，觸發(fā)區(qū)域之間應(yīng)該還有8dp或更大的間距。

元素尺寸的寬和高至少是48dp，以此確保在任何屏幕大小下元素的物理尺寸能夠達(dá)到9mm。觸摸屏設(shè)備的觸發(fā)區(qū)域大小建議在7-10mm。

頭像：40dp
Icon：24dp
觸發(fā)區(qū)域尺寸： 48dp

觸發(fā)區(qū)域高：48dp
按鈕高：36dp

觸發(fā)區(qū)域案例

觸發(fā)區(qū)域和按鈕

總結(jié)

以上是生活随笔為你收集整理的2017 Material design 第四章第三节《度量和参考线》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。