Thiệp
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.
Thẻ là những thành phần cơ bản trong ứng dụng dành cho TV.
Tài nguyên
Tiêu điểm
- Sử dụng một thẻ để hiển thị nội dung về một chủ đề.
- Một thẻ có thể chứa mọi thứ từ hình ảnh đến dòng tiêu đề, văn bản hỗ trợ, nút, danh sách và các thành phần khác trên giao diện người dùng.
- Một thẻ không thể hợp nhất với một thẻ khác hoặc chia thành nhiều thẻ.
- Có 6 biến thể thẻ: chuẩn, cổ điển, nhỏ gọn, lồng ghép, chuẩn rộng và cổ điển rộng.
Biến thể
Có 5 loại thẻ, mỗi loại tương ứng với một trường hợp sử dụng riêng:
- Chuẩn
- Cổ điển
- Nhỏ gọn
- Tiêu chuẩn rộng
- Cổ điển rộng
Khối nội dung
Nội dung của thẻ được sắp xếp thành các khối riêng biệt. Thiết kế trực quan thẻ (bao gồm cả điểm nhấn) biểu thị hệ phân cấp. Bản thân bố cục của thẻ phù hợp với loại nội dung trong thẻ.
Phân tích
- Tiêu đề
- Tiêu đề phụ
- Nội dung mô tả
- Văn bản bổ sung
Thông số
Thẻ tiêu chuẩn
Phân tích
- Ảnh
- Khối nội dung
Các trạng thái
Thông số
Thẻ bài cổ điển
Phân tích
- Ảnh
- Khối nội dung
Các trạng thái
Thông số
Thẻ thu gọn
Phân tích
- Ảnh
- Khối nội dung
Các trạng thái
Thông số
Thẻ tiêu chuẩn rộng
Phân tích
- Ảnh
- Khối nội dung
Các trạng thái
Thông số
Thẻ cổ điển cỡ rộng
Phân tích
- Ảnh
- Khối nội dung
Các trạng thái
Thông số
Cách sử dụng
Thẻ là các thành phần thiết kế linh hoạt có thể dùng để hiển thị nhiều nội dung theo cách bắt mắt và thân thiện với người dùng. Các phần sau đây sẽ tìm hiểu những điểm cần cân nhắc khi thiết kế thẻ.
Tỷ lệ khung hình
Có 3 tỷ lệ khung hình phổ biến cho thẻ: 16:9, 1:1 và 2:3.
Mỗi tỷ lệ khung hình đều có những điểm mạnh riêng. Do đó, lựa chọn tốt nhất cho bạn sẽ phụ thuộc vào nhu cầu cụ thể của bạn.
- 16:9 là tỷ lệ khung hình phổ biến nhất cho thẻ. Đây là tỷ lệ khung hình rộng rất phù hợp để hiển thị hình ảnh và video.
- 1:1 là tỷ lệ khung hình dạng vuông. Đây là lựa chọn phù hợp cho các thẻ cần cân bằng về mặt hình ảnh, chẳng hạn như dàn diễn viên và đoàn làm phim, biểu trưng kênh hoặc biểu trưng của đội.
- 2:3 là tỷ lệ khung hình cao hơn. Đây là lựa chọn phù hợp nếu bạn muốn chia nhỏ lưới và nhấn mạnh hơn.
Cuối cùng, cách tốt nhất để chọn tỷ lệ khung hình cho thẻ là thử nghiệm với nhiều lựa chọn và xem lựa chọn nào phù hợp nhất.
Dưới đây là một số ví dụ về cách sử dụng nhiều tỷ lệ khung hình
1:1
Diễn viên và đoàn phim
Biểu trưng của đội thể thao
2:3
Sách thịnh hành
16:9
Thẻ phim
Bố cục và khoảng cách
Bạn có thể thay đổi chiều rộng thẻ dựa trên số lượng thẻ hiển thị trên màn hình bằng cách triển khai quá trình đạt đỉnh phù hợp với khoảng cách là 20 dp.
Bố cục 1 thẻ
Chiều rộng của thẻ – 844dp
Bố cục 2 thẻ
Chiều rộng của thẻ — 412dp
Bố cục 3 thẻ
Chiều rộng của thẻ — 268dp
Bố cục 4 thẻ
Chiều rộng của thẻ — 196dp
Bố cục 5 thẻ
Chiều rộng của thẻ — 124dp
Khối nội dung
Chiều rộng của khối nội dung trong thẻ phải có cùng chiều rộng với hình thu nhỏ hình ảnh. Nếu bạn cần hiển thị nhiều văn bản hơn trong khối nội dung, hãy sử dụng biến thể thẻ rộng.
check_circle
Nên
Sử dụng thẻ rộng để hiển thị nội dung mô tả ngắn gọn nhưng chỉ khi thực sự cần thiết. Độ dài của phần mô tả nên chỉ một vài từ.
cancel
Không nên
Tránh dùng nội dung mô tả dài trên các thẻ xếp chồng theo chiều dọc.
Thẻ thu gọn
Thẻ nhỏ gọn phải ngắn gọn và dễ đọc hơn. Nội dung phía trước hình nền phải ngắn gọn và đi thẳng vào vấn đề. Tránh sử dụng tiêu đề dài, phụ đề hoặc nội dung mô tả. Điều này giúp thẻ của bạn trở nên bắt mắt hơn và dễ quét hơn.
Để văn bản trên một hình ảnh dễ đọc hơn, hãy thêm lớp phủ chuyển màu đen bán trong suốt. Việc này sẽ làm tối nền mà không che khuất hình ảnh quá nhiều, giúp văn bản dễ nhìn hơn.
check_circle
Nên
Thẻ thu gọn sử dụng màn chắn phía trên nền hình ảnh.
cancel
Không nên
Đừng sử dụng thẻ thu gọn mà không có màn hình phía trên hình nền.
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,["# Cards are the basic building blocks of your TV app. \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#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Use a card to display content on a single topic.\n- A card can hold anything from images to headlines, supporting text, buttons, lists, and other UI elements.\n- A card cannot merge with another card or divide into multiple cards.\n- There are six variations of cards: standard, classic, compact, inset, wide standard, and wide classic.\n\nVariants\n--------\n\nThere are five types of cards, each with a different use case:\n\n1. Standard\n2. Classic\n3. Compact\n4. Wide standard\n5. Wide classic\n\nContent blocks\n--------------\n\nA card's contents are arranged in distinct blocks. The card visual design\nincluding emphasis denotes hierarchy. The layout of the cards themselves\naccommodates the types of content the cards contain.\n\n### Anatomy\n\n1. Title\n2. Subtitle\n3. Description\n4. Extra text\n\n### Specs\n\nStandard card\n-------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nClassic card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nCompact card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide standard card\n------------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide classic card\n-----------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nUsage\n-----\n\nCards are versatile design elements that can be used to display a variety\nof content in a visually appealing and user-friendly way. The following\nsections explore design considerations for cards.\n\n### Aspect ratio\n\nThere are three common aspect ratios for cards: 16:9, 1:1, and 2:3.\nEach aspect ratio has its strengths, so the best choice for\nyou depends on your specific needs.\n\n- 16:9 is the most common aspect ratio for cards. It is a wide aspect ratio that is well-suited for displaying images and videos.\n- 1:1 is a square aspect ratio. It is a good choice for cards that need to be visually balanced, such as cast and crew, channel logos, or team logos.\n- 2:3 is a taller aspect ratio. It is a good choice if you want to break up the grid and bring more emphasis.\n\nUltimately, the best way to choose an aspect ratio for your cards is to\nexperiment with different options and see what looks best.\n\nHere are some examples usages of different aspect ratios \n\n### 1:1\n\nCast and crew \n\nSports teams logos\n\n### 2:3\n\nTrending books\n\n### 16:9\n\nMovie cards\n\n### Layout and spacing\n\nVarying card widths based on the number of cards visible on the screen\ncan be achieved by implementing proper peaking with a spacing of 20dp. \n\n### 1-card layout\n\nWidth of the card --- 844dp\n\n### 2-card layout\n\nWidth of the card --- 412dp\n\n### 3-card layout\n\nWidth of the card --- 268dp\n\n### 4-card layout\n\nWidth of the card --- 196dp\n\n### 5-card layout\n\nWidth of the card --- 124dp\n\n### Content block\n\nThe width of the content block in a card should be the same width as the image\nthumbnail. If you need to display more text in the content block,\nuse a wide card variation. \ncheck_circle\n\n### Do\n\nUse wide cards to show short descriptions, but only if absolutely necessary. The length of the description should be only a few words. \ncancel\n\n### Don't\n\nAvoid long descriptions on vertically stacked cards.\n\n### Compact card\n\nCompact cards should be concise and easier to read. The content preceding the\nbackground image should be brief and to the point. Avoid long titles,\nsubtitles, or descriptions. This makes your cards more\nvisually appealing and easier to scan.\n\nTo make text more readable on an image, add a semi-transparent black\ngradient overlay. This darkens the background without obscuring\nthe image too much, making the text easier to see. \ncheck_circle\n\n### Do\n\nCompact card using scrim on top of image background. \ncancel\n\n### Don't\n\nDon't use compact cards without scrim on top of the background image."]]
