2017 Material design 第四章第三節《度量和參考線》

3、度量和參考線（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

觸發區域案例

觸發區域和按鈕