度量與邊框
基準網絡
所有組件都與間隔為8dp的基準網格對齊。排版/文字(Type)與間隔為4dp的基準網格對齊。在工具條中的圖標同樣與間隔為4dp的基準網格對齊。這些規則適用于移動設備、平板設備以及桌面應用程序。
有關詳細信息請參見組件一節。
有關詳細信息請參見字體排版一節。
邊框與間距
移動設備
移動設備布局模板包含了多種多樣的屏幕和信息，這些信息描述了邊框與間距如何應用于屏幕邊界和元素。下面是一個有關屏幕的實例，這個實例可以通過如下的鏈接獲得。
內容
該屏幕演示圖標、頭像和一個2行文本的列表如何左對齊，以及一個56dp的浮動動作按鈕和文本如何右對齊。
垂直邊框和水平外邊距
左右各有16dp的垂直邊框。帶有圖標或者頭像的內容有72dp的左邊距。
在移動設備上有16dp的水平外邊距。
垂直邊距
24dp
56dp
48dp
72dp
內容
該屏幕演示圖標、頭像、2行文本列表、子標題和40dp的浮動動作按鈕如何左對齊。小圖標右對齊。
垂直邊框和水平邊距
圖標(大小圖標)有16dp的左右垂直邊框。帶有圖標或者頭像的內容有72dp的左邊距。
在移動設備上有16dp的水平外邊距。
垂直邊距
24dp
56dp
72dp
48dp
8dp
內容
該屏幕演示圖標如何左對齊，以及圖標和一個56dp的浮動動作按鈕如何右對齊。
垂直邊框和水平邊距
圖標有16dp的左垂直邊框。帶有圖標或頭像的內容有72dp的左邊距，32dp的右邊距(考慮到56dp的圓形浮動動作按鈕)。這樣圓形浮動動作按鈕下的圖標也對齊了。
在移動設備上有16dp的水平外邊距。
垂直邊距
24dp
56dp
8dp
72dp
內容
該屏幕演示圖標、頭像和文本如何左對齊，浮動動作按鈕、圖標和文本如何右對齊。
垂直邊框和水平邊距
圖標有16dp的左右垂直邊框。帶有圖標或頭像的內容區域左對齊，距左邊界72dp。
在移動設備上有16dp的水平邊距。
垂直邊距
24dp
56dp
48dp
8dp
內容
該屏幕演示了側邊導航菜單的寬度，以及圖標、頭像和文本如何左對齊，小圖標如何右對齊。
垂直邊框和水平邊距
圖標距側邊導航菜單的左右邊界分別有16dp的垂直邊框。帶有圖標或者頭像的內容距側邊導航菜單的左邊界72dp。側邊導航菜單的寬度等于屏幕的寬度減去動作條的高度，即在本例中距屏幕右側56dp的寬。
在移動設備上有16dp的水平外邊距。
垂直邊距
48dp
8dp
56dp
平板設備
平板設備布局模板包含了14種不同的屏幕，顯示了邊框和邊距如何應用于屏幕的邊界和元素。下面的實例是14種模板的兩個，可以通過下面的鏈接獲取。
24dp
64dp
8dp
72dp
24dp
64dp
8dp
48dp
80dp
桌面應用程序
桌面應用程序布局模板包含了4個不同的屏幕，每一個屏幕又包括了4個不同的窗口尺寸，顯示了邊框和邊距如何應用于窗口和元素。下面是一個屏幕的實例，可以通過下面所示的鏈接下載。基于不同的窗口尺寸，邊框和邊距塊會沿襲平板設備和移動設備的網格規則。
比率邊框
應用于移動設備屏幕的寬度和移動設備、平板設備以及桌面應用程序中UI元素的寬度。
屏幕的寬度
示例
元素的寬度
示例
增量邊框
增量邊框
增量邊框定義了一個增量，比如動作條的高度，然后使用幾倍于這個增量的數字來決定應用中其它元素的尺寸和位置。
大多數應用于桌面應用程序，有些也適用于平板設備，很少應用在移動設備中。增量的數量會根據窗口的尺寸來改變。
觸摸目標尺寸
最小的觸摸目標尺寸是48dp。在布局中，當為圖標(24dp)或者頭像(40dp)設置邊距時，要時刻記得。觸摸目標不能重疊。
非常感謝這些辛苦翻譯的小伙伴！！
文章轉自：http://design.1sters.com/
=========================關于學ui網=========================
xueui.cn 學ui網發布高質量ui設計教程和設計分享經驗，希望打造一個最好的ui學習教程平臺！
)
