今天仍是Watch應(yīng)用設(shè)計(jì)案例。我很喜歡案例學(xué)習(xí)，所以不會(huì)介意連續(xù)三周來做相同的話題。下面進(jìn)入譯文。

　　Wallaby是一款個(gè)人財(cái)務(wù)app，可以在你購物時(shí)根據(jù)不同的場(chǎng)所幫你選擇最適合的信用卡進(jìn)行付款，以最大程度的獲取優(yōu)惠或積分。不過根據(jù)我們的了解，在實(shí)際當(dāng)中，很多用戶在結(jié)賬時(shí)常常忘記或懶得把手機(jī)拿出來使用Wallaby提供的功能。

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

　　本質(zhì)上講，為可穿戴設(shè)備進(jìn)行設(shè)計(jì)的關(guān)鍵在于情境及人機(jī)互動(dòng)效率。而Apple Watch的一些重要特性，包括超小的屏幕尺寸、始終位于腕上、多樣的交互方式等等，又使得我們?cè)谠O(shè)計(jì)的過程中學(xué)到了很多新東西，包括新的設(shè)計(jì)范式，以及怎樣解決新的UX設(shè)計(jì)挑戰(zhàn)。

　　導(dǎo)航

　　目前，Apple Watch只提供了兩種導(dǎo)航模式：層級(jí)式和頁面式。

　　層級(jí)式導(dǎo)航適用于功能和數(shù)據(jù)較為復(fù)雜的產(chǎn)品。如果需要層層遞進(jìn)的訪問某些功能或內(nèi)容，這種導(dǎo)航模式顯然再適合不過。而頁面式的導(dǎo)航則更加適用于那些信息模型相對(duì)簡(jiǎn)單、不同模塊之間不存在直接數(shù)據(jù)關(guān)聯(lián)的產(chǎn)品。

　　我們?yōu)閃allaby使用了頁面式導(dǎo)航。從信息結(jié)構(gòu)的角度講，每個(gè)功能模塊之間并沒有很強(qiáng)的關(guān)聯(lián)性，也沒有太多層級(jí)化的內(nèi)容，不需要通過層級(jí)式導(dǎo)航進(jìn)行組織;從交互的角度來看，在頁面式導(dǎo)航的框架下，通過左右輕掃就可以在不同的功能模塊之間切換，在“Nearby”模塊中上下輕掃或滾動(dòng)表冠就可以查看適用于附近購物場(chǎng)所的信用卡，人機(jī)互動(dòng)效率很高，無需像層級(jí)式導(dǎo)航那樣迫使用戶必須精準(zhǔn)的點(diǎn)擊某個(gè)微小的按鈕才能進(jìn)一步訪問內(nèi)容。特別是在Wallaby的典型使用情境下 – 在用戶站立和走動(dòng)的過程中 – 這兩種導(dǎo)航模式帶來的交互成本的差異還是很明顯的。

　　通知

　　如果設(shè)計(jì)的得當(dāng)，使App能夠在正確的時(shí)間和地點(diǎn)向用戶發(fā)送正確的通知消息，你的產(chǎn)品將有可能從平凡走向成功 —— 對(duì)于Watch應(yīng)用來說更是如此。

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

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

　　復(fù)雜任務(wù)

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

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

　　當(dāng)我們需要用戶來完成那些較為復(fù)雜的任務(wù)時(shí)，例如創(chuàng)建賬戶、獲取授權(quán)、連接銀行數(shù)據(jù)等等，我們會(huì)在顯示一條消息，告訴用戶接下來的操作需要在iPhone當(dāng)中進(jìn)行。當(dāng)他們打開iPhone時(shí)，界面會(huì)自動(dòng)切換到相關(guān)的流程當(dāng)中，繼續(xù)之前在Watch上中斷的步驟。

　　動(dòng)效

　　精美入微、表意恰當(dāng)?shù)膭?dòng)效可以提升交互體驗(yàn)，增強(qiáng)產(chǎn)品的愉悅性。我們平時(shí)會(huì)使用Framer來制作交互原型并調(diào)試動(dòng)效的各種屬性。

　　需要注意的是，為Watch應(yīng)用制作動(dòng)效時(shí)，你不能像從前那樣依賴于開發(fā)人員通過代碼來完成 —— Watch中的動(dòng)效是通過圖片序列來構(gòu)建的，但你同樣不能把GIF動(dòng)畫丟給開發(fā)人員去放到界面當(dāng)中。作為設(shè)計(jì)師，你必須為動(dòng)畫的每一幀提供一幅靜態(tài)圖片。

　　最有效的方法是將動(dòng)畫文件導(dǎo)入After Effects或Photoshop，然后導(dǎo)出圖片序列。下面大致描述一下我們?cè)赑hotoshop當(dāng)中的操作方法：

　　1.在Photoshop中打開GIF或?qū)隡OV文件。

　　2.如果需要的話，對(duì)動(dòng)畫的幀率進(jìn)行調(diào)整。

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

　　4.進(jìn)行命名等設(shè)置，確保圖片序列從序數(shù)“1”開始。點(diǎn)擊Render按鈕后，Photoshop便會(huì)將動(dòng)畫逐幀分解并保存為指定格式的圖片。

　　5.你可以使用TinyPNG或ImageOptim一類的工具對(duì)這些圖片進(jìn)行優(yōu)化，確保文件不會(huì)很大。

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

　　打開Automator，選擇“Service”。

　　將需要重命名的文件拖進(jìn)來。

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

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

　　最后，點(diǎn)擊右上角的“Run”按鈕，搞定。

　　小結(jié)

　　為Apple Watch進(jìn)行設(shè)計(jì)的過程很有意思。目前我們?cè)谠O(shè)計(jì)方面受到的制約確實(shí)很多，不過從另一個(gè)角度看，這也使得我們必須將注意力聚焦在最核心的體驗(yàn)上，打造最基本最簡(jiǎn)化的界面及交互流程，并基于自己產(chǎn)品的特性來設(shè)計(jì)最符合情境的通知機(jī)制。如果涉及到較為復(fù)雜的功能，要考慮通過Handoff配合iPhone來完成。此外，也不要忘記在恰當(dāng)?shù)牡胤酵ㄟ^合理的動(dòng)效來提升產(chǎn)品的交互體驗(yàn)。

最新評(píng)論