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