編者按：這篇實戰的對象是Wallaby，一款個人財務APP，文章總結了四點經驗：導航、通知、復雜任務以及動效。每個方面都有需要注意的問題和對應的解決方法，進入譯文 >>>

今天仍是Watch應用設計案例。我很喜歡案例學習，所以不會介意連續三周來做相同的話題。下面進入譯文。

Wallaby是一款個人財務app，可以在你購物時根據不同的場所幫你選擇最適合的信用卡進行付款，以最大程度的獲取優惠或積分。不過根據我們的了解，在實際當中，很多用戶在結賬時常常忘記或懶得把手機拿出來使用Wallaby提供的功能。

我們希望Apple Watch版本的Wallaby能從一定程度上解決這一問題。其實在這之前，我們已經打造過Pebbel、Android Wear、Samsung Galaxy Gear甚至是Google Glass的版本了，所以對于哪些功能更適用于可穿戴設備還是比較清楚的。

本質上講，為可穿戴設備進行設計的關鍵在于情境及人機互動效率。而Apple Watch的一些重要特性，包括超小的屏幕尺寸、始終位于腕上、多樣的交互方式等等，又使得我們在設計的過程中學到了很多新東西，包括新的設計范式，以及怎樣解決新的UX設計挑戰。

導航

目前，Apple Watch只提供了兩種導航模式：層級式和頁面式。

層級式導航適用于功能和數據較為復雜的產品。如果需要層層遞進的訪問某些功能或內容，這種導航模式顯然再適合不過。而頁面式的導航則更加適用于那些信息模型相對簡單、不同模塊之間不存在直接數據關聯的產品。

我們為Wallaby使用了頁面式導航。從信息結構的角度講，每個功能模塊之間并沒有很強的關聯性，也沒有太多層級化的內容，不需要通過層級式導航進行組織；從交互的角度來看，在頁面式導航的框架下，通過左右輕掃就可以在不同的功能模塊之間切換，在“Nearby”模塊中上下輕掃或滾動表冠就可以查看適用于附近購物場所的信用卡，人機互動效率很高，無需像層級式導航那樣迫使用戶必須精準的點擊某個微小的按鈕才能進一步訪問內容。特別是在Wallaby的典型使用情境下 - 在用戶站立和走動的過程中 - 這兩種導航模式帶來的交互成本的差異還是很明顯的。

通知

如果設計的得當，使App能夠在正確的時間和地點向用戶發送正確的通知消息，你的產品將有可能從平凡走向成功 —— 對于Watch應用來說更是如此。

Watch始終被用戶戴在手腕上，人機之間的距離相比以往的設備來說更近一步，所以你必須對通知機制有所限制，確保只發送那些最重要、最符合情境的信息，而且要以盡可能簡短的形式來呈現 —— 否則將會對用戶產生持續而嚴重的干擾，使他們不得不徹底屏蔽掉來自你家產品的通知信息。

Wallaby目前只將通知限制在一些重要事件上，例如告知用戶今天有某張卡片提供打折活動，以及賬單和年費信息等。將來，隨著Watch自身硬件能力的不斷提升，我們將有可能在不消耗過多Watch和iPhone電量的前提下精準的獲取用戶所在的位置，屆時我們就可以在用戶進入某家商店或賣場的時候即時發出通知，讓他們知道哪些信用卡適合在那里消費，使用戶無需自主發起查詢便可以獲取最適合當前情境及行動目標的信息。

復雜任務

涉及到太多輸入和設置的復雜任務，本質上并不適合在Watch這樣屏幕尺寸極小、操作難度較大的設備上完成。

對于這類功能，在iPhone上進行操作更加合理。為了確保多設備之間的無縫體驗，我們利用了iOS提供的Handoff功能。

當我們需要用戶來完成那些較為復雜的任務時，例如創建賬戶、獲取授權、連接銀行數據等等，我們會在顯示一條消息，告訴用戶接下來的操作需要在iPhone當中進行。當他們打開iPhone時，界面會自動切換到相關的流程當中，繼續之前在Watch上中斷的步驟。

推薦閱讀：《不要落伍！深聊Apple Watch平臺認知與產品設計》

動效

精美入微、表意恰當的動效可以提升交互體驗，增強產品的愉悅性。我們平時會使用Framer來制作交互原型并調試動效的各種屬性。

需要注意的是，為Watch應用制作動效時，你不能像從前那樣依賴于開發人員通過代碼來完成 —— Watch中的動效是通過圖片序列來構建的，但你同樣不能把GIF動畫丟給開發人員去放到界面當中。作為設計師，你必須為動畫的每一幀提供一幅靜態圖片。

最有效的方法是將動畫文件導入After Effects或Photoshop，然后導出圖片序列。下面大致描述一下我們在Photoshop當中的操作方法：

1.在Photoshop中打開GIF或導入MOV文件。

2.如果需要的話，對動畫的幀率進行調整。

3.選擇“File - Export - Render Video”

4.進行命名等設置，確保圖片序列從序數“1”開始。點擊Render按鈕后，Photoshop便會將動畫逐幀分解并保存為指定格式的圖片。

5.你可以使用TinyPNG或ImageOptim一類的工具對這些圖片進行優化，確保文件不會很大。

最后再幫開發人員一個忙，為這些文件增加@2x后綴；如果文件太多，建議使用Automator一類的工具來完成：

打開Automator，選擇“Service”。

將需要重命名的文件拖進來。

選擇“Files & Folders”，雙擊“Rename Finder Items”，會出現對話框詢問你是否為每張圖片添加一份副本以便保護原始文件的命名方式。你可以選擇不添加副本，點擊“Don’t Add”。

在下拉列表中選擇“Add Text”，填寫“@2x”，選擇“after name”作為插入位置。

最后，點擊右上角的“Run”按鈕，搞定。

小結

為Apple Watch進行設計的過程很有意思。目前我們在設計方面受到的制約確實很多，不過從另一個角度看，這也使得我們必須將注意力聚焦在最核心的體驗上，打造最基本最簡化的界面及交互流程，并基于自己產品的特性來設計最符合情境的通知機制。如果涉及到較為復雜的功能，要考慮通過Handoff配合iPhone來完成。此外，也不要忘記在恰當的地方通過合理的動效來提升產品的交互體驗。

【Apple Watch五月份最新潮流干貨】

教你繪制蘋果表圖標的PS教程一枚！
《PS+AI教程！教你繪制一枚APPLE WATCH獎章圖標》

蘋果官方設計模板微盤打包下載！
《官方版來了！超實用的APPLE WATCH官方規范設計模板下載》

蘋果表設計入門教程！
《潮流干貨！超實用的APPLE WATCH設計入門》

原文地址：medium
譯文地址：beforweb

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量94萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：