【交互設計】Apple Watch界面設計規範之UI設計基礎

一、為Apple Watch而設計

Apple Watch體現著如下幾個方面的主題思想：

個人。Apple Watch是面向穿戴而設計的，所以其UI需要與佩戴者自身相協調。抬起手腕的動作可以使Apple Watch顯示當前時間及通知信息。通過Digital Touch來「傳心跳」或「傳畫」 – 這些全新的溝通方式是極具個人色彩的。加速感應器和心率感測器可以日復一日的向佩戴者提供其運動行為方面的個人數據。蘋果推出的其他任何設備都不曾與用戶建立起如此緊密的關聯。在你為Apple Watch設計應用的時候，時刻留意這種個人化的關聯是非常重要的。

整體。Apple Watch旨在使硬體與軟體的邊界更加模糊。數碼錶冠是經過精心打造的實體控制項，幫助用戶在軟體當中進行精巧的導航操作。Taptic Engine可以與提示信息或界面操作結合起來，為用戶提供微妙的觸覺反饋。Force Touch – 一種可以由硬體感知按壓力度的觸摸方式 – 為軟體的情境化控制方式帶來了一個全新的維度。即便是Retina顯示屏的物理邊緣也被考慮了進來 – 隱性的邊緣渲染方式允許你打造出「邊到邊」的全屏UI設計。上乘的應用設計方案需要貫徹這種軟、硬體一體的體驗原則。

輕量。Apple Watch應用在設計上要注重快速、輕量的交互流程，並充分利用屏幕顯示空間及其位於手腕位置的這一重要特性。出於隱私和可用性方面的考慮，界面當中信息的獲取和移除方式都應該是非常快捷的。舉個例子，Apple Watch上的Short Look信息提示方式的設計原則，就是首先以最小化的方式提供少量提示信息，如果用戶持續關注，再為其展示更全面的信息。Glance則是通過一種易訪問的、可通過輕掃手勢操作的界面形式將應用內部的信息呈現出來。為Apple Watch設計應用時，要遵從於佩戴者使用該設備時的體驗情境，例如短暫而高頻次的交互會話，以及狹小的屏幕顯示空間等等。

Watch應用是對iOS應用的補充，而非替代品。如果說我們能以「分鐘」來度量iOS應用的人機會話時間，那麼對於Watch應用來說則需以「秒」計。交互流程必須簡短快捷，界面必須簡單易懂。

二、應用解析

Apple Watch必須配合用戶的iPhone才可以運行你的應用。

Watch應用支持兩種導航方式：

層級式。這種方式與iOS的導航風格相吻合，最適用於擁有層級化信息結構的應用。在層級式導航的應用當中，用戶在每屏當中只能做出一個選擇，直到他們到達目標位置。要繼續導航到其他地方，用戶需要折返一部份或是全部的層級來做出不同的選擇。對於交互流程較為複雜的應用來說，層級式導航比扁平化的、基於頁面的導航機制更加適用。

頁面式。基於頁面的界面形式允許用戶通過橫向輕掃的手勢在不同的內容頁之間進行導航。這種模式最適用於那些數據模型簡單、且不同頁面之間不存在直接數據關聯的應用。界面底部的圓點指示符可以讓用戶了解目前所處的位置。要儘可能將頁面總數控制在很小的範圍內，使導航保持簡便快捷。

你不能將以上兩種導航方式組合起來使用。在設計階段，必須從兩者當中選擇一種最適於你的應用內容的方式，並以此為基礎進行設計。

無論使用哪種導航方式，你的應用都可以模態化的呈現內容。模態化界面可以使用戶不受干擾的完成任務或獲取信息，但是相應的，他們將暫時無法與應用當中的其他部分進行互動。

基於行為的事件。輕點(單擊)是用戶與應用進行互動的主要方式。列錶行、按鈕、切換等控制項都是通過輕點來進行操作的。這些事件接下來會被傳遞到WatchKit擴展的代碼當中。

手勢。你不能在應用中添加任何定製化的手勢。系統已經代你制定了標準的手勢行為：

Apple Watch不支持多指手勢，例如捏合等。

1.通過縱向輕掃使當前界面滾動。

2.通過橫向輕掃在基於頁面導航的界面之間前後查看。

3.從屏幕左邊緣向右輕掃，可以返回父級界面。

3.輕點選項控制項或其他交互元素。輕點事件會由系統處理並傳遞到WatchKit擴展的相關行為方法當中。

按壓(Force Touch)。如此小屏只能容納為數不多的界面控制項，因此蘋果帶來了一種全新的交互方式：按壓。正如可以感知到普通的輕點，Watch的Retina屏幕同樣可以靈敏的感知到按壓。按壓用來喚出與當前界面相關的情境化菜單(如果有)。你可以在應用中使用這種菜單來展示與當前內容相關的各種操作選項。更多相關信息請參考菜單。

數碼錶冠(The Digital Crown)。可以精準滾動的實體控制項，使瀏覽長頁面等任務變得更加輕鬆，而且屏幕不會被手指遮擋。

Glance是Apple Watch當中的一種快捷視圖功能，它能將應用當中的重要信息提取出來，並以簡明的形式呈現。理想情況下，Glance具有適時性和情境關聯性。成組的Glance(s)匯總了用戶最為關注的應用當中的重要信息。Glance採用的是拉取機制，而非推送。所以，與推送提示有所不同，是否通過Glance訪問信息是由佩戴者自己決定的。

Glance具有以下幾方面的特性：

基於模板。Glance界面的上下兩部分有各自獨立的模板。你可以在Xcode當中挑選合適的模板，並按照相應的規格設計你的內容。

不可滾動。所有信息都要集中呈現在一屏當中。

只讀。輕點Glance界面當中的任何地方都會打開相應的應用。

非強制。不是所有的應用都需要Glance視圖，用戶可以自主選擇在Glance(s)中顯示哪些應用的信息。

Glance界面的底部區域是預留給點狀頁碼指示符的。

根據用戶當前所處情境來配置Glance的信息。滯後的或是不相關的信息會使Glance失去價值。通過時間和地點信息來傳達相關性。

Glance可以與其對應的應用建立深度關聯。利用Handoff功能，Glance可以在用戶輕點的時候，向與其對應的應用傳遞當前視圖中顯示的信息；應用啟動之後，便可以根據這些信息來呈現不同的界面或是在已有界面當中進行相應的配置調整。

Glance必須向用戶提供有用的信息。不要只是為了給你的應用增加一個啟動入口而提供Glance視圖。

四、通知(Notifications)

作為快速、輕量的互動功能，Apple Watch上的通知由兩部分組成：Short Look與Long Look。當有本地或遠程通知需要呈現給用戶時，Short Look會首先出現。Short Look當中包含著最少量的必要信息 – 這也是出於隱私方面的考慮。如果佩戴者放低手腕，Short Look便會消失。如果佩戴者保持手腕姿勢，或是在Short Look的界面上輕點，那麼Long Look視圖便會呈現。它會提供更加詳細的信息及更多的功能，而且只能由佩戴者主動關閉。

要注意向用戶發送通知的頻率。用戶有可能將頻繁發送的通知視為干擾，並在Apple Watch上禁止你的應用發送通知。一定要確保通知信息與用戶期望具有相關性。

Short Look可以讓用戶了解到哪個應用接收到了通知消息，並且只會向用戶呈現簡要信息。Short Look的界面是基於固定模板的，其中包含應用的名稱和圖標，以及通知的標題。系統會將應用名稱渲染成該應用自身的關鍵色。

保持通知標題的簡短、易聚焦。可供展示通知標題的空間很小，所以要盡量保持言簡意賅。標題無需展現通知信息當中的詳情，只進行大致的示意即可。

可定製的Long Look通知

Long Look會顯示通知信息當中的更多詳情。系統為Long Look提供了一套默認外觀，但是你的應用可以對其進行定製，例如展示定製化的圖形元素或品牌信息。所有應用的Long Look在結構上都是一致的。系統提供了一套標準的頭部框，其中包括應用圖標及名稱。底部則是關閉按鈕及若干應用自身定製的按鈕。頭部和底部之間就是你的定製化內容所顯示的區域。

應用內容可以被頭部框所覆蓋，也可以與其下邊緣相接。對於照片和其他圖形類的內容，你可以讓它們默認被頭部框覆蓋。而對於以文字內容為主的通知信息，則要在Xcode當中選中「Offset Notification Content」，使內容從頭部框下邊緣以下開始顯示。

對於定製化的Long Look界面，應用必須提供一套靜態界面，在某些時候也可能需要提供動態界面。相比於靜態界面，動態界面具有更靈活的可配置性，但兩者本質上都是使用你的圖形與品牌元素來展示相同內容的通知信息。如果動態界面對你來說不可行，那麼靜態方式可以作為替代。

Long Look通知當中最多可以顯示4個自定義按鈕。Apple Watch可以利用iOS應用當中的互動式通知功能在Long Look中顯示相關的操作按鈕。這些按鈕會根據通知信息的類型而自動顯示出來。

關閉按鈕會始終呈現在Long Look通知的底部。該按鈕位於4個自定義按鈕下方。

五、模態表單(Modal Sheets)

模態表單有利也有弊。模態表單可以臨時性的阻斷用戶與應用其他部分的互動，使他們不受干擾的完成任務、獲取信息，或是在由按壓手勢喚出的情境菜單中完成選項流程。

要使應用中的模態體驗保持在最少的程度。通常，只在這些情況下考慮使用模態表單：

1.獲取用戶的注意力在當前環節是至關重要的。

2.某個獨立的任務必須被完成，或是被顯性的放棄，否則用戶數據將處於模稜兩可的狀態。

模態界面通常由單一界面構成，或者也可以由一系列基於頁面式導航的界面構成。呈現方式上唯一的區別就在於底部是否有頁碼指示符。

模態界面的左上角用來放置關閉按鈕。當用戶點擊該按鈕時(或從屏幕左邊緣向右輕掃)，系統會將模態界面關閉掉，不再有相關的後續操作。關閉按鈕的呈現是強制性的，不過你可以定製其標題。你也不需要在內容當中另外添加關閉按鈕了。關閉按鈕的典型標題有「關閉」和「取消」，字色始終保持白色。

如果任務當中需要「接受」操作，你還需要在模態界面當中添加接受按鈕。請使用標準的接受按鈕。點擊該按鈕後，模態界面同樣會被關閉，然後後續行為得到執行。

保持模態任務的簡練。不要在初始的模態界面中再次顯示一個新的模態界面。

六、布局

並排放置的按鈕數量要控制好。當並排放置按鈕時，使用圖標來代替標題文案。一行不要放置3個以上，否則按鈕的尺寸將會太小，很難被點到。

完整利用左右兩個邊緣之間的全部空間。Apple Watch的邊緣斜面會在界面內容周圍製造出可視的邊距，所以你不需要再在內容與界面邊緣之間添加留白了。不過要注意，硬體設備上的邊緣斜面是無法在iOS模擬器當中呈現的。

使用相對位置來布局界面元素。同一套界面可能會在不同規格的Apple Watch上顯示，所以使用相對位置來布局元素能令其根據需要而伸縮，使屏幕空間得到更合理的利用。

布局時優先使用左對齊。界面中的元素應該按照自上而下、自左向右的順序排布。將元素以界面左邊緣進行左對齊可以確保有足夠的擴展空間來完整的展示內容。

文字按鈕要使用全屏寬度。要將顯示標題文字的按鈕設計為全屏寬度，以確保標題文字能完整呈現。

通過情境菜單來呈現次級操作。不要將全部的功能按鈕都放在界面當中默認展示出來，那些低頻操作可以收到情境菜單當中。

應用界面所呈現的內容在不同規格的Apple Watch當中應該保持一致。在設計布局時，要使界面元素可以自如的伸縮，以便充分利用不同規格的屏幕空間。

如果需要，可以為不同規格的屏幕提供不同的圖形資源。如果一套圖形素材在兩種規格的屏幕中效果都不錯，那麼就使用這一套；否則可以提供兩種不同尺寸的圖形資源。

色彩

通過對色彩的運用，你可以在應用當中構建視覺一致性及品牌認知。

使用黑色作為應用的背景色。黑色的背景色可以與Watch的邊緣斜邊無縫的融合起來，給人一種無邊框的錯覺。避免在界面中使用明亮的顏色作為背景色。

使用應用當中的關鍵色來呈現品牌或狀態信息。每個應用都要定義一種關鍵色。系統會將界面左上角以及通知界面中的標題渲染為你所設置的關鍵色，以突出應用名稱和其他一些關鍵信息。關鍵色也應該成為你應用當中的品牌認知要素之一。

為文字內容使用高對比度的顏色。高對比度的顏色可以使文字更加易讀。

避免通過色彩來暗示交互性。可以適當的使用關鍵色作為品牌識別元素，但是不要單純依靠色彩來暗示按鈕或其他控制項的交互性。

考慮到色盲用戶。多數色盲患者難以區分紅色與綠色。要測試你的應用，確保沒有任何一個環節是單純依靠紅綠兩種顏色來區分狀態或數值的(一些圖片編輯類軟體會自帶相關工具，幫你驗證界面配色是否對色盲友好)。

色彩是具有溝通性的，但效果未必如你所願。每個人對色彩的感知都有所差異；不同的文化當中，色彩的含義也可能大相徑庭。花些時間去研究一下你所使用的顏色對於國外的或是不同文化當中的用戶來說會產生怎樣的認知。要儘可能的確保應用當中的色彩能傳達出恰當的信息。

文字

最首要的，文字必須清晰易讀。如果用戶根本無法閱讀應用中的文字，那麼再精美的排版都沒有意義。

系統默認字體是特別針對在Apple Watch上實現良好易讀性而設計的。在較大的字型大小下，字元會輕微收縮，使橫向空間的佔用量更少。而字型大小較小時，字元的分布則會變得更加鬆散，而且諸如「a」和「e」這些字母的字腔會變大，使其在用戶難以專註聚焦的情況下仍能保持較高的可讀性。此外，字型大小較小時，標點符號也會適度增大。隨著字型大小的改變，Apple Watch會動態的切換字體顯示方式，從而始終保持文字內容的清晰易讀。

你的應用應該始終採用動態字體(Dynamic Type)。使用動態字體有以下幾點好處：

1.針對不同的字型大小自動調整字元間距(letter spacing)和行高(line height)。

2.可以根據文字區塊的語義來指定不同的文字風格，例如Body、Footnote或Headline等。

3.文字可以根據用戶在字型大小設置當中所做的調整而進行響應。

注意

如果在應用當中使用自定義字體，你仍然可以使文字根據系統當中的字型大小設置進行縮放。這種情況下，你的應用本身將負責使文字根據用戶在系統中的設置而進行相應的調整。

如果你使用系統內置字體，那麼你的應用本身已經包含對動態字體的支持了。如果使用自定義字體，那麼你需要做些額外的工作來支持這項功能。要了解怎樣使用文字風格並確保你的應用在用戶調整系統字型大小時進行相應，可以參考Text Programming Guide for iOS當中的Text Styles。

儘可能使用系統內置字體。系統內置字體可以自動支持動態字體功能，並且是專門針對Apple Watch的特性進行設計的。

儘可能在應用全局使用同一種字體。你可以出於展示品牌的目的而使用額外的字體，但一定要保持最少的使用量。多種字體混雜在一起將使你的應用看上去非常碎片化，給人一種不嚴謹的印象。你可以使用UIFont文字風格API根據不同區塊的語義對字體風格進行定義。

當你手動為系統字體指定字型大小時，點(point)的大小將決定著使用哪種字型大小。你可以為19點或更小的文字選擇San Francisco Text字體，為20點或更大的文字選擇San Francisco Display字體。

漂亮而精妙的動效遍佈於Apple Watch當中，將更具吸引力和動感的體驗帶給用戶。恰當的動效能夠：

1.傳達狀態信息，提供反饋

2.以可視化的方式讓用戶看到操作結果

使用靜態圖片序列來創建預生成動效。預先錄製動效並儲存在Watch應用包當中，使其在被調用時可以更迅速的呈現給用戶。預先錄製的動效幀率更高，效果更平滑。而在應用運行過程中通過WatchKit動態創建的動效則會帶來延遲。

播放控制只對圖片和分組對象(group object)有效。多數界面對象會以無限循環的方式展示動畫圖片序列。要使動畫停止，或是只播放動畫中的特定片段，你需要使用圖片對象或分組對象。

成功的品牌塑造不僅在於嚮應用當中放置與品牌相關的圖形資源。優秀的應用應該將品牌形象與獨特的界面外觀及操作感整合起來，帶給用戶愉悅而印象深刻的體驗。

你可以通過很多方式來塑造應用的品牌認知，例如圖標、色彩、定製化按鈕、定製化字體和文案等等。當你為應用設計圖形元素的時候，不僅要使它們各自表現良好，同時還要使它們看上去彼此協調與統一，無論對於定製化元素還是系統標準控制項來說都是如此。

將品牌元素優雅平滑的融入界面設計當中。人們用你的產品是為了完成任務或得到消遣，他們不希望自己像是在被迫看廣告一樣。為了打造更平滑的體驗，你要盡量潛移默化的通過自體、色彩和圖形元素向用戶傳達品牌信息。

不要在應用內或Glance當中顯示logo。Apple Watch上的顯示空間寸土寸金，logo圖形中的每一個元素都在佔用用戶希望看到的實際內容的空間。此外，在Watch應用當中展示logo並不能達到在網頁上那樣的效果：用戶在瀏覽傳統網頁時，一開始很可能並不了解當前頁面所屬網站或品牌；而人們在移動設備上打開某應用時通常都是依靠應用圖標和logo來定位的，你無需再在應用內部展示。