卡片

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

资源

类型	链接	状态
设计	设计源代码 (Figma)	可用
实施步骤	Jetpack Compose	可用

亮点

• 使用卡片可以显示单个主题的内容。
• 卡片可以包含从图片到标题的任何内容，支持文本、按钮、列表和其他界面元素。
• 一张卡不能与另一张卡合并，也不能拆分为多张卡。
• 卡片有六种变体：标准、经典、紧凑、边衬区、宽标准和宽经典。

变体

卡片分为 5 种，每种类型的使用场景各不相同：

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 的间距实现适当的峰值，可以根据屏幕上可见卡片的数量来变化卡片宽度。

内容块

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

紧凑型卡片

紧凑型卡片应简洁且更易于阅读。背景图片前面的内容应简洁明了。避免使用过长的标题、副标题或说明。这样可以让您的卡片更具视觉吸引力，并且更易于扫描。

如需让图片上的文字更易于阅读，请添加半透明的黑色渐变叠加层。这会调暗背景，同时又不会过多地遮挡图片，使文字更易于查看。