テレビデバイスでは、アプリのナビゲーション コントロールが限定されています。TV アプリ向けの効果的なナビゲーション スキームを作成するには、こうした制限されたコントロールと、アプリを操作する際のユーザーの制限を理解する必要があります。TV 用の Android アプリを作成する際は、タッチ スクリーンではなくリモコン ボタンを使用する場合のユーザー操作に特に注意してください。
原則
目標は、ナビゲーションが、ユーザー インターフェースを支配したり、コンテンツから注意をそらしたりすることなく、自然で親しみやすいようにすることです。次の原則は、TV アプリ全体で一貫性のある直感的なユーザー エクスペリエンスのベースラインを設定するのに役立ちます。
コンテンツにすばやく簡単にアクセスできるようにします。ユーザーは、最小限のクリックですばやくコンテンツにアクセスしたいと考えています。必要最小限の画面を使用して情報を整理します。
ベスト プラクティスや推奨事項に沿って、ユーザーがナビゲーションを予測できるようにします。混乱や予測不能の原因となるため、不必要にナビゲーション パターンを作り直すのは避けてください。
広く採用されているユーザー行動をシームレスにサポートできるよう、ナビゲーションをシンプルにします。ナビゲーションの不要なレイヤを追加して、複雑になりすぎないようにします。
コントローラ
コントローラには、シンプルなリモコンから複雑なゲーム コントローラまで、さまざまなスタイルがあります。すべてのコントローラには十字キー（D-pad）と、選択ボタン、ホームボタン、戻るボタンがあります。その他のボタンはモデルによって異なります。
D-pad
TV の主なナビゲーション方法は、ハードウェアの上下左右の方向ボタンを含む D-pad を使用する方法です。D-pad は、ボタンを押したときの方向に、あるオブジェクトから最も近いオブジェクトにフォーカスを移動します。
選択ボタン
フォーカスが置かれた画面上のアイテムを選択します。
ホームボタン
システムのホーム画面に移動します。
戻るボタン
前のビューに戻ることができます。
マイクボタン
Google アシスタントまたは音声入力を呼び出します。
D-pad ナビゲーション
テレビデバイスでは、ユーザーは D-pad または矢印キーを使用して移動します。この操作では、上下左右の動きが制限されます。テレビ用に最適化された優れたアプリを作成するには、ユーザーがこれらの限られたコントロールを使用してアプリの操作方法をすばやく習得できるナビゲーション スキームを提供する必要があります。
Android フレームワークでは、レイアウト要素間の方向ナビゲーションが自動的に処理されるため、通常はアプリ側で追加の作業を行う必要はありません。ただし、D-pad コントローラによるナビゲーションを徹底的にテストして、ナビゲーションの問題を発見する必要があります。
以下のガイドラインに沿って、アプリのナビゲーション システムが TV デバイスの 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" />
フォーカス可能なコントロールと選択可能なコントロール内には、周囲のハイライトがはっきりと見えるように、十分なパディングを確保してください。
[戻る] ボタンのナビゲーション
プラットフォーム上のアプリ間の一貫性を保つため、[戻る] ボタンの動作が以下のガイドラインに従っていることを確認してください。
予測可能な [戻る] ボタンの動作を使用する
簡単で予測可能なナビゲーション エクスペリエンスを実現するには、ユーザーがリモコンの戻るボタンを押したときに、前のデスティネーションに移動するようにします。
ユーザーがメニュー項目からページ中央のカードに移動してから [戻る] ボタンを押した場合、結果はアプリがトップ ナビゲーションと左ナビゲーションのどちらを使用しているかによって異なります。
- アプリがトップ ナビゲーションを使用する: すばやくスクロールしてメニューのフォーカスを有効にすることで、ユーザーをページの一番上に戻します。
- アプリで左側のナビゲーションを使用する: 左側のメニューを有効にして、現在アクティブなメニュー項目にフォーカスします。
戻るボタンが確認画面や無限ループの一部で制限されていないことを確認します。
すべきでないこと。
終了ゲートを回避します。ユーザーが確認メッセージを表示せずにアプリを終了できるようにします。
すべきでないこと。
メニューを閉じる / 開くという無限ループには入らないでください。戻るボタンを押すと、アプリが終了するのが理想的です。お子様用プロフィールなどの特殊なケースでない限り、メニューに終了ボタンを表示しないでください。
[上へ] ボタンまたは [戻る] ボタンを表示しない
ハンドヘルド デバイスとは異なり、テレビを戻るにはリモコンの戻るボタンを使用します。仮想 [戻る] ボタンを画面に表示する必要はありません。
非推奨
必要に応じてキャンセル ボタンを表示する
表示されるアクションが確認、破壊、購入のみである場合は、前のデスティネーションに戻る [キャンセル] ボタンを用意することをおすすめします。
推奨。
「戻る」ナビゲーションを実装する
Android フレームワークは通常、「戻る」ナビゲーションを D-pad と同様に適切に処理します。Navigation コンポーネントを使用すると、さまざまなナビゲーション グラフをサポートできます。場合によっては、[戻る] ボタンでフォーカスを長いリストの先頭にリセットするなど、カスタム動作の実装が必要になる場合があります。
FragmentActivity と AppCompatActivity の基本クラスである ComponentActivity を使用すると、OnBackPressedDispatcher を使用して [戻る] ボタンの動作を制御できます。これは getOnBackPressedDispatcher() を呼び出して取得できます。
詳細については、カスタムの「戻る」ナビゲーションを提供するをご覧ください。
テレビの再生コントロール
動画の再生は、テレビの最も重要な機能の一つです。Android TV 全体でアプリの動画プレーヤーが同じように動作することが重要です。テレビの再生コントロールのガイドラインをご覧ください。
[ライブ] タブのナビゲーション
[ライブ] タブにライブテレビ フィードが統合されたアプリは、テレビアプリの品質要件に準拠するだけでなく、以下のセクションで説明するようにスムーズな再生とダイレクトバックの要件も満たす必要があります。
スムーズな再生
スムーズな再生は、Google TV と Android TV からのライブ/リニア チャンネルのディープリンクに従うアプリ内動作に適用されます。
Google TV および Android TV でライブ/リニア チャンネルのディープリンクをクリックしたユーザーは、ターゲット アプリの画面をブロックしたり遅延させたりすることなく、チャンネル再生に直接誘導する必要があります。ログイン、登録、ブランディング動画などの遅延は許可されません。
ただし、ディープリンクがコールドブートからターゲット アプリの読み込みを開始する場合、再生前のこの起動遅延は許容されます。この場合、アプリの起動時のブランディング動画やアニメーションも使用できます。このようなコールドブートがセッションごとに複数回発生することはまずありません。
また、ディープリンクが設定されたチャンネルの視聴に数秒かかる場合は、チャンネルやサービスのブランディングを表示することは許可されています。ただし、その時間は、チャンネルの読み込みに必要な時間（アプリ内のチャンネルの平均読み込み時間と同様）にする必要があります。
ユーザーがログアウトしているか、登録していない場合は、有料チャンネルの再生をブロックして、ログインまたは登録のフローを完了できます。
ダイレクトバック
ユーザーが [ライブ] タブのディープリンクからアプリを起動してから、[戻る] ボタンを押すと、経過時間に関係なく、1 回押すだけで [ライブ] タブに戻る必要があります。この直接戻る動作は、Google TV と Android TV のすべての [ライブ] タブのディープリンクで必要です。
[ライブ] タブのディープリンクは、追加されたディープリンク パラメータ（?exit_on_back=[true|false]）で区別されます。アプリはこのパラメータを解析して、[ライブ] タブからアプリが起動されたかどうかを判断する必要があります。exit_on_back が true の場合、アプリはダイレクトバック動作を実装する必要があります。
ディープリンクの後の最初のボタンで、ユーザーが [戻る] ボタン以外のボタンを押した場合、直接戻る要件は適用されず、標準の戻るボタンの動作のみが必要です。
たとえば、ディープリンクをたどった後にユーザーが D-pad の選択ボタンを押すと、コントロール オーバーレイが表示されたとします。ユーザーはオーバーレイが消えるのを待ってから、[戻る] ボタンを押します。ディープリンクをたどって最初に押されたボタンが D-pad の選択ボタンであるため、ダイレクトバックの要件は適用されません。代わりに、通常のアプリのバックスタック ロジックが適用されます。
戻るボタンを繰り返し押すと、無限ループを発生させることなく、ユーザーをアプリのルートに誘導してから Google TV または Android TV に戻る必要があります。詳しくは、予測可能な [戻る] ボタンの動作をご覧ください。
ナビゲーション アーキテクチャ
固定的な開始デスティネーションを設定する
ユーザーがランチャーからアプリを起動したときに最初に表示される画面は、ユーザーが [戻る] ボタンを押した後、ランチャーに戻ったときに表示される最後の画面でもあります。
ディープリンクの場合は手動ナビゲーションをシミュレーションする
特定のデスティネーションにディープリンクしているか手動で移動するかにかかわらず、ユーザーは [戻る] ボタンを使ってデスティネーション間を移動して開始デスティネーションに戻ることができます。
別のアプリからアプリへのディープリンクは、手動ナビゲーションをシミュレートします。たとえば、ユーザーが Google TV から Moviestar アプリの詳細ページに直接移動してから戻るボタンを押すと、Movietar アプリのホームページが表示されます。
フォーカス可能なすべての要素への明確なパス
ユーザーが明確な方向で UI を操作できるようにします。コントロールにたどり着けない場合は、移動を検討してください。
推奨。
ここに示す検索操作のようなコントロールは、クリック可能な他の要素と重ならない場所に配置してください。
すべきでないこと。
手の届きにくい場所にコントロールを配置するレイアウトは避けてください。ここに示す検索アクションを表示する方法は、D-pad では簡単に操作できません。
軸
水平軸と垂直軸の両方を活用するようにレイアウトを設計します。各方向に特定の関数を指定して、大規模な階層をすばやくナビゲートできるようにします。
推奨。
カテゴリは縦軸でトラバースでき、各カテゴリ内のアイテムは横軸で閲覧できます。
すべきでないこと。
複雑でネストされたレイアウト階層は避けてください。