資訊卡

資訊卡是 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。

內容封鎖

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

密集卡片

精簡的卡片應簡明扼要，且方便使用者閱讀。背景圖片前方的內容應簡短扼要，避免使用長標題、副標題或說明。這樣可讓卡片看起來更吸睛，也更容易掃描。

如要讓圖片上的文字更清晰易讀，請新增半透明黑色漸層重疊。這樣會調暗背景，而不會過度遮蔽圖片，讓文字更容易查看。