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