卡片是 TV 应用的基本构建块。
资源
| 类型 | 关联 | 状态 |
|---|---|---|
| 设计 | 设计源代码 (Figma) | 可用 |
| 实施步骤 | Jetpack Compose | 可用 |
亮点
- 使用卡片可显示单个主题的内容。
- 卡片可以包含从图片到标题的任何内容，支持文本、按钮、列表和其他界面元素。
- 一张卡片不能与其他卡片合并，也不能分成多张卡片。
- 卡片有六种变体：标准、经典、紧凑、边衬区、宽标准和宽经典。
变体
卡片有以下五种类型，每种类型都有不同的使用场景：
- 标准
- 传统
- 较小
- 宽标准
- 宽幅（经典）
内容块
卡片的内容会排列成不同的块。卡片视觉设计包括强调效果在内的层次结构。卡片本身的布局就能适应卡片包含的内容类型。
解剖学
- 标题
- 副标题
- 说明
- 附加文字
规格
标准卡
解剖学
- 图片
- 内容块
状态
规格
经典卡牌
解剖学
- 图片
- 内容块
状态
规格
紧凑型卡片
解剖学
- 图片
- 内容块
状态
规格
宽幅标准卡
解剖学
- 图片
- 内容块
状态
规格
宽幅经典卡
解剖学
- 图片
- 内容块
状态
规格
用法
卡片是一种多样化的设计元素，可用于以具有视觉吸引力且方便用户使用的方式显示各种内容。以下各部分介绍了卡片设计注意事项。
宽高比
卡片有三种常见的宽高比：16:9、1:1 和 2:3。 每种宽高比都有其优势，因此您可以根据自己的具体需求选择最适合您的宽高比。
- 16:9 是卡片最常见的宽高比。它具有较宽的宽高比，非常适合显示图片和视频。
- 1:1 表示方形宽高比。它非常适合需要保持视觉平衡的卡片（例如演职人员、频道徽标或团队徽标）。
- 2:3 代表较高的宽高比。如果您想拆分网格并更加强调效果，那么这是不错的选择。
归根结底，为卡片选择宽高比的最佳方式是尝试使用不同的选项，看看哪一种效果最好。
以下是不同宽高比的一些用法示例
1:1
演职人员
球队徽标
2:3
时下流行图书
16:9
电影卡片
布局和间距
通过实现适当的峰值（间隔为 20 dp），可以根据屏幕上显示的卡片数量来改变卡片宽度。
单张卡片布局
卡片宽度 - 844dp
双卡片布局
卡片宽度 - 412dp
包含 3 张卡片的布局
卡片宽度 - 268dp
包含 4 张卡片的布局
卡片宽度 - 196dp
5 张卡片布局
卡片宽度 - 124dp
内容块
卡片中内容块的宽度应与图片缩略图的宽度相同。如果您需要在内容块中显示更多文本，请使用较宽的卡片变体。
正确做法
使用宽幅卡片显示简短的广告内容描述，但仅在绝对必要的情况下显示。说明的长度应只有几个字。
错误做法
避免在垂直堆叠的卡片上添加过长的说明。
紧凑型卡片
紧凑型卡片应简洁明了、易于阅读。背景图片前面的内容应简明扼要。避免使用过长的标题、副标题或说明。这样可以让您的卡片更具视觉吸引力，且更易于扫描。
为使图片上的文字更易于阅读，请添加半透明的黑色渐变叠加层。这会调暗背景，同时又不会过度遮挡图片，让文字更容易被用户看到。
正确做法
使用纱罩的紧凑型卡片配上图片背景。
错误做法
请勿在背景图片上使用没有纱罩的紧凑型卡片。