Carousel unggulan
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Carousel unggulan menampilkan pilihan konten yang relevan bagi pengguna.
Referensi
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:
- Imersif
- Kartu
Pemblokiran konten
Anatomi
- Teks di atas
- Judul
- Deskripsi
- Tombol
Spesifikasi
Anatomi
- Latar belakang
- Elemen aktif
- Elemen tidak aktif
- Total elemen
Spesifikasi
Imersif
Anatomi
- Latar belakang gambar
- Scrim sinematik
- Poster
- Warna latar belakang
- Pemblokiran konten
- Penomoran halaman
- Kisi konten
Spesifikasi
Kartu
Anatomi
- Latar belakang gambar
- Scrim sinematik
- Poster
- Latar belakang kartu
- Pemblokiran konten
- Penomoran halaman
- 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.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Featured carousels showcase a selection of content relevant to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Carousel(kotlin.Int,androidx.compose.ui.Modifier,androidx.tv.material3.CarouselState,kotlin.Long,androidx.compose.animation.ContentTransform,androidx.compose.animation.ContentTransform,kotlin.Function1,kotlin.Function2)) | Available |\n\nHighlights\n----------\n\n- Use featured carousels to highlight specific content.\n- Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.\n- Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.\n- Featured carousels are visually appealing to help engage the user, and create an immersive experience.\n- The content displayed can be personalized based on the user's viewing history, preferences, or current trends.\n\nVariants\n--------\n\nThere are two different ways of integrating featured carousels:\n\n1. Immersive\n2. Card\n\nContent block\n-------------\n\n### Anatomy\n\n1. Overline text\n2. Title\n3. Description\n4. Button\n\n### Specs\n\nPagination\n----------\n\n### Anatomy\n\n1. Background\n2. Active element\n3. Inactive elements\n4. Total elements\n\n### Specs\n\nImmersive\n---------\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Background color\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nCard\n----\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Card background\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nUsage\n-----\n\nUse featured carousels to showcase and promote a curated selection\nof content in an engaging, visually appealing, and simple to navigate format.\n\n### Images in backgrounds\n\nImages in backgrounds play a crucial role in enhancing user engagement\nin a streaming app featured carousel.\n\n### High quality imagery\n\nUse high-resolution images that are visually appealing and relevant\nto the content of the focused card. \ncheck_circle\n\n### Do\n\nKeep images clean, visually appealing, and relevant to the content block. \ncancel\n\n### Don't\n\nAvoid using images with text in the background.\n\n### Obvious visual hierarchy\n\nEnsure that the background does not distract from the focused card's\ncontent by using a scrim over the image; this helps the user maintain\nfocus on the card's title, description, and call-to-action button. \ncheck_circle\n\n### Do\n\nUse a scrim to improve readability and content digestion. \ncancel\n\n### Don't\n\nMake sure the background doesn't affect readability and visibility of the rest of the content on the screen."]]
