常見版面配置

使用常見版面配置,為常見用途和螢幕尺寸設計應用程式版面配置。這些現成構圖是不錯的起點。

常見版面配置

清單/詳細資料版面配置

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

內容可以是靜態或動態。

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

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

一維內容集合

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

超大螢幕上的清單詳細資料
特大螢幕上的清單詳細資料。

動態消息版面配置

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

格線版面配置由列和欄組成,這些列和欄是根據隱含或明確的容器原則建立。格線版面配置可以更嚴格地套用,也可以交錯排列,讓列和欄有所變化。兩者都應採用一致的間距和邏輯,避免使用者混淆。

您可以使用延遲清單或延遲格線實作動態消息版面配置。

動態消息版面配置

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

支援窗格版面配置

行動裝置檢視畫面可能需要支援內容或控制項,例如工作表或對話方塊。有助於主要檢視畫面保持專注且整齊。

底部功能表可做為主要檢視畫面的輔助內容

瞭解底部功能表的 M3 指南

播放清單支援畫面
在大螢幕上,支援的表單會以窗格形式開啟。

網頁畫面

WebView 會顯示應用程式內的網頁。在大多數情況下,建議使用標準網頁瀏覽器 (例如 Chrome) 將內容傳送給使用者。如要進一步瞭解網路瀏覽器,請參閱使用 Intent 叫用瀏覽器的指南