レイアウトは、アプリ全体で視覚的な一貫性を維持するためのフレームワークを提供する構造テンプレートです。レイアウトは、視覚的なグリッド、間隔、セクションを定義することで、情報と UI 要素の表示のためのまとまりのある整理された構造を確立します。
ハイライト
- ウェブやモバイルとは異なり、テレビの画面アスペクト比は 16:9 に固定されています。
- 使いやすく制御しやすいように、水平軸と垂直軸に沿ってレイアウトを最適化します。
原則
TV 用レイアウトを設計する際のデザイン上の意思決定に役立つガイドラインです。
大画面用に設計する
HDTV の普及以降、アスペクト比が 16:9 の長方形のテレビが標準になりました。従来、テレビは 4:3 または 1.33:1 のアスペクト比として知られる正方形の形状で製造されていました。
Android プラットフォームでの設計
設計時には、他の Android 搭載デバイスと同様に、dp を使用して、さまざまな密度の画面で要素を均一に表示します。常に 960 x 540 ピクセルの MDPI 解像度でデザインします。
MDPI では 1px = 1 dp です。
アセットは 1080p にする必要があります。これにより、Android システムは必要に応じてレイアウト要素を 720p にダウンスケールできます。
可視性とオーバースキャンの安全性を確保
重要な要素がユーザーに常に表示されるようにします。これを行うには、レイアウトの左右に 48 dp、上下に 27 dp の 5% のマージンで要素を配置します。これにより、レイアウトの画面要素がオーバースキャン内に収まるようになります。
全画面表示
背景画面要素をオーバースキャンのセーフエリアに合わせて調整したり、クリップしたりしないでください。代わりに、画面外要素の一部を表示できるようにします。これにより、すべての画面に背景要素と画面外要素が正しく表示されるようになります。
軸を使って最適化する
テレビのリモコンの使い方について考えてみましょう。テレビのインターフェースがリモコンで使いやすいことを確認します。各方向（上、下、左、右）には明確な目的とナビゲーション パターンを設定し、ユーザーが大きなオプション グループ間を移動する方法を理解できるようにします。
レイアウト
テレビの画面サイズはデバイスによって異なります。最新のテレビのアスペクト比は 16:9 であるため、アプリを 960 x 540 ピクセルの画面サイズで設計することをおすすめします。これにより、HD または 4K 画面に比例してすべての要素をサイズ変更できます。
オーバースキャンのマージン
オーバースキャン マージンは、コンテンツ間や画面の左右端のスペースです。
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
この枠線の余白は、主要な要素をオーバースキャンの潜在的な問題から保護します。 コンテンツと情報を安全に保つため、余白を 5% のレイアウト（左右 58 dp、上端と下端 28 dp）にします。
柱とガター
コンテンツは、列とガターがある画面の領域に配置されます。グリッド システムは 12 列です。ガターは列の間のスペースで、コンテンツを分割するのに役立ちます。
幅 52 dp、間隔 20 dp の 12 列を使用します。左右に 58 dp のスペースと、行間の垂直方向のスペース 4 dp が必要です。
レイアウト パターン
意図する目的と表示デバイスに応じて、水平スタック レイアウト、垂直スタック レイアウト、グリッド レイアウトの 3 つのレイアウト パターンを使用できます。
水平スタック レイアウト
Horizontal Stack Layout は、コンポーネントを水平方向に配置します。さまざまなサイズ、比率、形式を使用できます。このレイアウトは、コンテンツとコンポーネントをグループ化するためによく使用されます。
垂直スタック レイアウト
垂直スタック レイアウトは、コンポーネントを垂直方向に配置し、柔軟なサイズ、比率、形式を可能にします。さまざまな種類のテキスト、インタラクティブなコンポーネント、レイアウト パターンをグループ化するためによく使用されます。
グリッド レイアウト
グリッドは交差する列と行のコレクションであり、グリッド レイアウトはこのグリッドにコンテンツを表示します。論理的な方法でコンテンツを配置し、ユーザーが簡単に移動、参照できるようにします。
重複を防ぐには、アイテム間のパディングと、フォーカスされた状態のサイズの増加を考慮することが重要です。たとえば、フォーカスされているコンポーネント（カードなど）がハイライト表示されているときなどです。推奨されているグリッド レイアウト（52 dp の 12 列、20 dp のガター）を使用している場合は、推奨されるコンポーネントのレイアウトとプレビューについては「カード」をご覧ください。
レイアウト構造
TV 用レイアウトを設計する際の判断材料として役立つレイアウト構造を以下に示します。テレビ画面を水平方向に分割することで、さまざまな種類のコンポーネントを分離し、情報階層とナビゲーション ロジックを伝えることができます。ペインには複数の単位列を含めることができます。各パネルは、スタック レイアウトやグリッド レイアウトなど、さまざまなレイアウト パターンをホストできます。
シングルペイン レイアウト
単一ペインのレイアウトは、主要なコンテンツに注目させるのに役立ちます。コンテンツフォワード エクスペリエンスや重要な情報ページで使用します。
2 ペイン レイアウト
ページに階層的なコンテンツを表示する場合は、2 ペイン レイアウトのほうがパフォーマンスが向上します。タスク中心のエクスペリエンスで広く使用されています。
認知機能過負荷
複雑で不明確なコンテンツは、混乱や不満を引き起こし、エンゲージメントの低下につながる可能性があります。デザインはスキャン可能で整理し、重要な情報のみを表示します。
コンテンツをグループ化するためにパネルを多用しすぎないようにしてください。これにより、ユーザーに不要な認知負荷と階層が発生します。
すべきこと
すべきでないこと
Express の階層とナビゲーション
パネルはコンテンツを視覚的に分離して整理します。これらは、ユーザーのガイド役となり、より直感的なインターフェースを作成してエクスペリエンスを向上させます。
すべきこと
すべきでないこと
レイアウト テンプレート
レイアウト テンプレートは、順序、一貫性、親しみやすさを高めます。このデザインにより、ユーザーの現在地と移動先を明確に伝える快適な UI を作成します。
探す
ブラウザ テンプレートは、メディア コンテンツの「クラスタ」、つまり縦に重なった行を表示します。ユーザーは、上下に移動して行を参照したり、左右に移動して特定の行のコンテンツを閲覧したりします。
左オーバーレイ
左側のナビゲーション テンプレートでは、画面の左側にオーバーレイ パネルが表示されます。通常は、バックグラウンドのコンテンツに関連するナビゲーションや操作可能なアイテムを表示します。
右オーバーレイ
右側のオーバーレイ テンプレートでは、画面の右側にオーバーレイ パネルが表示されます。通常は、バックグラウンドのコンテンツとは無関係に操作したアイテムが表示されます。
中央オーバーレイ
中央のオーバーレイ テンプレートには、既存のビューの上にオーバーレイされるモーダル要素が表示されています。緊急情報の伝達や意思決定を促すために使用されます。
下部オーバーレイ
ボトム オーバーレイ テンプレートは、ボトムシートによく使用されます。ボトムシートは、補足的なコンテンツを含むサーフェスで、画面の下部に固定されます。これにより、現在のページのコンテキストを失うことなくミニフローを作成できます。
アクション
アクション テンプレートの左側にはタイトルとサブタイトル、右側にはオプションやアクションが表示されています。通常、ユーザーはこのテンプレートを使ってオプションの選択や操作が求められます。
コンテンツの詳細
コンテンツの詳細テンプレートでは、コンテンツが横方向に積み重ねられて表示されます。コンテンツは通常、タイトル、メタデータ、簡単な説明、クイック操作、関連情報のクラスタなどです。
コンパイル
コンピレーション テンプレートでは、ポッドキャストなどのアイテムの詳細が画面の左側に表示され、その要素（エピソードなどの要素）が右側のパネルに表示されます。
GRid
グリッド テンプレートでは、コンテンツのコレクションが整理されたグリッドで表示されます。明確なリモート ナビゲーション ロジックを備え、最適なブラウジング エクスペリエンスでコンテンツを提示します。
警告
アラート テンプレートが全画面表示のメッセージが表示されます。通常は、アラートのブロックを解除して前の画面に戻るための操作が必要です。
カードの列
1 枚のカード レイアウト
カードの幅 - 844 dp
2 カード レイアウト
カードの幅 - 412 dp
3 カード レイアウト
カードの幅 - 268 dp
4 カード レイアウト
カードの幅 - 196 dp
5 枚カード レイアウト
カードの幅 - 124 dp
