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

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

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