版面配置會定義讓使用者與應用程式互動的視覺結構，例如在活動中。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 Design 元件和版面配置。
版面配置和導覽模式
如果應用程式包含多個目的地可供使用者穿越，建議您採用其他應用程式常用的版面配置和導覽配對。由於許多使用者已經就這些組合擁有心理模型，因此您的應用程式將能更直覺好用。
版面配置和導覽配對
將導覽列和強制回應導覽匣使用為上層版面配置檢視畫面和主要導覽目的地的主要導覽模式。
導覽列可以包含同一階層層級中的三至五個導覽目的地。這個元件會轉譯為大螢幕的導覽邊欄。
雖然導覽匣可容納超過五個導覽目的地，但由於必須在精簡大小的頂端列上位置，因此導覽列的效果不佳，不適合做為導覽列。
Material 3 分頁和底部應用程式列是次要導覽模式，可用於補充主要導覽，或顯示在子項檢視畫面。
版面配置動作
提供控制項，讓使用者完成動作。常見的模式包括頂端列動作、懸浮動作按鈕 (FAB) 和選單。
對於重要性最高的動作，FAB 會為使用者提供明顯的大型按鈕。在這個層級一次只能執行一個動作。懸浮動作按鈕 (FAB) 可以有多種大小，以及包含標籤的展開形式。使用 Scaffold 固定 FAB，確保即使捲動捲動畫面，懸浮動作按鈕 (FAB) 也一律會顯示。
您可以在頂端列內放置次要動作 (如果已在頁面中的相關內容附近放置次要動作)。
針對不需要立即或經常需要的任何其他動作，請在溢位選單中新增這些動作。
標準化版面配置
使用標準版面配置做為起點，並使用現成的組合，協助版面配置根據常見用途和螢幕大小調整版面配置。這些版面配置美觀和功能性，衍生自 Material 3 指南。
Android 架構包含特殊的元件，使用 Jetpack Compose 或 View API 以直觀可靠的方式實作版面配置。
清單/詳細資料版面配置
透過清單詳細資料版面配置，使用者可探索具有描述性、解釋或其他補充資訊的項目清單，例如項目詳細資料。如果螢幕尺寸較小，只會顯示清單或詳細資料檢視畫面。在資料列式版面配置中顯示一組內容，清單是最常見的應用程式版面配置形式。清單詳細資料最適合用於訊息應用程式、聯絡人管理員、檔案瀏覽器，或可以將內容整理成項目清單，用於顯示其他資訊的任何應用程式。
內容可以是靜態值，也可以是動態內容。
- 動態內容是應用程式即時提供的內容，適合用來顯示使用者原創內容，或反映使用者的偏好或動作。舉例來說，假設某個相片應用程式含有使用者可捲動的可捲動相片清單，每個清單都是獨一無二的，且隨著使用者上傳更多圖片而改變。這些圖片是動態內容。
- 靜態內容代表硬式編碼的內容，必須直接變更應用程式的程式碼才能修改。靜態內容的範例包括每位使用者可能會看到的圖片和文字。
「Now in Android」Figma 檔案提供多個版面配置範例。以下範例是一維集合的內容。
探索 Material 3 清單，進一步瞭解清單元件與規格的設計指南。
動態消息版面配置
動態消息版面配置會在可設定格線中，排列對等的內容元素，以便快速檢視大量內容。(請參閱 Material 3 指南，瞭解如何在集合中使用資訊卡)。根據小型螢幕 (通常是資訊卡或資訊方塊)，動態饋給可以是清單或格線型設定。內容可以是動態元素，也就是從 API 等動態外部來源「進入」。
格線版面配置由資料列和資料欄組成，由隱含或明確的包含原則組成。(詳情請參閱本頁的包含項目)。格線版面配置能更嚴謹地套用或切換，以不同的資料列和資料欄。兩者應以一致的方式套用間距和邏輯，以免造成使用者混淆。瀏覽設計動態饋給的 Material 3 指南。
您可以在 Compose 中使用 Lazy 清單或 Lazy 格線實作動態消息版面配置，也可以使用 RecyclerView 或 CardView 在 View 中實作動態消息版面配置。
輔助窗格版面配置
使用行動裝置檢視畫面時，可能需要支援內容或控制選項。一般來說，以工作表或對話方塊的形式呈現，可協助主要檢視畫面保持焦點，保持井然有序。請參閱 M3 指南，瞭解如何使用輔助窗格標準版面配置。
瞭解 M3 底部功能表指南。
相對版面配置
輸入內容、內容或其他動作可能會彼此相對顯示，或限制在父項容器中。版面配置可以進一步自訂，但請確保使用一致的分組、欄和間距。
版面配置也可以搭配使用各種版面配置類型。舉例來說，您可以將輪轉介面或水平捲動與直向資訊卡配對。或者，您也可以顯示包含垂直清單資料的自訂圖表。
您可以在捲動列或欄中顯示延遲列和延遲欄的內容。
進一步瞭解 Compose 版面配置的基本概念，以及可組合函式的組成元素。
驗證是常見的相對版面配置，如下圖所示。
全螢幕版面配置是另一種常見的版面配置，在沈浸模式下使用。
如果您使用的是 View (而不是 Compose)，則可以使用 ConstraintLayout 根據同層級檢視畫面與上層版面配置之間的關係安排檢視畫面，以便支援大型和複雜的版面配置。ConstraintLayout 可讓您以拖曳的方式完成建構，而不必使用版面配置編輯器編輯 XML。進一步瞭解如何使用版面配置編輯器建構 UI。
調整版面配置
自動調整設計是指根據特定中斷點和裝置設計版面配置。我們通常會考量裝置的寬度，以決定版面配置應變更或自動調整的位置。網頁和 Android 都運用回應式設計概念 (例如彈性格線和圖片)，建立更能根據情境產生更適切的版面配置。
如需根據展開式螢幕尺寸調整版面配置的設計指南，請參閱 Compose 中的「建構自動調整式版面配置」開發人員指南，以及 M3 的「套用版面配置」頁面。您也可以查看 Android 大螢幕標準圖片庫，其中提供大型螢幕版面配置的靈感和實作。
雖然並非所有應用程式都需要適用於各種螢幕大小，卻可讓使用者在人體工學、可用性和應用程式品質方面享有更多自由。
- 您可以設計主要畫面 (傳達重要概念或應用程式) 做為中斷點做為中斷點。
- 或者，也可以設計要回應內容的方式，像是限制、展開或自動重排的方式。
如要進一步瞭解版面配置，請參閱 Material Design 3 (M3) 瞭解版面配置頁面。
網頁畫面
WebView 是顯示應用程式內網頁的檢視畫面。在大多數情況下，我們會建議您使用標準網路瀏覽器 (例如 Chrome) 向使用者提供內容。如要進一步瞭解網路瀏覽器，請參閱使用意圖叫用瀏覽器指南。