ナビゲーション ドロワーは、ユーザーがさまざまなデスティネーションや機能にアクセスできるようにするため、TV アプリに不可欠なコンポーネントです。ナビゲーション ドロワーは、アプリの情報アーキテクチャのバックボーンであり、アプリ内を移動するための明確で直感的な方法を提供します。
モバイル ナビゲーション ドロワーとは対照的に、テレビのナビゲーション ドロワーは、開いた状態と閉じた状態のどちらでもユーザーに表示されます。
リソース
| タイプ | リンク | ステータス |
|---|---|---|
| デザイン | デザインソース（Figma） | 利用可能 |
| 実装 |
Jetpack Compose（NavigationDrawer）
Jetpack Compose（ModalNavigationDrawer） |
利用可能 |
ハイライト
- デスティネーションはユーザーの重要度に従って順序付けされ、よく使用するデスティネーションが最初に並べられ、関連するデスティネーションがグループ化されます。
- 折りたたんだ場合、標準ナビゲーション ドロワーとモーダル ナビゲーション ドロワーの両方にナビゲーション レールが必要です。
バリエーション
ナビゲーション ドロワーのスタイルには次の 2 種類があります。
- 標準ナビゲーション ドロワー - 展開してナビゲーション用のスペースを追加し、ページ コンテンツを横に押し出します。
- モーダル ナビゲーション ドロワー - アプリのコンテンツの上にオーバーレイとして表示され、ドロワーが展開されたときに読みやすくするためのスクリム付きで表示されます。
標準ナビゲーション ドロワー
構造
- 最上部: アプリのロゴが表示されます。プロファイルを切り替えたり、検索アクションをトリガーしたりするためのボタンとして機能します。折りたたまれた状態では、一番上のコンテナにはアイコンのみが表示されたままになります。
- ナビゲーション アイテム: ナビゲーション レールの各項目はアイコンとテキストの組み合わせで、折りたたみ状態ではアイコンのみが表示されます。
- ナビゲーション レール: ナビゲーション レールは 3 ～ 7 個のアプリのデスティネーションを表示する列で、メインメニューとして機能します。各デスティネーションにはテキストラベルとオプションのアイコンがあり、メニュー項目をグループ化してコンテキストをわかりやすくすることもできます。
- 下部のセクション: 1 ～ 3 個の操作ボタンを配置できます。設定、ヘルプ、プロフィールなどのページに適しています。
動作
- ナビゲーション ドロワーの展開: 標準ナビゲーション ドロワーを展開すると、ページ コンテンツがプッシュされ、ナビゲーション用の展開バージョンのスペースが確保されます。
- ナビゲーションの更新: あるナビゲーション アイテムから別のナビゲーション アイテムに移動すると、ページは新しいデスティネーションに自動的に更新されます。
モーダル ナビゲーション ドロワー
構造
- 最上部: アプリのロゴが表示されます。プロファイルを切り替えるボタン、または検索アクションをトリガーするボタンとして機能します。折りたたまれた状態では、アイコンのみが一番上のコンテナに表示されます。
- ナビゲーション アイテム: ナビゲーション レールの各項目はアイコンとテキストの組み合わせで、折りたたみ状態ではアイコンのみが表示されます。
- ナビゲーション レール: 3 ～ 7 個のアプリのデスティネーションを表示する列。メインメニューとして機能します。各デスティネーションにはテキストラベルとオプションのアイコンがあり、メニュー項目をグループ化してコンテキストをわかりやすくすることもできます。
- スクリム: ナビゲーション項目のテキストを読みやすくします。
- 下部のセクション: 1 ～ 3 個の操作ボタンを配置できます。設定、ヘルプ、プロフィールなどのページに適しています。
動作
- ドロワーの展開: アプリのコンテンツの上にオーバーレイとして表示され、ドロワーを展開したときに読みやすくなるスクリム付きで表示されます。
- ナビゲーションの更新: ユーザーがナビゲーション アイテムを選択したときに発生します。
スクリム
モーダル ナビゲーション ドロワーの場合、ドロワーの後ろにスクリムを設けることで、ドロワーのコンテンツを読みやすくします。ナビゲーション ドロワーの背後でグラデーションや無地のサーフェスを使用して、さまざまなバージョンの UI を作成できます。
グラデーション スクリム
濃いスクリム
仕様
Usage
アクティブインジケーター
アクティブ インジケーターは、表示されるナビゲーション ドロワーのデスティネーションをハイライト表示する視覚的な手がかりです。インジケーターは通常、ドロワー内の他のアイテムと視覚的に区別できる背景シェイプで表されます。アクティブ インジケーターは、ユーザーがアプリ内の場所や閲覧しているページを把握するのに役立ちます。アクティブ インジケーターがはっきりと表示され、ナビゲーション ドロワー内の他のアイテムと簡単に区別できるようにします。
分割線（省略可）
ナビゲーション ドロワー内でデスティネーションのグループを分割すると、デバイスを整理しやすくなります。ただし、分割線が多すぎると視覚的なノイズが発生し、ユーザーに不要な認知過負荷が加わるため、慎重に使用することが重要です。
バッジ
バッジは、ナビゲーション アイテムに追加して追加情報を表示できる視覚的な手がかりです。たとえば、バッジを使用してストリーミング アプリで視聴できる新作映画の数を示すことができます。バッジは UI が見にくく雑然とした印象を与える可能性があるため、控えめに、必要な場合にのみ使用します。バッジを使用するときは、明確で理解しやすいものにし、ユーザーのアプリの操作を妨げないようにします。
バッジを開きました
バッジを閉じました
ラベル
ナビゲーション ドロワーのラベルは、読みやすくするために明確かつ簡潔にする必要があります。
注意
すべきでないこと
すべきでないこと
すべきでないこと
ナビゲーション ドロワーは、アプリの階層を表す基本要素であり、主要なナビゲーション デスティネーションを 5 ～ 6 個だけリストするために使用します。
すべきこと
