標(biāo)尺與參考線

基線網(wǎng)格

所有組件對(duì)齊到 8dp 方形基線網(wǎng)格。表單對(duì)齊到 4dp 基線網(wǎng)格。圖標(biāo)在工具欄調(diào)整到一個(gè) 4dp 的基線網(wǎng)格。這適用于手機(jī)，平板電腦和臺(tái)式機(jī)。

查看組件的詳細(xì)信息

參見排版的詳細(xì)信息

參考線和間距

手機(jī)

移動(dòng)布局模板要適合各種各樣的屏幕，關(guān)于信息如何處理屏幕邊緣的間距橫跨屏幕邊緣和排版頁面元素。附件中有些例子可以參考。

這張截圖顯示了如何圖標(biāo)，頭像，和一個(gè)2行列表之間排列方式，左邊 56dp 浮動(dòng)和 右邊的文字對(duì)齊。

垂直參考線在屏幕的左側(cè)和右側(cè)邊緣各留16dp 。帶圖標(biāo)或頭像相關(guān)的內(nèi)容居左留 72dp的間距，16 dp 手機(jī)橫向邊距。

垂直間距

1. 24dp

2. 56dp

3. 48dp

4. 72dp

這張截圖顯示了如何圖標(biāo)，頭像，一個(gè)2行列表，副標(biāo)題的排列方式，和一個(gè)40dp 浮動(dòng)行動(dòng)對(duì)齊左側(cè),圖標(biāo)排列在右邊。

垂直參考線在圖標(biāo)的左邊和右邊各留 16dp。帶圖標(biāo)或頭像相關(guān)的內(nèi)容向左對(duì)齊 72dp。 

16dp 手機(jī)橫向邊距。

垂直間距

1. 24dp

2. 56dp

3. 72dp

4. 48dp

5. 8dp

這張截圖顯示了圖標(biāo)左對(duì)齊，和一個(gè) 56dp 浮動(dòng)行動(dòng)對(duì)齊在右側(cè)。

垂直參考線在圖標(biāo)的左邊和右邊各留 16dp。帶圖標(biāo)或頭像相關(guān)的內(nèi)容向左對(duì)齊 72dp。添加了另一條的32dp 參考線，留給圓形 56 dp 浮動(dòng)動(dòng)作，這樣使得下面的元素對(duì)齊。

16dp 手機(jī)橫向邊距。

垂直間距

1. 24dp

2. 56dp

3. 8dp

4. 72dp

這張截圖顯示了如何圖標(biāo)，頭像，和文本對(duì)齊在左側(cè)，以及如何在右側(cè)浮動(dòng)圖標(biāo)和文字對(duì)齊的動(dòng)作。

垂直參考線在圖標(biāo)的左邊和右邊各留 16dp。帶圖標(biāo)或頭像相關(guān)的內(nèi)容向左對(duì)齊 72dp。 

16dp 手機(jī)橫向邊距。

垂直間距

1. 24dp

2. 56dp

3. 48dp

4. 8dp

這張截圖顯示一個(gè)側(cè)面導(dǎo)航菜單，和左邊圖標(biāo)，頭像，和文本對(duì)齊和右側(cè)的注釋圖標(biāo)。

垂直參考線在側(cè)導(dǎo)航圖標(biāo)的左邊和右邊各留 16dp。帶圖標(biāo)或頭像相關(guān)內(nèi)容對(duì)齊 72dp 從側(cè)面導(dǎo)航的左邊緣。側(cè)面導(dǎo)航的寬度等于屏幕的寬度減去操作欄，或在這種情況下，從屏幕右邊緣56dp 的高度。

16dp 手機(jī)橫向邊距。

垂直間距

1. 48dp

2. 8dp

3. 56dp

平板

平板電腦布局模板包括14個(gè)不同的屏幕，參考線和間距如何跨屏幕邊緣和元素的布局。下面是兩個(gè)包含在下載的14的屏幕的示例。

1. 24dp

2. 64dp

3. 8dp

4. 72dp

1. 24dp

2. 64dp

3. 8dp

4. 48dp

5. 80dp

桌面

桌面布局模板包括4個(gè)不同的屏幕各有4個(gè)不同的窗口大小，參考線和間距如何在窗口和元素布局。下面是一個(gè)截圖是在下載可用的例子。根據(jù)窗口大小，拼版和間隔塊狀化繼承來自平板電腦和移動(dòng)網(wǎng)格規(guī)則。

參考線比例

適用于手機(jī)屏幕的寬度和UI元素的寬度手機(jī)，平板電腦和臺(tái)式機(jī)上。

寬度比例

例子

寬度比例

例子

遞增參考線

遞增關(guān)鍵線定義的增量，如在操作欄的高度，并使用該增量的整數(shù)倍，以確定在應(yīng)用程序中其它元素的大小和位置。 

適用于大部分臺(tái)式機(jī)，常用的平板電腦，部分手機(jī)設(shè)備。根據(jù)窗口大小遞增值會(huì)有所不同。

觸摸目標(biāo)大小

最小觸摸目標(biāo)大小為48dp。圖標(biāo)間距（24dp）,頭像（40dp）.

在布局時(shí)，請(qǐng)記住這一點(diǎn)。觸摸區(qū)域不應(yīng)該重疊。