資訊卡

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

資源

類型	連結	狀態
設計	設計來源 (Figma)	可用
導入作業	Jetpack Compose	可用

重點特色

• 運用資訊卡呈現單一主題的內容。
• 資訊卡可容納從圖片到廣告標題，支援文字、按鈕、清單和其他 UI 元素。
• 一張卡片無法與另一張卡片合併，也無法分割為多張卡片。
• 資訊卡有六種變化版本：標準、經典、精簡、插邊、寬標準和廣角。

變化版本

資訊卡共有五種類型，用途各不相同：

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 的長寬比較高。如果想拆分格線並突顯重點，這會是很好的選擇。

最終，如要為資訊卡選擇顯示比例，最理想的方式就是嘗試不同的選項，看看哪一種效果最佳。

以下舉例說明不同長寬比的用法

版面配置和間距

實作適當的尖峰間距並將間距設為 20dp，即可根據畫面上顯示的資訊卡數量改變資訊卡寬度。

內容區塊

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

密集資訊卡

密集的資訊卡應保持精簡，且易於閱讀。背景圖片之前的內容應簡短扼要，避免使用長標題、副標題或說明這樣可以提高資訊卡的視覺效果，也更容易掃描。

為了讓圖片上的文字更容易閱讀，請新增半透明的黑色漸層重疊。這樣可將背景調暗，而不會過度遮蔽圖片，讓文字更顯眼。