電視導航

電視裝置會為應用程式提供一組有限的導覽控制項。如要為電視 UI 建立有效的導覽配置,請考量這些受限的控制項,以及使用者如何透過遙控器按鈕 (而非觸控螢幕) 進行導覽。

導覽主頁橫幅

重點特色

  • 控制器提供的導覽功能有限,僅限上下左右移動,因此請留意這會如何影響應用程式的 UI 設計。
  • 導覽介面應讓使用者感到自然且熟悉。
  • 使用遙控器的返回按鈕,打造簡單的導覽體驗。
  • 如果使用者無法直接前往控制項,請考慮將控制項移至其他位置。

原則

目標是讓導覽功能看起來自然且熟悉,不會佔據使用者介面,或讓使用者分心於內容。下列原則奠定的基準,可在各個 TV 應用程式間達到一致且直觀的使用者體驗。

高效率

讓使用者輕鬆快速存取內容。使用者希望能夠快速存取內容,並且只需點按幾下即可完成。以最少的畫面來整理資訊。

易於預測

請遵循最佳做法和建議,讓使用者能預測導覽流程。請勿不必要地重新設計導覽模式,否則會造成混淆和不可預測的情況。

符合直覺

讓導覽介面簡單易懂,以便順暢支援廣泛採用的使用者行為。不要加入不必要的導覽層級,以免過於複雜。

控場

控制器的款式多種多樣,從極簡的遙控器到複雜的遊戲控制器都有。所有控制器都包含方向鍵 (D-pad) 和選取、主畫面和返回按鈕。其他按鈕則因型號而異。

控場

  • 方向鍵 (D-Pad):電視上的主要導覽方式是透過 D-Pad,包括上下左右方向的硬體按鈕。
  • 選取按鈕:選取畫面上有焦點的項目。按住即可顯示更多選項。
  • 主畫面按鈕:將使用者帶往系統主畫面。
  • 返回按鈕:讓使用者返回先前的檢視畫面。
  • 麥克風按鈕:叫用 Google 助理或語音輸入功能。

D-Pad 導覽

在電視裝置上,使用者可透過 4 向 D-Pad 瀏覽:向上、向下、向左和向右。如要建構最佳的電視應用程式,請設計導覽配置,讓使用者能快速瞭解如何透過四個方向鍵使用應用程式。D-pad 會將焦點從一個元素移至對應方向上最近的元素。

如要測試應用程式的導覽功能是否可在電視裝置上搭配方向鍵順利運作,請考慮下列事項:

  • 確保使用者可以前往畫面上的所有可聚焦元素。
  • 確保導航方向簡單明瞭。
  • 針對捲動清單,請確認方向鍵的向上和向下按鈕可捲動整個清單,且可選取每個清單項目。

[首頁] 按鈕

按下主畫面按鈕時,系統一律會將使用者帶回 Google TV 主畫面或啟動器。根據預設,目前的應用程式會在背景中暫停。

長按主畫面按鈕,即可在 Google TV 上顯示系統資訊主頁,在 Android TV 上顯示應用程式格狀檢視畫面。預設行為可能因製造商而異。

[首頁] 按鈕

「返回」按鈕

為確保平台上各應用程式的一致性,請確保返回按鈕的行為符合下列規範。

使用可預測的返回按鈕行為

為打造可預測的導覽體驗,當使用者按下遙控器的返回按鈕時,請將他們帶往上一個目的地。最後,如果使用者持續按下返回按鈕,應該會前往 Google TV 首頁或啟動器。

有頂端導覽功能的應用程式

使用者快速捲動畫面,並將焦點啟用至選單,即可返回頁面頂端。

含有頂端導覽的應用程式

左側導覽功能的應用程式

左側選單會啟用,並將使用者焦點帶往有效的選單項目。

含左側導覽面板的應用程式

確認返回按鈕不會受到確認畫面或無限迴圈的限制。

避免退出控管。使用者應可在不需確認的情況下離開應用程式。

不要顯示返回按鈕

與手持裝置不同,遙控器上的返回按鈕用於在電視上向後瀏覽。不需要在畫面上顯示虛擬返回按鈕。

請勿在畫面上顯示返回按鈕。使用者可以使用遙控器上的返回按鈕。

視需要顯示取消按鈕

如果只有確認、破壞性或購買動作可供使用者選擇,建議您提供可返回先前目的地的「取消」按鈕。

視需要顯示取消按鈕,讓使用者返回先前頁面。

固定的起始目的地

使用者從啟動器啟動應用程式時看到的第一個畫面,也是使用者按下返回按鈕後返回啟動器時看到的最後一個畫面。

深層連結會模擬手動導覽

無論是深層連結或手動前往特定目的地,使用者都可以使用返回按鈕,從應用程式中的任何位置前往起始目的地。

深層連結會模擬手動導覽

從其他應用程式深層連結至應用程式,會模擬手動導覽。舉例來說,如果使用者直接從 Google TV 前往 Moviestar 應用程式的詳細資料頁面,然後按下返回按鈕,系統就會將他們帶往 Moviestar 應用程式的首頁。

清除所有可聚焦元素的路徑

讓使用者在使用者介面中清楚瀏覽。如果沒有直接路徑可前往控制項,請考慮將其重新放置。

將搜尋動作等控制項放在不會與其他可點選元素重疊的位置。
請避免在難以觸及的位置放置控制項。使用 D-Pad 執行這項搜尋動作並不容易。

Axis

設計版面配置時,請善用水平和垂直軸。為每個方向指定特定功能,以便快速瀏覽大型階層。

您可以在垂直軸上瀏覽類別,並在水平軸上瀏覽各個類別中的項目。
避免複雜和巢狀的版面配置階層。