Apple Watch UI動效解析

1 評論 12373 瀏覽 5 收藏 12 分鐘

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

此外我們還會發現,蘋果向我們展示的不只是少數幾個所謂的“標準動效”,實際上幾乎每個界面當中的動效都是針對其特定的內容形式所打造的;這也體現出了蘋果在其交互設計方面所下的功夫。

為了將這些復雜的動效研究清楚,我們把演示視頻當中展示的一些典型動效截取了下來,在本文中稍作分析。首先必須做個免責聲明:在2015年Apple Watch正式發售之前,我們無法確定它們的最終形式會是怎樣;一切以目前官方給到的演示為準。

打開和退出應用

打開應用時的放大動效與iOS7的方式類似,比較值得注意的是,在應用圖標與界面本身交叉漸變的過程當中,界面的矩形區域始終與圖標的圓形區域保持契合,同步放大。在此過程當中,其他的圖標彼此逐漸遠離的效果很像星球大戰電影里超光速推進時的視效;想到蘋果提到的“應用星系(app galaxy)”這個概念了。

目前我們還無從了解的是,如果你點擊的不是屏幕中央的應用圖標,那么情況會是怎樣。被點擊的圖標會首先移動到屏幕中央然后再放大嗎?或是直接從所在的位置放大?

退出的動效與打開時相反,界面縮小淡出,應用自身的圖標以及周圍的“鄰居們”又逐漸匯集到一起。

apple-watch-ui-animations-ux-design.gif

接聽來電

apple-watch-ui-animations-ux-design.gif

向下平移的效果來自于keynote演示本身,不包含在UI動效當中。

接聽電話的過程很簡單,不過所包含的運動元素還不少:點擊后,綠色的接聽按鈕縮小,靜音按鈕在同一位置放大呈現,界面頂部出現音量控制,“incoming call”提示變為通話計時,同時底部的上拉提示條下移消失。也許你注意到了,這個過程中所有的動效都是不同的,每個元素都以各自的方式呈現或消失。

回復消息

apple-watch-ui-animations-ux-design.gif

向上平移的效果來自于keynote演示本身,不包含在UI動效當中。

收到消息時,原本的表盤界面會向后隱退;同時,帶有短消息圖標、發送人姓名及“messages”標題的提示會自下而上的滑入界面,靜止前有輕微的彈跳效果。經過一段時間(或點擊后?),提示中的文字內容上移淡出,短消息圖標縮小并移至左上角,同時消息正文及“回復”按鈕自下而上滑入界面。

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

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

查看日歷

apple-watch-ui-animations-ux-design.gif

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

不知道點擊非當前日期的話(沒有當日指示符),會有怎樣的響應樣式體現在日期數字上。

刪除郵件

apple-watch-ui-animations-ux-design.gif

向左平移的效果來自于keynote演示本身,不包含在UI動效當中。

在某條郵件上向左側輕掃,展開情境菜單。點擊其中的垃圾桶圖標,會使其高亮并縮小,然后反彈恢復原樣。高亮的過程似乎與“點擊推遠”的感覺有些矛盾,不過這樣做或許是因為這里的圖標本身就已經蠻暗了的緣故。

點擊垃圾桶圖標之后,這條郵件會右移恢復原狀,然后淡出,同時下方的郵件列表覆蓋上來?;蛟S這種模式在將來會成為內容列表上的標準行為?

健康應用的選擇

向左平移的效果來自于keynote演示本身,不包含在UI動效當中。

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

結論

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

可以說,當前這套風格屬于某種折中的設計決策,其中的每種動效都是針對特定的時間、界面空間及上下文環境的,力求最準確的體現出特定情境中的交互過程?!扒榫郴笔沁@里的關鍵:通過優化每個界面、每個環節當中的交互體驗,來彌補極端有限的屏幕尺寸所帶來的缺陷;犧牲了全局統一性,換來了在任何一個特定的界面環境中提供最合適的交互模式。如果將Apple Watch和Android Wear做以對比,我們會發現它們在這方面的策略相當不同;后者力求最普遍適用的全局統一交互模式,但代價就是產生了更多的步驟和點擊。

具體匯總一下Apple Watch當中的交互要點:

界面元素對點擊的響應方式多種多樣。通常會產生縮小的效果,像是被按下去一樣,但接下來是否恢復原狀要看具體情況。

動效形式“有針對性的不統一”。同樣,在同一個界面中的不同元素也會有各自的運動方式。

不強調“對稱”。例如在某些類型內容中,新元素進入界面的方式與舊元素離開的方式不同;不過在某些情況下新舊元素只是通過簡單的交叉漸變來更替。

右上角的時間看來是最“靜態”的信息了。它出現在很多界面的相同位置,并且在界面發生切換時保持不動。不過具體哪些界面需要顯示時間,哪些不需要,目前看上去還沒有明確的規則。

目前看來導航系統的設計原則還不是很嚴格,譬如在不同的界面中導航到下一級的方式會有所不同。如果是底部有頁碼指示符(點點點)的界面,通常是通過左右滑動來瀏覽內容;而某些界面的左上角會用來放置返回上級界面的鏈接;同樣,目前這些都不是100%確定的規則。

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

總而言之,Apple Watch在應用界面設計方面打破了很多常規的東西,接下來將要面對的挑戰似乎也不少;他們對動效的關注程度強烈到你根本無法去忽視??瓷先ピ趯碓O計應用時,只加入“一點點”動效的策略很難行得通,譬如最基本的滑動或淡入淡出一類;你可能需要押上全部籌碼來做好這件事。這不太容易,因為業界里真正在這方面有深入研究的設計師可能不是很多。你不能隨便的在這里或那里做些裝飾;動效需要明確的目的性,需要針對特定的應用和界面環境進行設計。要找到最合適的模式,你也許需要通過原型進行大量的嘗試和迭代。

蘋果所面臨的挑戰之一,就是怎樣保持生態圈的高品質標準。一方面,他們不能讓將來運行在Apple Watch上的應用帶給用戶糟糕混亂的體驗,另一方面他們又確實需要通過一些優秀的應用來傳遞出Watch的價值。十萬款應用當中有五千個Twitter客戶端和成百上千的爛應用——這不是蘋果需要的——他們更需要1000個品質優秀、創意豐富、滿足獨特需求的好應用。所以我個人感覺,將來的應用審核標準會比眼下iOS方面要嚴格很多,審核條件中也許會包括“需要提供精美的動效,以提供上乘的體驗”這樣的規則。當然,這純屬猜測,我們仍需要等上至少幾個月才能見到官方的設計開發規范。

來源:互聯網的那點事

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 等等看吧

    來自廣東 回復