資訊卡

資訊卡可包含各種資訊,例如文字、圖示、圖片、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