版面配置定義了使用者與應用程式互動的視覺結構，例如在活動中。Android 提供一系列的程式庫、標準起點，以及用來顯示和位置內容的技巧。
受迫失誤數
提供裝置安全區域，包括 UI 的某些部分，例如螢幕裁切、無邊框插邊、邊緣螢幕、軟體鍵盤和系統列。
正確做法：提供彈性的版面配置，讓使用者能與鍵盤互動。
影片 1： 提供靈活的版面配置，方便使用者進行互動
將主要導航等重要互動保留在可連線的畫面區域中。
圖 1：懸浮動作按鈕 (FAB) 提供顯眼且易於操作的互動點 使用「限制」將相關內容分組，引導使用者完成內容和動作。
圖 2：使用明確遏制將內容歸類至相關動作的資訊卡 提供相似內容和 UI 元素一致的對齊方式。
錯誤做法：如果元素等元素之間的間距不一致，會使可讀性幹擾，這可能會導致設計看起來令人眼花撩亂。
建議做法：讓類似元素之間的間距保持一致。
圖 3：不要幹擾可讀性 不要堅持為直向或理想版面配置：建議您考量使用者可能遇到的不同顯示比例、大小類別和解析度。
不要讓使用者每次觀看的動作過多而感到不堪負荷。
建構自訂版面配置時，請使用對齊、限製或重力字詞，指出內容在版面配置中的位置。加入映像檔應如何回應容器才能正確顯示。
一般 Android 應用程式畫面的組成部分
大部分的 Android 應用程式由區域稱為「系統列」、導覽區域和主體。
系統資訊列
狀態列和導覽列 (統稱系統列) 會顯示重要資訊 (例如電池電量、時間和通知快訊)，並提供從任何地方直接與裝置互動的功能。進一步瞭解系統列。
系統列是裝置介面的必要部分。請將這些元素新增為設計的頂層，確保這些元素在螢幕版面配置中都會納入考量。否則，使用者可能會誤以為這是要隱藏它們的意圖，而您會錯過設定樣式，最後可能會失去空間。
將長條加為頂層。使用 android:navigationBarColor 和 android:statusBarColor 將顏色套用至應用程式主題中的系統列。
導航區域
導覽代表不同的用途，讓使用者在您的應用程式中瀏覽、存取重要動作或跨 Android 平台。
身體區域
主體區域用於存放螢幕內容。內文內容由額外的群組和版面配置參數組成。必須繼續在導航和系統列區域底下。
宣告 WindowCompat.setDecorFitsSystemWindows(window, false) 以採用無邊框插邊。
如要決定版面配置的適當組合和導覽模式，請瞭解使用者如何與您的內容互動，以及他們如何瀏覽應用程式的資訊架構。瞭解這些知識有助於建立使用者可採取行動的 UI，藉此引導您在設計上更加註重使用者。
內容組成和架構
運用內容的結構和遏制方法，建構靈活的流程和節奏。
基本結構：使用邊界和欄做為視覺防護機制
如要開始建立具有一致的防護機制的堅實結構，請在版面配置中新增邊界和欄。
邊界會在螢幕和內容的左側和右側邊緣提供間距。精簡大小的標準邊界值為 16 dp，但邊界應配合較大的螢幕而調整。應用程式的主體內容和動作必須保持在距離內並對齊這些邊界。
您也可以在這個步驟中確保插入安全區域或插邊。系統列插邊可避免重要動作落在系統資訊列下方。詳情請參閱「在系統列後方繪製內容」一節。
使用資料欄打造靈活的格線結構以便一致的對齊方式，並將主體區域中的內容分割，為版面配置提供垂直定義。內容會顯示在畫面中含有資料欄的區域。這些欄可將結構借助於版面配置，提供方便排列元素的便利結構。
使用資料欄格線將內容與基礎格線對齊，同時保留彈性大小。資料欄格線可在特定點根據螢幕大小視需要變更欄大小和欄數，以配合不同的板型規格，同時允許內容縮放。請避免讓資料欄格線過於精細，基準格線的用途為：提供一致的間距單位。
建立隨附的資料列格線時，請務必小心謹慎，因為這可能會限制不同螢幕方向和板型規格的水平內容縮放，一般而言，建立邊框間距規則就能提供所需的視覺一致性。
使用隔離功能將元素分門別類
「遏制」是指同時使用空白空間和可見元素來建立視覺分組。容器是一種代表封閉區域的形狀。在單一版面配置中，您可以將共用類似內容或功能的元素歸為一組，並使用開放空間、字體排版和分隔線與其他元素分開。
您可以將類似項目歸為同一組，並加上空白處或可見部門，引導使用者瀏覽內容。
「隱含隔離」：使用空白字元將內容分組以建立容器邊界，而「明確抑制」則使用分隔線和資訊卡等物件將內容分組。
下圖舉例說明如何使用隱含抑制功能來納入標頭和主要副本。資料欄格線可用來對齊及建立群組。資訊卡會明確包含重點內容。使用圖像和類型階層，以更清晰的方式區分。
內容位置
Android 有多種方法可以處理各容器中的內容元素，以便正確放置元素，包括重力、間距和縮放。
「Gravity」是針對特定用途，將物件放置在可能較大容器中的標準。下圖顯示物件起始和置中 (1)、頂端與置中水平 (2)、左下角 (3)、結束和右側 (1) 的範例。
資源調度
為了配合動態內容、裝置螢幕方向和螢幕大小，縮放比例至關重要。元素可以維持固定或縮放。
指出圖片在其容器中的縮放和位置顯示方式，必須確保圖片在裝置情境中看起來會如此呈現，否則圖片的主要焦點可能會遭到截斷、圖片對版面配置而言可能太小或過大，或是出現其他不理想的效果。
沒有特別註記的內容，呈現方式可能會與預期的不同。
置頂內容
許多元素皆已透過運算單元或鷹架內建互動、捲動和定位。有些元素可加以修改，保持固定，而不是對捲動做出反應，例如包含重要動作的懸浮動作按鈕 (FAB)。
切合需求
使用 AlignmentLine 建立自訂對齊線，上層佈局可用於對齊及定位子項。
錯誤做法：如果元素等元素之間的間距不一致，會使可讀性幹擾，這可能會導致設計看起來令人眼花撩亂。
建議做法：讓類似元素之間的間距保持一致。
元件版面配置
Material 3 元件有專屬的互動和內容設定和狀態，
Compose 提供便利的版面配置，讓您將 Material Design 元件合併成常見的螢幕模式。Scaffold 等可組合項可為各種元件和其他螢幕元素提供版位。進一步瞭解 Material 元件和版面配置。
版面配置和瀏覽模式
如果您的應用程式含有多個可供使用者周遊的目的地，建議您使用其他應用程式常用的版面配置和導覽配對功能。由於許多使用者已經擁有這些配對組合的精神模型，因此您的應用程式會更容易讓他們理解。
版面配置和導覽配對
導覽列和強制回應導覽匣可做為上層版面配置檢視畫面和主要導覽目的地的主要導覽模式。
導覽列可在同一階層層級包含三到五個導覽目的地。這個元件會轉譯為大型螢幕的導覽邊欄。
雖然導覽匣可容納超過五個導覽目的地，但由於需要前往密集大小的頂端列，因此這個模式並不是理想的導覽列。
Material 3 分頁和底部應用程式列是次要導覽模式，可用來補充主要導覽或顯示在子項檢視畫面中。
版面配置動作
提供控制項，讓使用者完成動作。常見的模式包括頂端列動作、懸浮動作按鈕 (FAB) 和選單。
對於最重要的動作，FAB 會為使用者提供醒目的大型按鈕。這個層級一次只能執行一個動作。懸浮動作按鈕 (FAB) 能以多種尺寸顯示，展開形式也內含標籤。使用 Scaffold 固定懸浮動作按鈕 (FAB)，確保使用者捲動畫面時仍可持續顯示該懸浮動作按鈕 (FAB)。
您可以將次要動作放在頂端列，如果是類似相關內容，則放在頁面中。
如果是不需要立即或經常需要的任何其他動作，請在溢位選單中加入這些動作。
標準版面配置
利用標準版面配置做為起點，利用可立即使用的組合，協助版面配置針對常見用途和螢幕大小進行調整。這些版面配置是美觀且實用的功能，取自 Material 3 指南。
Android 架構包含特殊的元件，使用 Jetpack Compose 或 View API 以直觀可靠的 API 實作版面配置。
清單/詳細資料版面配置
藉由清單詳細資料版面配置，使用者可探索具有描述性、解釋性或其他補充資訊的項目清單，也就是項目詳細資料。對於精簡螢幕尺寸，只會顯示清單或詳細資料檢視畫面。以列為基礎的版面配置顯示一系列內容，清單構成了最常見的應用程式版面配置形式。清單/詳細資料很適合用於訊息應用程式、聯絡人管理員、檔案瀏覽器，或可以將內容整理成項目清單，用於顯示其他資訊的任何應用程式。
內容可以是靜態或動態
- 動態內容是指應用程式即時提供的內容，適合用來顯示使用者原創內容，或反映使用者的偏好或動作。舉例來說，假設某個相片應用程式含有可捲動的使用者自製內容清單，其中包含每位使用者專屬的相片，且會在使用者上傳更多圖片時有所變化。這些圖片是動態內容。
- 靜態內容代表硬式編碼的內容，只有在直接修改應用程式的程式碼後才能修改。靜態內容的例子包括每位使用者可能會看到的圖片和文字。
「Now in Android」Figma 檔案提供多種版面配置範例。以下範例是單維的內容集合。
瀏覽 Material 3 清單，進一步瞭解清單元件和規格的設計指南。
動態消息版面配置
動態消息版面配置會在可設定格線中，排列對等的內容元素，以便快速檢視大量內容。(請參閱「在集合中使用資訊卡的 Material 3 指南」)。動態饋給可以根據小型螢幕設定以清單或格線為依據，通常位於資訊卡或資訊方塊中。內容可以是動態內容，也就是是從 API 等動態外部來源「匯入」的內容。
格狀版面配置由隱含或明確隔離原則組成的資料列和資料欄。(詳情請參閱本頁的內容)。格狀版面配置可以更緊密套用或交錯，以不同的資料列和資料欄。兩者的間距和邏輯應保持一致，以免造成使用者混淆。瀏覽 Material 3 設計動態饋給指南。
您可以透過 Lazy 清單或 Lazy 格線在 Compose 中實作動態消息版面配置，或是在 View 中利用 RecyclerView 或 CardView 實作動態消息版面配置。
輔助窗格版面配置
使用行動裝置功能時，可能需要支援內容或控制選項。一般而言，以工作表或對話方塊的形式呈現，這些內容可協助主要檢視畫面保持聚焦且保持簡潔。請參閱「使用輔助窗格標準版面配置的 M3 指南」。
瞭解底部功能表的 M3 指南。
相對版面配置
輸入內容、內容或其他動作可能會彼此相對顯示，或只受限於父項容器。版面配置可以進一步自訂，但請務必採用一致的分組方式、資料欄和間距。
版面配置也可以利用多種版面配置類型的組合。例如，您可以將輪轉介面或水平捲動與垂直資訊卡配對。或者，您也能呈現含有垂直清單資料的自訂圖表。
您可以使用延遲列和延遲欄，在捲動的資料列或資料欄中顯示內容。
進一步瞭解 Compose 版面配置的基本概念，以及可組合項的組成元素。
驗證是常見的相對版面配置，如下圖所示。
全螢幕版面配置是另一種在沈浸模式下使用的常見版面配置。
如果使用 View (而非 Compose)，則可以使用 ConstraintLayout 根據同層級檢視畫面與上層版面配置之間的關係安排檢視畫面，允許大型且複雜的版面配置。ConstraintLayout 可讓您完全透過拖曳的方式進行建構，而不必使用版面配置編輯器編輯 XML。進一步瞭解如何使用版面配置編輯器建構 UI。
調整版面配置
自動調整式設計是指設計可配合特定中斷點和裝置調整的版面配置。我們通常會考量裝置的寬度，判斷版面配置要變更或調整的位置。網頁和 Android 都會利用彈性設計概念 (例如彈性的格線和圖片)，建立更符合自身情境的版面配置。
如需根據展開式螢幕大小調整版面配置的設計指南，請參閱 Compose 中的「支援不同螢幕大小」開發人員指南，以及 M3 的「套用版面配置」頁面。您也可以參考 Android 大螢幕標準圖庫，尋找大螢幕版面配置的靈感和實作方式。
雖然並非所有應用程式都需要於任何螢幕大小提供，但可讓使用者更自由決定人體工學、可用性和應用程式品質。
- 您可以設計重要畫面 (傳達重要概念或應用程式)，並使用類別大小做為中斷點，做為指引。
- 或者，您也可以說明內容的限制、展開或重排方式，藉此設計出可因應情勢的內容。
如要進一步瞭解版面配置，請參閱 Material Design 3 (M3) 瞭解版面配置頁面。
網頁畫面
WebView 是顯示應用程式內網頁的檢視畫面。在多數情況下，建議您使用標準網路瀏覽器 (例如 Chrome) 向使用者提供內容。如要進一步瞭解網路瀏覽器，請參閱透過意圖叫用瀏覽器的指南。