三、度量和參考線（Metrics & keylines）
基線網格（Baseline grids）
無論是移動端、平板端還是桌面端上，所有的應用元件都對齊至8dp單位的方形基線網格上。但工具欄中的圖則對齊至4dp單位的方形基線網格上。
文字於4dp單位的方形基線網格對齊。詳細資訊請參見 [排material.google.com/style/typog…)
參考線和間距（Keylines and spacing）
以下模板包含參考線和間距指南。還有在移動端、平板端和桌面端上UI元素的佈局效果。
模板：
移動端上的佈局模板
2.23MB（.ai）
平板端上的佈局模板
1.39MB（.ai）
桌面端上的佈局模板
89.40MB（.ai）
移動端
列表
下圖演示了頭像、列表以及一個56dp的浮動按鈕在頁面中的對齊關係。
內容左側有icon或頭像時預留外邊距：72dp
移動端上水平方向上的外邊距：16dp
工具欄：56dp
副標題： 48dp
列表項：72dp
內容左側有icon或頭像時預留外邊距：72dp
工具欄：56dp
標題和列表項： 72dp
副標題： 48dp
內容區域間距：8dp
詳情頁
帶56dp大小浮動按鈕的卡片詳情頁。
內容左側有icon或頭像時預留外邊距：72dp
在有浮動按鈕的頁面上，右對齊的icons距離右邊緣的距離是32dp
工具欄：56dp
列表項： 72dp
內容區域間距：8dp
抽屜式導航
在抽屜式導航zho中，icons、頭像和文字左對齊，其他icons右對齊。
內容左側有icon或頭像時預留外邊距：72dp
側邊欄寬：從螢幕右邊緣到側邊欄的最右邊的距離是：56dp
內容區域間距：8dp
從側邊欄最右邊到螢幕右邊緣的距離是：56dp
平板端
列表和詳情頁
列表左對齊，浮動按鈕右對齊。
內容左側有icon或頭像時預留外邊距：80dp
卡片左右兩側內邊距：24dp
卡片內容左內邊距：104dp
列表項： 64dp
內容區域間距：8dp
列表項：72dp
列表和詳情頁
列表、浮動按鈕左對齊。
Icons垂直對齊並距離螢幕邊緣：52dp
導航列表項距離螢幕左邊緣內邊距：104dp
內容距螢幕邊緣的左外邊距：80dp
卡片左右兩側內邊距：32dp
卡片導航列表項的左內邊距：96dp
工具欄和列表項： 64dp
內容區域間距：8dp
副標題、列表項以及滑塊：48dp
標題：80dp
桌面端
桌面端的參考線以及間距延續了移動端和平板端的設計，但實際會根據視窗大小來進行細調。
縮放視窗
參考線比率（Ratio keylines）
寬高比可用於UI元素和螢幕尺寸。這是我們直接寫為寬：高。
以下是我們建議的寬高比：
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3
舉個例子：
1:1比例表示著元素有著相同高和寬。
寬360dp的影像寬高比是2:3時，它的高就是540dp。
以下是有關寬高比的計算方式。寬高比以分數形式表示。例如3:2表示為3/2。
寬=寬高比*高
高=寬/寬高比
運用增量來調整尺寸（Sizing by increments）
增量是度量單位。它決定了應用中其它元素的大小和位置。
舉個例子，你可以將一個增量定義為某個標準元素的高（如操作欄）。這裡我們假設操作欄高56dp，那麼一個增量就等於56 x 56dp。以此通過這個我們定義的標準元素的大小來確定其他元素的大小。
再舉個例子：在一個增量單位是56dp的情況下，有個元素的寬是8個增量單位大小，那麼這個元素的寬就是8*56=448dp。
運用增量的參考線一般用於桌面端（用得最多）和平板端，在移動端上很少使用。因為增量數會根據視窗的大小變化而改變。
觸發區域大小（Touch target size）
為了確保平衡資訊密度和可用性，觸發區域大小至少是 48 x 48 dp。在大多數情況下，觸發區域之間應該還有8dp或更大的間距。
元素尺寸的寬和高至少是48dp，以此確保在任何螢幕大小下元素的物理尺寸能夠達到9mm。觸控式螢幕裝置的觸發區域大小建議在7-10mm。
Icon：24dp
觸發區域尺寸： 48dp
按鈕高：36dp