內容組成與結構

運用內容的結構和包含方法，建立彈性的流程和節奏。

1. 基礎結構

如要開始建立穩固的結構，並維持一致的防護措施，請在版面配置中新增邊界和欄。

邊界會在畫面和內容的左右兩側邊緣提供間距。 小型尺寸的標準邊界值為 16 dp，但邊界應配合大螢幕調整。應用程式的內容和動作必須位於這些邊界內，且與邊界對齊。

您也可以在這個步驟中，確保插邊安全區或插邊。系統資訊列插邊可避免重要動作落在系統資訊列下方。詳情請參閱「在系統資訊列後方繪製內容」。

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

使用欄格線將內容與基礎格線對齊，但保留彈性大小。欄格線可配合不同外型規格，在特定時間點依螢幕大小變更欄大小和欄數，同時允許內容也隨之縮放。請避免過於精細地使用欄格線，因為基線格線的用途是提供一致的間距單位。

請小心建立隨附的列格線，因為這可能會限制不同螢幕方向和板型規格的水平內容縮放，通常建立邊框間距規則即可提供所需的視覺一致性。

2. 套用限制

使用區隔在視覺上將元素分組。

區隔是指同時使用空白空間和可見元素，在視覺上建立分組。容器是代表封閉區域的形狀。在單一版面配置中，您可以將共用類似內容或功能的元素歸為一組，並使用空白空間、排版和分隔線，將這些元素與其他元素分開。

類似的項目可以使用空白空間或可見分區加以分組，引導使用者瀏覽內容。

隱性區隔會使用空白空間在視覺上將內容分組，建立容器界線，顯性區隔則使用分隔線和資訊卡等物件，將內容分組。

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

3. 放置內容

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

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

4. 調整內容

縮放功能對於配合動態內容、裝置螢幕方向和螢幕大小至關重要。元素可以保持固定或縮放。

請務必注意圖片在容器中的顯示方式 (包括縮放和位置)，確保圖片在不同裝置環境中都能呈現您想要的樣子，否則圖片的主要焦點可能會遭到截斷、圖片可能過小或過大而無法配合版面配置，或是出現其他不良效果。

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

已釘選的內容

許多元素都內建互動、捲動和定位功能，可搭配使用插槽或架構。您可以修改部分元素，讓這些元素保持固定，而不是對捲動動作做出反應，例如包含重要動作的懸浮動作按鈕 (FAB)。

切合需求

使用 AlignmentLine 建立自訂對齊線，上層版面配置可使用此線對齊和定位其子項。

元件版面配置

Material 3 元件會提供自己的互動和內容設定與狀態。

Compose 提供便利的版面配置，讓您將 Material Design 元件合併成常見的螢幕模式。例如 Scaffold 之類的可組合項會提供位置以容納各種不同的元件和其他螢幕元素。進一步瞭解 Material Design 元件和版面配置。