Băng chuyền nổi bật
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Các băng chuyền nổi bật hiển thị tuyển tập nội dung có liên quan đến người dùng.
Tài nguyên
Tiêu điểm
- Sử dụng băng chuyền nổi bật để làm nổi bật nội dung cụ thể.
- Băng chuyền nổi bật có thể bao gồm các phần tử trên giao diện người dùng như hình ảnh, dòng tiêu đề, thông tin chi tiết về nội dung, video, thao tác và chế độ điều khiển phân trang.
- Băng chuyền thường nằm trên trang chủ hoặc trang đích của ứng dụng, giúp bạn dễ dàng truy cập.
- Các băng chuyền nổi bật có hình ảnh bắt mắt, giúp thu hút người dùng và tạo trải nghiệm sống động.
- Nội dung hiển thị có thể được cá nhân hoá dựa trên nhật ký xem, lựa chọn ưu tiên của người dùng hoặc xu hướng hiện tại.
Biến thể
Có hai cách để tích hợp băng chuyền nổi bật:
- Nhập vai
- Thẻ
Khối nội dung
Phân tích
- Văn bản gạch đầu
- Tiêu đề
- Nội dung mô tả
- Nút
Thông số
Phân tích
- Thông tin khái quát
- Phần tử đang hoạt động
- Phần tử không hoạt động
- Tổng số phần tử
Thông số
Nhập vai
Phân tích
- Nền hình ảnh
- Màn hình điện ảnh
- Áp phích
- Màu nền
- Khối nội dung
- Phân trang
- Lưới nội dung
Thông số
Thẻ
Phân tích
- Nền hình ảnh
- Màn hình điện ảnh
- Áp phích
- Nền thẻ
- Khối nội dung
- Phân trang
- Lưới nội dung
Thông số
Cách sử dụng
Sử dụng băng chuyền nổi bật để giới thiệu và quảng bá bộ sưu tập nội dung được tuyển chọn theo định dạng hấp dẫn, bắt mắt và dễ thao tác.
Hình ảnh trong nền
Hình ảnh trong nền đóng vai trò quan trọng trong việc cải thiện mức độ tương tác của người dùng trong băng chuyền nổi bật của ứng dụng truyền trực tuyến.
Hình ảnh chất lượng cao
Sử dụng hình ảnh có độ phân giải cao, bắt mắt và phù hợp với nội dung của thẻ được lấy tiêu điểm.
check_circle
Nên
Giữ cho hình ảnh rõ ràng, hấp dẫn và phù hợp với khối nội dung.
cancel
Không nên
Tránh sử dụng hình ảnh có văn bản trong nền.
Hệ phân cấp hình ảnh rõ ràng
Đảm bảo nền không làm sao lãng khỏi nội dung của thẻ được lấy tiêu điểm bằng cách dùng màn chắn trên hình ảnh; điều này giúp người dùng duy trì sự tập trung vào tiêu đề, nội dung mô tả và nút kêu gọi hành động của thẻ.
check_circle
Nên
Hãy dùng màn chắn để cải thiện khả năng đọc và phân tích nội dung.
cancel
Không nên
Đảm bảo nền không ảnh hưởng đến khả năng đọc và khả năng hiển thị của phần nội dung còn lại trên màn hình.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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."]]
