實(shí)例第二戰(zhàn)！為Soundwave設(shè)計(jì)Watch應(yīng)用時(shí)學(xué)到的五個(gè)技巧

編者按：上星期有一篇Apple Watch的APP實(shí)例首戰(zhàn)，今天繼續(xù)第二篇實(shí)戰(zhàn)經(jīng)驗(yàn)，主角是Soundwave，設(shè)計(jì)師從實(shí)戰(zhàn)中總結(jié)了5個(gè)關(guān)鍵的要點(diǎn) >>>

實(shí)例首篇：《實(shí)戰(zhàn)首例！4個(gè)設(shè)計(jì)思路幫你簡(jiǎn)化Apple Watch平臺(tái)的產(chǎn)品》

Soundwave已經(jīng)在iOS及Android平臺(tái)上發(fā)展了將近兩年。我（英文原文作者）最近有幸得到機(jī)會(huì)，能夠?yàn)锳pple Watch版本的Soundwave進(jìn)行UI與交互設(shè)計(jì)，使其成為4月24日之后Watch平臺(tái)上的首批第三方應(yīng)用之一。

為Apple Watch這樣的新平臺(tái)設(shè)計(jì)app，這對(duì)于我們的設(shè)計(jì)與開發(fā)團(tuán)隊(duì)來(lái)說(shuō)都是絕佳的學(xué)習(xí)機(jī)會(huì)。作為設(shè)計(jì)師，我在這個(gè)過(guò)程當(dāng)中學(xué)到了一些很關(guān)鍵的東西。

一、學(xué)習(xí)設(shè)計(jì)規(guī)范

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

中文版的優(yōu)設(shè)已翻譯，參見：《干貨速遞！APPLE WATCH人機(jī)交互指南之UI設(shè)計(jì)基礎(chǔ)》

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

二、簡(jiǎn)化的人機(jī)交互

大約從2013年開始，UI設(shè)計(jì)領(lǐng)域風(fēng)云突變，長(zhǎng)久以來(lái)，iOS應(yīng)用過(guò)度擬物化的視覺(jué)風(fēng)格逐漸趨向簡(jiǎn)潔和平面化，字體、配色、間距、材質(zhì)等要素的運(yùn)用開始以內(nèi)容為核心，起到溝通與支持的作用，而非過(guò)去那樣扮演著裝飾品的角色。設(shè)計(jì)師們開始關(guān)注動(dòng)效與轉(zhuǎn)場(chǎng)的運(yùn)用方式，力求使體驗(yàn)更加自然順暢。

Apple Watch也不例外，甚至更進(jìn)一步的完全聚焦在簡(jiǎn)化的界面元素及細(xì)微的交互方式上，目標(biāo)是使用戶在幾秒之內(nèi)就能完成常見的簡(jiǎn)單任務(wù)，而不會(huì)被任何不必要的界面元素所干擾。同時(shí)，目前的Watch在技術(shù)與設(shè)計(jì)框架方面的局限使得我們沒(méi)有太多的空間去嘗試高度定制化的動(dòng)效與轉(zhuǎn)場(chǎng)效果 - 一方面，這種局面必定會(huì)隨著設(shè)備的不斷成熟而改變；另一方面，對(duì)于新設(shè)備類型而言，在初代進(jìn)行必要的約束其實(shí)是好事，這使得設(shè)計(jì)師們?cè)诿鎸?duì)Watch這樣的新平臺(tái)時(shí)，必須將注意力聚焦在最簡(jiǎn)單最直接的體驗(yàn)?zāi)Ｊ缴希層脩舾冻鲎钚〕杀炯纯煽焖偻瓿蒞atch使用場(chǎng)景中的那些典型任務(wù)。

在設(shè)計(jì)Soundwave時(shí)，我們時(shí)刻記得這一點(diǎn)，并確保每個(gè)任務(wù)都可以通過(guò)兩三個(gè)點(diǎn)擊來(lái)完成。

三、有效的使用動(dòng)效

合理的動(dòng)效可以體現(xiàn)出UI元素的交互特性，使產(chǎn)品的功能機(jī)制更加顯而易見，幫助用戶有效的完成任務(wù)。

獨(dú)特而微妙的動(dòng)效還能給產(chǎn)品帶來(lái)一定的愉悅性。最近，我發(fā)現(xiàn)自己越來(lái)越多的在Twitter中點(diǎn)擊“favourite”按鈕。回想起來(lái)，應(yīng)該是從他們重設(shè)計(jì)了按鈕動(dòng)效之后才開始的。與過(guò)去那種簡(jiǎn)單的狀態(tài)切換不同，現(xiàn)在的星星圖標(biāo)在點(diǎn)擊時(shí)會(huì)伴隨著小小的彈跳動(dòng)效。雖然從功能角度講，這沒(méi)有任何的實(shí)際意義，但它確實(shí)在細(xì)節(jié)當(dāng)中提升了產(chǎn)品的愉悅性，使功能更具情感上的親和力。

與面向iOS進(jìn)行設(shè)計(jì)時(shí)有所不同，如今設(shè)計(jì)師不僅要設(shè)計(jì)動(dòng)效，而且要負(fù)責(zé)實(shí)現(xiàn) - 除非Apple將來(lái)為Watch開放CoreAnimation，否則開發(fā)者們只能像當(dāng)前這樣通過(guò)設(shè)計(jì)師提供的一整套圖片序列來(lái)構(gòu)建動(dòng)效。我個(gè)人來(lái)說(shuō)，仍是使用After Effects來(lái)設(shè)計(jì)動(dòng)畫，然后逐幀導(dǎo)出一整套PNG圖片，最終構(gòu)成每秒30幀的動(dòng)效。

下面簡(jiǎn)單介紹一下我是怎樣使用After Effects導(dǎo)出靜態(tài)圖片素材的。

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

選擇“Lossless”，喚出“Output Module Settings”：

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

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

最后，確保取消勾選“Use Comp Frame Number”，使導(dǎo)出的PNG圖片能夠自動(dòng)以從0開始的序數(shù)來(lái)命名，而不是它們?cè)跁r(shí)間軸上顯示的名字。最終的圖片文件命名應(yīng)該類似“filename_0”、“finename_1”這樣。

四、內(nèi)容是關(guān)鍵

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

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

五、打造無(wú)縫體驗(yàn)

我們都知道目前的Watch應(yīng)用都不是獨(dú)立存在的。Watchkit是iOS應(yīng)用的一種擴(kuò)展模式，當(dāng)前Watch應(yīng)用的本質(zhì)仍是iOS應(yīng)用的擴(kuò)展。我們?cè)赪atch上完成一些基礎(chǔ)的、最符合Watch使用情境的任務(wù)，而將更為復(fù)雜的、需要用戶付出更多注意力及時(shí)間的內(nèi)容與功能留給iPhone。對(duì)Watch與iPhone的協(xié)作機(jī)制及生態(tài)形式了解透徹，在Watch上打造具有“增強(qiáng)”和“補(bǔ)充擴(kuò)展”性質(zhì)的功能，切勿將iPhone版本里的功能粗暴的復(fù)制到Watch上面來(lái)。

Watch上的通知(Notifications)是個(gè)不錯(cuò)的例子。在我們的產(chǎn)品里，當(dāng)用戶從朋友那里收到了一首歌，Watch會(huì)向用戶推送Notification，其中的Long Look模式包含兩個(gè)功能：回復(fù)(通過(guò)聽寫)和“喜歡這首歌”，當(dāng)然還有系統(tǒng)提供的Dismiss。更重一些的功能，譬如復(fù)雜的內(nèi)容回復(fù)，或是向朋友分享一首歌作為回饋，則經(jīng)由Handoff功能在iPhone上完成。用戶在iPhone鎖屏界面左下角可以看到Soundwave的Handoff圖標(biāo)，向上滑動(dòng)就可以直接進(jìn)入app當(dāng)中進(jìn)行相關(guān)操作。

小結(jié)

為Apple Watch設(shè)計(jì)應(yīng)用的過(guò)程對(duì)我們來(lái)說(shuō)是非常有意思的經(jīng)歷。不久之后，隨著用戶實(shí)際上手使用Watch版的Soundwave，我們便能了解到更多真實(shí)的反饋，從而進(jìn)行更有針對(duì)性的迭代、驗(yàn)證、再迭代、再驗(yàn)證。

【Apple Watch精選好文及資源】

騰訊同學(xué)出品的全方位教程：
《不要落伍！深聊APPLE WATCH平臺(tái)認(rèn)知與產(chǎn)品設(shè)計(jì)》

來(lái)自創(chuàng)業(yè)設(shè)計(jì)師的分享：
《潮流干貨！超實(shí)用的APPLE WATCH設(shè)計(jì)入門》

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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