Carousel unggulan

Carousel unggulan menampilkan pilihan konten yang relevan bagi pengguna.

Referensi

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

Sorotan

• Menggunakan carousel unggulan untuk menyoroti konten tertentu.
• Carousel unggulan dapat mencakup elemen UI seperti gambar, judul, detail konten, video, tindakan, dan kontrol penomoran halaman.
• Korsel biasanya terletak di halaman beranda atau halaman landing aplikasi, yang membuatnya mudah diakses.
• Carousel unggulan menarik secara visual untuk membantu pengguna berinteraksi, dan menciptakan pengalaman yang imersif.
• Konten yang ditampilkan dapat dipersonalisasi berdasarkan histori tontonan, preferensi, atau tren saat ini pengguna.

Varian

Ada dua cara untuk mengintegrasikan carousel unggulan:

1. Imersif
2. Kartu

Pemblokiran konten

Anatomi

1. Teks di atas
2. Judul
3. Deskripsi
4. Tombol

Spesifikasi

Penomoran halaman

Anatomi

1. Latar belakang
2. Elemen aktif
3. Elemen tidak aktif
4. Total elemen

Spesifikasi

Imersif

Anatomi

1. Latar belakang gambar
   1. Scrim sinematik
   2. Poster
   3. Warna latar belakang
2. Pemblokiran konten
3. Penomoran halaman
4. Kisi konten

Spesifikasi

Kartu

Anatomi

1. Latar belakang gambar
   1. Scrim sinematik
   2. Poster
   3. Latar belakang kartu
2. Pemblokiran konten
3. Penomoran halaman
4. Kisi konten

Spesifikasi

Penggunaan

Gunakan carousel unggulan untuk menampilkan dan mempromosikan pilihan konten pilihan dalam format yang menarik, memikat secara visual, dan mudah dinavigasi.

Gambar di latar belakang

Gambar di latar belakang memainkan peran penting dalam meningkatkan interaksi pengguna di carousel unggulan aplikasi streaming.

Gambar berkualitas tinggi

Gunakan gambar beresolusi tinggi yang menarik secara visual dan relevan dengan konten kartu yang difokuskan.

check_circle

Anjuran

Jaga agar gambar tetap rapi, menarik secara visual, dan relevan dengan blok konten.

cancel

Larangan

Hindari penggunaan gambar dengan teks di latar belakang.

Hierarki visual yang jelas

Pastikan latar belakang tidak mengalihkan perhatian dari konten kartu yang difokuskan dengan menggunakan scrim pada gambar; ini membantu pengguna mempertahankan fokus pada judul, deskripsi, dan tombol pesan ajakan (CTA) kartu.

check_circle

Anjuran

Gunakan scrim untuk meningkatkan keterbacaan dan pemahaman konten.

cancel

Larangan

Pastikan latar belakang tidak memengaruhi keterbacaan dan visibilitas konten lainnya di layar.