運用內容的結構和包含方法,建立彈性的流程和節奏。
1. 基礎結構
如要開始建立穩固的結構,並維持一致的防護措施,請在版面配置中新增邊界和欄。
邊界會在畫面和內容的左右兩側邊緣提供間距。 小型尺寸的標準邊界值為 16 dp,但邊界應配合大螢幕調整。應用程式的內容和動作必須位於這些邊界內,且與邊界對齊。
您也可以在這個步驟中,確保插邊安全區或插邊。系統資訊列插邊可避免重要動作落在系統資訊列下方。詳情請參閱「在系統資訊列後方繪製內容」。

使用資料欄建構彈性格線結構,確保對齊一致,並將主體區域內的內容劃分成多個直向區塊,為版面配置提供直向定義。內容會顯示在含有欄的螢幕區域。這些欄會為版面配置提供結構,方便您安排元素。

使用欄格線將內容與基礎格線對齊,但保留彈性大小。欄格線可配合不同外型規格,在特定時間點依螢幕大小變更欄大小和欄數,同時允許內容也隨之縮放。請避免過於精細地使用欄格線,因為基線格線的用途是提供一致的間距單位。
請小心建立隨附的列格線,因為這可能會限制不同螢幕方向和板型規格的水平內容縮放,通常建立邊框間距規則即可提供所需的視覺一致性。
開始在版面配置結構中加入副本。 邊界可保護內容,避免與螢幕邊緣重疊。欄可提供一致的間距和對齊結構。
2. 套用限制
使用區隔在視覺上將元素分組。
區隔是指同時使用空白空間和可見元素,在視覺上建立分組。容器是代表封閉區域的形狀。在單一版面配置中,您可以將共用類似內容或功能的元素歸為一組,並使用空白空間、排版和分隔線,將這些元素與其他元素分開。
類似的項目可以使用空白空間或可見分區加以分組,引導使用者瀏覽內容。

隱性區隔會使用空白空間在視覺上將內容分組,建立容器界線,顯性區隔則使用分隔線和資訊卡等物件,將內容分組。
下圖顯示使用隱含式容器來包含標題和主要副本的範例。資料欄格線用於對齊及建立分組。重點會明確顯示在資訊卡中。使用圖示和字體階層,讓視覺區隔更明顯。

3. 放置內容
Android 提供多種方法,可處理各自容器中的內容元素,協助適當放置元素,包括重心、間距和縮放。

Gravity 是在可能較大的容器中放置物件的標準,適用於特定用途。下圖顯示物件的定位位置範例,包括開始和中心 (1)、頂端和中心水平 (2)、左下 (3),以及結尾和右側 (1)。

4. 調整內容
縮放功能對於配合動態內容、裝置螢幕方向和螢幕大小至關重要。元素可以保持固定或縮放。
請務必注意圖片在容器中的顯示方式 (包括縮放和位置),確保圖片在不同裝置環境中都能呈現您想要的樣子,否則圖片的主要焦點可能會遭到截斷、圖片可能過小或過大而無法配合版面配置,或是出現其他不良效果。

未標記的內容可能會以您不預期或不想要的方式顯示。

已釘選的內容
許多元素都內建互動、捲動和定位功能,可搭配使用插槽或架構。您可以修改部分元素,讓這些元素保持固定,而不是對捲動動作做出反應,例如包含重要動作的懸浮動作按鈕 (FAB)。
切合需求
使用 AlignmentLine
建立自訂對齊線,上層版面配置可使用此線對齊和定位其子項。

正確做法

錯誤做法
元件版面配置
Material 3 元件會提供自己的互動和內容設定與狀態。
Compose 提供便利的版面配置,讓您將 Material Design 元件合併成常見的螢幕模式。例如 Scaffold 之類的可組合項會提供位置以容納各種不同的元件和其他螢幕元素。進一步瞭解 Material Design 元件和版面配置。