導覽匣

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

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

封面導覽匣

資源

類型 連結 狀態
設計 設計來源 (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 變化版本。

標準導覽匣

漸層紗罩

強制回應導覽匣

固體紗罩

規格

規格寬度

規格邊框間距

導覽項目規格

適用情境

啟用指標

使用中的指標是醒目顯示顯示的導覽匣目的地的視覺提示。指標通常以背景形狀表示,在視覺上與導覽匣中的其他項目不同。使用中的指標可協助使用者瞭解他們在應用程式中的位置,以及他們前往的目的地。確保使用中的指標清楚顯示,且能與導覽匣中的其他項目區分開來。

使用中的指標

分隔線 (選填)

分隔線可用於分隔導覽匣中的目的地群組,更有條理。不過,請務必謹慎使用,以免造成視覺幹擾,並為使用者帶來不必要的認知超載。

使用中的指標

徽章

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

已展開徽章

已展開徽章

已收合徽章

已收合徽章

標籤

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

如果無法避免使用冗長的標籤,請使用刪節號來截斷標籤。
避免使用需要換行的長文字標籤。
請避免建立沒有圖示的導覽匣,因為這樣可能會讓使用者難以瀏覽應用程式。
避免混用圖示導覽項目與非圖示導覽項目,否則可能會混淆使用者導覽。

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

導覽匣中的主要導覽目的地數量限制在五到六個,以提升使用者體驗。
請避免新增過多導覽項目,因為這樣可能會產生垂直捲動,並讓使用者難以瀏覽應用程式。