資訊卡是 TV 應用程式的基本構成元素。

資源
類型 | 連結 | 狀態 |
---|---|---|
設計 | 設計來源 (Figma) | 可用 |
導入作業 | Jetpack Compose | 可用 |
重點特色
- 運用資訊卡呈現單一主題的內容。
- 資訊卡可容納從圖片到廣告標題,支援文字、按鈕、清單和其他 UI 元素。
- 一張卡片無法與另一張卡片合併,也無法分割為多張卡片。
- 資訊卡有六種變化版本:標準、經典、精簡、插邊、寬標準和廣角。
變化版本
資訊卡共有五種類型,用途各不相同:
- 標準
- 傳統版
- 密集
- 寬版標準
- 廣角經典





內容區塊
卡片內容會按不同的區塊排列,資訊卡視覺設計包括強調階層。資訊卡本身的版面配置包含資訊卡包含的內容類型。
圖解

- 標題
- 副標題
- 說明
- 額外文字
規格
標準卡片
圖解
- 映像檔
- 內容區塊
狀態
規格
傳統版卡片
圖解
- 映像檔
- 內容區塊
狀態
規格
密集資訊卡
圖解
- 映像檔
- 內容區塊
狀態
規格
寬版標準卡片
圖解
- 映像檔
- 內容區塊
狀態
規格
寬版經典卡
圖解
- 映像檔
- 內容區塊
狀態
規格
適用情境
資訊卡是一種多功能的設計元素,可用來以視覺效果吸引人、易於使用的方式呈現各種內容。以下各節將說明資訊卡的設計注意事項。
顯示比例
資訊卡有三種常見的顯示比例:16:9、1:1 和 2:3。 每個長寬比都有優點,因此最適合您的選擇,取決於您的具體需求。
- 最常見的資訊卡顯示比例為 16:9。這是寬顯示比例,非常適合顯示圖片和影片。
- 1:1 是正方形的長寬比。如果需要在視覺上平衡的資訊卡 (如演員和工作人員、頻道標誌或團隊標誌),則相當適合。
- 2:3 的長寬比較高。如果想拆分格線並突顯重點,這會是很好的選擇。
最終,如要為資訊卡選擇顯示比例,最理想的方式就是嘗試不同的選項,看看哪一種效果最佳。
以下舉例說明不同長寬比的用法
1:1
演員與工作人員

球隊標誌

2:3
熱門書籍

16:9
電影卡

版面配置和間距
實作適當的尖峰間距並將間距設為 20dp,即可根據畫面上顯示的資訊卡數量改變資訊卡寬度。
1 張資訊卡版面配置
資訊卡寬度 - 844dp

雙張資訊卡版面配置
資訊卡寬度 - 412dp

3 張資訊卡版面配置
資訊卡寬度 - 268dp

4 張資訊卡版面配置
資訊卡寬度 - 196dp

5 張資訊卡版面配置
資訊卡寬度 - 124dp

內容區塊
資訊卡中的內容區塊寬度應與圖片縮圖相同。如果您需要在內容區塊中顯示更多文字,請使用寬資訊卡變化版本。

正確做法
建議只在絕對必要時使用寬版資訊卡顯示簡短說明。說明長度上限為幾個字。

錯誤做法
避免在垂直堆疊的資訊卡上顯示詳細說明。
密集資訊卡
密集的資訊卡應保持精簡,且易於閱讀。背景圖片之前的內容應簡短扼要,避免使用長標題、副標題或說明這樣可以提高資訊卡的視覺效果,也更容易掃描。
為了讓圖片上的文字更容易閱讀,請新增半透明的黑色漸層重疊。這樣可將背景調暗,而不會過度遮蔽圖片,讓文字更顯眼。

正確做法
在圖片背景上使用 scrim 精簡資訊卡。

錯誤做法
請勿使用小型的資訊卡,避免在背景圖片上方留下痕跡。