四、結構（Structure）
UI區域（UI regions）
關於通過在z軸上排列元素以實現正確的行為和投影的指南，請參見 環境 和 高度和陰影 部分。
結構：移動端
這個結構包含一個固定的應用欄和一個浮動按鈕。還有一個可選擇的底部欄（bottom bar），它可以新增附加功能和溢位操作。最後是側邊導航選單，它能蓋過所有其他結構元素（相對其他元素Z軸最高）。
結構：平板端
這個結構包含一個固定的應用欄和一個浮動按鈕。平板端也擁有和移動端一樣的底部欄和側邊導航選單。右導航選單可以臨時顯示，也可以固定在頁面中永久顯示。
結構：桌面端
這個結構包含一個固定的應用欄和一個浮動按鈕。應用欄也擁有和移動端、平板端一樣的底部欄。在可能的情況下，視窗控制元件都收入進應用欄中。
側邊導航選單可以佔用整個螢幕高度 （蓋過應用欄），並可臨時顯示或固定在頁面中永久顯示。側邊導航選單以及內容區域可以有自己的次級工具欄（tabs、調色盤或次級操作）。
第二行從左到右：工具欄、次級工具欄和工具欄
第三回從左到右：側邊導航選單、內容區域和右導航選單
底部：浮動按鈕
UI區域
定義一個基礎的水平或垂直分隔。
不要把介面分割成太多的區域，產生類似L形狀。 相反，利用留白來勾勒出次級空間。
用卡片和浮動按鈕來打破邊緣。
某些特定行為需要用到卡片（cards）對內容進行組織。此外，如果某些情況資訊分組能夠比留白或分隔的方式提供更多的分隔作用，那推薦使用卡片。
工具欄（toobars）
工具欄有著多種功能，它可以用不同的方式來表現。
應用欄（App bar）
應用欄原先在Android系統中被稱為操作欄（action bar），它是一種特殊的工具欄，一般用於品牌、導航、搜尋和操作。
應用欄的左側導航圖示可以表示：
開啟側邊導航的控制元件
返回（應用層級導航）
如果頁面不需要導航則可以省略
應用欄中的標題反映的是當前頁面。它可以是該應用的名稱、頁面標題或頁面篩選等。
應用欄右側的icon與應用相關操作關聯。比如選單icon是用來開啟溢位選單，其中可能包含有次級操作以及選單選項（如幫助、設定或反饋）。
左邊：導航icon、標題、篩選icon
右邊：操作和選單icon
標題顏色
在一個應用欄中，所有的icons應是同一種顏色的。
如果需要增加視覺層次，標題可以使用與icons不一樣的顏色。標題的顏色最好用白色和黑色，因為這樣能夠區分和背景的關係。
度量標準（Metrics）
預設的高：
移動端橫屏: 48dp
移動端豎屏: 56dp
平板/桌面端: 64dp
對於展開的應用欄，其高度為預設高度加上內容的增量高度。
應用欄左、右內邊距: 16dp
應用欄icon上、下、左內邊距: 16dp
應用欄標題左內邊距: 72dp
應用欄標題下內邊距: 20dp
標題區高: 80dp
標題區下內邊距: 8dp
輸入區高: 72dp
輸入區下內邊距：16dp
應用欄icon的上、下內邊距：20dp
應用欄左、右icon內邊距：24dp
應用欄內容的左內邊距：20dp
密度（Density）
當滑鼠和鍵盤為主要的輸入方式時，元素尺寸可以被壓縮以適應密集的頁面佈局。
應用欄內容左、右內邊距: 24dp
應用欄內容的左內邊距（有icon或頭像情況下）: 80dp
Icon高（包含點選區域）： 40dp
應用欄內容左、右內邊距: 24dp
應用欄內容的左內邊距（有icon或頭像情況下）: 80dp
選單（Menus）
選單是一張暫時顯示的sheet。選單與應用欄重疊，而不是作為應用欄的一個擴充套件。
系統欄（System bars）
狀態列/視窗欄（Status bar/window bar）
在Android裡，狀態列包含通知和系統icon。在Chrome裡，頂部欄包含有視窗控制元件（最小化，全屏和關閉）。在Chrome app中，頂部欄可以消失，視窗控制元件可以被納入應用欄裡。
尺寸
Android的狀態列高: 24dp
Chrome的視窗高: 32dp
全屏
有些內容在全屏模式下體驗會更好，如視訊、遊戲、書籍和幻燈片。全屏模式可以讓使用者沉浸在內容中，並能夠有效減少注意力分散和使用者跳出。
全屏模式有幾種型別：
Lean back
沉浸式（Immersive）
熄燈模式（Lights Out）
Lean back
這種模式最適合在觀看內容的同時與有限的螢幕進行互動，如視訊。
互動：輕觸螢幕任何地方顯示系統欄。
沉浸式
這種模式非常適合使用者需要與螢幕進行大量互動時，如玩遊戲或查閱圖片。此外，當有需要時，可以顯示和隱藏應用的系統欄。
互動：從螢幕的任何位置滑動，系統欄會出現。第一次使用全屏時，要有手勢提示。
邊緣滑動例外：應用了邊緣滑動手勢執行操作的應用也應該在使用該手勢時顯示系統欄。
熄燈模式（Lights Out）
在熄燈模式下，如果幾秒鐘不進行操作，那操作欄和狀態列會逐漸淡化，並變為不可用狀態。導航欄顯示為暗灰色，但它仍然可用並會響應觸控。
深色的狀態列
預設情況下，狀態列或視窗欄的顏色深於應用欄的顏色。它也可以使用頁面中其他元素中的顏色或使用半透明。
淺色的狀態列
淺色狀態列配合深色icon，可以作為代替深色狀態列的一種方法。
Android的導航欄（Android navigation bar）
Android導航欄中的裝置導航控制元件：後退（Back）鍵、Home鍵以及Overview鍵。
高: 48dp
顏色變體
導航欄可以是不透明的、半透明的或完全透明的。
Chrome OS shelf
用於啟動應用，顯示應用icon和系統設定。
高：56dp
側邊導航欄（Side nav)
根據需要，側邊導航欄可以在頁面中固定一直顯示，也可以暫時出現在頁面中。側邊導航欄可以放置在左側也可以放置在右側。
理想情況下，左側導航欄的內容應該是導航或一些基礎特性，而右側導航欄的內容則是頁面中主要內容的次要資訊。
參見 導航欄
結構
側邊導航欄可以在頁面中固定一直顯示，也可以暫時出現在頁面中。暫時顯示的側邊導航欄覆蓋內容區域，而永久固定的導航皮膚則出現在內容區域的旁邊或下方。
螢幕大小可以決定使用永久固定還是暫時顯示的導航欄。有足夠的空間的話可以使用永久固定的導航欄並對內容進行響應式調整。如果空間不足，導航欄必須是暫時出現然後自動消失的。
尺寸
移動端：
寬度=螢幕寬度 − 56dp
最大寬度：320dp
最大寬度僅適用於使用左側的導航欄。使用右側導航時，皮膚可以覆蓋整個螢幕。
桌面端：
左側導航欄最大寬度是400dp。右側導航欄可以根據內容的不同而變化。
線框圖（Whiteframes）
線框圖提供了各種佈局結構下使用一致的面、層和陰影方法。
關於線框圖的下載和其他資訊，請參見 資源