標準版面配置

以標準版面配置做為起點,運用現成的組合,協助版面配置適應常見用途和螢幕大小。這些版面配置美觀又實用,是根據 Material 3 指南所設計。

圖 21:標準版面配置

Android 架構包含特殊的元件,使用 Jetpack ComposeViews API 以直觀可靠的方式實作版面配置。

清單/詳細資料版面配置

透過清單/詳細資料版面配置,使用者可瀏覽項目清單和附帶的描述、說明或其他補充資訊,也就是項目詳細資料。如果是小型螢幕,只會顯示清單或詳細資料檢視畫面。清單會以列為基礎的版面配置顯示一系列內容,是應用程式最常見的版面配置形式。清單/詳細資料很適合用於訊息應用程式、聯絡人管理工具、檔案瀏覽器,或是任何可將內容整理成項目清單的形式來顯示額外資訊的應用程式。

內容可以是靜態或動態。

  • 動態內容是指應用程式即時提供的內容,非常適合顯示使用者原創內容,或是反映使用者的偏好或動作。舉例來說,假設相片應用程式提供可捲動的使用者產生相片清單,每個使用者的清單都不相同,而且會隨著使用者上傳更多圖片而變動。這些圖片是動態內容。
  • 靜態內容代表經過硬式編碼的內容,只能直接變更應用程式的程式碼。靜態內容的例子包括所有使用者可能會看到的圖片和文字。

Now in Android Figma 檔案提供多個版面配置範例。以下範例顯示一維內容集合。

圖 22:一維內容集合

如要進一步瞭解清單元件和規格的設計指南,請參閱 Material 3 清單

動態消息版面配置

動態消息版面配置會在可設定格線中,排列對等的內容元素,以便快速檢視大量內容。如要進一步瞭解如何在集合中使用資訊卡,請參閱 Material 3 指南。在精簡螢幕上,動態消息可以清單或格狀配置呈現,通常會以資訊卡或圖塊顯示。內容可以是動態的,也就是從動態外部來源 (例如 API)「饋送」。

格線版面配置由列和欄組成,這些列和欄是根據隱含或明確的容器原則建立。您可以更嚴格地套用格線版面配置,或交錯排列,讓列和欄有所變化。兩者都應採用一致的間距和邏輯,避免使用者混淆。請參閱有關設計動態消息的 Material 3 指南

您可以在 Compose 中使用延遲清單或延遲格線實作動態饋給版面配置,也可以在 Views 中使用 RecyclerViewCardView 實作。

舉例來說,相片庫和 Podcast 的格狀版面配置都是常見的動態消息格式。

支援窗格版面配置

行動版畫面可能需要支援內容或控制項。這類檢視畫面通常會以工作表或對話方塊的形式呈現,有助於讓主要檢視畫面保持專注且整潔。請參閱 M3 指南,瞭解如何使用輔助窗格標準版面配置

圖 24:底部功能表可做為主要檢視區塊的輔助內容

瞭解底部功能表的 M3 指引