案例學習 - 為Soundwave設計Watch應用時學到的五件事

發表於2015-08-28

Soundwave已經在iOS及Android平臺上發展了將近兩年。我(英文原文作者)最近有幸得到機會,能夠為Apple Watch版本的Soundwave進行UI與互動設計,使其成為4月24日之後Watch平臺上的首批第三方應用之一。

為Apple Watch這樣的新平臺設計app,這對於我們的設計與開發團隊來說都是絕佳的學習機會。作為設計師,我在這個過程當中學到了一些很關鍵的東西。

1.學習設計規範

官方的Apple Watch人機介面設計規範很嚴格。其實iOS版本的也是如此,只是這麼多年下來,隨著iOS裝置及app市場的越發成熟,設計師們時常需要花很多時間去探索規範之外的那些更加獨特、更加定製化的設計模式。而現在,在新平臺剛剛問世的階段,我們無需,也不能進行大範圍的探索 – 不妨利用節省下來的大把時間去仔細學習和理解官方的設計規範,看看作為設計師,在新平臺框架的約束下能利用哪些模式實現怎樣的方案,又有哪些iOS設計思路是無法運用到Watch上的 – 否則,你將發現自己需要花費大量時間去返工修改方案才能使其被開發出來。

好訊息是,配合著設計規範的內容,Apple官方提供了一套非常全面的設計資源(需要開發者賬戶才能下載),其中包括了大量的PSD與Sketch模板,在諸如佈局、按鈕、字號、列表等方面提供了詳細的資訊,值得你花時間去學習。

2.簡化的人機互動

大約從2013年開始,UI設計領域風雲突變,長久以來,iOS應用過度擬物化的視覺風格逐漸趨向簡潔和平面化,字型、配色、間距、材質等要素的運用開始以內容為核心,起到溝通與支援的作用,而非過去那樣扮演著裝飾品的角色。設計師們開始關注動效與轉場的運用方式,力求使體驗更加自然順暢。

Apple Watch也不例外,甚至更進一步的完全聚焦在簡化的介面元素及細微的互動方式上,目標是使使用者在幾秒之內就能完成常見的簡單任務,而不會被任何不必要的介面元素所干擾。同時,目前的Watch在技術與設計框架方面的侷限使得我們沒有太多的空間去嘗試高度定製化的動效與轉場效果 – 一方面,這種局面必定會隨著裝置的不斷成熟而改變;另一方面,對於新裝置型別而言,在初代進行必要的約束其實是好事,這使得設計師們在面對Watch這樣的新平臺時,必須將注意力聚焦在最簡單最直接的體驗模式上,讓使用者付出最小成本即可快速完成Watch使用場景中的那些典型任務。

在設計Soundwave時,我們時刻記得這一點,並確保每個任務都可以通過兩三個點選來完成。

3.有效的使用動效

合理的動效可以體現出UI元素的互動特性,使產品的功能機制更加顯而易見,幫助使用者有效的完成任務。

獨特而微妙的動效還能給產品帶來一定的愉悅性。最近,我發現自己越來越多的在Twitter中點選“favourite”按鈕。回想起來,應該是從他們重設計了按鈕動效之後才開始的。與過去那種簡單的狀態切換不同,現在的星星圖示在點選時會伴隨著小小的彈跳動效。雖然從功能角度講,這沒有任何的實際意義,但它確實在細節當中提升了產品的愉悅性,使功能更具情感上的親和力。

01-design-for-apple-watch-soundwave-app.png

與面向iOS進行設計時有所不同,如今設計師不僅要設計動效,而且要負責實現 – 除非Apple將來為Watch開放CoreAnimation,否則開發者們只能像當前這樣通過設計師提供的一整套圖片序列來構建動效。我個人來說,仍是使用After Effects來設計動畫,然後逐幀匯出一整套PNG圖片,最終構成每秒30幀的動效。

下面簡單介紹一下我是怎樣使用After Effects匯出靜態圖片素材的。

首先在Composition中選擇“Add to Render Queue”:

選擇“Lossless”,喚出“Output Module Settings”:

將格式由“Quicktime”改為“PNG Sequence”:

將通道由“RGB”改為“RGB + Alpha”:

最後,確保取消勾選“Use Comp Frame Number”,使匯出的PNG圖片能夠自動以從0開始的序數來命名,而不是它們在時間軸上顯示的名字。最終的圖片檔案命名應該類似“filename_0”、“finename_1”這樣。

4.內容是關鍵

這個標題到處都能看到,確實。但在為Apple Watch進行設計時,這幾個字簡直是福音。不妨看看現在那些官方和第三方的Watch應用,它們都有一個共同的特徵,就是隻顯示在當前情境中最為重要和關鍵的資訊,使使用者簡單瞥上一眼即可獲取。即便是像Instagram和Twitter這些包含著大量、豐富的圖文內容的產品,在Watch上也濃縮成最簡單最基礎的圖文格式。

我們在設計Soundwave時也採用著同樣的方式,只在時間軸上顯示專輯封面、樂手及歌名,而最主要的CTA(Call To Action)就是點選一首歌檢視它正在哪裡被播放,附帶兩個操作,一是播放一是喜歡,就這麼簡單。

5.打造無縫體驗

我們都知道目前的Watch應用都不是獨立存在的。Watchkit是iOS應用的一種擴充套件模式,當前Watch應用的本質仍是iOS應用的擴充套件。我們在Watch上完成一些基礎的、最符合Watch使用情境的任務,而將更為複雜的、需要使用者付出更多注意力及時間的內容與功能留給iPhone。對Watch與iPhone的協作機制及生態形式瞭解透徹,在Watch上打造具有“增強”和“補充擴充套件”性質的功能,切勿將iPhone版本里的功能粗暴的複製到Watch上面來。

Watch上的通知(Notifications)是個不錯的例子。在我們的產品裡,當使用者從朋友那裡收到了一首歌,Watch會向使用者推送Notification,其中的Long Look模式包含兩個功能:回覆(通過聽寫)和“喜歡這首歌”,當然還有系統提供的Dismiss。更重一些的功能,譬如複雜的內容回覆,或是向朋友分享一首歌作為回饋,則經由Handoff功能在iPhone上完成。使用者在iPhone鎖屏介面左下角可以看到Soundwave的Handoff圖示,向上滑動就可以直接進入app當中進行相關操作。

小結

為Apple Watch設計應用的過程對我們來說是非常有意思的經歷。不久之後,隨著使用者實際上手使用Watch版的Soundwave,我們便能瞭解到更多真實的反饋,從而進行更有針對性的迭代、驗證、再迭代、再驗證。

相關文章