本文是Material Design設計規範總結的第二部分，是進行UI設計與前端開發的必備參考資料。
八、佈局
(1)所有可操作元素最小點擊區域尺寸：48dp X 48dp。
(2)柵格系統的最小單位是8dp，一切距離、尺寸都應該是8dp的整數倍。
以下是一些常見的尺寸與距離：
頂部狀態欄高度：24dp
Appbar最小高度：56dp
底部導航欄高度：48dp
懸浮按鈕尺寸：56x56dp/40x40dp
用戶頭像尺寸：64x64dp/40x40dp
小圖標點擊區域：48x48dp
側邊抽屜到屏幕右邊的距離：56dp
卡片間距：8dp
分隔線上下留白：8dp
大多元素的留白距離：16dp
屏幕左右對齊基線：16dp
文字左側對齊基線：72dp
(3)另外注意56dp這個數字，許多尺寸可變的控件，比如對話框、菜單等，寬度都可以按56的整數倍來設計。
(4)還有非常多規範，不詳細列舉，遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多，距離與尺寸要相應增大。
九、組件
1.底部彈框（Bottom Sheets）
通常以列表形式出現，支持上下滾動；也可以是網格式的。
2.按鈕（Buttons）
按鈕分爲懸浮按鈕、凸起按鈕和扁平按鈕3種。重要性依次遞減。
最重要且隨處用到的操作，建議使用懸浮按鈕。信息較多時，選用凸起按鈕可以有效突出重要操作，但注意紙片不要疊太多層。扁平按鈕適合用在簡單的界面，例如對話框中。懸浮按鈕有兩種尺寸：56x56dp/40x40dp。
使用懸浮按鈕要遵循以下規則：
(1)建議只用一個懸浮按鈕
(2)懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話框、側邊抽屜和菜單的邊緣
(3)懸浮按鈕不能被其他元素蓋住，也不能擋住其他按鈕
(4)列表滾動至底部時，懸浮按鈕應該隱藏，防止它擋住列表項
(5)懸浮按鈕的位置不能隨意擺放，可以貼着左右兩邊的對齊基線
(6)懸浮按鈕通常觸發正向的操作，添加、創建、收藏之類。不能觸發負面、破壞性或不重要的操作，也不應該有數字角標。
3.卡片（Cards）
即使在同一個列表中，卡片的內容和佈局方式也可以不一樣。卡片統一帶有2dp的圓角。
在以下情況考慮使用卡片：
(1)同時展現多種不同內容
(2)卡片內容之間不需要進行比較
(3)包含了長度不確定的內容，比如評論
(4)包含豐富的內容與操作項，比如贊、滾動條、評論
(5)本該是列表，但文字超過3行
(6)本該是網格，但需要展現更多文字
卡片最多有兩塊操作區域。輔助操作區至多包含兩個操作項，更多操作需要使用下拉菜單。其餘部分都是主操作區。
4.芯片（Chips）
狹小空間內表現複雜信息的一個組件，比如日期、聯繫人選擇器。
5.對話框（Dialogs）
(1)對話框包含標題、內容和操作項。點擊對話框外的區域，不會關閉對話框。
(2)通常情況，避免出現滾動條。空間不足時允許滾動，滾動條建議默認顯示。
(3)對話框中，取消類操作項放在左邊，引起變化的操作項放在右邊。要寫明操作項的具體效果，不要只寫“是”和“否”。標題文字要明確，即使不讀正文內容也能知道在幹什麼，標題不要用“確定嗎”這樣的含糊措辭。
(4)在對話框中改變內容，不會提交數據，點擊確定後，纔會發生變化。對話框上方不能再層疊對話框。
(5)還有一種簡易對話框，不帶操作項。點擊列表內容觸發相應操作，並關閉對話框。點擊簡易對話框外面，對話框會關閉，操作取消。
(6)對話框可以是全屏式的，全屏對話框上方可以再層疊對話框。左圖是一個普通界面，其中的任何改動立即生效。右圖是全屏對話框，其中任何改動，要點擊保存後才生效，點擊X取消。
(7)全屏對話框右上角的操作項，可以是諸如保存、發送、添加、分享、更新、創建之類的操作，不要使用完成、OK、關閉這樣的含糊措辭。
(8)只有必填項都填了，右上角的操作項才變爲可點擊狀態。
(9)內容發生了改變，點左上角的X，需要有個確認對話框，提示是否忽略修改。內容沒有發生改變，點左上角的X，直接退出全屏對話框。
(10)對話框的四周留白比較大，通常是24dp。
6.分隔線（Dividers）
(1)內嵌分隔線：列表中有頭像、圖片等元素時，使用內嵌分隔線，左端與文字對齊。
(2)通欄分隔線：沒有頭像、圖標等元素時，需要用通欄分隔線。
(3)圖片本身就起到劃定區域的作用，相冊列表不需要分隔線。
(4)謹慎使用分隔線，留白和小標題也能起到分隔作用。能用留白的地方，優先使用留白。分隔線的層級高於留白。
(5)通欄分隔線的層級高於內嵌分隔線。
7.網格（Grids）
(1)網格由單元格構成，單元格中的瓦片（圖片）用來承載內容。
(2)瓦片（圖片）可以橫跨多個單元格。
(3)瓦片（圖片）包含主操作區和副操作區，副操作區的位置可以在上下左右4個角落。在同一個網格中，主、副操作區的內容與位置要保持一致。兩者的操作都應該直接生效，不能觸發菜單。
(4)網格只能垂直滾動。單個瓦片（圖片）不支持滑動手勢，也不鼓勵使用拖放操作。
(5)網格中的單元格間距是2dp或8dp。
8.列表（Lists）
(1)列表由行構成，行內包含瓦片（圖片）。如果列表項內容文字超過3行，請改用卡片。如果列表項的主要區別在於圖片，請改用網格。
(2)列表包含主操作區與副操作區。副操作區位於列表右側，其餘都是主操作區。在同一個列表中，主、副操作區的內容與位置要保持一致。
(3)在同一個列表中，滑動手勢操作保持一致。
(4)主操作區與副操作區的圖標或圖形元素是列表控制項，列表的控制項可以是勾選框、開關、拖動排序、展開/收起等操作，也可以包含快捷鍵提示、二級菜單等提示信息。
9.菜單（Menus）
(1)順序固定的菜單，操作頻繁的選項放在上面。順序可變的菜單，可以把之前用過的選項排在前面，動態排序。菜單儘量不要超過2級。
(2)當前不可用的選項要顯示出來，讓用戶知道在特定條件可以觸發這些操作。
(3)菜單原地展開，蓋住當前選項，當前選項應該成爲菜單的第一項。
(4)菜單的當前選項，始終與當前選項水平對齊。
(5)靠近屏幕邊緣時，位置可適當錯開。
(6)菜單過長時，需要顯示滾動條。
(7)菜單從當前選項固定位置展開，不要跟隨點擊位置改變。
(8)菜單到上下留出8dp距離。
10.選擇器（Pickers）
日期和時間選擇器是固定組件，在小屏幕設備中，通常以對話框形式展現。
11.進度條與動作（Progress & activity）
(1)線形進度條只出現在紙片的邊緣。
(2)環形進度條也分時間已知和時間未知兩種。
(3)環形進度條可以用在懸浮按鈕上。
(4)加載詳細信息時，也可以使用進度條。
(5)下拉刷新的動畫比較特殊，列表不動，出現一張帶有環形進度條的紙片。
12.滑塊（Sliders）
(1)滑塊左右兩邊可以放置圖標，或是可編輯文本框。
(2)非連續的滑塊，需要標出具體數值。
13.警示框（Snackbars & toasts）
(1)Snackbars至多包含一個操作項，不能包含圖標。不能出現一個以上的Snackbars。
(2)Snackbars在移動設備上，出現在底部。在PC上，應該懸浮在屏幕左下角。
(3)不一定要用戶響應的提示，可以使用Snackbars。非常重要的提示，必須用戶來決定的，應該用對話框。
(4)Snackbars不能遮擋住懸浮按鈕，懸浮按鈕要上移讓出位置。
(5)Snackbars的留白比較大，24dp。
(6)toasts和Snackbars類似，樣式和位置可以自定義，建議遵循Snackbars的規則設計。
14.小標題（Subheaders）
(1)小標題是列表或網格中的特殊瓦片（元素），描述列表內容的分類、排序等信息。
(2)滾動時，如果列表較長，小標題會固定在頂部，直到下一個小標題將它頂上去。
(3)存在浮動按鈕時，小標題要讓出位置，與文字對齊。
15.開關&複選框（Switches & Checkbox）
(1)必須所有選項保持可見時，才用Radio button。不然可以使用下拉菜單，節省空間。
(2)在同一個列表中有多項開關，建議使用Checkbox。
(3)單個開關項建議使用Switch。
16.切換標籤（Tabs）
(1)tab只用來展現不同類型的內容，不能當導航菜單使用。tab至少2項，至多6項。
(2)超出6項，tab需要變爲滾動式，左右翻頁。
(3)tab文字要顯示完整，字號保持一致，不能折行，文字與圖標不能混用。
(4)tab選中項的下劃線高度是2dp。
17.文本字段（Text fields）
(1)簡單一根橫線就能代表輸入框，可以帶圖標。
(2)激活狀態和錯誤狀態，橫線的寬度變爲2dp，顏色改變。
(3)輸入框點擊區域高度至少48dp，但橫線並不在點擊區域的底部，還有8dp距離。
(4)輸入框提示文字，可以在輸入內容後，縮小停留在輸入框左上角，整個點擊區域增高，提示文字也是點擊區域的一部分。
(5)通欄輸入框是沒有橫線的，這種情況下通常有分隔線將輸入框隔開。
(6)右下角可以加入字數統計。字數統計不要默認顯示，字數接近上限時再顯示出來。
(7)通欄輸入框也可以有字數統計，單行的字數統計顯示在同一行右側。
(8)錯誤提示顯示在輸入框的左下方。默認提示文本可以轉換爲錯誤提示。
(9)字數限制與錯誤提示都會使點擊區域增高。
(10)同時有多個輸入框錯誤時，頂部要有一個全局的錯誤提示。
(11)輸入框儘量帶有自動補全功能。
18.提示（Tooltips）
(1)提示只用在小圖標上，文字不需要提示。鼠標懸停、獲得焦點、手指長按都可以觸發提示。
(2)上圖是錯誤例子。提示不能包含富文本，不需要三角箭頭。
(3)觸摸提示（左）和鼠標提示（右）的尺寸是不同的，背景都帶有90%的透明度。
19.側邊抽屜（Navigation drawer）
(1)側邊抽屜從左側滑出，佔據整個屏幕高度，遵循普通列表的佈局規則。手機端的側邊抽屜距離屏幕右側56dp。
(2)側邊抽屜支持滾動。如果內容過長，設置和幫助反饋可以固定在底部。抽屜收起時，會保留之前的滾動位置。
(3)列表較短不需要滾動時，設置和幫助反饋跟隨在列表後面。
十、設置界面
(1)設置和幫助反饋通常放在側邊抽屜中。如果沒有側邊抽屜，則放在Appbar的下拉菜單底部。
(2)設置界面只能包含設置項；諸如關於、反饋之類的界面，入口應該放在其他地方。
(3)設置項使用通欄分隔線來分組。7項以下不必分組。如果某項獨立一組，考慮把它放在頂部（重要）或放在底部的“其他”一欄中（不重要）。設置項較多時嘗試合併，比如把兩個相關的勾選項合併成一個多選項。設置項非常多時，使用子界面。
十一、易用性
1.無障礙設計
(1)material design很重視用戶的廣度，應該儘量照顧到殘障人士的體驗。設計時考慮以下使用場景：
沒有聲音
沒有色彩
手機開啓了高對比度模式
手機畫面放大
沒有視覺信息，使用屏幕閱讀器
只能通過語音控制
以上多項結合
(2)並注意以下問題：
無鼠標、純鍵盤操作。鼠標懸停顯示信息，也要通過其他方式展現。
考慮大字號情況下的使用體驗。
不要只通過顏色表達某些信息。
音頻信息也要提供文字或其他視覺呈現。
爲圖片和視頻提供備用的文字信息。
2.本地化
爲阿拉伯語、希伯來語、波斯語用戶設計相反的界面，他們的書寫和閱讀習慣是從右到左的。