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