動畫規(guī)律在交互動態(tài)效果設(shè)計中的應(yīng)用

黃鶴　駱媛

摘 要 交互設(shè)計作為設(shè)計領(lǐng)域中新生方向，集合了當前最赤手可熱的前沿科技與時尚風格的融合作品。科學與藝術(shù)、技術(shù)與設(shè)計、工程與構(gòu)思在交互設(shè)計中完美結(jié)合在一起，其復雜程度是任何傳統(tǒng)設(shè)計科目所不能比擬的，甚至每一個細小分支都可以成為一個研究方向。交互設(shè)計的動態(tài)效果也是APP產(chǎn)品為用戶所喜愛的重點之一，友好的交互體驗是吸引客戶群，并建立產(chǎn)品使用忠實度的有效方案。本文就動畫規(guī)律在交互設(shè)計動態(tài)效果中的應(yīng)用做一些淺要分析，希望起到拋磚引玉的作用，供大家參考。

關(guān)鍵詞 交互設(shè)計 動態(tài)效果 動畫規(guī)則 物理規(guī)律 交互體驗

中圖分類號：J218 文獻標識碼：A DOI：10.16400/j.cnki.kjdks.2015.01.024

在我們尚未清醒地認識到世界已然進步到一個前所未有的大數(shù)據(jù)時代之時，移動智能終端悄然遍布在我們的周遭。大數(shù)據(jù)開啟了一次重大的時代轉(zhuǎn)型。①轉(zhuǎn)瞬間，諸如“云端”、“物聯(lián)網(wǎng)”、“交互”等詞匯越來越頻繁地出現(xiàn)在人們的視野中。

放眼當今中國市場，風投最集中的公司類型是互聯(lián)網(wǎng)電商，草根創(chuàng)業(yè)者最鐘情的領(lǐng)域是APP開發(fā)，設(shè)計師轉(zhuǎn)行最親睞的行業(yè)是交互設(shè)計。這些風向標全部向大眾表明交互設(shè)計至少在未來十年是最具活力的行業(yè)，越來越多的年輕設(shè)計師愿意參與其中，為人類過上更美好的生活貢獻力量。

1 動畫節(jié)奏規(guī)律的應(yīng)用

1.1 時間與空間（Timing & Spacing）

圖1

時間與空間是動畫法則中最易懂卻很難把控的一個規(guī)律，在特定的一段時間內(nèi)運動多長的軌跡，運動軌跡是什么樣的狀態(tài)十分有講究。如一個小球勻速運動、加速運動、減速運動帶給用戶的視覺體驗是完全不一樣的。按照現(xiàn)實生活的物理規(guī)律，加速運動給人以開始的心理暗示，減速運動給人以結(jié)束的心理暗示，如圖1：

這是一張勻速運動的小球，一秒鐘25幀每一間隔時間段內(nèi)小球運動的空間距離是一樣的，當然在物理學上這種運動軌跡只能出現(xiàn)在理想狀態(tài)下的實驗室中，日常生活中不會出現(xiàn)絕對的勻速運動，這也說明，如果在交互設(shè)計中如果簡單地使用勻速運動勢必會給用戶造成不符合常規(guī)的陌生感，并由此產(chǎn)生不良的交互體驗。

我們再看圖2，漸出（減速運動）：

圖2

圖中2我們可以看出，相同的時間小球移動了相同的距離，而不同的是中間點（第13幀）的位置已經(jīng)不在正中間，而是靠近終點一邊，從運動軌跡上看，小球在做一個減速運動，也就是速度越來越慢，最終停止。這種運動狀態(tài)符合我們現(xiàn)實生活中“逐漸停止”這樣的運動規(guī)律。

相反的運動規(guī)律我們看圖3，漸進（加速運動）：

圖3中，小球速度越來越快，符合我們生活中由慢到快的加速運動，以表示物體從靜止到開始運動的狀態(tài)。

圖3

三張圖時間相同，移動距離相同，但由于運動節(jié)奏不同，帶給人心里上產(chǎn)生的影響不同，所以在做交互動態(tài)效果的時候需要把握住不同的動效產(chǎn)生的心理影響差異，才能得到正確的效果，如做滑塊效果，就需要考慮以上漸入漸出的時間節(jié)奏，以達到最符合用戶心理的交互體驗。

1.2 預備動作（Anticipation）與緩沖動作（Settle Cushion）

預備動作從用戶的現(xiàn)實生活體驗來說并不陌生，最熟悉的是體育競賽裁判發(fā)令之前運動員做出的預備動作。在動畫的課程中，為了學生快速理解，教師一般會將預備動作解釋成與接下來的動作相反方向的動作。用戶在這方面的經(jīng)驗也是非常“豐富”的，所以在交互設(shè)計中能適當添加一些預備動作會使動態(tài)效果更加豐滿，趣味性更足，使用戶產(chǎn)生親切感。在頁面的切換動畫中可以充分應(yīng)用預備動作的概念，如放大之間先做縮小的動畫，配合漸進的時間節(jié)奏，就會做出符合現(xiàn)實生活中物力動力的有趣效果。緩沖動作指的是當一個物體對外界的刺激作反應(yīng)之后會延續(xù)這個動作進行。也就是物體受刺激后還原的過程，緩沖也分順向緩沖和逆向緩沖兩種。②緩沖產(chǎn)生的時間差雖然只有不到一秒的時間，但已足夠為人腦提供反映的長度，為理解APP頁面及層級關(guān)系留有余地。很多年齡偏大的用戶本身已適應(yīng)不了智能終端所顛覆的閱讀習慣，心理上排斥使用APP產(chǎn)品，如果在初次接觸使用時，如果多一些緩沖動作，讓他們理解軟件的使用流程，會保留住這一部分難得的用戶群，大大提升產(chǎn)品的客戶端使用量。

1.3 跟隨效果

美國芝加哥建筑派的領(lǐng)軍人物路易斯·沙利文在 1907年總結(jié)設(shè)計原則時所說的一句名言“形式服從功能（form follows function）”至今仍被設(shè)計師奉為經(jīng)典，交互設(shè)計可以萬變，精髓卻不離其中。跟隨效果在目前的APP交互設(shè)計中出現(xiàn)不多，因為APP以功能為主，交互行為主要起到建立良好的用戶體驗的效果，所以一般的交互動態(tài)效果簡潔短小，不會為了展示效果而去制作效果，充分發(fā)揚了包豪斯密斯·凡·德羅的設(shè)計理念：少即是多（Less is more.）。但在網(wǎng)頁和交互游戲的設(shè)計中，跟隨效果在特定的情況下可以為作品大大提分。

所謂跟隨效果，最初在動畫中指的是毛發(fā)、衣服等物體在角色無意識控制的情況下產(chǎn)生的自然飄動和動作延遲的物理現(xiàn)象。③在交互設(shè)計中，跟隨效果可以使連續(xù)圖標運動具有更豐富的細節(jié)，減輕圖標運動帶來的視覺疲勞感和界面互動的壓抑感。

2 體積感與重量感的體現(xiàn)

2.1 體積感

任何物體的物理屬性中都含有體積這一參數(shù)，計算機生成的平面圖像中也有相應(yīng)的面積，在交互設(shè)計中這些平面圖像的面積通過動畫產(chǎn)生了體積量，所以在程序模擬中設(shè)計師一定要充分利用圖形的體積感充實交互體驗。如安卓團隊設(shè)計的著名的“側(cè)邊抽屜導航”，其中對圖像體積的考慮已經(jīng)相比之前的側(cè)邊欄導航和頂部Tab導航有了很大進步，設(shè)想我們需要設(shè)計一個含有許多頁面和模塊而且不能在同一屏幕內(nèi)完全顯示的應(yīng)用，首先一定想到去設(shè)計一個底部或頂部的Tab導航。這樣導航的體積將占據(jù)很大空間，視覺上也會產(chǎn)生礙眼的結(jié)果，所以安卓團隊嘗試把他們收到側(cè)邊欄里，并形象地賦予它名字為“側(cè)邊抽屜導航”，這就是設(shè)計師對體積優(yōu)化考量的杰出案例。

2.2 重量感

重量是物體的基本屬性，在交互設(shè)計中將無重量的圖形通過計算機模擬使其產(chǎn)生重量可以帶給用戶真實感。試想在生活中同樣高度落下的鉛球、彈跳小球和氣球的運動軌跡是完全不一樣的，所以在移動終端一個普通紅色圓形小球的運動狀態(tài)完全可以憑借生活經(jīng)驗讓用戶產(chǎn)生不一樣的印象，我們可以把小球設(shè)計成漂浮的氣球也可以是充滿活力和人性化性格的彈跳小球。

圖4 Dots游戲界面

Dots是一款風格簡潔，充滿趣味的小游戲，正如它的名字和LOGO所展示的樣子，整款游戲通過不同顏色小點的連接來得分過關(guān)（如圖4）。游戲交互做得卻是精悍到位，輕松愉悅的慣性動態(tài)效果貫穿于每一個小球的運動中，充分利用了物體重量感的特性讓整款游戲從同類APP中脫穎而出。

3 動畫規(guī)律在UI設(shè)計中起到的作用

UI的動態(tài)效果設(shè)計就是要擺脫APP“開袋即食”的粗獷設(shè)定，設(shè)計獨特的動態(tài)效果，創(chuàng)造出引人入勝的交互體驗。在確保UI設(shè)計風格的統(tǒng)一的前提下，表達出APP的鮮明個性，這就是動畫所要完成的任務(wù)。

同時，動畫規(guī)律還保證了那些約定俗成的交互規(guī)則，這樣，就使得動畫效果就具備了“可預期性”，用戶不會有陌生或者不可預料的的感覺，如此一來，UI動效設(shè)計便有助于強化用戶的交互經(jīng)驗的良好感覺，保證APP的用戶使用忠誠度。

動畫規(guī)律還可以通過交互體驗起到安撫用戶的作用，令他們輕松愉悅地享受整個交互過程。動畫效果就應(yīng)該如同導游一樣，為用戶指引方向，防止用戶感到迷茫陌生，并盡最大可能減少額外的文字說明。

注釋

① [英]維克托·邁爾，肯尼斯·庫克耶.大數(shù)據(jù)時代.浙江人民出版社，2013.

② 孫欽玲.淺談動畫制作中緩沖動作的表現(xiàn).大眾文藝，2013（14）.

③ [美]弗蘭克.托馬斯.the.illusion.of.life中文版——生命的幻象.中國青年出版社，2011.