上周出席了蘋果的 WWDR Events（加速器活動），非常感謝公司提供的珍貴學(xué)習(xí)機(jī)會。本次 Apple Watch 體驗(yàn)的活動主旨，是向開發(fā)者提供設(shè)計(jì)、交互和技術(shù)方面的指導(dǎo)和幫助。

Apple Watch 作為一款極具前瞻性的產(chǎn)品，硬件已經(jīng)發(fā)展到 Apple Watch Series 5，系統(tǒng)也已經(jīng)更新到 watch OS 6。智能手表是目前除了手機(jī)之外， 最方便人眼觀看且較為成熟的商業(yè)化硬件。這次加速器活動帶給我的觸動很大，原以為 Apple Watch 只是一款小眾產(chǎn)品，實(shí)際上國內(nèi)早已有眾多公司和設(shè)計(jì)師深耕于此。若以 UI 設(shè)計(jì)師的角度出發(fā)，我們目前正身處于科技變遷速度極快的時代，硬件和軟件都在圍繞人類、網(wǎng)絡(luò)不斷進(jìn)化和迭代，在這種大環(huán)境中，我認(rèn)為設(shè)計(jì)師需要以更加場景化、智能化的角度來重新審視「設(shè)計(jì)」。設(shè)計(jì)的本質(zhì)是「解決問題」，問題時刻在改變，這就要求設(shè)計(jì)師時刻保持「新鮮的學(xué)習(xí)態(tài)度」。

通過近距離接觸蘋果一線技術(shù)人員，還是獲得了相當(dāng)多的第一手資訊。因此總結(jié)了活動中與設(shè)計(jì)、交互相關(guān)的心得體會，以此文分享給大家。這篇文章分成兩大部分，前半部分將分享 5 個 Watch app 的設(shè)計(jì)原則和技巧；后半部分則以荔枝的 Watch app 為案例，提出優(yōu)化方案。

5 個 Watch app 的設(shè)計(jì)原則

1. 設(shè)計(jì)原則一：單一功能

大部分 Watch App 都依賴于手機(jī)端的 Apple App，可以說是手機(jī)端功能的移植或延伸。如果設(shè)計(jì)師并不充分了解 Apple Watch 的使用場景，則很有可能「過分貪心」，在小小的表盤中保留過多的功能?；谟布聊恍　⑹褂脠鼍巴ǔＪ窃谒槠瘯r間里「瞥一眼」的特性，交互的設(shè)計(jì)需要做到非常克制，做到保留最核心的功能，以適應(yīng)佩戴設(shè)備的使用場景。

以「50音起源」這一款優(yōu)秀產(chǎn)品為例，在手機(jī)上，它有起源、速查、學(xué)習(xí)、測試、詞卡等多個功能模塊，但是當(dāng)它以 Watch app 呈現(xiàn)時，則只保留了詞卡一個功能。

2. 設(shè)計(jì)原則二：專注

限于 Apple Watch 的硬件特性，屏幕的實(shí)際可點(diǎn)擊區(qū)域非常小。都知道，在 iPhone 上的最小的點(diǎn)觸面積是 44 x 44 points，換算為物理尺寸大約是 6.86 毫米。以 Apple Watch 自帶的解鎖的界面為例，我們可以看到，數(shù)字鍵盤已經(jīng)幾乎撐滿整個屏幕，但每個實(shí)際上這里每個按鈕的寬度大概只有 6.00 毫米，觸摸區(qū)域比起 iPhone 的最低建議還要小。

充分了解屏幕的尺寸限制后，再把日常使用場景考慮到設(shè)計(jì)中，就能明白：在 Apple Watch 上的交互體驗(yàn)并不會非常愉悅，用戶很有可能因?yàn)椤甘ツ托摹苟艞壗换ズ凸δ軓?fù)雜的產(chǎn)品。因此，設(shè)計(jì)師需要在屏幕上提供足夠顯眼的操作和輕量的交互選項(xiàng)，盡可能避免讓用戶同時進(jìn)行多種類型的任務(wù)。

以菜單層級為例，假如用戶想要使用一個功能，需要進(jìn)入三層才能找到，可能不到半分鐘，他就會放棄了。比較可取的方法是，避免復(fù)雜的導(dǎo)航和過深的層級，讓用戶每次都能順利完成一個主要任務(wù)；遵守 HIG 的規(guī)范，如果一定要放置按鈕，在水平方向上也不要放置超過 3 個。

3. 設(shè)計(jì)原則三：易讀

上文多次提到「使用場景」這個概念，現(xiàn)實(shí)生活中，使用 Apple Watch 的場景主要有三種：工作/學(xué)習(xí)等靜態(tài)場景、走路/輕量運(yùn)動等微動態(tài)場景、運(yùn)動/跑等強(qiáng)動態(tài)場景。盡管有靜有動，但三種場景都會伴隨著抬手/翻腕的動作，而在動態(tài)場景下，眼睛和大腦對信息的處理速度都會降低，因此信息的可讀性必須非常高。

文本信息作為 Apple Watch 的主要展示對象，我認(rèn)為設(shè)計(jì)師需要從字體、字號、字重、色彩對比度等多方面綜合把控，確保用戶能快速獲取到重要的信息。

字體

在之前的 WWDC 中，蘋果介紹了「New San Francisco Fonts」字體家族，其中的「SF Compact」就是專門為 Apple Watch 設(shè)計(jì)的英文字體。和 SF 的區(qū)別在于，Compact 將字母的筆畫變得更加豎直了， 因此在小屏幕的辨識度也更好了。

每個應(yīng)用建議只使用一種字體，以避免混亂。如考慮到品牌性問題時，對于較大的文字元素，則可以使用自定義字體。但如果還是以展示信息為主 ，則建使用系統(tǒng)字體。另外，蘋果推薦應(yīng)用使用系統(tǒng)字體，因?yàn)榭梢韵硎堋竸討B(tài)字體」的功能。

字號與字間距

當(dāng)字號小于 19 號時，推薦使用 SF Compact；大于 20 號時則推薦使用 SF Compact Display。眼球追蹤的速度可見，當(dāng)字號在 16-19 號時，使用 SF Compact Text 效果較好；大于20時，Display 效果較好。

SF 等字體已經(jīng)設(shè)置好默認(rèn)的字間距，這個字間距是根據(jù)小屏幕最佳閱讀性設(shè)定的，所以不建議設(shè)計(jì)師手動調(diào)整字體的字間距。

字重

避免使用 Thin 字重，因?yàn)榻?jīng)過研究發(fā)現(xiàn)，Thin 及更輕的字重，用戶會難以甚至在 Apple Watch 中閱讀，辨識度較差。

顏色對比度

雖然 HIG 中也提到了色彩對比度，但并不像網(wǎng)頁的 WCAG（Web Content Accessibility Guideline，網(wǎng)頁內(nèi)容無障礙指南）一樣直接列出對比度的數(shù)值。在 WCAG 中，強(qiáng)對比度的推薦數(shù)值是 7:1，值得參考。

4. 設(shè)計(jì)原則四：簡明的

Watch App 需要在小屏幕上幫助用戶解決問題，即使對于同一個工具來說，在手機(jī)和手表上需要完成的使命也不一樣。好的 Watch App 需要做到簡潔明了，幫用戶做好決定，而不是提供眾多選項(xiàng)讓用戶去選擇。

手表作為一款獨(dú)立的產(chǎn)品，在功能和特性上都和大家熟悉的手機(jī)相差甚遠(yuǎn)。在設(shè)計(jì)時，手表不應(yīng)該被設(shè)計(jì)師看作「迷你版的手機(jī)」，功能都應(yīng)該做到快速、方便地被使用。

以支付寶為例子，你只會看到界面的上半部分展示了賬戶余額，下方只有付款碼、余額寶和查匯率三個功能。如果把支付寶入口添加到表盤，點(diǎn)擊支付寶時就會打開付款碼。

換個角度，要是能讓用戶第一次打開時，可以去自定義選擇自己想要的功能，不也很好嗎？實(shí)際上，在使用了一段時間后，我根本不想在這小小的手表上，操作任何復(fù)雜的交互。付款碼是非常適合手表的功能，我享受到了抬手快速支付的愉悅體驗(yàn)?；貧w本質(zhì)，支付寶的核心功能，不正是錢包嗎？

5. 設(shè)計(jì)原則五：實(shí)時的

手表、時鐘，必須實(shí)時，才能讓人感覺可靠。處于信息爆炸時代的我們，都已經(jīng)對「實(shí)時性」衍生出極強(qiáng)的依賴。我們需要足夠快的網(wǎng)速來刷新網(wǎng)頁，需要社交軟件實(shí)時將信息實(shí)時傳達(dá)到自己手上，否則將產(chǎn)生焦慮和不信任感。

關(guān)于實(shí)時性，Watch app 有兩點(diǎn)需要注意：實(shí)時信息要確保實(shí)時性、把用戶在意的實(shí)時信息展示出來。

第一點(diǎn)，實(shí)時信息如果不實(shí)時，將會令用戶產(chǎn)生不信任感，需要實(shí)時展示的內(nèi)容通常是持續(xù)化更新的、即將到來的、進(jìn)行中的事件。舉個例子，天氣應(yīng)用需要根據(jù)用戶實(shí)際的地點(diǎn)，展示當(dāng)?shù)?、?dāng)下氣候信息。

第二點(diǎn)，設(shè)計(jì)師需要做到心中有數(shù)，結(jié)合場景將用戶最關(guān)心的重要實(shí)時信息傳遞給用戶。許多 Watch app 都會向用戶展示時間、地點(diǎn)等實(shí)時性很強(qiáng)的數(shù)據(jù)信息，提醒、消息也需要實(shí)時傳達(dá)給用戶。舉個例子，Keep 在游泳時，會實(shí)時展示游泳距離、運(yùn)動時長和圈數(shù)，這些都是動態(tài)變化的、用戶想要實(shí)時獲取的信息。

6. 小結(jié)

以上就是本次分享的活動主要內(nèi)容。小結(jié)和快速回顧一下在進(jìn)行 Watch app 設(shè)計(jì)時需要注意的 5 個設(shè)計(jì)原則：

• 只保留最核心的單一功能
• 讓用戶保持專注，避免使用復(fù)雜的交互
• 保證文本信息的易讀性，通過多方面綜合把控
• 簡明扼要，幫用戶解決問題
• 保證實(shí)時性，將重要的實(shí)時信息傳達(dá)給用戶

以荔枝音頻節(jié)目為案例的優(yōu)化

在展示優(yōu)化方案之前，先和大家快速地簡單了解 Apple Watch 的核心功能和交互方式。

1. 快速了解：手勢

Apple Watch 中，屏幕上有兩種交互手勢：掃和點(diǎn)。其中「掃」可以是縱向或橫向的，縱向的掃可以滾動當(dāng)前界面，橫向的掃可以切換基于頁面導(dǎo)航的界面?！更c(diǎn)」也分成了輕點(diǎn)和重點(diǎn)（Force Touch）。「掃」和「點(diǎn)」也可以組合成「拖動」。需要注意的是，Apple Watch 是不支持多指手勢的，例如雙指的捏合。

2. 快速了解：導(dǎo)航

目前提供了兩種導(dǎo)航形式，一種是「page-based（基于頁面的導(dǎo)航）」，用戶可以左右輕掃來切換頁面，不同的頁面上可以放關(guān)聯(lián)度較低的內(nèi)容；另一種是「Hierarchical（分層導(dǎo)航）」，是縱向的列表項(xiàng)，用戶可以通過上下輕掃找到自己需要的功能。HIG 指出，兩種導(dǎo)航形式不能同時使用。

優(yōu)化一：交互優(yōu)化 – 導(dǎo)航調(diào)整

可以見到，目前打開荔枝的 Watch App，映入眼簾的是三個功能，較為直觀和簡潔。雖然在手機(jī)端打開荔枝，Watch App 會自動打開播放器頁面，但是「正在播放」是在第二層級當(dāng)中的。結(jié)合上文提到的專注原則，我認(rèn)為播放是音頻產(chǎn)品最核心的功能，應(yīng)該將核心功能放在最佳位置。

因此我把導(dǎo)航從「類分層導(dǎo)航」調(diào)整為標(biāo)準(zhǔn)的「基于頁面的導(dǎo)航」。結(jié)合目前業(yè)務(wù)重心，將「訂閱更新」替換成「我的喜歡」。于是新的導(dǎo)航形式是：正在播放、訂閱更新、最近收聽三個頁面，以分頁的形式，放置在了同一級層級。

優(yōu)化二：UI 優(yōu)化 – 播放器頁面

目前播放器頁面的封面圖，直接平鋪在了表盤最底層，不僅影響信息閱讀，其美觀度也有很大的可優(yōu)化空間。另外，重要的標(biāo)題信息，不僅展示力度較弱，信息密度上來說，也只展示了一行。

總結(jié)來說，播放頁的優(yōu)化原則是增加操作的便利性，提升信息的識別度。因此，我首先將標(biāo)題設(shè)計(jì)成兩行，并作為此頁面的重點(diǎn)展示。音樂控制器也進(jìn)行了優(yōu)化，除了對圖標(biāo)進(jìn)行視覺優(yōu)化之外，還增加了進(jìn)度條的展示；重要性較低的封面，則只在底部模糊處理，作為裝飾使用，減少視覺干擾。

優(yōu)化三：UI 優(yōu)化 – 列表

可以看到，目前的設(shè)計(jì)中，歷史收聽是以列表形式展現(xiàn)的，包含了封面和標(biāo)題兩個信息。我將列表從第二層級調(diào)整為第一層級后，也去掉了封面。這樣的處理，主要是考慮到在如此小的屏幕上，圖像識別度很低，用戶只能通過文字去識別內(nèi)容。去掉封面后，不僅更為簡潔，也更加高效。

總結(jié)

非常榮幸可以借此機(jī)會，和大家分享本次 Apple Watch 加速器活動的心得與感悟；另也以荔枝音頻節(jié)目為案例，提出了少許拙見。希望大家能為我們多提思路和寶貴意見，感謝各位的閱讀。

最后還要感謝公司提供了如此珍貴的學(xué)習(xí)機(jī)會，感謝此次活動中給予我許多幫助的 momo，感謝幫助我促成此文的杰哥。

歡迎關(guān)注作者的微信公眾號：「Lizhi Design Lab」