響應式UI相關

摘要： Material Design 中的響應式佈局可以適配任何尺寸的螢幕。這個 UI 指南包括：用於確保佈局一致性的彈性網格，在不同的螢幕上內容的斷點細節，以及應用從小螢幕到大螢幕如何縮放的說明。 斷點 為了獲得最佳使用者體驗，Material Design 應該為以下斷點適配佈局：480...

Material Design 中的響應式佈局可以適配任何尺寸的螢幕。這個 UI 指南包括：用於確保佈局一致性的彈性網格，在不同的螢幕上內容的斷點細節，以及應用從小螢幕到大螢幕如何縮放的說明。

斷點

為了獲得最佳使用者體驗，Material Design 應該為以下斷點適配佈局：480、600、840、960、1280、1440、以及 1600dp。

1. 佈局中的摘要和詳細資訊檢視

• 佈局寬度小於 600dp 時，可以使用單級的內容層次（可以是摘要或詳細資訊，但兩者不能同時顯示）填滿螢幕。
• 佈局寬度超過 600dp 時，可以同時放置兩級內容層次（可以同時顯示摘要和詳細資訊）。

2. 最大螢幕寬度

佈局寬度超過 1600dp 時，可以讓佈局寬度一直增加，直到達到最大寬度。此時，網格可以執行以下的某一項：

• 變成居中對齊，在內容區域兩側增加外邊距
• 保持左對齊，同時不斷增加內容右側外邊距
• 內容寬度繼續增加，同時展示出更多額外的內容

斷點系統

介面行為

當螢幕大小改變時，UI 會使用下列特定的行為來適配螢幕。

模式

出現

• 在小螢幕中隱藏的 UI元素，隨著螢幕可用空間的增加，可能會出現；
• 側邊欄這樣的元素可能會變得可見；
• 一個簡單的 UI 可能會出現更多強大或複雜的選項；
• 在小螢幕上，只有點選某個元素才會出現的內容，當螢幕上有更多可用空間時，可能會預設顯示。

變形

-一個 UI 元素可以從一種格式變形成另一種格式；

-側邊欄導航可能變形成 Tab 選項卡；

-列表可能變形成網格列表；

-選單可能變形成工具欄中的圖示。

重排

-UI 可以重排到可用空間中;

-來自單列格式的元素可以重新排列成多種組合來填滿內容區;

-水平 Tab 選項卡可以重排成垂直列表;

-元素可以基於新螢幕的比例或裝置方向在元件內部重排。

擴充套件

-UI 可能擴充套件成更大的區域；

-內容卡片可以擴充套件來填充新的空間；

-對話方塊可以根據內容或特定的增量按比例擴充套件。

位移

-UI 元件可能會移動到更合適的位置；

-小螢幕上的底部卡片可能會作為選單重新定位；

-浮動操作按鈕（FAB）可以移動到相對其他元素更顯眼的位置。