編者按：上星期有一篇Apple Watch的APP實例首戰，今天繼續第二篇實戰經驗，主角是Soundwave，設計師從實戰中總結了5個關鍵的要點 >>>

實例首篇：《實戰首例！4個設計思路幫你簡化Apple Watch平臺的產品》

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

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

一、學習設計規范

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

中文版的優設已翻譯，參見：《干貨速遞！APPLE WATCH人機交互指南之UI設計基礎》

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

二、簡化的人機交互

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

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

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

三、有效的使用動效

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

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

與面向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”這樣。

四、內容是關鍵

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

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

五、打造無縫體驗

我們都知道目前的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，我們便能了解到更多真實的反饋，從而進行更有針對性的迭代、驗證、再迭代、再驗證。

【Apple Watch精選好文及資源】

騰訊同學出品的全方位教程：
《不要落伍！深聊APPLE WATCH平臺認知與產品設計》

來自創業設計師的分享：
《潮流干貨！超實用的APPLE WATCH設計入門》

一大波免費的Apple Watch 展示模板！
《干貨必收！高質量APPLE WATCH展示模板+GUI免費下載》

原文地址：medium
譯文地址：Be For Web

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

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