版面配置和導覽模式

如果應用程式包含多個使用者可瀏覽的目的地,建議採用其他應用程式常用的版面配置和導覽配對。許多使用者已具備這些配對的心智模型,因此您的應用程式對他們來說會更加直覺。

版面配置和導覽配對

導覽列和強制回應導覽匣會做為上層布局檢視區塊和主要導覽目的地的主要導覽模式。

主要導覽 UI

導覽列可容納三到五個導覽目的地,且這些目的地必須位於同一階層。這個元件會轉換為大型螢幕的導覽邊欄。

雖然導覽匣可容納超過五個導覽目的地,但這種模式不如導覽列理想。這是因為使用者必須在精簡尺寸中觸及頂端列。

次要導覽分頁

Material 3 分頁底部應用程式列是次要導覽模式,可用於補充主要導覽或顯示在子項檢視畫面中。

分頁在這裡是次要導覽層,可將同層級內容分組。

版面配置動作

提供控制項,讓使用者完成動作。常見模式包括頂端動作列、懸浮動作按鈕 (FAB) 和選單。

對於最重要的動作,懸浮動作按鈕會提供醒目的大型按鈕,在這個層級,一次只能提供一個動作。FAB 可以多種大小顯示,也能以展開形式呈現,當中包含標籤。使用 Scaffold 固定 FAB,確保即使捲動畫面,FAB 仍會顯示。

含懸浮動作按鈕的版面配置

懸浮動作按鈕 (FAB),可讓使用者將植物新增至植物圖庫

您可以將次要動作放在頂端列中,或放在頁面中與相關內容分組的位置。

顯示詳細資料時,頂端列中的警示動作 (左側) 和清單項目內嵌的溢位圖示 (右側)

如需其他不常或不立即需要的動作,請將這些動作加入溢位選單。

自動調整式導覽

為視窗大小類別使用正確的版面配置。避免在不同尺寸的裝置上使用相同的底部導覽列。

調整導覽功能,在大螢幕上使用導覽窗格。在大型裝置上,由於手部位置和導覽項目間的間距較大,導覽軌更符合人體工學,視覺上更平衡。
在大螢幕上使用底部導覽列。

橫向模式下的導覽 中型尺寸可使用導覽軌或水平導覽項目。

在封面螢幕上操作 導覽邊欄雖然精簡,但在封面螢幕上可能更符合人體工學。 較大的封面可採用任一導覽方向。請考量使用者與內容互動的方式。