資訊方塊會共用部分基礎設計元素。瞭解資訊方塊範本和資訊方塊元件後,您就可以輕鬆為應用程式建構獨一無二的資訊方塊。
基礎元素
以下表格將列出基礎的資訊方塊設計元素。
![]() |
![]() |
|
![]() |
![]() |
![]() |
應用程式圖示 |
設計區域 |
底部按鈕 |
應用程式圖示由應用程式開發人員提供,並會暫時顯示在螢幕上。 | 每個資訊方塊範本的主要內容區域都有獨特的規則。請務必參考版面配置說明。 | 按鈕對在資訊方塊啟用次要動作方面十分重要。請將按鈕置於螢幕底部的 6.3% 處以上。 |
應用程式圖示
當使用者捲動資訊方塊輪轉介面時,Wear 會自動顯示應用程式圖示。應用程式圖示會逐漸淡出,且不應在資訊方塊內實作。
如要進一步瞭解如何建立應用程式圖示,請參閱「產品圖示」相關說明。
圖 1. 應用程式圖示範例
按鈕
請在按鈕使用簡短的文字。請使用特別指明操作方式以及行動號召目標的文字。確定按鈕文字的翻譯符合字元限制。如果翻譯的按鈕文字過長,請改將按鈕文字設定為「更多」。
![]() |
![]() |
![]() |
位置 |
按鈕規格 |
類型 |
邊界:請將按鈕置放在錶面底部 6.3% 以上的地方。 | 邊框間距:兩邊保留 12dp 的邊框間距。 | 字型大小:您無法縮放字型大小。請將字型大小下限設為 9。非拉丁語言請將字型大小下限設為 7。 |
資訊方塊範本
系統提供四種類型的資訊方塊範本。下載資訊方塊設計套件 (Figma) 即可查看範例。
![]() |
![]() |
以文字為主的範本 | 以按鈕為主的範本 |
![]() |
![]() |
以資訊為主的範本 | 以資料為主的範本 |
元件
請用元件建構資訊方塊。請按照 Wear 質感設計主題設定指南自訂元件顏色,藉此展示品牌風格。
請下載資訊方塊設計套件 (Figma) 以便參閱元件範例。
元件 | 子類型 | 範例 |
按鈕 | 標準按鈕 | 提供標準、大和特大等尺寸 ![]() |
按鈕 | 標準文字按鈕 | 提供標準、大和特大等尺寸 ![]() |
Chip | 主要標準方塊 |
![]() |
Chip | 次要標準方塊 |
![]() |
Chip | 小型顯示圖片方塊 |
![]() |
Chip | 大型顯示圖片方塊 |
![]() |
Chip | 精簡 (底部) 方塊 |
![]() |
Progress indicator | 標準進度指標 |
![]() |
Progress indicator | 有間隔的進度指標 |
![]() |
資源
詳情請參閱資訊方塊設計指南。