レイアウトは、インフラストラクチャを継続的に維持するためのフレームワークを提供する構造的なテンプレート アプリ全体の視覚的な一貫性を確保できます視覚的なグリッド、間隔、 セクションがあり、レイアウトによって、 情報および UI 要素の表示。
ハイライト
- ウェブやモバイルとは異なり、テレビのアスペクト比は 16:9 の固定画面です。
- 使いやすさを考慮して、横軸と縦軸に沿ってレイアウトを最適化する 制御が必要です。
原則
TV 用レイアウトをデザインする際のデザイン決定に役立つガイドライン。
大画面用に設計する
HDTV の普及以来、アスペクト比 16:9 の長方形テレビが標準になりました。歴史的に、テレビはアスペクト比 4:3 や 1.33:1 と呼ばれる正方形の形状で製造されていました。
Android プラットフォームでの設計
設計時には、他の Android 搭載デバイスと同様に、dp を使用してさまざまな密度の画面で要素を一様に表示します。常に MDPI 解像度 960 x 540 ピクセルでデザインします。
MDPI で 1 px = 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 つのレイアウト パターンが 水平スタック レイアウト、垂直スタック レイアウト、 グリッドレイアウトです
水平スタック レイアウト
水平スタック レイアウトは、コンポーネントを水平に配置します。 サイズ、アスペクト比、形式が異なる場合があります。このレイアウトは通常 コンテンツとコンポーネントの グループ化に使用できます
垂直スタック レイアウト
垂直スタック レイアウトは、コンポーネントを垂直方向に配置するものです。 サイズ、アスペクト比、フォーマットを柔軟に調整できます。一般的に、 テキスト、インタラクティブな要素、要素をグループ化するために使用できます。 組み合わせることをおすすめします。
グリッド レイアウト
グリッドとは、交差する列と行、およびグリッドの集合体 レイアウトでは、このグリッド内にコンテンツを表示します。論理的にコンテンツを ユーザーが簡単に移動してブラウジングできます
重なりを防ぐには テキストと画像の間の パディングを考慮することが重要です フォーカス状態のサイズの増大などですたとえば、フォーカスした ハイライト表示されます。Google 推奨の グリッド レイアウト（52 dp の 12 列、20 dp のガター）。 推奨のコンポーネント レイアウトとプレビューです。
レイアウト構造
レイアウト構造の例をいくつか紹介します。 TV 向けレイアウトのデザインにおける決定事項について説明します。テレビ画面を横に分割することで さまざまなタイプのコンポーネントを区別したり、情報を ナビゲーションロジックが用意されています。1 つのペインに複数の単位列を含めることができます。 各パネルは、スタック レイアウトなどの異なるレイアウト パターンをホストできる グリッドレイアウトです
シングルペイン レイアウト
シングルペイン レイアウトで、主要なコンテンツへの注目を集めることができます。コンテンツ中心のエクスペリエンスや重要な情報ページで使用します。
2 ペイン レイアウト
2 ペイン レイアウトは、ページに階層コンテンツを表示するとパフォーマンスが向上します。タスク指向のエクスペリエンスで広く使用されています。
認知過負荷
複雑で不明確なコンテンツは、混乱、イライラ、落ち込みにつながる可能性があります。 できます。読みやすい、すっきりとしたプレゼンテーションにデザインする 重要な情報のみを取得できます。
コンテンツのグループ化にパネルを多用しすぎないようにしてください。これにより、 ユーザーに不必要な認知負荷や階層を生じさせます。
すべきこと
すべきでないこと
階層とナビゲーションを明示
パネルは、コンテンツを視覚的に分離して整理したものです。ユーザーをガイドし より直感的なインターフェースを作成して ユーザーエクスペリエンスが向上します
すべきこと
すべきでないこと
レイアウト テンプレート
レイアウト テンプレートを使用すると、順序、一貫性、親しみやすさが向上します。設計 ユーザーが操作しやすい UI を作り出し、ユーザーが 把握しておくことが重要となります。
参照
ブラウザ テンプレートにメディア コンテンツの「クラスタ」が表示されている行に分割できます上下に移動して行を参照し、左右に移動して特定の行のコンテンツを閲覧します。
左のオーバーレイ
左側のナビゲーション テンプレートでは、画面の左側にオーバーレイ パネルを表示します。通常は、背景にあるコンテンツに関連する操作可能なナビゲーションや項目が表示されます。
右オーバーレイ
右側のオーバーレイ テンプレートでは、画面の右側にオーバーレイ パネルが表示されます。通常は、バックグラウンドのコンテンツとは独立してアクション対象のアイテムが表示されます。
中央に重ねて表示
中央のオーバーレイ テンプレートは、既存のビューの上にオーバーレイするモーダル要素を表示します。緊急情報を伝達したり、決定を促したりするために使用されます。
下部オーバーレイ
ボトム オーバーレイ テンプレートは、ボトムシートによく使用されます。ボトムシートは、補完的なコンテンツを画面の下部に固定したサーフェスです。現在のページのコンテキストを失わずに小さなフローを作成できます。
操作
アクション テンプレートの左側にはタイトルとサブタイトルが表示され、右側にはオプションまたはアクションが表示されます。通常、ユーザーはこのテンプレートを使用したオプションやアクションを行うよう求められます。
コンテンツの詳細
コンテンツの詳細テンプレートは、水平方向の積み重ねレイアウトでコンテンツを表示します。コンテンツには通常、タイトル、メタデータ、簡単な説明、クイック操作、関連情報クラスタが含まれます。
コンパイル
コンピレーション テンプレートでは、画面左側のアイテム（ポッドキャストなど）の詳細が表示され、その要素（エピソードなど）が右側のパネルに表示されます。
グリッド
グリッド テンプレートは、コンテンツのコレクションをグリッド形式で表示します。明確なリモート ナビゲーション ロジックと最適なブラウジング エクスペリエンスを備えたコンテンツを表示します。
警告
アラート テンプレートはメッセージを全画面表示します。通常、アラートのブロックを解除して前の画面に戻るには、操作が必要になります。
カードの列
1 枚のカード レイアウト
カードの幅 - 844 dp
2 枚のカード レイアウト
カードの幅 - 412 dp
3 枚のカード レイアウト
カードの幅 - 268 dp
4 枚のカード レイアウト
カードの幅 - 196 dp
5 枚のカード レイアウト
カードの幅 - 124 dp