導覽匣

導覽匣是任何電視應用程式的重要元件，可讓使用者存取不同的目的地和功能。導覽匣是應用程式資訊架構的骨幹，可讓您以清楚且直覺的方式瀏覽應用程式。

相較於行動裝置導覽匣，電視上的導覽匣可向使用者顯示展開和收合狀態。

資源

類型	連結	狀態
設計	設計來源 (Figma)	可用
導入作業	Jetpack Compose (NavigationDrawer) Jetpack Compose (ModalNavigationDrawer)	可用

重點特色

• 目的地會按照使用者重要性排序，熱門目的地和相關目的地會歸為一組。
• 收合時，標準和強制回應導覽導覽匣都必須提供導覽邊欄。

變化版本

導覽匣樣式有兩種類型：

1. 標準導覽匣 - 展開後即可建立額外的導覽空間，將頁面內容推送到畫面上。
2. 強制回應導覽匣 - 以重疊方式顯示在應用程式內容上方，並使用額外收合，以便在導覽匣展開時改善可讀性。

標準導覽匣

圖解

1. 頂端區段：展示應用程式標誌。可做為切換設定檔或觸發搜尋動作的按鈕。在收合狀態下，只有圖示會顯示在頂端容器中。
2. 導覽項目：導覽邊欄中的每個項目都有圖示和文字的組合，且只有收合狀態會顯示圖示。
3. 導覽邊欄：導覽邊欄是顯示 3 到 7 個應用程式目的地，可做為主選單。每個目的地都有文字標籤和選用圖示，可以使用將選單項目分組的選項，以便取得更背景資訊。
4. 底部區段：可設定 1 到 3 個動作按鈕，這種按鈕最適合設定、說明或個人資料等頁面。

行為

• 導覽匣展開：展開標準導覽匣時，會推送頁面內容，為導覽展開的使用者騰出空間。
• 導覽更新：從一個導覽項目移至另一個導覽項目時，頁面會自動更新為新的目的地。

強制回應導覽匣

圖解

1. 頂端區段：展示應用程式標誌。可做為切換設定檔或觸發搜尋動作的按鈕。在收合狀態下，只有圖示仍會顯示在頂端容器中。
2. 導覽項目：導覽邊欄中的每個項目都有圖示和文字的組合，且只有收合狀態會顯示圖示。
3. 導覽邊欄：顯示三到七個應用程式目的地，做為主選單。每個目的地都有文字標籤和選用圖示，可以使用將選單項目分組的選項，以便取得更背景資訊。
4. Scrim：讓導覽項目文字更容易閱讀。
5. 底部區段：可設定 1 到 3 個動作按鈕，這種按鈕最適合設定、說明或個人資料等頁面。

行為

• 導覽匣擴充：以重疊方式顯示在應用程式內容上方，並搭配一個可在導覽匣展開時提升可讀性的塗鴉。
• 導覽更新：在使用者選取導覽項目時出現。

紗罩

針對強制回應導覽匣，導覽匣後方的紗罩可確保導覽匣內容清晰易讀。您可以使用導覽匣後方的漸層或固態表面，建立不同的 UI 變化版本。

規格

適用情境

徽章

徽章是一種視覺提示，可新增至導覽項目以提供額外資訊。舉例來說，標記可用來表示串流應用程式中可用的新電影數量。請謹慎使用標記，只在必要時使用標記，因為徽章可能會讓使用者介面看起來雜亂無章。使用徽章時，請確保徽章清楚易懂，而且不會幹擾使用者的操作應用程式。

標籤

導覽匣中的標籤應簡明扼要，以便使用者閱讀。

導覽匣是代表應用程式階層的基礎元素，應僅用於列出五到六個主要導覽目的地。