資訊卡

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

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

顯示比例

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

1:1

演員與工作人員

顯示比例 1:1,演員和劇組

球隊標誌

顯示比例 1:1,運動標誌

2:3

熱門書籍

顯示比例 2:3,熱門書籍

16:9

電影卡

顯示比例 16:9,Moive 卡

版面配置和間距

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

1 張資訊卡版面配置

資訊卡寬度 - 844dp

1 張資訊卡版面配置

雙張資訊卡版面配置

資訊卡寬度 - 412dp

2 張資訊卡版面配置

3 張資訊卡版面配置

資訊卡寬度 - 268dp

3 卡版面配置

4 張資訊卡版面配置

資訊卡寬度 - 196dp

4 卡版面配置

5 張資訊卡版面配置

資訊卡寬度 - 124dp

5 卡版面配置

內容區塊

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

建議只在絕對必要時使用寬版資訊卡顯示簡短說明。說明長度上限為幾個字。
避免在垂直堆疊的資訊卡上顯示詳細說明。

密集資訊卡

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

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

在圖片背景上使用 scrim 精簡資訊卡。
請勿使用小型的資訊卡,避免在背景圖片上方留下痕跡。