導覽匣是任何 TV 應用程式的基本元件，可讓使用者存取不同目的地和功能。導覽匣是應用程式資訊架構的骨幹，提供清楚且直覺的瀏覽應用程式方式。
與行動裝置導覽匣相比，電視上的導覽匣會向使用者顯示展開和收合的狀態。
資源
| 類型 | 連結 | 狀態 |
|---|---|---|
| 設計 | 設計來源 (Figma) | 可使用 |
| 導入作業 |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
可使用 |
重點特色
- 系統會根據使用者重要性排列目的地，將常用目的地排在前面，並一組相關目的地。
- 標準和強制性的導覽導覽匣在收合時都必須提供導覽邊欄。
變化版本
導覽匣樣式有兩種：
- 標準導覽匣：展開後可建立額外的導覽空間，讓頁面內容並排顯示。
- 強制回應導覽匣：以疊加的方式顯示在應用程式內容上方，並採用 scrim，在導覽匣展開時有助於改善可讀性。
標準導覽匣
圖解
- 頂端部分：提供應用程式標誌。當做切換設定檔或觸發搜尋動作的按鈕。在收合狀態下，只有圖示會顯示在頂端容器中。
- 導覽項目：導覽邊欄中的每個項目都含有圖示和文字的組合，但圖示只會顯示在收合狀態下。
- 導覽邊欄：導覽邊欄這個欄會顯示 3 到 7 個應用程式目的地，做為主選單。每個目的地都有文字標籤和一個選用圖示，且有將選單項目分組的選項，以便查看更符合需求的內容。
- 底部：可以有 1 到 3 個動作按鈕，適用於設定、說明或個人資料等網頁。
行為
- 導覽匣展開：展開標準導覽匣時，系統會推送網頁內容，為展開版本的導覽騰出空間。
- 導覽更新：在導覽項目移至另一個導覽項目時，頁面會自動更新至新的目的地。
強制回應導覽匣
圖解
- 頂端部分：提供應用程式標誌。顯示為切換設定檔或觸發搜尋動作的按鈕。在收合狀態下，只有圖示會顯示在頂端容器中。
- 導覽項目：導覽邊欄中的每個項目都含有圖示和文字的組合，但圖示只會顯示在收合狀態下。
- 導覽邊欄：顯示三至七個應用程式目的地的資料欄，做為主選單。每個目的地都有文字標籤和選用圖示，且可選擇將選單項目分組，以便查看更符合情境。
- Scrim：改善導覽項目文字的易讀性。
- 底部：可以有 1 到 3 個動作按鈕，適用於設定、說明或個人資料等網頁。
行為
- 導覽匣展開：以重疊方式顯示在應用程式內容上方，還能使用 scrim 在導覽匣展開時改善可讀性。
- 導覽更新：在使用者選取導覽項目時發生。
紗罩
針對強制回應導覽匣，導覽匣背後的紗罩可確保導覽匣內容清晰易讀。您可以在導覽匣後方使用漸層或實心表面，建立不同的 UI 變化版本。
漸層紗罩
實線
規格
使用方式
使用中指標
啟用中的指標是一種視覺提示，可醒目顯示正在顯示的導覽匣目的地。指標通常會以背景形狀表示，且與導覽匣中的其他項目有所區隔。啟動指標可協助使用者瞭解他們在應用程式中的位置，以及正在瀏覽的目的地。確保使用中的指標清楚可見，且易於與導覽匣中的其他項目區別。
分隔線 (選用)
分隔線可用來分隔導覽匣中的目的地群組，讓您更妥善地管理。不過，請盡量少用這些分隔線，以免造成視覺幹擾，對使用者造成不必要的認知超載。
徽章
徽章是可加入導覽項目中的視覺提示，可提供額外資訊。舉例來說，標記可用來表示串流應用程式可觀看的新電影數量。請謹慎使用標記，因為這類標記可能會使 UI 看起來變得忙碌且雜亂。使用徽章時，請確保這些徽章清楚易懂，而且不會幹擾使用者操作應用程式。
已展開徽章
徽章已收合
標籤
導覽匣中的標籤應清楚簡潔，以便閱讀。
注意
如果無法避免使用過長的標籤，請以刪節號截斷標籤。
錯誤做法
避免使用需要換行的長文字標籤。
錯誤做法
請避免建立不含圖示的導覽匣，以免使用者難以瀏覽應用程式。
錯誤做法
請避免混用圖示導覽項目與非圖示導覽項目，以免造成使用者混淆。
導覽匣是代表應用程式階層的基礎元素，應只用來列出五到六個主要導覽目的地。
正確做法
將導覽匣中的主要導覽目的地數量限制在五到六個，以提升使用者體驗。
錯誤做法
請避免加入過多導覽項目，否則可能會造成垂直捲動，導致使用者難以瀏覽應用程式。