卡片

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

资源

类型	关联	状态
设计	设计源代码 (Figma)	可用
实现	Jetpack Compose	可用

亮点

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

变体

卡片有五种类型，每种类型的使用场景各不相同：

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 表示宽高比较高。如果您想拆分网格并加以强调，那么这是一个不错的选择。

归根结底，为卡片选择宽高比的最佳方式是尝试使用不同的选项，看看哪一种效果最好。

以下是不同宽高比的一些用法示例

1:1

演职人员

运动队徽标

2:3

热门图书

16:9

电影卡片

布局和间距

通过实现间隔为 20 dp 的适当峰值，可以根据屏幕上显示的卡片数量改变卡片宽度。

单张卡片布局

卡片的宽度 - 844dp

双卡片布局

卡片的宽度 - 412dp

三张卡片布局

卡片的宽度 - 268dp

四张卡片布局

卡片的宽度 - 196dp

5 张卡片布局

卡片的宽度 - 124dp

内容块

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

check_circle

正确做法

使用宽卡片来显示简短的广告内容描述，但仅限于在绝对必要的情况下。说明的长度应仅为几个字。

cancel

错误做法

避免在纵向堆叠的卡片上添加冗长的说明。

紧凑型卡片

紧凑卡片应简洁明了、更易于阅读。背景图片之前的内容应简明扼要。避免使用过长的标题、副标题或说明。这样做可以让卡片看起来更吸引人，也更便于浏览。

为了提高图片上的文本可读性，请添加半透明的黑色渐变叠加层。这会调暗背景，但又不会过多遮住图片，使文字更易于查看。

check_circle

正确做法

在图片背景上使用纱罩的紧凑卡。

cancel

错误做法

请勿使用在背景图片上方使用无纱罩的紧凑型卡片。