資訊方塊設計系統

所有資訊方塊會共用某些基礎設計元素。您可以使用資訊方塊範本和元件,為應用程式輕鬆建構獨一無二的資訊方塊。

基礎元素

以下表格說明基礎的資訊方塊設計元素。

alt_text alt_text
alt_text alt_text alt_text

應用程式圖示

應用程式圖示由應用程式開發人員提供,並會暫時顯示在螢幕上。

設計區域

每個資訊方塊範本的主要內容區域都有獨特規則。請務必參考版面配置說明。

底部按鈕

若要在資訊方塊上啟用次要動作,按鈕至關重要。請將按鈕置於螢幕底部的 6.3% 處以上。

應用程式圖示

當使用者捲動資訊方塊輪轉介面時,Wear 會自動顯示應用程式圖示。應用程式圖示會逐漸淡出,因此不應在資訊方塊內實作。 如要進一步瞭解如何建立應用程式圖示,請參閱「產品圖示」相關說明。

alt_text

圖 1. 應用程式圖示範例

Wear 會自動顯示應用程式圖示

請假定 Wear OS 會自動顯示應用程式圖示。
將應用程式圖示放在資訊方塊設計上,導致重複顯示。

按鈕

按鈕的文字請簡短。使用的文字應為操作方式和行動號召的目標。請確定按鈕文字的翻譯符合字元限制。如果翻譯後的字數過長,請改將按鈕文字設定為「更多」

alt_text alt_text alt_text

位置

按鈕規格

類型

請將按鈕置放在距離錶面底部 6.3% 處的位置。 兩邊保留 12dp 的邊框間距。 您無法縮放字型大小。請將字型大小下限設為 9。非拉丁語系語言請將字型大小下限設為 7。

範本

系統提供四種類型的資訊方塊範本。請下載資訊方塊設計套件 (Figma) 以查看範例,並針對您使用此範本的體驗提供意見。

以文字為主

文字型資訊方塊範本的設計宗旨是在資訊方塊上顯示文字,例如最新消息、近期活動和提醒。這類範本通常用於顯示登入、錯誤和設定狀態,藉此通知使用者相關情形,並提供明確的行動號召。

以文字為主

以按鈕為主

以按鈕為主的資訊方塊範本適用於包含最多五項主要操作的資訊方塊。使用這個範本即可快速展開特定工作。

以按鈕為主

以資訊為主

以資訊為主的資訊方塊範本會顯示高階指標和進度,這對健康與健身相關的資訊方塊來說特別實用,提供靈活的內容顯示選項。為了維持一目瞭然,請優先處理重要資料,並避免範本過度擁擠。

以資訊為主

以資料為主

以資料為主的資訊方塊範本是多功能範本,旨在顯示能匯總定期資訊的圖表和圖形元素。這種範本提供資料視覺化的靈活性,有助於建立視覺化的空白狀態。保持圖形元素的簡單性,是確保資訊方塊一目瞭然的關鍵。

以資料為主

顏色

如要讓資訊方塊一目瞭然,請不要使用超過三種顏色。

將背景顏色設為黑色。
將背景顏色設為全出血圖片/顏色。

字體排版

請使用 Roboto 做為 Wear OS 的主要字型,並以 Body 2 做為預設和最小字型,而 Display 2 做為最大字型。

類型大小

如要進一步瞭解字型、粗細和大小,請參閱「字體排版」。

元件

請用元件建構資訊方塊。請按照 Wear Material Design 主題設定指南自訂元件顏色,展現出您的品牌風格。

請下載資訊方塊設計套件 (Figma) 參閱元件範例。

元件 子類型 範例
按鈕 標準按鈕

提供標準、大和特大尺寸

alt_text
按鈕 標準文字按鈕

提供標準、大和特大尺寸

alt_text
方塊 主要標準方塊 alt_text
方塊 次要標準方塊 alt_text
方塊 小型顯示圖片方塊 alt_text
方塊 大型顯示圖片方塊 alt_text
方塊 精簡 (底部) 方塊 alt_text
進度指標 標準進度指標 alt_text
進度指標 有間隔的進度指標 alt_text

資源

詳情請參閱資訊方塊設計指南