資訊方塊設計指南

資訊方塊是使用者在 Wear OS 最常存取的介面之一。

使用者可以透過資訊方塊快速取得所需資訊或進行必要操作,妥善處理生活大小事。他們只要滑動錶面,就能掌握自己的健身目標進度、查看天氣資訊,以及執行其他操作,例如透過資訊方塊快速啟動應用程式或完成重要工作。

使用者可以選擇要在手錶上顯示哪些資訊方塊。透過 Wear OS,他們可以在手錶和隨附應用程式中自行管理資訊方塊。

使用者體驗原則

下表說明資訊方塊使用者體驗原則。

一目瞭然

易於預測

切合需求

資訊方塊旨在協助使用者快速完成經常性的操作。 以明確的資訊層級顯示重要內容,可讓使用者輕鬆理解資訊。 每個資訊方塊內容都應側重某項使用者要做的事。這樣使用者就能預測自己會在資訊方塊上看到哪種資訊,有助於加強記憶。 使用者會隨身配戴手錶,所以請考量資訊方塊中的內容如何能配合使用者的需求。

規範

建立資訊方塊時,請遵守下列規範。

聚焦單項工作

每個資訊方塊都把焦點放在單項工作上,例如「開始跑步」
單個資訊方塊提供過多不同工作的資訊。

為每項工作建立個別的資訊方塊

如果您的應用程式支援多項工作,建議您依據應用程式支援的各項工作建立多個資訊方塊。舉例來說,健身應用程式可以同時提供目標資訊方塊和健身活動資訊方塊。

資訊方塊

以一目瞭然的方式呈現圖表

以一目了然的方式呈現數值或統計資訊,讓使用者根據需要,輕觸以瞭解應用程式的更多資訊。
在資訊方塊上顯示詳細數值或統計資訊。

顯示最近更新的資料

請確保使用者瞭解手錶顯示的是最新資料。您可以顯示快取資料,並指出與使用者相關的上次更新時間。

資訊方塊

空白狀態

資訊方塊有兩種空白狀態,我們建議這兩者都使用 PrimaryLayout

錯誤或權限

通知使用者,說明需要更新資訊方塊中的設定或偏好選項。

登入

在「登入」資訊方塊中提供明確的行動號召。

對話方塊範例

使用對話方塊狀態顯示錯誤、權限和設定問題。

資訊方塊

「持續進行的活動」資訊方塊

「持續進行的活動」資訊方塊代表應用程式正在運作的部分。這些資訊方塊會取代標準應用程式資訊方塊,以免重複啟動。

資訊方塊

規定

動畫圖示
對應該活動在錶面上顯示的圖示。

主要資料
描述活動的主要內容。

標籤
顯示活動狀態。

預覽

新增資訊方塊預覽,協助使用者透過手錶和手機查看資訊方塊管理工具顯示的是哪些內容。每個資訊方塊都可以有一張代表性的預覽圖片。該圖片應符合下列規定。

規定

  • 以 400 x 400 像素匯出素材資源。
  • 同時提供圓形和正方形預覽圖片。
  • 使用純黑色背景。
  • 儲存為 PNG 或 JPEG 檔案。
  • 為應用程式的主要語言加入本地化素材資源。
透過智慧手錶上的資訊方塊管理工具顯示的資訊方塊預覽。 透過手機上的資訊方塊管理工具顯示的資訊方塊預覽。
顯示資訊方塊已填入內容的預覽畫面。
顯示空白狀態、在分頁 UI 中顯示資訊方塊圖示,或是在資訊方塊周圍放置框線。

版面配置範例

以下列舉了資訊方塊的常見用途,且在設計上採用了我們的最佳做法。詳情請參閱「資訊方塊」。

目標追蹤

開始健身

開始健身

開始健身

健身摘要

啟動計時器

目前心率

心率

下次鬧鐘時間

沉思

沉思

新聞

天氣

下一個活動

社交

播放媒體內容