2021-5-8 資深UI設計者
隨著技術的發展，可穿戴設備正在從實驗室走向市場，從獨立使用到多平臺聯動，從注重基于硬件的產品功能到注重基于用戶數據的應用與服務。Apple Watch 搭載的 watchOS 則是可穿戴設備用操作系統中的翹楚。相較于 iOS、Android 及網頁，watchOS 對于大多數設計師來說都是一個相對陌生的領域。在這篇文章中，我們將為大家分享設計 watchOS app 中的要點。
本期提綱：
watchOS 有 3 項設計原則：
碎片化的使用時間、較小的屏幕空間，這些客觀條件要求 watchOS 上的設計要足夠「短平快」。
「短」常體現于精簡的信息量及大尺寸的文本。如在「體能訓練」app 中，對關鍵運動情況的說明不僅言簡意賅，還用了最大的 large title 這一文本樣式。僅需一瞥，心中就有數了。
「平」體現在扁平的信息架構。相對于其他平臺，watchOS 上的 app 一般僅使用以下 2 種相對簡單的信息架構類型：
層級型（Hierarchical Navigation）
分頁型（Pagebased navigation）
在實際運用場景中，這兩個類型還可以混用。如「體能訓練」app 就用了混合的信息架構類型，但仍保證了僅有 2 層深度的扁平要求。
「快」則在于被拆解為小塊的微任務，如 iOS 中的「音樂」，在 watchOS 中被拆解為「音樂」「廣播」「播放中」3 個 app，其對應著瀏覽音樂庫、瀏覽廣播、控制音頻播放這 3 個微任務。這一思路與「桌面應用的移動化」非常相似。
承載 watchOS 的 Apple Watch 有著極高水準的工業設計，而與 UI 最為相關的則是其屏幕及 Bezel。其中，Bezel 指的是 Apple Watch 屏幕四周環繞的黑色邊框，經特殊工藝處理，其邊緣如水滴般飽滿。在強光照射下，更能呈現出其精致質感。這很難讓人不想到 Apple 經典的 Aqua 風格。
為了能將其設計美學在 UI 中得到繼承，我們建議采取以下設計策略：
純黑背景
Apple Watch 采用的是 OLED 材質的屏幕，這種材質的屏幕在展示純黑（#000000）時不會發光，也更省電。若在設計中使用純黑的背景，背景就會與 Bezel 融為一體、UI 元素直接「鑲嵌」于表盤，可謂渾然天成。
平滑圓角
無論是 Bezel 還是屏幕，均有著圓潤的設計語言。因此，在 UI 中使用與物理環境相匹配的圓角樣式，可使軟硬件更加契合。watchOS 中的圓角使用可以比 iOS 中更大膽。如在 iOS 中，按鈕的常規圓角值為 8pt，watchOS 中則增大為 9pt。同時，watchOS 還有大量全圓角的樣式，就連應用圖標都是正圓。
在微信 Apple Watch 版中，聊天頁面的 3 個回復按鈕更是使用了正圓樣式，不僅減少了被屏幕圓角裁切的可能，更為應用賦予了濃郁的 watchOS 平臺特色。
全寬元素
因 Bezel 的存在，當前的 Apple Watch 還不能稱為真正的全面屏。如果可能，將按鈕、列表項等元素橫向撐滿屏幕，不僅能從視覺感知上盡可能增加無框感（frameless），還能充分利用原本就比較緊缺的屏幕空間。
Apple Watch 是非常個人化的設備，我們需要為用戶的隱私做足夠縝密的考量。如 Apple Watch Series 5 及更新機型的屏幕有著常亮顯示（AlwaysOn）功能，當用戶抓著地鐵扶手或伏案工作時，屏幕上常亮顯示的信息就可能被旁人看到。因此，我們要為常量狀態頁面中的個人信息進行脫敏處理。
但同時，作為基本隨時貼身的設備，減少對用戶無謂的打擾也是設計師需要注意的基本要求。關于這方面的設計，大家可參閱本公眾號關于寧靜科技（Calm Technology）的文章。
總的來看，watchOS 的設計原則可簡要總結為：在物理性質上，強調「軟硬件一體」；在交互表達上，規避信息過載、注重信息安全。
watchOS 支持以下手勢：
受限于較小的屏幕，多點觸控是不被支持的。如 iOS 中常用的雙指捏合（Pinch）及雙指旋轉（Rotate）。
在小而圓滑的 Apple Watch 的屏幕上，邊緣滑動是更加便捷的。其中，上、下、左側的邊緣滑動已被系統定義，分別為打開通知中心、打開控制中心、返回。而右側的邊緣滑動則尚未被系統占用，這給了設計師一個自由發揮的空間。
數碼表冠（Digital Crown）
數碼表冠是非常適合在手腕上與智能設備交互的實體。通過旋轉數碼表冠，用戶可以實現頁面、列表的滾動，滾動速率收放自如。
我們還可以將滾動數碼表冠所產生的交互效果進行靈活的設計。如：
側邊按鈕
目前，側邊按鈕相關的交互屬系統級，不可自定義：按下側邊按鈕，可以調出程序塢；雙擊側邊按鈕，可使用快捷交通卡。
Force Touch 是較舊版本的 watchOS 中的特殊手勢，一般情況下可呼出上下文菜單（Context Menu），可以簡單理解為 iOS 中的 3D Touch。但因 Force Touch 這一手勢的可發現性較弱，目前已用長按（Long Press）來代替之。
不過，目前又有了在 watchOS 中用雙擊（Double Tap）來替代長按的趨勢，這是因為雙擊這一手勢會更加輕巧一些。如在信息中，雙擊或長按消息氣泡均可呼出點回選項。
伴隨著設備數量的增長，用戶的注意力變得越來越稀缺。秉承 Calm Tech 的思想，設計師需要選用合適的反饋形式，來幫助用戶將注意力進行有的放矢的合理分配。運用觸覺這一邊緣感知通道，是一個非常好的降噪思路。
得益于 Taptic Engine 的硬件支持，watchOS 的觸覺反饋（Haptics）效果非常理想。雖然目前 watchOS 暫不支持自定義觸覺反饋（在 iOS 中可通過 UIFeedbackGenerator 來自定義(fn)），但 watchOS 于系統層級提供了一組觸覺反饋模版。我們需要對振動模式有著充分的理解，才能為關鍵的交互添加觸動人心的觸覺反饋。
1. 隱喻
觸覺反饋與聽覺反饋可以進行有機對應，因為從物理學的角度上來看，他們都是由物體振動產生的。所以，在設計觸覺反饋時，我們可以借助聲音設計的經驗來輔助思考。
想象這樣一支交響曲，悠揚的長笛聲緩緩地奏響（Ascending），拉開了風和日麗的一天。提琴、單簧管也徐徐加入（Flat），正如柳樹的嫩芽在春風中飄揚。長笛獨奏加快了節拍，曲調變得活潑起來（Steady），原來是草坪里的小兔子探出了腦袋……最后，伴隨著音樂的漸弱，美好的一天結束了（Descending）。
在音樂作品中，作曲家通過不同的節拍、旋律、音色，來構建出不同的聽感。如：
轉譯到觸覺中，我們也可以通過不同參數的調節，來構建承載不同信息內容的觸覺反饋。
2. 參數
Apple 官方給到了如下 2 個設計參數：
我們對官方的參數進行進一步的解構，并參考作曲家的做法，給到了如下 3 個參數來描述觸覺反饋：
其中，質感指的是振動脈沖的銳度。銳度越高，每個振動脈沖就能感知得越清晰。
3. 展望
相信在未來的系統版本中，無法自定義觸覺反饋的限制將被逐步解除。現市面上已經出現了諸如 Lofelt 一類面向觸覺反饋的專業設計用程序，設計師們可以前往小試牛刀。
Apple 的產品擁有著得天獨厚的生態優勢，watchOS 也不例外。類似于 macOS 及 iOS，watchOS 也支持「接力」功能（Handoff）。如：在 watchOS 中使用「郵件」app 回復電子郵件時，可以通過「接力」切換至 iOS 中以使用更大的屏幕進行輸入。
同時，「接力」不僅能在 app 間生效，也能在網站和 app 間生效。如在 macOS 中使用 Safari 瀏覽你的網站的用戶在離開 Mac 設備后，Apple Watch 會提示用戶是否繼續在 watchOS 中使用你的 watchOS app。這給我們的設計帶來了更多的可能。
巧妙運用 watchOS 的「接力」能力，我們能構建跨設備交互的無縫體驗。
市面上的 Apple Watch 有著 4 種不同的屏幕規格：30mm、40mm、42mm 及 44mm。其中，40mm、44mm 是較新設備的屏幕規格，也是設計過程中應重點關注的對象。下面，我們以最大的 44mm 的屏幕規格來進行設計解析。
1. Display Corners
指的是屏幕四角無法展示內容的區域，契合于 Apple Watch 的屏幕物理邊界。設計時，需避免在這些部位放置內容。
2. Clear Space Under Status Bar
指起始狀態下，界面內元素與位于屏幕頂部 status bar 的間距。另外，在 watchOS 中，status bar 是常駐的。
3. Copy Safe Area
文本的安全展示范圍。縱向來看，上距 status bar 5pt 的 clear space，下接 display corners。
4. Fullwidth1 Element Safe Area
指除文本外其他元素的安全展示范圍，橫向撐滿了整個屏幕，縱向避開了 display corners。這里對應了上文推薦大家使用的「全寬元素」策略。
40mm 的頁面布局與 44mm 的類似，只是數值有所不同。對于 38mm、40mm 的頁面布局，因沒有 display corners 的引入，布局方式非常簡單，這里便不展開敘述了。
1. 西文環境
在西文環境中，watchOS 默認使用 SF Compact，也可以選用 SF Compact Rounded（SF Compact 的衍生字體）。值得注意的是，SF Compact 這一字體需視文本的大小來選用具體類別：
在實際開發過程中，配合使用 Dynamic Type 技術，UI 中的文本可以隨用戶的設置動態調節：無論是字重、字號、字間距還是行高，均會有一一對應的調整。
2. 中文環境
在中文環境中，watchOS 默認使用蘋方字體。西文環境中 SF Compact Text 和 SF Compact Display 使用的細致判定，在中文環境中暫無。
3. 字體適配
Apple 官方在不同的屏幕尺寸下使用了不同的字體階梯：
不過，我們推薦在實際設計過程中選用一個字體階梯即可。
為論證僅使用一個字體階梯的合理性，我們需要引入「弧分」的概念。弧分是一種用來描述相對尺寸的單位，而弧分值指的是觀測者眼睛與被觀測物的夾角。由于使用了角度來計數，在定義字體尺寸時就可以忽略物體的距離。但無論用戶使用哪種屏幕大小的 watchOS 設備，其舒適的抬臂姿勢是相對固定的，即用戶眼睛距離 watchOS 設備的距離是相對固定的。因此，只有相同尺寸的大小的字體才能保證相同的弧分。
選用一個字體階梯的另一個好處體現在多屏幕尺寸適配中。若嚴格遵循 Apple 官方的處理方法，設計師需要輸出 4 套視覺標注才能完成設計；若使用一個字體階梯，我們僅需在設計中標注好自適應規則即可。倘若未來出現了更多的屏幕尺寸，我們的方法會顯得更加自如。
4. 推導方法
為了不重復造輪子，我們推薦使用你已有的 iOS app 設計中的字體體系為基礎，來推導出 watchOS app 的字體體系。具體過程如下：
我們按照上述方法，推導出了微信 Apple Watch 版的字體體系：
目前，iOS 及 macOS 共用一套色彩體系。watchOS 及 tvOS 因使用場景、硬件性質及美學理念的差異，其色彩體系需要進行差異化推導。
watchOS 色彩體系分為以下 2 個部分：
1. Global Tint Colors
基本等同于 iOS 中淺色模式（Light Mode）的顏色。在實際設計過程中可以直接遷移。
2. Additional Colors
它是 Global Tint Colors 的延伸，一般用于可交互元素的底版，如「體能訓練」中的按鈕。通過為 Global Tint Colors 添加不透明度即可生成一套相對應的 Additional Colors。不透明度數值的范圍推薦在 14%～17% 之間，并遵循「亮度（Brightness）越高，不透明度越低」的原則。
3. Semantic Colors
語義化顏色指的是根據用途來描述顏色，而不是直接描述色值。雖然在 watchOS 中沒有深淺色模式的區分，但色彩的語義化仍能幫助我們科學而謹慎地用色。
為了方便在設計過程中使用語義化顏色，我們推薦在 Sketch 中使用顏色變量（Color Variable）進行底層色彩體系構建。如下圖所示，是微信 Apple Watch 版中非常常用的三個顏色變量：
watchOS 中的 UI 元素與 iOS 差別不大，設計師在拿到 UI Kit 后應該都能快速上手。這里僅提出 4 個比較特殊的組件進行簡述。
1. Lists and Tables
Lists 和 Tables 都是縱向排列以展示內容的元素。簡單來說，Lists 能承載更多的樣式及交互行為，如：
2. 按鈕
在 watchOS 中，常見的按鈕樣式有：
如何判定該使用哪種樣式呢？這取決于按鈕所在頁面是否需要滾動才能展現所有內容：
以上判定方式的原理是，只有通過標準圓角矩形按鈕，才會在屏幕中呈現出「按鈕的一部分被蓋住」的視覺效果，進而暗示用戶下面還有內容。這一判定實為巧妙，但在實際開發實現的過程中卻很難做判定。因此，我們推薦默認使用標準圓角矩形按鈕。
在 watchOS 中，通知被分為 3 類：
1. Short Look
Short Look 指的是收到通知的那一刻立即彈出的模態頁面，其的持續時間很短，是為「輕輕一瞥」的行為設計的。所以，我們要保證 Short Look 中的內容足夠簡短。
同時，在配有常亮顯示的機型中，Short Look 會在尚未解鎖的情況下展示。因此，我們應避免在 Short Look 中展示敏感信息。
2. Long Look
可以將 Long Look 理解為 Short Look 的詳情。它由以下部分組成：
其中，內容區不僅僅可用于展示信息，我們還可以在內容區放置一些簡單的交互元素，如在座位預訂 watchOS app 推送的內容區中，就可以放置選擇就餐人數的 Sequence Picker。
3. 應用內通知
這部分留給我們的發揮空間較大，恕不展開闡述。
無論你是否會真正地開展面向 watchOS 的設計，了解 watchOS 中的設計方法及其背后的推導過程都是非常有價值的。可以看到，無論是設計原則，還是字體、色彩體系的推導，都始終貫穿著普適的設計思維。我們相信你能從中獲得一些啟發。同時，微信 Apple Watch 版已于近期更新，歡迎大家下載體驗。
文章來源：優設 作者：We-Design
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務