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
- Latar belakang gambar
- Pemblokiran konten
- Kartu sedang menjadi fokus
- Kisi konten
- Scrim sinematik
- Poster
- 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
- 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.
- 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
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.