三、度量和參考線（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的浮動按鈕在頁面中的對齊關系。

參考線和外邊距 頁面左右邊緣預留外邊距：16dp
內容左側有icon或頭像時預留外邊距：72dp
移動端上水平方向上的外邊距：16dp

垂直間距 狀態欄：24dp
工具欄：56dp
副標題： 48dp
列表項：72dp

參考線和外邊距 頁面左右邊緣預留外邊距：16dp
內容左側有icon或頭像時預留外邊距：72dp

垂直間距 狀態欄：24dp
工具欄：56dp
標題和列表項： 72dp
副標題： 48dp
內容區域間距：8dp

詳情頁
帶56dp大小浮動按鈕的卡片詳情頁。

參考線和外邊距 頁面左右邊緣預留外邊距：16dp
內容左側有icon或頭像時預留外邊距：72dp
在有浮動按鈕的頁面上，右對齊的icons距離右邊緣的距離是32dp

垂直間距 狀態欄：24dp
工具欄：56dp
列表項： 72dp
內容區域間距：8dp

抽屜式導航
在抽屜式導航zho中，icons、頭像和文本左對齊，其他icons右對齊。

參考線和外邊距 頁面左右邊緣預留外邊距：16dp
內容左側有icon或頭像時預留外邊距：72dp
側邊欄寬：從屏幕右邊緣到側邊欄的最右邊的距離是：56dp

垂直間距 用戶菜單和列表項：48dp
內容區域間距：8dp
從側邊欄最右邊到屏幕右邊緣的距離是：56dp

平板端
列表和詳情頁
列表左對齊，浮動按鈕右對齊。

參考線和外邊距 頁面左右邊緣預留外邊距：24dp
內容左側有icon或頭像時預留外邊距：80dp
卡片左右兩側內邊距：24dp
卡片內容左內邊距：104dp

垂直間距 狀態欄以及列表上方間距：24dp
列表項： 64dp
內容區域間距：8dp
列表項：72dp

列表和詳情頁
列表、浮動按鈕左對齊。

參考線和外邊距 頁面左右邊緣預留外邊距：24dp
Icons垂直對齊并距離屏幕邊緣：52dp
導航列表項距離屏幕左邊緣內邊距：104dp
內容距屏幕邊緣的左外邊距：80dp
卡片左右兩側內邊距：32dp
卡片導航列表項的左內邊距：96dp

垂直間距 狀態欄：24dp
工具欄和列表項： 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。

運用增量的參考線一般用于桌面端（用得最多）和平板端，在移動端上很少使用。因為增量數會根據窗口的大小變化而改變。

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

案例：展開的應用欄的高度是2倍增量，右側面板的寬是5倍增量

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

觸發區域大小（Touch target size）

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

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

頭像：40dp
Icon：24dp
觸發區域尺寸： 48dp

觸發區域高：48dp
按鈕高：36dp

觸發區域案例

觸發區域和按鈕

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。