上週出席了蘋果的 WWDR Events（加速器活動），非常感謝公司提供的珍貴學習機會。本次 Apple Watch 體驗的活動主旨，是向開發者提供設計、交互和技術方面的指導和幫助。
Apple Watch 作為一款極具前瞻性的產品，硬件已經發展到 Apple Watch Series 5，系統也已經更新到 watchOS 6。智能手錶是目前除了手機之外， 最方便人眼觀看且較為成熟的商業化硬件。這次加速器活動帶給我的觸動很大，原以為 Apple Watch 只是一款小眾產品，實際上國內早已有眾多公司和設計師深耕於此。若以 UI 設計師的角度出發，我們目前正身處於科技變遷速度極快的時代，硬件和軟件都在圍繞人類、網絡不斷進化和迭代，在這種大環境中，我認為設計師需要以更加場景化、智能化的角度來重新審視「設計」。設計的本質是「解決問題」，問題時刻在改變，這要求設計師時刻保持「新鮮的學習態度」。
通過近距離接觸蘋果一線技術人員，還是獲得了相當多的第一手資訊。因此總結了活動中與設計、交互相關的心得體會，以此文分享給大家。這篇文章分成兩大部分，前半部分將分享 5 個 Watch app 的設計原則和技巧；後半部分則以荔枝的 Watch app 為案例，提出優化方案。
設計原則一：單一功能
大部分 Watch App 都依賴於手機端的 Apple App，可以說是手機端功能的移植或延伸。如果設計師並不充分了解 Apple Watch 的使用場景，則很有可能「過分貪心」，在小小的錶盤中保留過多的功能。基於硬件屏幕小、使用場景通常是在碎片化時間裡「瞥一眼」的特性，交互的設計需要做到非常剋制，做到保留最核心的功能，以適應佩戴設備的使用場景。
以「50音起源」這一款優秀產品為例，在手機上，它有起源、速查、學習、測試、詞卡等多個功能模塊，但是當它以 Watch app 呈現時，則只保留了詞卡一個功能。
設計原則二：專注
限於 Apple Watch 的硬件特性，屏幕的實際可點擊區域非常小。都知道，在 iPhone 上的最小的點觸面積是 44x44 points，換算為物理尺寸大約是 6.86 毫米。以 Apple Watch 自帶的解鎖的界面為例，我們可以看到，數字鍵盤已經幾乎撐滿整個屏幕，但每個實際上這裡每個按鈕的寬度大概只有 6.00 毫米，觸摸區域比起 iPhone 的最低建議還要小。
充分了解屏幕的尺寸限制後，再把日常使用場景考慮到設計中，就能明白：在 Apple Watch 上的交互體驗並不會非常愉悅，用戶很有可能因為「失去耐心」而放棄交互和功能複雜的產品。因此，設計師需要在屏幕上提供足夠顯眼的操作和輕量的交互選項，儘可能避免讓用戶同時進行多種類型的任務。
以菜單層級為例，假如用戶想要使用一個功能，需要進入三層才能找到，可能不到半分鐘，他就會放棄了。比較可取的方法是，避免複雜的導航和過深的層級，讓用戶每次都能順利完成一個主要任務；遵守 HIG 的規範，如果一定要放置按鈕，在水平方向上也不要放置超過3個。
設計原則三：易讀
上文多次提到「使用場景」這個概念，現實生活中，使用 Apple Watch 的場景主要有三種：工作/學習等靜態場景、走路/輕量運動等微動態場景、運動/跑等強動態場景。儘管有靜有動，但三種場景都會伴隨著抬手/翻腕的動作，而在動態場景下，眼睛和大腦對信息的處理速度都會降低，因此信息的可讀性必須非常高。
文本信息作為 Apple Watch 的主要展示對象，我認為設計師需要從字體、字號、字重、色彩對比度等多方面綜合把控，確保用戶能快速獲取到重要的信息。
字體
在之前的 WWDC 中，蘋果介紹了「New San Francisco Fonts」字體家族，其中的「SF Compact」就是專門為 Apple Watch 設計的英文字體。和 SF 的區別在於，Compact 將字母的筆畫變得更加豎直了， 因此在小屏幕的辨識度也更好了。
每個應用建議只使用一種字體，以避免混亂。如考慮到品牌性問題時，對於較大的文字元素，則可以使用自定義字體。但如果還是以展示信息為主 ，則建使用系統字體。另外，蘋果推薦應用使用系統字體，因為可以享受「動態字體」的功能。
字號與字間距
當字號小於 19 號時，推薦使用 SF Compact；大於 20 號時則推薦使用 SF Compact Display。眼球追蹤的速度可見，當字號在 16-19 號時，使用 SF Compact Text 效果較好；大於20時，Display 效果較好。
SF等字體已經設置好默認的字間距，這個字間距是根據小屏幕最佳閱讀性設定的，所以不建議設計師手動調整字體的字間距。
字重
避免使用 Thin 字重，因為經過研究發現，Thin 及更輕的字重，用戶會難以甚至在 Apple Watch 中閱讀，辨識度較差。
顏色對比度
雖然 HIG 中也提到了色彩對比度，但並不像網頁的 WCAG（Web Content Accessibility Guideline，網頁內容無障礙指南）一樣直接列出對比度的數值。在WCAG中，強對比度的推薦數值是 7:1，值得參考。
設計原則四：簡明的
Watch App 需要在小屏幕上幫助用戶解決問題，即使對於同一個工具來說，在手機和手錶上需要完成的使命也不一樣。好的 Watch App 需要做到簡潔明瞭，幫用戶做好決定，而不是提供眾多選項讓用戶去選擇。
手錶作為一款獨立的產品，在功能和特性上都和大家熟悉的手機相差甚遠。在設計時，手錶不應該被設計師看作「迷你版的手機」，功能都應該做到快速、方便地被使用。
以支付寶為例子，你只會看到界面的上半部分展示了賬戶餘額，下方只有付款碼、餘額寶和查匯率三個功能。如果把支付寶入口添加到錶盤，點擊支付寶時就會打開付款碼。
換個角度，要是能讓用戶第一次打開時，可以去自定義選擇自己想要的功能，不也很好嗎？實際上，在使用了一段時間後，我根本不想在這小小的手錶上，操作任何複雜的交互。付款碼是非常適合手錶的功能，我享受到了抬手快速支付的愉悅體驗。迴歸本質，支付寶的核心功能，不正是錢包嗎？
設計原則五：實時的
手錶、時鐘，必須實時，才能讓人感覺可靠。處於信息爆炸時代的我們，都已經對「實時性」衍生出極強的依賴。我們需要足夠快的網速來刷新網頁，需要社交軟件實時將信息實時傳達到自己手上，否則將產生焦慮和不信任感。
關於實時性，Watch app 有兩點需要注意：實時信息要確保實時性、把用戶在意的實時信息展示出來。
第一點，實時信息如果不實時，將會令用戶產生不信勇敢需要實時展示的內容通常是持續化更新的、即將到來的、進行中的事件。舉個例子，天氣應用需要根據用戶實際的地點，展示當地、當下氣候信息。
第二點，設計師需要做到心中有數，結合場景將用戶最關心的重要實時信息傳遞給用戶。許多 Watch app 都會向用戶展示時間、地點等實時性很強的數據信息，提醒、消息也需要實時傳達給用戶。舉個例子，Keep 在游泳時，會實時展示游泳距離、運動時長和圈數，這些都是動態變化的、用戶想要實時獲取的信息。
小結
以上就是本次分享的活動主要內容。小結和快速回顧一下在進行 Watch app 設計時需要注意的 5 個設計原則：
1. 只保留最核心的單一功能
2. 讓用戶保持專注，避免使用複雜的交互
3. 保證文本信息的易讀性，通過多方面綜合把控
4. 簡明扼要，幫用戶解決問題
5. 保證實時性，將重要的實時信息傳達給用戶
以荔枝音頻節目為案例的優化
在展示優化方案之前，先和大家快速地簡單瞭解 Apple Watch 的核心功能和交互方式。
快速瞭解：手勢
Apple Watch 中，屏幕上有兩種交互手勢：掃和點。其中「掃」可以是縱向或橫向的，縱向的掃可以滾動當前界面，橫向的掃可以切換基於頁面導航的界面。「點」也分成了輕點和重點（Force Touch）。「掃」和「點」也可以組合成「拖動」。需要注意的是，Apple Watch 是不支持多指手勢的，例如雙指的捏合。
快速瞭解：導航
目前提供了兩種導航形式，一種是「page-based（基於頁面的導航）」，用戶可以左右輕掃來切換頁面，不同的頁面上可以放關聯度較低的內容；另一種是「Hierarchical（分層導航）」，是縱向的列表項，用戶可以通過上下輕掃找到自己需要的功能。HIG 指出，兩種導航形式不能同時使用。
優化一：交互優化 - 導航調整
可以見到，目前打開荔枝的 Watch App，映入眼簾的是三個功能，較為直觀和簡潔。雖然在手機端打開荔枝，Watch App 會自動打開播放器頁面，但是「正在播放」是在第二層級當中的。結合上文提到的專注原則，我認為播放是音頻產品最核心的功能，應該將核心功能放在最佳位置。
因此我把導航從「類分層導航」調整為標準的「基於頁面的導航」。結合目前業務重心，將「訂閱更新」替換成「我的喜歡」。於是新的導航形式是：正在播放、訂閱更新、最近收聽三個頁面，以分頁的形式，放置在了同一級層級。
優化二：UI優化 - 播放器頁面
目前播放器頁面的封面圖，直接平鋪在了錶盤最底層，不僅影響信息閱讀，其美觀度也有很大的可優化空間。另外，重要的標題信息，不僅展示力度較弱，信息密度上來說，也只展示了一行。
總結來說，播放頁的優化原則是增加操作的便利性，提升信息的識別度。因此，我首先將標題設計成兩行，並作為此頁面的重點展示。音樂控制器也進行了優化，除了對圖標進行視覺優化之外，還增加了進度條的展示；重要性較低的封面，則只在底部模糊處理，作為裝飾使用，減少視覺干擾。
優化三：UI優化 - 列表
可以看到，目前的設計中，歷史收聽是以列表形式展現的，包含了封面和標題兩個信息。。我將列表從第二層級調整為第一層級後，也去掉了封面。這樣的處理，主要是考慮到在如此小的屏幕上，圖像識別度很低，用戶只能通過文字去識別內容。去掉封面後，不僅更為簡潔，也更加高效。
寫在最後
非常榮幸可以籍此機會，和大家分享本次 Apple Watch 加速器活動的心得與感悟；另也以荔枝音頻節目為案例，提出了少許拙見。希望大家能為我們多提思路和寶貴意見，感謝各位的閱讀。
最後還要感謝公司提供瞭如此珍貴的學習機會，感謝此次活動中給予我許多幫助的momo，感謝幫助我促成此文的傑哥。
閱讀更多 北京設計小白 的文章
