電視裝置為應用程式提供有限的瀏覽控制項。要為 TV 應用程式建立有效的導覽配置,必須瞭解這些有限的控制項,以及在使用者操作應用程式時的限制。當您建構 Android 版 Android 應用程式時,請特別留意使用者在使用遙控器按鈕 (而非觸控螢幕) 時如何進行瀏覽。
開發原則
目的是讓導覽看起來更自然且熟悉,但又不會分散使用者介面,或將注意力分散到內容上。下列原則可協助您設定基準,在各個 TV 應用程式中打造一致且直覺的使用者體驗。
讓使用者可以輕鬆快速地存取內容。使用者希望只要按幾下滑鼠,就能迅速存取內容。以符合最少畫面的方式整理資訊。
遵循最佳做法和建議,讓使用者能夠預測導覽內容。請勿無謂設計導覽模式,以免造成混淆和產生無法預測的情況。
簡化導覽機制,順暢支援廣泛採用的使用者行為。請勿加入不必要的導覽圖層,而變得過度複雜。
控制器
控制器有多種風格,從極簡的遙控器到複雜的遊戲控制器都有。所有控制器都有一個方向鍵 (D-Pad),還有選取、主畫面和返回按鈕。其他按鈕則因型號而異。
D-Pad
電視的主要導覽方法是使用 D-Pad,其中包括上、下、左、右方向硬體按鈕。D-Pad 會依據按下按鈕的方向,將焦點從某個物件轉移至最接近的物件。
選取按鈕
選取畫面上的項目。
首頁按鈕
將使用者導向系統主畫面。
返回按鈕
方便使用者返回上一個檢視畫面。
麥克風按鈕
叫用 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
。請務必將導覽順序設為迴圈,讓最後一個控制項將焦點移回第一個控制項。
提供明確的重點和選項
應用程式能否在 TV 裝置上成功導覽,取決於使用者是否容易判斷焦點所關注的使用者介面元素。如果未明確指出焦點所在項目,讓使用者可對哪個項目採取行動,使用者可能很快就感到不悅並退出應用程式。同樣地,請務必確保焦點移至某個項目,讓使用者可在應用程式啟動或閒置時立即採取行動。
在應用程式版面配置和實作項目中,請使用顏色、大小、動畫或這些屬性的組合,協助使用者輕鬆判斷接下來可以採取哪些動作。使用統一的配置來表示應用程式的焦點。
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 一樣。如果您使用 Navigation 元件,即可支援各種導覽圖。有時候,您可能需要實作一些自訂行為,例如讓返回按鈕將焦點重設為長清單開頭。
ComponentActivity
是 FragmentActivity
和 AppCompatActivity
的基礎類別,可讓您使用 OnBackPressedDispatcher
控制返回按鈕的行為,而您可以呼叫 getOnBackPressedDispatcher()
來擷取該按鈕。
詳情請參閱「提供自訂返回瀏覽功能」。
電視上的播放控制項
影片播放是電視上最重要的功能之一。請注意,Android TV 應用程式中的影片播放器運作方式必須相同。請參閱電視播放控制項規範。
「直播」分頁導覽
除了遵守 TV 應用程式品質規定外,將電視直播動態饋給整合至「直播」分頁的應用程式也必須符合流暢的播放和返回播放規定。如以下各節所述。
流暢播放體驗
流暢播放功能適用於 Google TV 和 Android TV 提供直播/線性頻道深層連結後的應用程式內行為。
使用者在 Google TV 和 Android TV 上點選直播/線性頻道深層連結後,必須直接連往頻道播放,不能在目標應用程式進行任何封鎖或延遲顯示畫面。我們不得允許登入流程、註冊流程、品牌宣傳影片和其他延遲。
不過,如果深層連結從冷啟動啟動目標應用程式載入作業,這個啟動延遲時間就「可以」播放。在這種情況下,應用程式也能啟動宣傳品牌影片或動畫。這種冷啟動體驗不太可能在每個工作階段中出現超過一次。
此外,如果調整深層連結管道需要幾秒鐘的時間,即可以顯示頻道和/或服務品牌宣傳內容。不過,時間長度應該只等同於載入頻道所需的時間,且類似於應用程式的平均頻道載入時間。
如果使用者登出或未訂閱,您可以封鎖付費頻道的播放功能,以完成登入或註冊流程。
正反兩用
當使用者透過「直播」分頁中的深層連結啟動應用程式,然後按下返回按鈕時,無論已花費多少時間,使用者只要按下返回按鈕,就能返回「直播」分頁。如要在 Google TV 和 Android TV 上查看所有「直播」分頁深層連結,就必須執行這種直接返回行為。
即時分頁的深層連結可利用附加的深層連結參數區分:?exit_on_back=[true|false]
。應用程式必須剖析這個參數,才能判斷應用程式是否已從「Live」分頁啟動。如果 exit_on_back
為 true
,應用程式必須實作直接返回行為。
請注意,如果使用者是在深層連結後按下返回按鈕以外的任何按鈕時,就不適用直接返回規定,只需使用標準的返回按鈕行為即可。
舉例來說,假設在點選深層連結之後,使用者按下 D-Pad 的選取按鈕,開啟控制項重疊畫面。使用者等待疊加層消失,然後按下返回按鈕。因為深層連結之後按下的第一個按鈕是 D-Pad 的選取按鈕,因此不適用直接返回規定。而應套用一般的應用程式返回堆疊邏輯。
重複按下返回按鈕時,必須將使用者導向應用程式根目錄,然後再返回 Google TV 或 Android TV,同時不應出現無限迴圈。詳情請參閱「可預測的返回按鈕行為」一節。
導覽架構
固定的起始目的地
使用者從啟動器啟動應用程式時看到的第一個畫面,也是使用者在按下返回按鈕後,返回啟動器時看到的最後一個畫面。
深層連結會模擬手動導覽
無論是深層連結或手動導覽至特定目的地,使用者都可以使用返回按鈕瀏覽目的地,回到起始目的地。
從其他應用程式深層連結到應用程式的深層連結,會模擬手動導覽。例如,如果使用者透過 Google TV 直接前往 Moviestar 應用程式的詳細資料頁面,然後按下返回按鈕,系統會將他們導向 Moviestar 應用程式的首頁。
所有可聚焦元素的明確路徑
讓使用者以清楚的方向瀏覽 UI。如果沒有任何直接路徑進入控制項,請考慮重新放置該控制項。
正確做法:
請將控制項 (例如這裡顯示的搜尋動作) 放置在不會與其他可點擊元素重疊的位置。
錯誤做法:
請避免在難以觸及的位置使用含有控制項的版面配置。使用 D-Pad 很難管理此處顯示的搜尋動作。
軸
設計版面配置時,請善用水平和垂直軸。為每個方向提供具體函式,讓每個方向都能快速瀏覽大型階層。
正確做法:
您可在垂直軸上掃遍類別,橫軸可瀏覽每個類別的項目。
錯誤做法:
避免使用複雜的巢狀版面配置階層。