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

黃鶴　駱媛

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

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

中圖分類(lèi)號(hào)：J218 文獻(xiàn)標(biāo)識(shí)碼：A DOI：10.16400/j.cnki.kjdks.2015.01.024

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

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

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

1.1 時(shí)間與空間（Timing & Spacing）

圖1

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

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

我們?cè)倏磮D2，漸出（減速運(yùn)動(dòng)）：

圖2

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

相反的運(yùn)動(dòng)規(guī)律我們看圖3，漸進(jìn)（加速運(yùn)動(dòng)）：

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

圖3

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

1.2 預(yù)備動(dòng)作（Anticipation）與緩沖動(dòng)作（Settle Cushion）

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

1.3 跟隨效果

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

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

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

2.1 體積感

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

2.2 重量感

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

圖4 Dots游戲界面

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

3 動(dòng)畫(huà)規(guī)律在UI設(shè)計(jì)中起到的作用

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

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

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

注釋

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

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

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