從附屬設備到關鍵設備，從基于硬件素質的功能到依托機器學習的服務，可穿戴設備愈發深入人心。Apple Watch 搭載的 watchOS 是可穿戴設備操作系統中的翹楚。相較于 iOS、Android，watchOS 對于大多數設計師來說都是一個相對陌生的領域。

推薦閱讀

自 2021 年以來，watchOS 的設計及用戶對其的期望已發生了較大的轉變。由此，我們將通過這篇文章，向讀者介紹更為現代的 watchOS app 設計要點。

一、設計原則

watchOS 有 3 項設計原則：

1. 交互輕量（Lightweight Interactions）
2. 軟硬件一體（Holistic Design）
3. 面向個人（Personal Communication）

1. 交互輕量

① 專注且高度專業化

watchOS app 應以特定的目的和功能為中心，而不是試圖提供多種復雜的功能。

在 iOS 中作為一個整體的應用，可以在 watchOS 中被拆解為小塊的微應用。

例如，iOS 中的「Music」，在 watchOS 中被拆解為「Music」「Now Playing」2 個 app，其對應著瀏覽音樂庫、控制音頻播放這 2 個微任務。

② 易讀且易操作

watchOS app 應為易讀性（glanceability）和快速交互進行優化。

由于 Apple Watch 的屏幕尺寸較小，只有保證易讀性優良，才能使得用戶能夠在非常短的時間內迅速捕捉到屏幕上的關鍵信息。此外，鑒于抬腕使用設備的姿勢不便于長時間保持，Apple Watch 用戶往往只會花幾秒鐘的時間來使用設備，這就對交互的便利性提出了更高的要求。

例如，在「Workout」中，不僅應用中的操作按鈕和文本足夠大，圖文結合的形式還讓信息一目了然。僅需一瞥，心中就有數了。

2. 軟硬件一體

下面舉 3 個例子：

①顯示屏與背景色

Apple Watch 的屏幕在展示純黑（#000000）時不會發光。若在設計中使用純黑的背景，背景就會與 bezel 融為一體、UI 元素直接「鑲嵌」于表盤，可謂渾然天成。不僅如此，不發光的黑色還能帶來省電的好處。

雖然從 watchOS 10 版本開始，watchOS 開始擁抱彩色背景，但純黑的背景，仍是 watchOS app 的首選。

② 顯示屏與全天候顯示

為了能在用戶放下手腕時也能看到表盤上的信息，Apple Watch 利用屏幕的低亮度、極低的刷新率實現了全天候顯示（Always On），以保證屏幕能始終顯示內容。

設計師可以充分利用全天候顯示這一能力，為用戶提供更便捷的、無需抬腕的信息獲取方式。

③ 機身倒角與 UI 圓角

承載 watchOS 的 Apple Watch 有著極高水準的工業設計，而與 UI 最為相關的則是其屏幕及 bezel。其中，bezel 指的是 Apple Watch 屏幕四周環繞的黑色邊框，經特殊工藝處理，其邊緣如水滴般飽滿（Ultra 系列除外）。在強光照射下，更能呈現出其精致質感。這很難讓人不想到 Apple 經典的 Aqua 風格。

因此，在 UI 中使用與物理環境相匹配的圓角樣式，可使軟硬件更加契合。watchOS 中的圓角使用可以比 iOS 中更大膽。如在 iOS 中，按鈕的常規圓角值為 8 pt，watchOS 中則直接使用全圓角。同時，app icon 也是正圓的。

3. 面向個人

Apple Watch 始終伴隨著用戶。鑒于此，Apple 在硬件層面提供了豐富的個性化選項，包括外殼材料、表帶等。在軟件層面，頗具個性化的表盤則是我們可以發揮的空間。

此外，我們需要為用戶的隱私做足夠縝密的考量。當用戶抓著地鐵扶手或伏案工作時，屏幕上常亮顯示的信息可能會被旁人看到。因此，我們要為 Always On 狀態下頁面中的信息進行脫敏處理。

同時，作為隨時貼身的設備，減少對用戶無謂的打擾也是我們需要注意的基本要求。

總的來看，watchOS 的設計原則可簡要總結為：在物理性質上，強調「軟硬件一體」；在人機交互上，規避信息過載、注重信息安全；在情感表達中，需滿足用戶的個性化訴求。

二、手勢

1. 常規手勢

watchOS 支持以下手勢：

1. 輕點（Tap）：單指輕觸屏幕
2. 拖移（Drag）：單指向上、向下、向左或向右輕掃過屏幕
3. 輕掃（Swipe）：單指移過屏幕但不抬起
4. 雙擊（Double Tap）

其中，雙擊手勢是 watchOS 10 新引入的手勢，是一種無需觸摸屏幕即可完成交互的創新手勢。

受限于較小的屏幕，多點觸控是不被支持的。如 iOS 中常用的雙指捏合（pinch）及雙指旋轉（rotate）。

此外，較早版本的 watchOS 還支持 Force Touch（基本等同于「3D Touch」）。在早于 watchOS 7 的 watchOS 中，用戶可以用力按下顯示屏來觸發相應操作。但出于學習成本、硬件限制等原因，watchOS 不再支持 Force Touch。取而代之的是長按手勢。

不過，不建議使用長按手勢來顯示菜單，而是應該將菜單直接放在頁面中，以確保用戶能夠輕松地找到。

2. 邊緣滑動

在小而圓滑的 Apple Watch 屏幕上，邊緣滑動相當便捷。其中，上、下、左側的邊緣滑動已被系統定義，分別為打開通知中心、打開控制中心、返回。而右側的邊緣滑動則尚未被系統占用，這給了我們一個自由發揮的空間。

3. 實體按鈕

① 數碼表冠（Digital Crown）

數碼表冠是非常適合在手腕上與智能設備交互的實體。它提供了一種不用手指遮擋顯示屏就能進行交互的方法。通過旋轉數碼表冠，用戶可以實現頁面、picker 的滾動，滾動速率收放自如。

除了滾動頁面，數碼表冠還可以用來來實現其他交互。例如：

1. 在「Now Playing」中，用來調整音量。
2. 在「Maps」中，用來縮放地圖。
3. 在「Timers」中，用來調整時長。

從 watchOS 10 開始，數碼表冠開始成為導航的主要交互方式。例如：

1. 在表盤上，旋轉數碼表冠可查看 Smart Stack 中的小組件。
2. 在應用內，旋轉數碼表冠可在垂直分頁的 tab 間切換（詳情請見本文后續的介紹）。

② Side Button

目前，side button 相關的交互屬于系統級，不可自定義：

1. 單擊打開 Control Center；
2. 雙擊打開「Wallet」；
3. 長按調出關機等選項。

③操作按鈕（Action Button）

操作按鈕是 Ultra 系列特有的實體按鍵。用戶可以使用操作按鈕來運行系統提供的功能或 shortcuts。

因此，若應用能提供 shortcuts，用戶便可通過操作按鈕直接與應用交互。這是一個非常巧妙的增加用戶觸點的契機。

此外，Apple 還將操作按鈕引入了 iPhone 15 Pro 系列機型。可見，操作按鈕是未來軟硬件結合的要素。

三、視覺設計

1. App Icon

watchOS app icon 呈圓形。Apple Watch 的屏幕尺寸相對較小，因此在設計圖標時需要確保圖標元素在較小尺寸下仍然清晰可辨。

為了確保圖標不會與顯示背景融合在一起，建議避免使用純黑色作為圖標的背景。若仍需要使用純黑色，則可以嘗試添加描邊。

如果 watchOS app 有一個伴隨的 iPhone app，應確保兩者的圖標在風格和視覺元素上保持一致，以便用戶能夠輕松地識別出它們之間的關聯。

2. Color

受益于 Apple Watch 愈發優秀的續航表現（特別對于 Ultra 系列機型）及屏幕占比，純黑的背景色已不再是唯一的選擇。使用充滿全屏的背景色（full screen background color）成了 watchOS 新的用色趨勢。

充滿全屏的背景色不僅僅是視覺裝飾（visual flourish），其還具備額外的實用性（additional utility）：

幫助用戶導航和識別應用

如在「Activity」中，「Move」「Exercise」「Stand」等頁面均有與其相匹配的背景色。

設定基調（Tone）

如在「Sleep」中，藍色背景構建了寧靜的氛圍。

傳達信息

如在「Clock」中，背景色表達了此刻的時間。

表示狀態變化

如「Timers」中，倒計時時背景為黑色，而計時結束時，明亮的橙色背景表明計時已完成。

值得注意的是，我們仍需避免在可能長時間在屏幕上顯示的頁面中使用充滿全屏的背景色，以避免不必要的電量損耗。

3. Material

在 watchOS 中運用 material，可以在確保內容的可讀性的前提下，于具備不同功能的層之間建立層次結構，進而幫助用戶了解他們在系統或應用內的位置。

Material 由以下 2 個要素構成：

1. Translucency
2. Vibrancy

① Translucency

watchOS 提供 4 種模糊級別（blur level）供設計師選用：

1. Ultra Thin
2. Thin
3. Regular
4. Thick

② Vibrancy

為確保可讀性，watchOS 提供了 4 種用于前景元素的 vibrant fill materials 供設計師選用：

1. Primary
2. Secondary
3. Tertiary
4. Quaternary

例如，在內容滾動到使用了 material 的狀態欄下方時，使用了 vibrant fill materials 的文本仍清晰可讀。

4. Layout

為確保在不同尺寸的 Apple Watch 上的一致性、易讀性，watchOS 采用基于顯示屏形狀的布局體系，并以此來定義 UI 元素的尺寸、位置。

watchOS 提供 3 種基本布局：

1. Dial
2. Infographic
3. List

① Dial

Dial 布局非常適合在一瞥間獲取大量信息。Dial 布局的主要特點是，它充分利用了充滿全屏的背景色、圖像來傳達信息。例如，在「Weather」中，全屏的天空背景表明了當前的天氣狀況。

此外，此布局還允許在不遮擋內容的情況下添加多達 4 個不同的 corner control，以顯示額外的信息或提供便于快速訪問的功能。

② Infographic

Infographic 布局非常適合由文本、數據構成的數據可視化內容。

Infographic 布局的主要特點是，它能夠清晰地展示數據間的關系、趨勢，幫助用戶更好地理解、分析數據。例如，在「Stock」中，折線圖能清晰地展示股票價格的變化。

③ List

List 布局是最為傳統的布局，主要適用于需要展示多個項目的場景，便于用戶瀏覽并找到所需的信息。

List 布局的主要特點是，它通常包含一系列垂直排列的項目，用戶可以通過滾動瀏覽這些項目。這些項目可以是文本、圖像或其他自定義視圖。例如，在「Calendar」中，list 布局能清晰地展示日程。

此外，此布局通常還支持點擊、橫向滑動刪除等操作。這使得用戶可以方便地與列表中的項目進行互動。

為了提高此布局的可讀性和易用性，可以考慮使用分隔線、分組標題等元素來區分不同的項目和內容。同時，也可以為列表項目添加縮進、填充或間距，以提高布局的清晰度、美觀性。

值得一提的是，當前的 Apple Watch 還不能稱為真正的「全面屏」。如果可能，將按鈕、列表項等元素橫向撐滿屏幕，不僅能從視覺感知上盡可能增加無框感（frameless），還能充分利用原本就比較緊缺的屏幕空間。

四、導航模式

watchOS 有以下 3 種導航模式：

1. NavigationSplitView
2. TabView
3. NavigationStack

1. NavigationSplitView

watchOS 中的 NavigationSplitView 是 watchOS 10 新引入的視圖，其概念借鑒了類似于 iPadOS 上的雙列布局（two column layout）。

在 watchOS 中，雙列布局中較上級的欄會轉譯為 source list，較下級的欄則轉譯為 detail view。

當用戶啟動應用程序時，應將他們直接引導至 detail view。這樣可以讓用戶立即看到重要信息，提高應用程序的可用性。

若有多個 detail view，則可根據定位、歷史等指標來決定默認顯示哪個 detail view，以確保用戶在打開應用程序時能立即看到與他們需求相關的內容。例如，在「Weather」中，用戶會直接來到當前所在地的天氣詳情頁。

此外，source list 也非常適合展示具有比較性的數據。例如：

1. 在「Stock」中，source list 可以顯示各支股票的漲跌幅度。
2. 在「Weather」中，source list 可以顯示不同城市的天氣狀況。

2. TabView

watchOS 中的 TabView 也是 watchOS 10 新引入的視圖。

與 iOS、iPadOS、macOS 不同，watchOS 中的 TabView 采用的是垂直分頁，而不是水平分頁。因為，受益于數碼表冠，在 Apple Watch 中，垂直方向的滾動會顯得更為輕松。

watchOS 中的 TabView 具有以下特征：

① 滾動切換視圖

TabView 允許用戶在不同的視圖之間通過滾動 digital crown 切換。

② Tab 自適應

TabView 會自動檢測任何滾動內容，并根據實際需要來擴展以容納內容。這意味著，TabView 可以自適應地顯示不同大小的內容。

因此，我們在設計時，應盡可能限制每個 tab 中的內容體量，并將內容體量較大的 tab 放在最后，以確保用戶能夠輕松地切換 tab。

③ 模糊過渡效果

TabView 自帶在切換不同 tab 時呈現的模糊過渡效果，以實現視圖之間的無縫融合。除模糊過渡效果外，我們甚至還能實現 Keynote 中的神奇移動效果。

3. NavigationStack

watchOS 10 新引入的 NavigationSplitView 和 TabView 的確功能強大，但它們并不一定適合于每個場景。最為傳統的 NavigationStack 仍然是引導用戶進入和退出視圖層次結構的最清晰方式。

NavigationStack 以層級視圖的形式組織內容。當用戶進入一個新的視圖時，這個視圖會被壓入堆棧；當用戶返回上一級視圖時，當前視圖會從堆棧中彈出。這種導航方式非常清晰，可以幫助用戶輕松地在不同層級的視圖之間導航。

在使用 NavigationStack 時，可在第一個視圖上使用大標題，以突出顯示應用的主題。

五、觸覺反饋

伴隨著設備數量的增長，用戶的注意力變得越來越稀缺。秉承 calm tech 的思想，設計師需要選用合適的反饋形式，來幫助用戶將注意力進行合理分配。運用觸覺這一邊緣感知通道，是一個非常好的降噪思路。

得益于 Taptic Engine 的硬件支持，watchOS 的觸覺反饋（Haptics）效果非常理想。例如，在旋轉數碼表冠時，用戶能感受到一種類似于實體旋鈕的觸覺反饋，從而更好地控制滾動操作。

觸覺反饋可以提高用戶體驗的沉浸感，并幫助用戶在沒有視覺提示的情況下理解他們的操作。我們需要對振動模式有著充分的理解，才能為關鍵的交互添加觸動人心的觸覺反饋。

1. 原理

觸覺反饋與聽覺反饋可以進行有機對應，因為從物理學的角度上來看，他們都是由物體振動產生的。所以，在設計觸覺反饋時，我們可以借助聲音設計的經驗來輔助思考。

在音樂作品中，作曲家通過不同的節拍、旋律、音色，來構建出不同的聽感。轉譯到觸覺中，我們也可以通過調節各種參數，來構建承載不同信息內容的觸覺反饋。

2. 預設類型

watchOS 提供了一組預設的 haptic，每種類型都具有特定的含義。我們可以根據應用的需求和場景選擇合適的類型，以傳達給用戶相應的信息和反饋。

watchOS 提供了以下 9 種預設類型：

1. Notification
2. Up
3. Down
4. Success
5. Failure
6. Retry
7. Start
8. Stop
9. Click
10. Play

3. 自定義

除了使用 watchOS 提供的預設類型，我們還可以在 Core Haptics 框架中用以下 2 個參數來構建自定義 haptic：

1. Sharpness
2. Intensity

其中，sharpness 指的是將觸覺體驗抽象為產生相應物理感覺的波形的一種方法。可以使用 sharpness 來傳達柔和、圓潤的體驗，或者傳達清晰、精確的體驗。

通過 Core Haptics 框架，我們可以設計復雜的觸覺模式，包括振動強度、持續時間等。了解 Core Haptics 可以幫助設計師更好地設計觸覺反饋。

六、通知

充分運用 watchOS 中的通知（notifications），可以傳遞及時、高價值的信息，并讓用戶在不打開應用的情況下執行重要操作。

在 watchOS 中，通知分為 2 個階段：

1. Short Look

Short Look 指的是收到通知的那一刻立即彈出的模態頁面，其持續時間很短，是為「輕輕一瞥」的行為設計的。所以，我們要保證 Short Look 中的內容足夠簡短。

同時，在配有全天候顯示屏的機型中，Short Look 會在尚未解鎖的情況下展示。因此，我們應避免在 Short Look 中展示敏感信息。

2. Long Look

可以將 Long Look 理解為 Short Look 的詳情。

我們可以自定義 Long Looks 的顏色、內容、自定義操作（至多 4 個），讓用戶在不啟動應用的情況下完成交互。

此外，在較新版本的 Apple Watch 上，用戶可以使用 Double Tap 來回應通知。當用戶對通知使用 Double Tap 時，系統會選擇第一個非破壞性操作作為回應。

值得一提的是，默認情況下，用戶在 iOS 中為應用設置的通知設置也將默認應用于 watchOS 中的相同應用。這意味著用戶無需為 watchOS 中的應用單獨設置通知，它們會自動遵循 iOS 中的設置。

七、表盤

表盤（Watch Face）是 watchOS 體驗的核心。用戶會選擇他們希望每次抬起手腕時看到的表盤。此外，用戶也可以使用他們喜歡的 complication 來自定義表盤。

Complication（復雜功能）是表盤上顯示的小工具，它們可以顯示實時信息，如天氣、活動、健康數據等，用戶每次抬起手腕時都可以查看，而無需打開應用。

設計 complication 有以下 4 個要點：

① 突出價值

Complication 不應僅用于快速啟動應用程序，它的主要價值在于顯示最新的相關信息。

② 支持不同的 Complication 類型

watchOS 中的 complication 分為不同的類型（family），如 circular、corner 等。我們盡可能支持所有類型，以確保應用的 complication 可以在更多表盤上使用。

③ 設計簡潔明了的外觀

Complication 的空間有限，因此設計時要確保信息簡潔明了。使用易于閱讀的字體和顏色，避免使用復雜的背景或圖案。同時，確保與應用的整體設計風格保持一致。

④ 確保在 Tinted Mode 下清晰可見

在 tinted mode 下，watchOS 會為 complication 的所有內容應用純色，并對全彩圖像進行去飽和處理。因此，我們應避免僅使用顏色來傳達重要信息，并在必要時，為全彩圖像提供替代的著色模式版本。

⑤ 注重隱私

Complication 上的信息可能會被其他人看到。因此，我們需要考慮隱私和安全性，避免在 complication 上顯示敏感信息，如個人健康數據、私人消息等。

八、Smart Stack

很多用戶更傾向于選擇沒有 complication 的或簡約或富有裝飾性的表盤。因為，對于這些用戶來說，Apple Watch 不僅僅是顯示信息的工具，更是個性化表達的載體。

由此，watchOS 10 引入了全新的 Smart Stack。Smart Stack 是一種動態地將應用內容直接顯示在表盤上的模塊。僅需簡單地轉動數碼表冠，就可以在 Smart Stack 中查看各種小組件（widget）了。

對于 Smart Stack 中的小組件，我們需關注以下設計要點。

1. 布局

設計 Widget 時，只展示必要的信息以確保用戶能快速查看。因為，人們在查看手表上的信息時，通常只會花費大約 10 秒鐘的時間。

watchOS 提供了以下 6 種設計布局：

① Text

適用于主要展示文本信息的內容。例如，「News」使用此布局展示標題和故事摘要。

② Text + Bar

適用于需清晰傳達內容屬于某個類別的場景。例如，「Calendar」使用此布局顯示事件，并通過顏色清晰傳達了此事件所屬的日歷。

③ Text + Graphic

適用于文本、圖形并存的內容。圖形可選用條形和環形。例如，「Audiobooks」使用條形讓用戶快速了解他們在書中的位置，「Workout」通過環形展示鍛煉數據。

④ Large Text

適用于內容主要是簡短的數字或單詞的內容。

⑤ Chart

適用于主要表示隨時間變化的數據。

總之，設計 watchOS 中的小組件時，應遵循這些布局原則和建議，以確保用戶能夠快速查看到關鍵信息，同時享受流暢的閱讀體驗。

2. 顏色和圖標

雖然小組件的布局有助于保持一致性和可讀性，但讓小組件具有識別性和獨特性也很重要。這就涉及到顏色和圖標的選擇。

與表盤上根據表盤顏色調整的 complication 不同，Smart Stack 中的小組件無需遵循表盤樣式。這意味著，我們在使小組件更具識別性和與應用風格相符方面有更多的靈活性。

默認情況下，每個小組件都有一個深色背景，上面會展示白色的文本。但我們也可以選擇更具代表性的背景顏色，以幫助識別應用或傳達信息。例如：

1. 「Weather」的小組件通過漸變表示不斷變化的氣候情況。
2. 「Stock」的小組件在股票價格下跌時使用紅色背景，而在股票價格上漲時使用綠色背景。
3. 「Audiobooks」的小組件通過顯示略微失焦的書籍封面來營造氛圍。

除了彩色背景外，選擇能代表應用功能的圖標也有助于突顯小組件的特點及傳遞信息。

3. Sessions

Smart Stack 的一個關鍵功能是系統自動生成小組件。這些特殊的小組件會在適時自動出現在 Smart Stack 頂部。例如，當用戶開始播放音樂時，系統會生成一個控制音頻播放的小組件。

此外，Smart Stack 還會智能地對其中的小組件進行排序，使最相關的小組件顯示在頂部。

若需讓小組件優先顯示在 Smart Stack 中，可以考慮以下關鍵時刻：

① 時間和日期

例如，「Calendar」利用時間和日期特性，當一個事件在接下來的一小時內發生時，其會在 Smart Stack 頂部顯示。

② 位置

例如，「Reminders」使用位置信息確定小組件在何地適時出現。

③ 耳機

例如，「Audiobooks」在耳機連接時響應，以確定何時將其小部件優先顯示在 Smart Stack 頂部。這樣，只需帶上 AirPods 并旋轉數字表冠，即可開始聽書。

④ 鍛煉

例如，「Activity」在用戶鍛煉完成時優先顯示在 Smart Stack 中。這樣，在跑步結束后，用戶旋轉數碼表冠即可查看運動數據。

總之，在設計 watchOS 小組件時，應考慮這些關鍵時刻以便在合適的情況下優先顯示相關小組件。

九、跨設備交互

Apple 的產品擁有著得天獨厚的生態優勢，watchOS 也不例外。watchOS 系統層級的跨設備交互主要是指 Apple Watch 與其他 Apple 設備（如 iPhone、iPad、Mac）之間的協同工作和數據同步。這種交互可以為用戶提供更加流暢的體驗，讓他們能夠在不同設備之間無縫切換。例如：

① Handoff

Handoff 功能允許用戶在 Apple Watch 和 iPhone 之間無縫切換正在進行的任務。例如，用戶可以在 Apple Watch 上開始回復信息，然后在 iPhone 上繼續完成回復。

② Continuity

Continuity 功能確保用戶在 Apple 設備之間保持連接。例如，用戶可以在 Apple Watch 上接聽 iPhone 上的電話，或者用 Apple Watch 解鎖 Mac。

③ 配對與設置

通過與 iPhone 配對，用戶可以輕松地在 Apple Watch 上設置和管理應用。例如，用戶可以在 iPhone 的 Apple Watch 應用中自定義表盤樣式和 complications。

在設計 watchOS 應用時，合理利用 watchOS 系統層級的跨設備交互，能讓用戶在 Apple Watch 和其他 Apple 設備之間無縫切換，從而提供更加一致和高效的使用體驗。

結語

無論你是否會真正地開展面向 watchOS 的設計，了解 watchOS 中的設計原理和理念都將受益良多。希望你能從本文獲得一些啟發，并與我們一起繼續探索用戶的腕上體驗設計。

參考文獻：

1. Human Interface Guidelines
   https://developer.apple.com/design/human-interface-guidelines/
2. Documentation / watchOS apps：https://developer.apple.com/documentation/watchos-apps

歡迎關注作者微信公眾號：「We-Design」