資訊方塊設計系統

資訊方塊會共用部分基礎設計元素。瞭解資訊方塊範本和資訊方塊元件後,您就可以輕鬆為應用程式建構獨一無二的資訊方塊。

基礎元素

以下表格將列出基礎的資訊方塊設計元素。

alt_text alt_text
alt_text alt_text alt_text

應用程式圖示

設計區域

底部按鈕

應用程式圖示由應用程式開發人員提供,並會暫時顯示在螢幕上。 每個資訊方塊範本的主要內容區域都有獨特的規則。請務必參考版面配置說明。 按鈕對在資訊方塊啟用次要動作方面十分重要。請將按鈕置於螢幕底部的 6.3% 處以上。

應用程式圖示

當使用者捲動資訊方塊輪轉介面時,Wear 會自動顯示應用程式圖示。應用程式圖示會逐漸淡出,且不應在資訊方塊內實作。

如要進一步瞭解如何建立應用程式圖示,請參閱「產品圖示」相關說明。

alt_text

圖 1. 應用程式圖示範例

按鈕

請在按鈕使用簡短的文字。請使用特別指明操作方式以及行動號召目標的文字。確定按鈕文字的翻譯符合字元限制。如果翻譯的按鈕文字過長,請改將按鈕文字設定為「更多」。

alt_text alt_text alt_text

位置

按鈕規格

類型

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

資訊方塊範本

系統提供四種類型的資訊方塊範本。下載資訊方塊設計套件 (Figma) 即可查看範例。

alt_text alt_text
以文字為主的範本 以按鈕為主的範本
alt_text alt_text
以資訊為主的範本 以資料為主的範本

元件

請用元件建構資訊方塊。請按照 Wear 質感設計主題設定指南自訂元件顏色,藉此展示品牌風格。

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

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

提供標準、大和特大等尺寸

alt_text
按鈕 標準文字按鈕

提供標準、大和特大等尺寸

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

資源

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