卡片是 TV 应用的基本构建块。
![卡片封面图片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/covers/cover-cards.webp?authuser=6&hl=lt)
资源
类型 | 关联 | 状态 |
---|---|---|
设计 | 设计源代码 (Figma) | 可用 |
实现 | Jetpack Compose | 可用 |
亮点
- 使用卡片可显示有关单个主题的内容。
- 卡片可以包含从图片到标题的所有内容,并且可以支持文本、按钮、列表和其他界面元素。
- 一张卡片不能与另一张卡片合并,也不能拆分为多张卡片。
- 卡片有六种变体:标准、经典、紧凑、边衬区、宽标准和经典宽幅。
变体
卡片有五种类型,每种类型的使用场景各不相同:
- 标准
- 传统
- 较小
- 宽标准
- 宽幅经典
![标准卡](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/standard-card.webp?authuser=6&hl=lt)
![经典卡牌](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/classic-card.webp?authuser=6&hl=lt)
![紧凑型卡片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card.webp?authuser=6&hl=lt)
![宽幅标准卡](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/wide-card.webp?authuser=6&hl=lt)
![宽幅经典卡牌](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/wide-classic.webp?authuser=6&hl=lt)
内容块
卡牌的内容会排列成不同的块。卡片视觉设计(包括强调效果)代表了层次结构。卡片本身的布局可调整卡片包含的内容类型。
解剖学
![内容](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/content.webp?authuser=6&hl=lt)
- 标题
- 副标题
- 说明
- 附加文本
规格
标准卡
解剖学
- 图片
- 内容块
状态
规格
经典卡
解剖学
- 图片
- 内容块
状态
规格
紧凑型卡片
解剖学
- 图片
- 内容块
状态
规格
宽幅标准卡
解剖学
- 图片
- 内容块
状态
规格
宽幅传统卡
解剖学
- 图片
- 内容块
状态
规格
用法
卡片是一种多功能设计元素,可用于以具有视觉吸引力且人性化的方式显示各种内容。以下部分探讨了卡片设计注意事项。
宽高比
卡片有三种常见的宽高比:16:9、1:1 和 2:3。 每种宽高比都有自己的优势,因此您的最佳选择取决于您的具体需求。
- 16:9 是卡片最常用的宽高比。它具有宽高的宽高比,非常适合显示图片和视频。
- 1:1 表示方形宽高比。它非常适合需要保持视觉平衡的卡片(例如演职人员、频道徽标或团队徽标)。
- 2:3 表示宽高比较高。如果您想拆分网格并加以强调,那么这是一个不错的选择。
归根结底,为卡片选择宽高比的最佳方式是尝试使用不同的选项,看看哪一种效果最好。
以下是不同宽高比的一些用法示例
1:1
演职人员
![宽高比为 1:1,演职人员](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1.webp?authuser=6&hl=lt)
运动队徽标
![宽高比为 1:1,体育徽标](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1-team.webp?authuser=6&hl=lt)
2:3
热门图书
![宽高比为 2:3,热门图书](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-2-3.webp?authuser=6&hl=lt)
16:9
电影卡片
![宽高比为 16:9,动态卡片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-16-9.webp?authuser=6&hl=lt)
布局和间距
通过实现间隔为 20 dp 的适当峰值,可以根据屏幕上显示的卡片数量改变卡片宽度。
单张卡片布局
卡片的宽度 - 844dp
![单张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/1-card.webp?authuser=6&hl=lt)
双卡片布局
卡片的宽度 - 412dp
![双卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/2-card.webp?authuser=6&hl=lt)
三张卡片布局
卡片的宽度 - 268dp
![三张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/3-card.webp?authuser=6&hl=lt)
四张卡片布局
卡片的宽度 - 196dp
![四张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/4-card.webp?authuser=6&hl=lt)
5 张卡片布局
卡片的宽度 - 124dp
![5 张卡片布局](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/5-card.webp?authuser=6&hl=lt)
内容块
卡片中的内容块的宽度应与图片缩略图的宽度相同。如果您需要在内容块中显示更多文本,请使用较宽的卡片变体。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/card-content-do.webp?authuser=6&hl=lt)
正确做法
使用宽卡片来显示简短的广告内容描述,但仅限于在绝对必要的情况下。说明的长度应仅为几个字。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/card-content-dont.webp?authuser=6&hl=lt)
错误做法
避免在纵向堆叠的卡片上添加冗长的说明。
紧凑型卡片
紧凑卡片应简洁明了、更易于阅读。背景图片之前的内容应简明扼要。避免使用过长的标题、副标题或说明。这样做可以让卡片看起来更吸引人,也更便于浏览。
为了提高图片上的文本可读性,请添加半透明的黑色渐变叠加层。这会调暗背景,但又不会过多遮住图片,使文字更易于查看。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card-do.webp?authuser=6&hl=lt)
正确做法
在图片背景上使用纱罩的紧凑卡。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card-dont.webp?authuser=6&hl=lt)
错误做法
请勿使用在背景图片上方使用无纱罩的紧凑型卡片。