資訊卡

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