可穿戴設備已經(jīng)逐漸成為人們生活中不可或缺的一部分。Google 推出的 Wear OS（前身為 AndROId Wear）作為一款專為可穿戴設計的操作系統(tǒng)，為用戶提供了豐富的功能和便捷的操作體驗。

與 Apple 推出的 watchOS 相比，Wear OS 在很大程度上與其擁有著相同的設計思路。因此，本文將聚焦于 Wear OS 較為獨特的設計點。更多與可穿戴設備相關的設計點，請見我們先前發(fā)布《設計 watchOS App》一文。

此外，市面上還有諸多基于 RTOS 的可穿戴設備。在實踐中，我們可以將面向 Wear OS 的設計直接應用至 RTOS。因此，本文的內(nèi)容也適用于 RTOS。

一、設計原則

1. 遵循 Material Design 設計規(guī)范

Material Design 是 Google 推出的一套統(tǒng)一的設計語言。Wear OS 遵循 Material Design 設計規(guī)范。因此，在視覺風格和交互體驗上，Wear OS 與 Android 高度和諧統(tǒng)一。

2. 專注于關鍵任務

應專注于一兩個關鍵任務，而非完整的應用體驗。這意味著設計應簡潔明了，易于理解和使用。

其原因主要有以下 3 點：

① 屏幕尺寸小

Wear OS 設備的屏幕較小。將關注點放在關鍵任務上可以確保用戶能快速、輕松地在有限的空間內(nèi)找到并完成他們最關心的任務。

② 電池壽命

Wear OS 設備的電池容量較小。專注于關鍵任務可以減少不必要的功能和交互，從而降低設備的能耗。

③ 避免手腕不適

應保證人們在幾秒鐘內(nèi)就能完成手表上的任務，以避免造成人體工程學上的疲勞或不適。

3. 利用協(xié)同優(yōu)勢

用戶通常擁有多個設備，而且每種設備都有其優(yōu)勢。Wear OS 設備適合快速、頻繁的任務，而手機更適合持久和復雜的交互。因此，在某些情況下，可以同時使用手表和手機來完成同一任務的不同部分。這種任務分工可以讓用戶更高效地完成任務，同時避免在不適合的設備上進行繁瑣的操作。

由此，設備間的切換、數(shù)據(jù)同步的體驗就顯得至關重要了。

4. 支持離線運行

應為無網(wǎng)絡和網(wǎng)絡不佳的場景做好設計。

其原因主要有以下 2 點：

① 網(wǎng)絡連接不穩(wěn)定

鍛煉、通勤等 Wear OS 設備常被使用的場景容易遇到網(wǎng)絡不佳的情況。

② 減少耗電量

網(wǎng)絡連接通常會消耗大量電池電量。離線使用可以幫助節(jié)省電池電量，延長設備的使用時間。

二、手勢

1. 滑動手勢

在 Wear OS 中，通常使用從左到右的滑動手勢來關閉當前視圖并返回上一個視圖，而不是使用返回按鈕。因此，同一頁面內(nèi)的信息優(yōu)先縱向排布。

對于需要平移視圖的應用（如地圖），可以在左側屏幕邊緣設置拖動閾值，以避免誤操作。

2. 實體按鈕

Wear OS 設備上的實體按鈕（physical button）也被稱為「stem」。

我們可以在某些情況下使用常規(guī)的屏幕手勢，而在其他情況下則使用物理按鈕。這樣既能簡化用戶的操作流程，又能保證在需要時仍然可以通過物理按鈕進行快速切換。

① 類型

OS Button

用于系統(tǒng)操作，如開關電源和啟動應用。所有 Wear OS 設備都有電源按鈕和啟動器按鈕。

Multifunction Button

可以由系統(tǒng)或用戶配置的按鈕，類似于 Apple Watch 上 action button。適用于可以在不看顯示屏的情況下完成的二元操作（binary actions）。例如：

計時器中的「暫停/恢復計時」操作

音樂播放器中的「播放/暫停」操作

部分 Wear OS 設備有多個此按鈕。但并非所有 Wear OS 設備都有此按鈕。

② 按壓狀態(tài)

Single Press

按下并迅速松開。

Press and Hold

按下并保持按壓狀態(tài) 500ms 或更長時間。

③ 設計要點

明確功能分配

物理按鈕應該具有明確的功能，并且在整個設備的所有界面中都應該保持一致。例如，主頁按鈕應該總是回到主屏幕，而返回按鈕應該總是返回到上一個界面。

提供反饋

當用戶按壓物理按鈕時，應給予明確的反饋，讓用戶知道他們的操作已經(jīng)被接收。這可以通過聲音、震動等方式來實現(xiàn)。

考慮設備兼容性

不同的 Wear OS 設備可能有不同數(shù)量的物理按鈕。在設計應用時，需要考慮這一點，確保應用能夠在所有設備上正確工作。例如，如果某個功能是通過 multifunction button 訪問的，那么在沒有此按鈕的設備上，應提供其他訪問該功能的方式。

三、視覺設計

1. 字體排印（Typography）

Wear OS 的字符樣式體系遵循 Material Design。值得注意的是，「語義化」是其字符樣式體系的核心。

2. 圖標（Iconography）

① 遵循 Material Design

一致的圖標風格助于創(chuàng)建統(tǒng)一的視覺效果，并提高用戶體驗。因此，應遵循 Material Design 的圖標設計原則，以確保一致性。

② 保證簡潔

由于 Wear OS 設備的屏幕較小，圖標設計應簡潔且易于理解。避免使用過于復雜或細節(jié)豐富的圖標，因為它們可能在小屏幕上難以辨認。

③ 使用合適的尺寸

通常，建議使用 24 x 24 dp 的圖標尺寸，以確保在不同設備上都能清晰可見。

3. 顏色（Color）

與 watchOS 類似，Wear OS 默認使用深色模式下的色彩體系。我們可以直接使用 Material Design 顏色主題，也可以使用 Material Theme Builder 自定義。

① 遵循 Material Design

Wear OS 設備上的顏色設計應遵循 Material Design 指南。這包括使用 primary color、secondary color、accent color 等來創(chuàng)建一致的視覺效果。

② 關注對比度

確保文本和背景之間具有足夠的對比度，以便用戶能夠輕松閱讀信息。至少應滿足 WCAG 的 AA 標準，即文本與背景的對比度至少為 4.5:1。

③ 關注可讀性

在小屏幕設備上，選擇清晰易讀的顏色組合。特別是要避免使用飽和度高的顏色。因為飽和度高的顏色在暗色背景上會產(chǎn)生 optical vibrations（光學振動），進而導致眼睛疲勞。

④ 減少電量消耗

考慮到可穿戴設備的電池壽命，盡量使用深色背景和淺色文本。深色背景在 OLED 屏幕上可以節(jié)省電量，因為它們需要較少的能量來顯示顏色。

⑤ 保證一致性

這有助于創(chuàng)建統(tǒng)一的視覺效果，傳達一致的品牌形象，進而提升用戶體驗。

⑥ 支持個性化

考慮為用戶提供自定義顏色選項，以便他們可以根據(jù)自己的喜好或場合來更改 UI 外觀。隨著 Wear OS 4 的推出，Google 進一步深入融合了 Material You 設計語言，使得色彩更加豐富，用戶可以更自由地定義自己喜歡的顏色。

4. 布局（Layout）

不同的 Wear OS 設備，其屏幕尺寸和形狀均可能不同。特別是圓形和方形屏幕的同時存在，對 Wear OS 的布局設計提出了更高的要求。

① 優(yōu)先為小圓屏設計

如果設計面向的是矩形屏幕，那么在圓形屏幕上，屏幕角落的內(nèi)容可能會被裁剪。因此，應先為 Wear OS 支持的最小圓形屏幕尺寸（192 dp * 192 dp）進行設計，再為更大的屏幕尺寸進行優(yōu)化。

若需預覽設計方案在真機上的典型表現(xiàn)，則可用典型圓形屏幕尺寸（213 dp * 213 dp）。

② 外邊距使用比例

將外邊距定義為百分比而不是絕對值，以便邊距可以在圓形屏幕上按比例縮放并避免剪切任何 UI 元素。

③ 優(yōu)先使用垂直布局

垂直滾動是用戶在 Wear OS 設備上查看更多內(nèi)容的自然手勢。因此，我們應優(yōu)先使用垂直布局，以允許用戶沿著單個方向滾動以瀏覽內(nèi)容。

此外，可滾動頁面還能有效解決屏幕角落的內(nèi)容在圓屏上被裁剪的問題。

四、組件

Wear OS 中的組件與 Android 差別不大。因此，這里僅對比較特殊的組件進行簡述。

1. Button

button 用于用戶熟悉且不需要文本標簽的操作。

從樣式上看，button 一般為正圓型，內(nèi)部展示圖標。

若圖標無法描述相關操作，可使用最多三個字符的文本。若仍無法清楚地描述操作，則可考慮使用 chip。

2. Card

card 用于在有限的空間內(nèi)提供簡潔、清晰的信息。每張 card 應該只包含一個主題的內(nèi)容和操作。這樣可以確保用戶能夠快速理解 card 的內(nèi)容，并且能夠方便地在各個 card 之間切換。

從樣式上看，card 是帶有圓角和漸變背景的矩形。也可以使用圖片作為背景。

為了避免在圓形顯示屏上被裁剪，card 的高度不能超過屏幕的 60%。card 的寬度默認為容器的最大寬度。

3. List

① Snapping Behavior

在 Wear OS 中，list 組件的滾動行為應當是流暢且直觀的。用戶應該能夠輕松地在列表中上下滾動，并且列表應該能夠自動滾動以適應用戶的觸摸和拖動。此外，當用戶停止?jié)L動時，列表應該能夠平穩(wěn)地「吸附」到特定位置（通常是屏幕中心），這就是所謂的「snapping behavior」。

為了增強用戶體驗，list 組件的 snapping behavior 還應該包括適當?shù)膭赢嬓Ч＠?，當用戶滾動列表時，列表應該有一個平滑的滾動動畫；當列表停止?jié)L動并「吸附」到一個項目時，應該有一個輕微的彈動效果。這些動畫效果不僅可以讓用戶清楚地感知到列表的狀態(tài)，還可以增加應用的吸引力。

② Curved Layout

考慮到許多 Wear OS 設備使用圓形屏幕，這使得查看屏幕頂部和底部附近的列表項變得更加困難。針對此問題，Wear OS 提供了名為「curved layout」的縮放、淡入淡出效果：當元素移向屏幕中心時，其會變得更大且更不透明。

4. Confirmation Overlay

confirmation overlay 是一種用戶反饋機制，用于在用戶完成某項操作后提供反饋。

從樣式上看，confirmation overlay 會覆蓋整個屏幕。

若用戶的操作導致了可見的 UI 變化，那么就不需要額外的 confirmation overlay 了。因為，UI 的變化本身就是一種反饋。只有當用戶的操作在 UI 中不可見，才需要使用 confirmation overlay 來給用戶提供必要的反饋。

例如，下圖中的案例里，已通過消息氣泡的出現(xiàn)表明「消息已發(fā)送」，則不再需要額外的 confirmation overlay 了。

五、關鍵場景的設計

1. 啟動應用

留下良好的初印象是至關重要的。因此，應提供合適的應用啟動體驗。

① 優(yōu)化性能

應用的啟動速度對用戶體驗至關重要。用戶希望應用能夠快速啟動并準備好使用。為了實現(xiàn)這一點，需優(yōu)化應用的初始化過程，減少在啟動時加載的資源，以避免用戶在等待內(nèi)容加載時感到不適。

② 展示品牌

在應用啟動時，將應用圖標居中顯示，以提高品牌識別度。

2. 延遲

為了提供流暢的用戶體驗，應用的響應時間應盡可能短。這意味著在用戶與應用交互時，應用需要快速響應用戶的操作。

① 優(yōu)化性能

為了實現(xiàn)低延遲，可以優(yōu)化應用的代碼及使用高效的數(shù)據(jù)結構和算法，減少不必要的計算和資源請求。

此外，許多 Wear OS 應用依賴網(wǎng)絡連接來獲取數(shù)據(jù)和提供服務。為了減少網(wǎng)絡延遲，可以優(yōu)化數(shù)據(jù)傳輸，使用高效的數(shù)據(jù)壓縮和傳輸格式，以及在適當?shù)臅r機進行網(wǎng)絡請求。

② 表明正在進行中

讓用戶知道系統(tǒng)正在積極處理他們的請求，以增加他們對延遲的容忍度。

值得注意的是，應避免使用不確定的加載旋轉(zhuǎn)指示器。建議向用戶顯示靜態(tài)文本或占位符圖像，以表示正在進行的活動。

③ 漸進展示

在內(nèi)容變得可用時，逐步顯示靜態(tài)元素，如文本元素、可操作按鈕和占位符 UI。

④ 優(yōu)化后臺進程

在 Wear OS 設備上，應用可能會在后臺運行，以便在用戶與設備交互時提供實時信息和更新。為了優(yōu)化后臺性能并減少延遲，可以使用合適的后臺任務調(diào)度策略，避免在后臺執(zhí)行耗時操作。

3. 登錄

在 Wear OS 中，登錄是用戶開始使用應用的關鍵步驟。

① 選擇恰當?shù)臅r機

盡可能僅在適當?shù)臅r候提示用戶登錄，避免強制登錄。

② 提供上下文

向用戶解釋登錄的好處和原因。

③ 簡化登錄過程

在可穿戴設備上，輸入信息可能比較困難。因此，應盡量簡化登錄過程。同時，應將登錄方法分組并突出顯示最簡單的方法。

除了手動輸入和 SSO 的登錄方式，還可以考慮使用配對的手機設備來輔助登錄過程。用戶可以在其手機上輸入登錄信息，然后將信息發(fā)送到 Wear OS 設備上。這樣，用戶可以更方便地輸入信息，同時保持登錄過程的安全性。

值得一提的是，若手機登錄相應的應用，則 Wear OS 應用應自動登錄。

④ 提供指引和反饋

在登錄過程中，為用戶提供清晰的指引和反饋。例如，如果用戶輸入的信息有誤，應提供明確的錯誤信息，指導用戶進行更正。同時，在登錄過程中，可以使用進度指示器等視覺元素來告知用戶當前的狀態(tài)。

⑤ 考慮安全性

在處理用戶登錄信息時，應用需要確保數(shù)據(jù)的安全性。使用安全的加密和傳輸方法，以及遵循最佳實踐來保護用戶的隱私和信息安全。

⑥ 避免頻繁登錄

盡量減少用戶需要登錄的次數(shù)。在隱私和安全要求范圍內(nèi)，盡可能長時間地讓用戶保持登錄狀態(tài)。

例如，可以使用長期有效的訪問令牌或刷新令牌，以便用戶在一段時間內(nèi)無需再次登錄。這有助于提高用戶體驗，減少用戶在設備上輸入信息的困擾。

4. 請求權限

在 Wear OS 中，權限管理是確保用戶隱私和數(shù)據(jù)安全的重要環(huán)節(jié)。當需要授予手表應用權限時，系統(tǒng)會顯示一個對話框，讓用戶選擇接受或拒絕該權限。因此，應用需要在明確需要權限的時候和地方請求權限，例如在提供關于特定權限的信息后請求權限。

若一個應用或 watch face 一次需要多個權限，那么權限請求將依次出現(xiàn)；若請求的是手表搭配使用的手機的權限而非手表的權限，則會引導用戶前往手機完成操作；若在手表搭配使用的手機請求手表的權限，則會引導用戶前往手表完成操作。

① 按需請求權限

僅在應用需要使用相關功能時請求權限。避免在應用啟動時請求所有權限，這可能會讓用戶感到困擾。相反，在需要使用特定功能時，向用戶解釋為什么需要該權限，并在合適的時機請求。

② 保證透明度

在請求權限時，向用戶提供清晰的解釋，說明為什么應用需要這些權限以及如何使用這些權限。這有助于建立用戶的信任，提高用戶對應用的接受度。

③ 簡化請求

權限請求應該盡可能地簡單、透明和易于理解。當請求訪問權限時，應用需要明確說明為什么需要這個權限，這樣可以增加用戶的信任度，提高用戶的授權率。

④ 優(yōu)雅處理權限拒絕

如果用戶拒絕授權某些權限，應用應能夠優(yōu)雅地處理這種情況。例如，可以提供降級功能，或者在用戶再次嘗試使用受限功能時重新請求權限。同時，需要確保應用在缺少權限的情況下仍能正常運行。

六、通知

Wear OS 提供以下 4 種通知模板：

① Standard

適用于大多數(shù)通知。

② Big Text

適用于有較多文本的通知。可以在展開時顯示更多文本。

③ Big Picture

適用于帶有圖片的通知。

④ Messaging

適用于需要回復信息的通知。可調(diào)用「Google’s Smart Reply」來依據(jù)上下文生成回復建議。

除了展示推送信息，Wear OS 的通知還可以展開以提供更多操作，如回復消息、在地圖上打開位置或播放歌曲。

七、表盤

表盤是用戶使用 Wear OS 設備時第一個與之交互的，也是最常用的界面。表盤不僅可以顯示時間，還可以通過 complication 顯示相關、及時的數(shù)據(jù)。

1. Watch Face

① 以顯示時間為主

人們平均每天查看時間 150 次。因此，確保在一瞥之間就能看到時間信息。

② 支持個性化

除了實用性之外，表盤的外觀也很重要。應為表盤提供自定義選項，如顏色、指針和 complication，使用戶能根據(jù)自己的喜好或場合來自定義表盤。

③ 節(jié)能

復雜的動畫或亮色可能會消耗更多的電量。因此，應使用黑色作為主色，并通過優(yōu)化算法減少不必要的計算。

此外，在 Wear OS 中，每個表盤都需兼容以下 2 種模式：

Interactive

用戶與手表互動時的模式。

Always-On DISPlay (AoD)

用戶未與手表互動時顯示的手表表盤。為節(jié)省電池壽命，此模式下表盤上的發(fā)光的像素（即非純黑像素）應不超過 15%。

我們可以使用「Watch Face Studio」來設計表盤。「Watch Face Studio」是一款由 Google 開發(fā)的用于創(chuàng)建 Wear OS 設備表盤的圖形化設計工具。它可以幫助設計師創(chuàng)建自定義表盤，而無需編寫大量代碼。

2. Complication

與 watchOS 類似，Wear OS 中的 complication 是表盤上顯示的小部件，它們可以顯示來自應用的實時信息，例如天氣、日歷事件或健康數(shù)據(jù)等，讓用戶無需打開應用就能獲取所需的信息。

① 類型

Wear OS 提供以下 5 種 complication 類型：

SHORT_TEXT（短文本）

ICON（圖標）

RANGED_VALUE（范圍值）

LONG_TEXT（長文本）

SMALL_IMAGE（小圖像）

LARGE_IMAGE（大圖像）

② 設計要點

易于查看

由于尺寸的限制，應需選用簡短的內(nèi)容、合適的大小、形狀和顏色，以確保 complication 的簡潔性和易讀性。

以內(nèi)容為中心

表盤組件的價值在于用戶只需抬起手腕即可查看所需內(nèi)容，無需進一步交互。

Complications 需定期更新以保持信息的最新性。設計時應考慮如何高效地刷新數(shù)據(jù)，以最小化對設備電池的影響。

保護隱私

手表伴隨用戶走遍各處。因此，應避免顯示過于私密的信息。

Wear OS 會自動為應用創(chuàng)建一個 app shortcut complication，以允許用戶直接從表盤訪問應用。因此，我們無需為應用創(chuàng)建目的僅為進入應用的 complication，而應專注于設計其他類型的表盤組件。

八、Tile

用戶可以在表盤上滑動來訪問不同的 tile，進而快速查看信息和進行操作。

與 complication 相比，tile 更適用于信息較多的場景。

1. 構成

App Icon

是 tile 中必須包含的元素。

每個 tile 的頂部都會顯示對應應用的 app icon，以幫助用戶識別其來源的應用。

這是由系統(tǒng)自動完成的。因此，我們無需在 tile 中手動添加 app icon，即使 tile 處于空狀態(tài)也是如此，應將精力放在設計磁貼的主要內(nèi)容上。

Design Area

是 tile 中必須包含的部分。

Bottom Button

是 tile 中的可選部分。

將 button 放置在距離屏幕底部 6.3% 的位置。

2. 類型

Text Centric

用于在 tile 上顯示文本內(nèi)容，以告知用戶當前狀態(tài)并提供明確的操作指引。

Button Centric

用于快速啟動特定任務，最多可展示 5 個操作。

Information Centric

用于顯示進度和重點指標。

Data Centric

3. 設計要點

聚焦單一任務

每個 tile 應僅關注一個任務。

如果應用支持多個任務，可以為每個任務創(chuàng)建單獨的 tile。例如，一個健身應用可以有「運動目標」「鍛煉」「冥想」3 個 tile。

易于查看

盡管 tile 的尺寸比 complication 大，但仍需選用簡短的內(nèi)容、合適的大小、形狀和顏色，以確保 tile 的簡潔性和易讀性。

背景色應為黑色。不應使用超過 3 種顏色。

保證數(shù)據(jù)時效性

使用合適的數(shù)據(jù)更新速率，同時確保能耗得當。若展示的是較舊的緩存數(shù)據(jù)，則應顯示更新時間。

九、Ongoing Activities

在 Wear OS 中，用戶能輕松地返回到后臺正在進行的活動，如計時器、音樂播放器、運動監(jiān)測器等。

1. 類型

用戶可以從以下 3 個位置返回到正在進行的活動：

Watch Face

Tile

在 tile 上顯示簡潔的內(nèi)容，讓用戶在節(jié)省電力的同時能輕松返回到正在進行的活動。為節(jié)省電量，更新頻率盡量不超過每分鐘一次。

Launcher

我們可以在啟動器入口中顯示有用的信息，以幫助用戶了解正在進行的活動類型及其狀態(tài)。

2. 設計要點

適用

只有當應用程序正在執(zhí)行用戶需要持續(xù)關注的活動時，才應使用持續(xù)活動。

簡潔

由于屏幕尺寸的限制，持續(xù)活動應盡可能簡潔，避免過于復雜的設計。每個持續(xù)活動應只包含少量的關鍵信息，以便用戶能快速理解。

節(jié)能

避免過于頻繁地更新持續(xù)活動的狀態(tài)。只有當狀態(tài)發(fā)生重要變化時，才應更新顯示。

及時結束

設計明確的結束條件，以便用戶知道何時活動已完成或可以被終止。例如，計時器到達設定時間、音樂播放完畢或健身活動達到目標等。

十、System Ambient Mode

當用戶在一段時間不與手表交互時，Wear OS 會自動切換到被稱為 system ambient mode 的低功耗模式。這與 watchOS 的 Always-On 類似。

對于特定的使用場景（如在跑步時查看心率和配速），我們可以設計應用在 system ambient mode 下顯示的內(nèi)容，以便用戶在不消耗大量能量的情況下獲取所需信息，以運行用戶在此模式下執(zhí)行一些基本的操作。

為了節(jié)省電能，我們可以：

① 減少發(fā)光像素量

讓屏幕的大部分區(qū)域保持黑色。僅顯示關鍵信息，在用戶進入交互模式時提供更多詳細信息。

② 避免使用高亮度或飽和度的顏色

因為這些顏色可能會導致屏幕燒錄。應盡量使用柔和的顏色。

③ 降低內(nèi)容更新頻率

例如，將計時器顯示為最接近的分鐘，而不是最接近的秒。

結語

設計 Wear OS app，需充分利用這個平臺的特性。通過遵循 Wear OS 的設計最佳實踐，相信我們可以創(chuàng)建出既美觀又實用的 Wear OS app。希望你能從本文獲得一些啟發(fā)，并與我們一起推動腕上體驗設計的發(fā)展。

參考資料：

1. Material Design 3
   https://m3.material.io/
2. Build apps for the wrist with Wear OS：https://developer.android.com/wear
3. Create beautiful, power-efficient apps for Wear OS：https://youtu.be/jpUVamtoKOs
4. How to build high quality experiences on Wear OS：https://youtu.be/82HB6ziP1QY?
5. Create your first Tile in Wear | Workshop：https://www.youtube.com/live/Q7xudRfN188
6. Android Developer Story: Spotify on Wear OS：https://youtu.be/URx8_ZRR7ls
7. What's new in Wear OS by Google (Google I/O '18)：https://youtu.be/VZVosFzD9NU
8. Now is the time: What's new with Wear | Session：https://youtu.be/kYIb9g1r4lw

作者：We-Design