卡片

卡片是电视应用的基本构建块。

资源

类型	链接	状态
设计	设计源 (Figma)	可用
实现	Jetpack Compose	可用

亮点

• 使用卡片显示单个主题上的内容。
• 卡片可以容纳从图像到标题、支持文本、按钮、列表和其他 UI 元素的任何内容。
• 卡片不能与其他卡片合并或分成多个卡片。
• 卡片共有六种变体：标准、经典、紧凑、内嵌、宽标准和宽经典。

变体

共有五种类型的卡片，每种卡片都有不同的用例

1. 标准
2. 经典
3. 紧凑
4. 宽标准
5. 宽经典

内容块

卡片的内容排列在不同的块中。卡片的可视化设计（包括强调）表示层次结构。卡片本身的布局适应卡片包含的内容类型。

结构

1. 标题
2. 副标题
3. 描述
4. 附加文本

规格

标准卡片

结构

1. 图像
2. 内容块

状态

规格

经典卡片

结构

1. 图像
2. 内容块

状态

规格

紧凑型卡片

结构

1. 图像
2. 内容块

状态

规格

宽标准卡片

结构

1. 图像
2. 内容块

状态

规格

宽经典卡片

结构

1. 图像
2. 内容块

状态

规格

用法

卡片是通用的设计元素，可用于以视觉上吸引人且用户友好的方式显示各种内容。以下部分探讨了卡片的设计注意事项。

纵横比

卡片有三种常见的纵横比：16:9、1:1 和 2:3。每种纵横比都有其优势，因此最佳选择取决于您的具体需求。

• 16:9 是卡片最常见的纵横比。它是一种宽纵横比，非常适合显示图像和视频。
• 1:1 是正方形纵横比。对于需要视觉平衡的卡片（例如演员和剧组、频道徽标或团队徽标）来说，这是一个不错的选择。
• 2:3 是一种更高的纵横比。如果您想打破网格并带来更多重点，这是一个不错的选择。

最终，选择卡片纵横比的最佳方法是尝试不同的选项，看看哪个看起来最好。

以下是一些不同纵横比用法的示例

布局和间距

可以通过使用 20dp 的间距实现适当的间距，从而根据屏幕上可见的卡片数量改变卡片宽度。

内容块

卡片中内容块的宽度应与图像缩略图的宽度相同。如果需要在内容块中显示更多文本，请使用宽卡片变体。

紧凑型卡片

紧凑型卡片应简洁易读。背景图像之前的內容应简明扼要。避免使用过长的标题、副标题或说明。这使得您的卡片更具视觉吸引力且更容易浏览。

要在图像上使文本更易于阅读，请添加半透明黑色渐变叠加层。这会在不遮挡图像的情况下使背景变暗，从而使文本更易于查看。