イマーシブリストは、コンテンツの行と、選択したアイテムのプレビューを組み合わせたものです。より大きなビューポートにコンテンツが表示される。
リソース
| タイプ | リンク | ステータス |
|---|---|---|
| デザイン | デザインソース（Figma） | 利用可能 |
| 実装 | Jetpack Compose | 利用可能 |
ハイライト
- ダイナミック コンテンツのプレビュー。ユーザーがコンテンツの行を移動すると、プレビュー領域が自動的に更新され、現在フォーカスされているアイテムが表示されます。
- 没入型リスト コンポーネントは、コンテンツを表示するための大きなビューポートを備えており、フォーカスされているアイテムの視覚的な詳細をユーザーが簡単に確認、理解できます。
- イマーシブ リストは、フォーカスされているアイテムに関連するコンテキスト情報を提供します。これにより、ユーザーはブラウジング エクスペリエンスを中断することなく、十分な情報に基づいて判断できるようになります。
- 没入型リスト コンポーネントは、ユーザーが移動するにつれてコンテンツの詳細を表示する段階的開示を使用して、認知負荷を減らし、ユーザー エンゲージメントを維持します。
- 没入型リスト コンポーネントを使用すると、アプリ全体で一貫したインタラクションが保証され、使い慣れた予測可能なエクスペリエンスをユーザーに提供できます。
構造
- 背景画像
- コンテンツ ブロック
- フォーカスされているカード
- コンテンツ グリッド
- シネマティックなスクリム
- Poster
- 背景色
仕様
動作
没入リスト内でカード間を移動すると、選択したカードの詳細が徐々にバックグラウンドで表示されます。
次の動画に示すように、没入型リストがフォーカスされると、リストの高さが上がり、背景のタイトルや説明などの追加情報が表示されます。
Usage
没入型カルーセルは、新作、人気の番組、限定タイトルなど、注目コンテンツやプロモーション コンテンツに注目を集めたい場合に使用します。大きなビューポートと動的プレビューにより、このような優先度の高いアイテムを効果的に紹介できます。
画像の表示
- カード フォーカス: ユーザーがカルーセル内を移動すると、フォーカスされたカードが視覚的に強調され、カードを 1.1 倍に拡大し、枠線やその他の視覚的な手がかりをエレベーションとして使用して選択を示します。フォーカスされているカードのサムネイル内にコンテンツ タイトルをはっきりと表示し、読みやすいものにします。
- 背景画像: カードにフォーカスがあると、対応する背景画像がより大きなビューポートに表示されます。この背景画像は、コンテンツの背景として没入感のある魅力的な背景が得られるため、高画質で視覚的に魅力的なものにすることをおすすめします。
楽曲
すべきこと
被写体のサイズを調整し、右上に揃えて映画のようなエクスペリエンスを実現します。
すべきでないこと
全画面表示の切り抜きを使用すると、コンテンツの下の被写体が切り抜かれるのは避けてください。
イマーシブ リスト コンポーネントで背景として使用される画像を見やすくするには、ぼやけたり歪んだりしないように、画像を適切に拡大縮小してください。
アスペクト比
視覚に訴える一貫性のあるレイアウトを実現するために、可能な限り背景画像の 16:9 の比率を使用します。
