資訊卡可包含各種資訊,例如文字、圖示、圖片、Gemini 回覆或動作。

原則
連貫:卡片會將相關資訊和動作歸類為單一、易於理解的單元。
清楚:以清楚有條理的方式呈現內容,方便瀏覽。
用途廣泛:資訊卡可適應各種內容,從簡短的文字摘要到包含多個元素的複雜摘要,都能顯示。
模組化:採用模組化設計,可在 Jetpack Compose Glimmer for Glasses 介面的不同部分重複使用。
用量和刊登位置
資訊卡可包含各種資訊,例如文字、圖示、圖片、動作或 Gemini 回覆。

使用 Jetpack Compose Glimmer 資訊卡範本製作內容,因為這類範本有許多變化,且經過最佳化,可直接遵循眼鏡設計原則。
正確做法
錯誤做法
使用含有資訊卡的按鈕群組,顯示多個動作。
正確做法
錯誤做法
圖解
系統會使用預設的版位範本建構資訊卡。
1. 標題:資訊卡的頂端部分,用於放置圖片。
2. 標題和副標題:這些文字欄位提供資訊卡的主要和次要標籤。
3. 前置圖示:顯示在資訊卡內容區域開頭的選用圖示。
4. 尾端圖示:顯示在資訊卡內容區域尾端的選用圖示。
5. 動作:主要互動式元素 (例如按鈕) 的位置。使用者可直接透過資訊卡執行動作。如果資訊卡有動作,則只能包含單一動作。
6. 主要內容:資訊卡的核心主體,可放置主要文字或其他內容。
專注
如果資訊卡的用途主要是放置特定互動元素 (例如「動作」中的按鈕),焦點應直接移至該元素,而非資訊卡容器。當資訊卡代表單一可導覽項目 (例如清單中的項目) 時,就會變成可聚焦。提供更直接且容易使用的使用者體驗。
焦點位於清單項目的資訊卡。
資訊卡中的按鈕會成為可執行的元素,並獲得焦點。
自訂
| 屬性 | 自訂 | 預設值 |
|---|---|---|
| 圖案 | 是 | 中 |
| 邊框間距 | 是 | 24 dp、24 dp |
| 邊 | 是 | 2 dp,#606460 |
| 文字 | 是 | Body Small |
| 前置圖示 | 是 | 56 dp |
| 尾端圖示 | 是 | 56 dp |