看過Apple Watch的keynote之后，我們驚訝于其UI體驗(yàn)當(dāng)中所包含的大量動效。也許是出于渲染效率和電量消耗等方面的考慮，Apple Watch的UI本身相當(dāng)簡約，沒有過多的視覺元素；這也使得其中所包含的各種轉(zhuǎn)場動效成為提升使用體驗(yàn)的關(guān)鍵要素之一。

此外我們還會發(fā)現(xiàn)，蘋果向我們展示的不只是少數(shù)幾個(gè)所謂的“標(biāo)準(zhǔn)動效”，實(shí)際上幾乎每個(gè)界面當(dāng)中的動效都是針對其特定的內(nèi)容形式所打造的；這也體現(xiàn)出了蘋果在其交互設(shè)計(jì)方面所下的功夫。

為了將這些復(fù)雜的動效研究清楚，我們把演示視頻當(dāng)中展示的一些典型動效截取了下來，在本文中稍作分析。首先必須做個(gè)免責(zé)聲明：在2015年Apple Watch正式發(fā)售之前，我們無法確定它們的最終形式會是怎樣；一切以目前官方給到的演示為準(zhǔn)。

打開和退出應(yīng)用

打開應(yīng)用時(shí)的放大動效與iOS7的方式類似，比較值得注意的是，在應(yīng)用圖標(biāo)與界面本身交叉漸變的過程當(dāng)中，界面的矩形區(qū)域始終與圖標(biāo)的圓形區(qū)域保持契合，同步放大。在此過程當(dāng)中，其他的圖標(biāo)彼此逐漸遠(yuǎn)離的效果很像星球大戰(zhàn)電影里超光速推進(jìn)時(shí)的視效；想到蘋果提到的“應(yīng)用星系(app galaxy)”這個(gè)概念了。

目前我們還無從了解的是，如果你點(diǎn)擊的不是屏幕中央的應(yīng)用圖標(biāo)，那么情況會是怎樣。被點(diǎn)擊的圖標(biāo)會首先移動到屏幕中央然后再放大嗎？或是直接從所在的位置放大？

退出的動效與打開時(shí)相反，界面縮小淡出，應(yīng)用自身的圖標(biāo)以及周圍的“鄰居們”又逐漸匯集到一起。

接聽來電

向下平移的效果來自于keynote演示本身，不包含在UI動效當(dāng)中。

接聽電話的過程很簡單，不過所包含的運(yùn)動元素還不少：點(diǎn)擊后，綠色的接聽按鈕縮小，靜音按鈕在同一位置放大呈現(xiàn)，界面頂部出現(xiàn)音量控制，“incoming call”提示變?yōu)橥ㄔ捰?jì)時(shí)，同時(shí)底部的上拉提示條下移消失。也許你注意到了，這個(gè)過程中所有的動效都是不同的，每個(gè)元素都以各自的方式呈現(xiàn)或消失。

回復(fù)消息

向上平移的效果來自于keynote演示本身，不包含在UI動效當(dāng)中。

收到消息時(shí)，原本的表盤界面會向后隱退；同時(shí)，帶有短消息圖標(biāo)、發(fā)送人姓名及“messages”標(biāo)題的提示會自下而上的滑入界面，靜止前有輕微的彈跳效果。經(jīng)過一段時(shí)間(或點(diǎn)擊后？)，提示中的文字內(nèi)容上移淡出，短消息圖標(biāo)縮小并移至左上角，同時(shí)消息正文及“回復(fù)”按鈕自下而上滑入界面。

“回復(fù)”按鈕被點(diǎn)擊之后會略微縮小淡出，注意這里沒有反彈恢復(fù)原樣的效果。然后整個(gè)信息放大淡出，之前隱退到后面的表盤界面以y軸為中心向后翻轉(zhuǎn)(flip)，同時(shí)包含了各種回復(fù)選項(xiàng)的界面翻轉(zhuǎn)至最前方。

概念上講這套動效確實(shí)夠復(fù)雜。收到消息提示后為什么要讓表盤界面模糊的隱退到后方(類似iOS7中通過毛玻璃表現(xiàn)內(nèi)容與上下文環(huán)境的層次關(guān)系？)，喚出回復(fù)界面時(shí)為什么要通過翻轉(zhuǎn)的方式實(shí)現(xiàn)？也許是以為內(nèi)前兩個(gè)提示性質(zhì)的界面并不屬于某個(gè)特定的應(yīng)用環(huán)境，只有進(jìn)行回復(fù)時(shí)才算進(jìn)入了正式的應(yīng)用當(dāng)中。挺有意思的組合運(yùn)用方式，期待看到更多這樣的例子。

查看日歷

在日歷中打開特定日期行事表的轉(zhuǎn)場方式倒是和安卓蠻像的。點(diǎn)擊當(dāng)前日期，圓角矩形的指示符會輕微的縮小淡出，然后恢復(fù)原樣，接下來界面開始切換，日歷界面向左滑出，行事表界面放大漸入。切換過程中，右上角的當(dāng)前時(shí)間不發(fā)生任何變化。

不知道點(diǎn)擊非當(dāng)前日期的話(沒有當(dāng)日指示符)，會有怎樣的響應(yīng)樣式體現(xiàn)在日期數(shù)字上。

刪除郵件

向左平移的效果來自于keynote演示本身，不包含在UI動效當(dāng)中。

在某條郵件上向左側(cè)輕掃，展開情境菜單。點(diǎn)擊其中的垃圾桶圖標(biāo)，會使其高亮并縮小，然后反彈恢復(fù)原樣。高亮的過程似乎與“點(diǎn)擊推遠(yuǎn)”的感覺有些矛盾，不過這樣做或許是因?yàn)檫@里的圖標(biāo)本身就已經(jīng)蠻暗了的緣故。

點(diǎn)擊垃圾桶圖標(biāo)之后，這條郵件會右移恢復(fù)原狀，然后淡出，同時(shí)下方的郵件列表覆蓋上來?；蛟S這種模式在將來會成為內(nèi)容列表上的標(biāo)準(zhǔn)行為？

健康應(yīng)用的選擇

向左平移的效果來自于keynote演示本身，不包含在UI動效當(dāng)中。

在健康應(yīng)用中選擇跑步，接下來的轉(zhuǎn)場動效分為兩個(gè)階段。首先，被選中的跑步按鈕會略微縮小并閃爍一次，作為對點(diǎn)擊的響應(yīng)；同時(shí)其他按鈕會依次淡出消失。然后跑步按鈕下滑至底部，同時(shí)變色、放大并改變標(biāo)題為“開始”，在此過程中，其他內(nèi)容元素依次淡入呈現(xiàn)；數(shù)字是例外它會自下而上從某個(gè)隱藏的層面背后滑入界面。

結(jié)論

假設(shè)我們目前看到的這些就是Apple Watch正式發(fā)售時(shí)帶給我們的，那么我們能得到的結(jié)論就是…這里面真的用到了很多動效。任何一個(gè)界面元素在發(fā)生狀態(tài)變化時(shí)總是伴隨著滑動、放大縮小、漸入或淡出等動效。

可以說，當(dāng)前這套風(fēng)格屬于某種折中的設(shè)計(jì)決策，其中的每種動效都是針對特定的時(shí)間、界面空間及上下文環(huán)境的，力求最準(zhǔn)確的體現(xiàn)出特定情境中的交互過程?！扒榫郴笔沁@里的關(guān)鍵：通過優(yōu)化每個(gè)界面、每個(gè)環(huán)節(jié)當(dāng)中的交互體驗(yàn)，來彌補(bǔ)極端有限的屏幕尺寸所帶來的缺陷；犧牲了全局統(tǒng)一性，換來了在任何一個(gè)特定的界面環(huán)境中提供最合適的交互模式。如果將Apple Watch和Android Wear做以對比，我們會發(fā)現(xiàn)它們在這方面的策略相當(dāng)不同；后者力求最普遍適用的全局統(tǒng)一交互模式，但代價(jià)就是產(chǎn)生了更多的步驟和點(diǎn)擊。

具體匯總一下Apple Watch當(dāng)中的交互要點(diǎn)：

界面元素對點(diǎn)擊的響應(yīng)方式多種多樣。通常會產(chǎn)生縮小的效果，像是被按下去一樣，但接下來是否恢復(fù)原狀要看具體情況。

動效形式“有針對性的不統(tǒng)一”。同樣，在同一個(gè)界面中的不同元素也會有各自的運(yùn)動方式。

不強(qiáng)調(diào)“對稱”。例如在某些類型內(nèi)容中，新元素進(jìn)入界面的方式與舊元素離開的方式不同；不過在某些情況下新舊元素只是通過簡單的交叉漸變來更替。

右上角的時(shí)間看來是最“靜態(tài)”的信息了。它出現(xiàn)在很多界面的相同位置，并且在界面發(fā)生切換時(shí)保持不動。不過具體哪些界面需要顯示時(shí)間，哪些不需要，目前看上去還沒有明確的規(guī)則。

目前看來導(dǎo)航系統(tǒng)的設(shè)計(jì)原則還不是很嚴(yán)格，譬如在不同的界面中導(dǎo)航到下一級的方式會有所不同。如果是底部有頁碼指示符(點(diǎn)點(diǎn)點(diǎn))的界面，通常是通過左右滑動來瀏覽內(nèi)容；而某些界面的左上角會用來放置返回上級界面的鏈接；同樣，目前這些都不是100%確定的規(guī)則。

滑動和放大/縮小過程中的加速動效看上去有正弦曲線的特性，在結(jié)束前通常還包括彈跳效果。

總而言之，Apple Watch在應(yīng)用界面設(shè)計(jì)方面打破了很多常規(guī)的東西，接下來將要面對的挑戰(zhàn)似乎也不少；他們對動效的關(guān)注程度強(qiáng)烈到你根本無法去忽視。看上去在將來設(shè)計(jì)應(yīng)用時(shí)，只加入“一點(diǎn)點(diǎn)”動效的策略很難行得通，譬如最基本的滑動或淡入淡出一類；你可能需要押上全部籌碼來做好這件事。這不太容易，因?yàn)闃I(yè)界里真正在這方面有深入研究的設(shè)計(jì)師可能不是很多。你不能隨便的在這里或那里做些裝飾；動效需要明確的目的性，需要針對特定的應(yīng)用和界面環(huán)境進(jìn)行設(shè)計(jì)。要找到最合適的模式，你也許需要通過原型進(jìn)行大量的嘗試和迭代。

蘋果所面臨的挑戰(zhàn)之一，就是怎樣保持生態(tài)圈的高品質(zhì)標(biāo)準(zhǔn)。一方面，他們不能讓將來運(yùn)行在Apple Watch上的應(yīng)用帶給用戶糟糕混亂的體驗(yàn)，另一方面他們又確實(shí)需要通過一些優(yōu)秀的應(yīng)用來傳遞出Watch的價(jià)值。十萬款應(yīng)用當(dāng)中有五千個(gè)Twitter客戶端和成百上千的爛應(yīng)用——這不是蘋果需要的——他們更需要1000個(gè)品質(zhì)優(yōu)秀、創(chuàng)意豐富、滿足獨(dú)特需求的好應(yīng)用。所以我個(gè)人感覺，將來的應(yīng)用審核標(biāo)準(zhǔn)會比眼下iOS方面要嚴(yán)格很多，審核條件中也許會包括“需要提供精美的動效，以提供上乘的體驗(yàn)”這樣的規(guī)則。當(dāng)然，這純屬猜測，我們?nèi)孕枰壬现辽賻讉€(gè)月才能見到官方的設(shè)計(jì)開發(fā)規(guī)范。

來源：互聯(lián)網(wǎng)的那點(diǎn)事