摘要

瞭解 Compose 版面配置範本和設計版面配置範例,以便設計及建構獨特的應用程式畫面。

大多數應用程式都會使用非捲動或捲動版面配置,其中包含下列元素:

  • 時間文字:由於裝置是手錶,建議您即使在應用程式歷程期間也要顯示時間文字 (選用,但建議使用)。
  • 頁面標題:提供路線指引,並提醒使用者目前在旅程中的位置 (選用,但建議使用)。
  • 捲動指標:僅適用於捲動版面配置,表示螢幕折疊處下方還有更多內容。
  • 動作按鈕:建議放在底部,用於確認、結束或繼續使用者歷程。

應用程式版面配置區段

頂端區塊

頂端部分提供「時間文字」選項、精簡按鈕和標題,可做為路徑指引和清楚的導覽功能。所有項目皆為選用。

在頁面非常長的特殊情況下,您可以使用精簡按鈕,讓使用者不必捲動至底部,即可透過搜尋或動作按鈕瀏覽清單。

中段

中間區段可包含任何可用的 Compose (非全螢幕),或清單中的自訂元件。這個部分可以包含其他標題,用於將內容分組,以及捲軸。

中間內容區段中的所有元件都應為回應式,填滿可用的寬度,直到百分比邊距為止。所有捲動版面配置都會採用縮放延遲欄位行為,顯示元件縮放並淡出畫面。

底部區段

底部區域提供主要和次要動作按鈕的空間,如果這是旅程的結尾,則可以空白。

建議使用清單結尾的 Edge-Hugging 按鈕,因為它可利用有限的空間,並搭配圓形螢幕。

可能需要多個動作,這些動作可顯示在按鈕堆疊或兩個圖示按鈕群組中。

不可捲動的應用程式檢視畫面

With title
沒有標題

含標題,但沒有底部區段
不含標題或底部區段

捲動應用程式檢視畫面

With title
沒有標題

含標題,但沒有底部區段
不含標題或底部區段