資訊卡是 TV 應用程式的基本構成要素。
資源
| 類型 | 連結 | 狀態 |
|---|---|---|
| 設計 | 設計來源 (Figma) | 可使用 |
| 導入作業 | Jetpack Compose | 可使用 |
重點特色
- 使用資訊卡在單一主題中顯示內容。
- 資訊卡可包含圖片、標題、支援文字、按鈕、清單和其他 UI 元素等任何元素。
- 某張卡片無法與其他卡片合併，也無法將卡片分成多張卡片。
- 資訊卡有六種變化：標準、經典、精簡、插邊、寬標準和寬經典。
版本
資訊卡共有五種，用途各不相同：
- 標準
- 經典
- 精簡
- 寬標準
- 寬版經典
內容封鎖條件
資訊卡內容是以不同的區塊排列。資訊卡視覺設計 (包括重點) 代表階層。資訊卡本身的版面配置會配合資訊卡包含的內容類型。
圖解
- 標題
- 副標題
- 說明
- 額外文字
規格
標準卡
圖解
- 圖片
- 內容封鎖
狀態
規格
傳統卡片
圖解
- 圖片
- 內容封鎖
狀態
規格
密集卡
圖解
- 圖片
- 內容封鎖
狀態
規格
寬標準卡片
圖解
- 圖片
- 內容封鎖
狀態
規格
寬版經典資訊卡
圖解
- 圖片
- 內容封鎖
狀態
規格
使用方法
資訊卡是多功能的設計元素，可用於以視覺吸引力和容易使用的方式顯示各種內容。以下各節將說明資訊卡的設計注意事項。
顯示比例
資訊卡有三種常見的顯示比例：16:9、1:1 和 2:3。 每個顯示比例都有其優勢，因此最適合您的選擇，取決於您的特定需求。
- 16:9 是資訊卡最常見的顯示比例。這種寬長寬比適合用來顯示圖片及影片。
- 1:1 為正方形顯示比例。對於需要平衡視覺平衡的資訊卡，例如演員和工作人員、頻道標誌或團隊標誌等。
- 2:3 是較高的顯示比例。如果您想拆分格線並加強強調效果，這會是不錯的選擇。
總而言之，選擇資訊卡顯示比例的最佳方式就是嘗試不同的選項，看看何者成效最佳。
以下列舉幾個不同長寬比的使用範例
1:1
演員與工作人員
球隊標誌
2:3
熱門書籍
16:9
電影卡
版面配置和間距
透過實作適當的峰值，並將間距設為 20dp，即可根據螢幕上顯示的資訊卡數量改變資訊卡寬度。
單資訊卡版面配置
資訊卡的寬度 - 844dp
雙資訊卡版面配置
資訊卡的寬度 - 412dp
三張資訊卡版面配置
資訊卡的寬度 - 268dp
4 卡版面配置
資訊卡的寬度 - 196dp
5 張資訊卡版面配置
資訊卡的寬度 - 124dp
內容封鎖
資訊卡中的內容區塊寬度應與圖片縮圖的寬度相同。如果您需要在內容區塊中顯示更多文字，請使用寬版資訊卡變化版本。
正確做法
使用寬版資訊卡能呈現簡短說明，但只在絕對必要的情況下才這麼做。說明長度只能包含幾個字。
錯誤做法
避免在垂直堆疊的資訊卡上顯示詳細說明。
密集卡
密集資訊卡應保持精簡且容易閱讀。背景圖片前方的內容應簡短有力。請避免使用長的標題、字幕或說明這樣資訊卡就能更吸引人，更方便瀏覽。
為了讓圖片中的文字更清晰易讀，請新增半透明的黑色漸層重疊。這會調暗背景，而不會過度模糊處理圖片，讓文字更清晰易讀。
正確做法
在圖片背景上使用 scrim 的精簡卡片。
錯誤做法
不要在背景圖片上加入有邊框的精巧資訊卡。