Daftar imersif

Daftar imersif adalah kombinasi baris konten dan pratinjau dari item yang dipilih. Layar ini menampilkan konten dalam area pandang yang lebih besar.

Referensi

Jenis	Link	Status
Desain	Sumber desain (Figma)	Tersedia
Penerapan	Jetpack Compose	Tersedia

Sorotan

• Pratinjau konten dinamis. Saat pengguna menjelajahi baris konten, area pratinjau akan otomatis diupdate untuk menampilkan item yang difokuskan saat ini.
• Komponen daftar imersif menampilkan area pandang yang lebih besar untuk menampilkan konten, sehingga memudahkan pengguna untuk melihat dan menghargai detail visual item yang difokuskan.
• Daftar imersif memberikan informasi yang relevan dan kontekstual tentang item yang difokuskan, sehingga membantu pengguna membuat keputusan yang tepat tanpa meninggalkan pengalaman penjelajahan.
• Komponen daftar imersif menggunakan pengungkapan progresif untuk mengungkapkan lebih banyak detail tentang konten saat pengguna melakukan navigasi, sehingga mengurangi beban kognitif dan mempertahankan engagement pengguna.
• Komponen daftar imersif memastikan interaksi yang konsisten di seluruh aplikasi, yang memberi pengguna pengalaman yang familier dan dapat diprediksi.

Anatomi

1. Latar belakang gambar
2. Pemblokiran konten
3. Kartu sedang menjadi fokus
4. Kisi konten

1. Scrim sinematik
2. Poster
3. Warna latar belakang

Spesifikasi

Perilaku

Saat menavigasi di antara kartu dalam daftar Imersif, detail kartu yang dipilih akan ditampilkan secara bertahap di latar belakang.

Jika daftar imersif menjadi fokus, tingginya akan bertambah untuk menampilkan informasi tambahan, seperti judul dan deskripsi latar belakang, seperti yang ditunjukkan dalam video berikut.

Penggunaan

Gunakan carousel imersif saat Anda ingin menarik perhatian ke konten unggulan atau yang dipromosikan, seperti rilis baru, acara populer, atau judul eksklusif. Area pandang yang lebih besar dan pratinjau dinamis memberikan cara yang menarik untuk menampilkan item berprioritas tinggi ini.

Tampilan gambar

1. Fokus kartu: Saat pengguna menavigasi carousel, kartu yang difokuskan akan diberi penekanan visual, menskalakan kartu sebesar 1,1, menggunakan batas, dan isyarat visual lainnya sebagai elevasi untuk menunjukkan pilihannya. Pastikan judul konten di dalam thumbnail kartu yang difokuskan terlihat jelas dan lebih mudah dibaca.
2. Gambar latar: Saat kartu dalam fokus, gambar latar yang sesuai akan ditampilkan di area tampilan yang lebih besar. Sebaiknya gunakan gambar latar belakang yang berkualitas tinggi dan menarik secara visual karena dapat memberikan tampilan latar yang imersif dan menarik untuk konten.

Komposisi

check_circle

Anjuran

Skalakan dan sejajarkan subjek ke sudut kanan atas untuk menciptakan pengalaman sinematik.

cancel

Larangan

Hindari menggunakan pemangkasan layar penuh yang akan membuat subjek di bawah konten dipangkas.

Untuk memastikan gambar yang digunakan sebagai latar belakang dalam komponen daftar imersif terlihat bagus, pastikan untuk menskalakannya dengan tepat agar tidak buram atau terdistorsi.

Rasio aspek

Gunakan rasio 16:9 untuk gambar latar jika memungkinkan untuk memastikan tata letak yang menarik dan konsisten secara visual.