指標及標線

基線網格

所有元件都會對齊8dp的方形基線網格，單字則對齊4dp的基線網格。工具列的圖像對齊4dp的方形基線網格。以上會運用到手機、平板、桌面裝置。

註：DP:與(像素)密度無關的像素單位

參考更多的元件(components)細節.

參考更多的文字排版(typography)細節.

導覽線及間距

手機

手機佈局樣板包含各種螢幕呈現的訊息，這些是關於標線、間距在橫跨螢幕邊緣的元素是如何運作的。在下方的連結可以下載這份樣板。

手機佈局樣板 (Download)

情境

這個畫面呈現了圖標、頭像以及一個2線的列表在左方排列，還有一個56 dp的浮動動作圖樣及文字對齊右方。

垂直標線及水平邊距

垂直標線在距離左右方的邊緣16dp，內容相關的圖示或者是頭像距離左方72dp的邊緣。手機有16dp的水平邊距。

垂直間隔

1. 24dp
2. 56dp
3. 48dp
4. 72dp

情境

這個畫面顯示了圖標、頭像、2線列表、副標以及一個40dp的浮動動作圖樣對齊在左方，另外有圖示對齊在右邊

垂直標線及水平邊距

垂直標線在左右邊的邊距各有16dp，圖示也對齊這標線。內容的圖示、頭像對齊左方邊緣72dp。

手機有16dp的水平邊距。

垂直間隔

1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp

情境

這個畫面展示了對齊在左方的圖示，以及另外的圖示、一個56dp浮動動作圖樣對齊在右方。

垂直標線及水平邊距

圖示在左側邊緣的16dp的垂直標線，內容的圖示以及頭像對其左邊緣72dp。另外有一條額外的標線從右方32dp的邊緣，讓下方賬戶的圖標與浮動動作圖樣對齊。

手機有16dp的水平邊距。

垂直間隔

1. 24dp
2. 56dp
3. 8dp
4. 72dp

情境

這個畫面呈現了圖示、頭像以及段落文字對齊左方，另外浮動動作圖樣以及內文對齊在右方。

垂直標線及水平邊距

垂直標線在左右邊的邊距各有16dp，內容的圖示、頭像對齊左方邊緣72dp。

手機有16dp的水平邊距。

垂直間隔

1. 24dp
2. 56dp
3. 48dp
4. 8dp

情境

這個畫面呈現了側欄的導覽選單，它包含了圖示、頭像以及部分文字在左，而圖示在右方的畫面。

垂直標線及水平邊距

在側欄選單的邊緣16dp建立垂直標線，其內容的圖示以及頭像對齊側欄左邊緣72dp。側欄的寬度等於屏幕的寬度減去操作欄的高度，在這個範例中就是從右側邊緣算起的56dp。

手機有16dp的水平邊距。

垂直間隔

1. 48dp
2. 8dp
3. 56dp

平板

平板的佈局樣板包含了14種不同的屏幕，用來顯示標線以及間距橫跨螢幕邊緣元素是如何運作的。在下方的連結可以下載這份樣板。

平板的佈局樣板 (Download)

1. 24dp
2. 64dp
3. 8dp
4. 72dp

1. 24dp
2. 64dp
3. 8dp
4. 48dp
5. 80dp

桌面

在桌面佈局樣板中包含了4種不同的屏幕，每個還有四種不同的視窗大小，並且顯示標線以及間隔是如何在不同視窗及元件中運作。建立在視窗的尺寸之上，標線與間隔空間將繼承平板以及手機的格線規則。

桌面的佈局樣板 (Download)

標線比

標線比

標線比適用在手機螢幕的寬度，以及UI元素在手機、平板及桌面版的寬度。

螢幕寬

範例

元素寬

Example

增量的標線

增量的標線

定義標線的增量，像是使用操作欄的高度倍數，來確定應用程式中其它的元件尺寸及位置。這些應用大部分用在桌面程式，也會用在平板，但很少用在手機上。增量的數值基準來自應用程式視窗的大小。

觸控點的大小

最小的觸控範圍是48dp，在佈局中必須注意圖示(24dp)或頭像(40dp)的間隔，它們觸控的範圍不可以重疊。

翻譯：Casper