資訊卡
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
資訊卡是 TV 應用程式的基本構成要素。
資源
重點特色
- 使用資訊卡顯示單一主題的內容。
- 資訊卡可以容納各種資訊,包括圖片、標題、支援文字、按鈕、清單和其他 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
內容封鎖
資訊卡中的內容區塊寬度應與圖片縮圖相同。如果您需要在內容區塊中顯示更多文字,請使用寬版資訊卡變化。
check_circle
正確做法
使用寬資訊卡可呈現簡短說明,但僅限在絕對必要時使用。說明長度應只有幾個字。
cancel
錯誤做法
避免在垂直堆疊的資訊卡上顯示詳細說明。
密集卡片
精簡的卡片應簡明扼要,且方便使用者閱讀。背景圖片前方的內容應簡短扼要,避免使用長標題、副標題或說明。這樣可讓卡片看起來更吸睛,也更容易掃描。
如要讓圖片上的文字更清晰易讀,請新增半透明黑色漸層重疊。這樣會調暗背景,而不會過度遮蔽圖片,讓文字更容易查看。
check_circle
正確做法
在圖片背景上方使用 scrim 的精簡資訊卡。
cancel
錯誤做法
請勿使用小型資訊卡,且不要修剪在背景圖片上。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-08-19 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-08-19 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-08-19 (世界標準時間)。"]]