電視導覽

電視裝置為應用程式提供一組有限的導覽控制項。為 TV 應用程式建立有效的導覽配置,必須瞭解這些有限的控制選項以及使用者操作應用程式時的限制。當您建構 TV 專用的 Android 應用程式時,請特別留意使用者在使用遙控器按鈕 (而非觸控螢幕) 時的瀏覽方式。

原則

目標是打造自然而熟悉的導覽體驗,而非凸顯使用者介面,或無法分離內容。下列原則有助於設定基準,讓 TV 應用程式提供一致且直覺的使用者體驗。

效率

方便使用者快速取得內容。使用者想快速存取內容,而且次數最少。以最少的畫面整理資訊。

可預測

遵循最佳做法和建議,讓使用者清楚瞭解導覽內容。請勿不必要的瀏覽模式,以免造成混淆和無法預測。

符合直覺

讓導覽設計簡單明瞭,流暢支援廣泛採用的使用者行為。請勿加入不必要的導覽層,造成過度複雜。

控制器

控制器的樣式五花八門,從極簡的遙控器到複雜的遊戲控制器,所有控制器都包含方向鍵 (D-Pad) 以及選取、主畫面和返回按鈕。其他按鈕因型號而異。

遙控器範例
圖 1:電視遙控器範例。

D-pad
電視上的主要導覽方法是使用 D-Pad,包括向上、向下、向左和向右方向硬體按鈕。D-Pad 會依據按下按鈕的方向,將焦點從一個物件轉移至最接近的物件。

「Select」按鈕
可選取畫面上的項目。

首頁按鈕
:將使用者導向系統主畫面。

返回按鈕
可讓使用者返回上一個檢視畫面。

麥克風按鈕
叫用 Google 助理或語音輸入。

D-Pad 導覽

在電視裝置上,使用者可以使用 D-Pad 或方向鍵進行瀏覽。這種控制項會限制向上、下、左、右移動。如要打造適合電視最佳化的優質應用程式,您必須提供導覽配置,讓使用者能快速瞭解如何使用這些有限的控制項瀏覽應用程式。

Android 架構會自動處理版面配置元素之間的方向導覽,因此您通常不需要對應用程式執行任何額外操作。不過,建議您使用 D-Pad 控制器徹底測試導覽,藉此找出任何瀏覽問題。

請按照下列規範,測試應用程式的導覽系統是否能在電視裝置上透過 D-Pad 使用:

  • 確認使用 D-Pad 控制器的使用者可瀏覽畫面上所有可見的控制項。
  • 對於含有焦點的捲動清單,請確認 D-Pad 的向上和向下按鈕會捲動清單,並且選取按鈕可選取清單中的項目。確認使用者可以選取清單中的元素,而且清單在選取元素時仍會捲動。
  • 請務必以簡單明瞭且可預測的方式,切換控制選項。

修改方向導覽

Android 架構會根據版面配置中可聚焦元素的相對位置,自動套用方向導覽配置。使用 D-Pad 控制器在應用程式中測試產生的導覽配置。測試後,如果您決定讓使用者以特定方式瀏覽版面配置,可以為控制項設定明確的方向導覽。

下列程式碼範例說明如何定義下一個控制項,用來接收 TextView 版面配置物件的焦點:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

下表列出 Android 使用者介面小工具所有可用的導覽屬性:

屬性 功能
nextFocusDown 定義使用者往下瀏覽時,要接收的下一個檢視畫面。
nextFocusLeft 定義下一個檢視畫面,在使用者離開時接收焦點。
nextFocusRight 定義下一個檢視畫面,在使用者向右瀏覽時接收焦點。
nextFocusUp 定義下一個檢視畫面,在使用者向上瀏覽時接收焦點。

如要使用上述其中一個明確導覽屬性,請將值設為版面配置中另一個小工具的 android:id。請務必將導覽順序設為迴圈,讓最後一個控制項將焦點導回第一個控制項。

提供明確的焦點和選項

應用程式在電視裝置上是否成功的導覽配置,取決於使用者能否輕鬆判斷介面焦點的使用者介面元素。如果您未明確指出聚焦項目,也沒有提供使用者可對哪些項目採取行動,使用者可能會快速感到困擾並離開應用程式。因此,請務必讓項目聚焦在應用程式啟動後,或讓使用者在閒置時立即採取行動。

在應用程式版面配置和實作中,請使用顏色、大小、動畫或這些屬性的組合,協助使用者輕鬆判斷接下來可以採取的動作。使用統一的配置,指明應用程式的焦點。

Android 提供可繪製狀態清單資源,針對聚焦和所選控制項實作醒目顯示功能。以下程式碼範例示範如何為按鈕啟用視覺行為,表示使用者已前往控制項並選取該控制項:

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

以下版面配置 XML 程式碼範例會將先前的狀態清單可繪項目套用至 Button

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

請務必在可聚焦和可選取的控制項中提供充足的邊框間距,以便醒目顯示周圍的醒目顯示。

返回按鈕導覽

為了在平台中的應用程式之間保持一致,請確認返回按鈕的行為符合這些規範。

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

為提供容易預測的瀏覽體驗,當使用者按下遙控器的返回按鈕時,系統會將他們導向上一個目的地。

使用頂端導覽時
說明使用頂端導覽時的導覽流程的圖片
使用左側導覽面板時
說明使用左側導覽面板的導覽流程的圖片

如果使用者從選單項目前往頁面中中央的資訊卡,然後按下返回按鈕,結果取決於應用程式使用的是頂端導覽還是左側導覽面板:

  • 應用程式使用頂端導覽:在選單中快速捲動並啟用焦點,讓使用者回到頁面頂端。
  • 應用程式使用左側導覽面板:啟用左側選單,並將焦點移至目前使用中的選單項目。

確認返回按鈕未受到確認畫面或有限迴圈的一部分限制。

螢幕截圖:詢問使用者是否要退出的對話方塊

錯誤做法:
請避免退出閘門。讓使用者不需確認即可退出應用程式。


顯示導覽循環功能的螢幕截圖

錯誤做法:
請勿輸入關閉及開啟選單的無限迴圈,理想情況下,按下返回按鈕即可離開應用程式。除非是特殊情況 (例如兒童設定檔),否則請勿在選單中顯示離開按鈕。

不要顯示備份或返回按鈕

與手持裝置不同,遙控器上的返回按鈕是用來在電視上返回。您不需要在螢幕上顯示虛擬返回按鈕,如下所示:

顯示螢幕上柔軟返回按鈕的螢幕截圖

錯誤做法:

視需要顯示取消按鈕

如果唯一可見的動作是確認、破壞或購買動作,最佳做法是提供返回上一個目的地的「Cancel」按鈕:

顯示螢幕上電子取消按鈕的螢幕截圖

正確做法:

實作返回導覽功能

一般而言,Android 架構處理返回導覽的功能和 D-Pad 一樣。如果使用導覽元件,可以支援各種導覽圖。您有時可能需要實作部分自訂行為,例如使用返回按鈕將焦點重設為長清單的開頭。

ComponentActivityFragmentActivityAppCompatActivity 的基礎類別,可讓您使用 OnBackPressedDispatcher 控制返回按鈕的行為,呼叫 getOnBackPressedDispatcher() 即可擷取。

詳情請參閱「提供自訂返回導覽功能」。

電視上的播放控制項

影片播放是電視上最重要的功能之一。Android TV 應用程式中的影片播放器必須一致。請參閱「電視的播放控制項指南」。

直播分頁導覽

除了遵守 TV 應用程式品質規定外,如果應用程式在「直播」分頁中整合了電視直播動態饋給,也必須符合下列各節所述的播放流暢體驗和返回導向的要求。

流暢播放不間斷

流暢的播放功能適用於 Google TV 和 Android TV 上任何直播/線性頻道深層連結後的應用程式內行為。

使用者在 Google TV 和 Android TV 中點選直播/線性頻道深層連結後,必須直接引導使用者前往頻道播放,不得封鎖或延遲目標應用程式的畫面。此外,我們禁止登入流程、註冊流程、品牌宣傳影片和其他延遲情形。

不過,如果深層連結會從冷啟動時啟動目標應用程式載入,則這個啟動延遲時間會「允許」播放。在本例中,應用程式啟動宣傳品牌宣傳影片或動畫也可以。這種冷啟動體驗在每個工作階段中不太可能發生一次。

此外,如果轉入深層連結的頻道需要幾秒鐘,則可以顯示頻道和/或服務品牌宣傳內容。但是,它的時間長度應只受限於載入管道所花費的時間,且與應用程式內的平均頻道載入時間類似。

如果使用者登出或未訂閱,您可以封鎖付費頻道的播放功能,以便完成登入或註冊流程。

直接返回

當使用者透過「Live」分頁上的深層連結啟動應用程式並按下返回按鈕時,無論經過的時間為何,都必須返回「Live」分頁。無論 Google TV 和 Android TV 上的所有「即時」分頁深層連結,都必須具備這項直接返回行為。

即時分頁深層連結會透過附加的深層連結參數區分:?exit_on_back=[true|false]。應用程式必須剖析此參數,才能判斷應用程式是否從「Live」分頁啟動。如果 exit_on_backtrue,應用程式必須實作直接返回行為。

請注意,如果使用者在深層連結後按下返回按鈕以外的任何按鈕,則不會套用直接返回要求,只需要標準返回按鈕行為

舉例來說,假設在點選深層連結後,使用者按下 D-Pad 的選取按鈕後,畫面上就會顯示控制項重疊。使用者等待疊加層消失,接著按下返回按鈕。由於 D-Pad 的選取按鈕是在深層連結後按下的第一個按鈕,因此不適用直接返回要求。而是套用一般的應用程式返回堆疊邏輯。

反覆按下返回按鈕,必須將使用者導向應用程式根層級,然後再返回 Google TV 或 Android TV,不得無限循環。詳情請參閱「可預測的返回按鈕行為」一節。

固定的起始目的地

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

深層連結會模擬手動導覽

無論是深層連結或手動導覽至特定目的地,使用者都能使用返回按鈕瀏覽目的地,回到起始目的地。

顯示應用程式中深層連結深層連結的螢幕截圖。
            
            按下返回可返回該應用程式的主畫面,接著再次按下返回按鈕,即可返回原始畫面。

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

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

讓使用者以明確方向瀏覽 UI。如果沒有能輕鬆進入控制項的路徑,請考慮重新放置控制項。

可聚焦的導覽範例

正確做法:
在不會與其他可點擊元素重疊的位置放置控制項 (例如此處顯示的搜尋動作)。

可聚焦的導覽範例

錯誤做法:
請避免在難以觸及的位置包含控制項的版面配置。使用者無法輕鬆使用 D-Pad 管理目前顯示的搜尋動作。

設計版面配置時,可善用水平軸與垂直軸。請為每個方向提供特定函式,以便快速瀏覽大型階層。

導覽軸範例

建議做法:
垂直軸可以周遊類別,水平軸可以瀏覽每個類別的項目。

導覽軸範例

錯誤做法:
避免使用複雜的巢狀版面配置階層。