資訊卡是 TV 應用程式的基本構成要素。
![資訊卡的封面圖片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/covers/cover-cards.webp?authuser=3&hl=zh-tw)
資源
類型 | 連結 | 狀態 |
---|---|---|
設計 | 設計來源 (Figma) | 可使用 |
導入作業 | Jetpack Compose | 可使用 |
重點特色
- 使用資訊卡顯示單一主題的內容。
- 資訊卡可以容納各種資訊,包括圖片、標題、支援文字、按鈕、清單和其他 UI 元素。
- 卡片無法與其他卡片合併或分割為多張。
- 資訊卡有六種變化版本:標準、經典、精簡、插邊、寬版和寬版。
變化版本
資訊卡分為五種類型,每一種用途都不同:
- 標準
- 經典
- 精簡
- 寬版標準
- 寬版經典
![標準卡片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/standard-card.webp?authuser=3&hl=zh-tw)
![經典卡片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/classic-card.webp?authuser=3&hl=zh-tw)
![密集卡片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card.webp?authuser=3&hl=zh-tw)
![寬標準卡](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/wide-card.webp?authuser=3&hl=zh-tw)
![寬版經典卡片](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/wide-classic.webp?authuser=3&hl=zh-tw)
內容封鎖
資訊卡的內容會按不同的區塊排列,資訊卡視覺設計 (包括強調) 表示階層。資訊卡的版面配置取決於資訊卡包含的內容類型。
圖解
![內容](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/content.webp?authuser=3&hl=zh-tw)
- 標題
- 副標題
- 說明
- 額外文字
規格
標準卡片
圖解
- 圖片
- 內容封鎖
狀態
規格
傳統版卡片
圖解
- 圖片
- 內容封鎖
狀態
規格
密集卡片
圖解
- 圖片
- 內容封鎖
狀態
規格
寬標準資訊卡
圖解
- 圖片
- 內容封鎖
狀態
規格
寬版經典卡片
圖解
- 圖片
- 內容封鎖
狀態
規格
使用方式
資訊卡是多功能的設計元素,能以賞心悅目且容易使用的方式顯示各種內容。以下各節將探索資訊卡的設計注意事項。
顯示比例
常見的資訊卡顯示比例有三種: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=3&hl=zh-tw)
球隊標誌
![顯示比例 1:1,運動標誌](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1-team.webp?authuser=3&hl=zh-tw)
2:3
熱門書籍
![顯示比例 2:3,熱門書籍](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-2-3.webp?authuser=3&hl=zh-tw)
16:9
電影卡
![顯示比例 16:9,營利卡](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-16-9.webp?authuser=3&hl=zh-tw)
版面配置和間距
若是根據畫面顯示的資訊卡數量改變資訊卡寬度,可以實作適當的峰值並將間距設為 20dp。
單張資訊卡版面配置
資訊卡寬度 - 844dp
![1 個資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/1-card.webp?authuser=3&hl=zh-tw)
雙資訊卡版面配置
資訊卡寬度 - 412dp
![2 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/2-card.webp?authuser=3&hl=zh-tw)
三張資訊卡版面配置
資訊卡寬度 - 268dp
![3 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/3-card.webp?authuser=3&hl=zh-tw)
4 張資訊卡版面配置
資訊卡寬度 - 196dp
![4 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/4-card.webp?authuser=3&hl=zh-tw)
5 張資訊卡版面配置
資訊卡寬度 - 124dp
![5 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/5-card.webp?authuser=3&hl=zh-tw)
內容封鎖
資訊卡中的內容區塊寬度應與圖片縮圖相同。如果您需要在內容區塊中顯示更多文字,請使用寬版資訊卡變化。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/card-content-do.webp?authuser=3&hl=zh-tw)
正確做法
使用寬資訊卡可呈現簡短說明,但僅限在絕對必要時使用。說明長度應只有幾個字。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/card-content-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
避免在垂直堆疊的資訊卡上顯示詳細說明。
密集卡片
精簡的卡片應簡明扼要,且方便使用者閱讀。背景圖片前方的內容應簡短扼要,避免使用長標題、副標題或說明。這樣可讓卡片看起來更吸睛,也更容易掃描。
如要讓圖片上的文字更清晰易讀,請新增半透明黑色漸層重疊。這樣會調暗背景,而不會過度遮蔽圖片,讓文字更容易查看。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card-do.webp?authuser=3&hl=zh-tw)
正確做法
在圖片背景上方使用 scrim 的精簡資訊卡。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
請勿使用小型資訊卡,且不要修剪在背景圖片上。