吳曉煒

摘要： 隨著移動(dòng)互聯(lián)網(wǎng)公司APP產(chǎn)品的不斷普及，使用者對(duì)APP應(yīng)用程序在移動(dòng)界面設(shè)計(jì)方面的要求越來越高。在這個(gè)趨勢下，當(dāng)今主流的APP產(chǎn)品中均大量地使用MG動(dòng)畫來增進(jìn)用戶體驗(yàn)和強(qiáng)化界面的視覺表現(xiàn)力。本文對(duì)MG動(dòng)畫設(shè)計(jì)的原理以及它在移動(dòng)界面設(shè)計(jì)中的基本表現(xiàn)方式進(jìn)行了簡要的分析。

關(guān)鍵詞：APP產(chǎn)品；MG動(dòng)畫設(shè)計(jì)；移動(dòng)界面設(shè)計(jì)

近年來，移動(dòng)互聯(lián)網(wǎng)APP應(yīng)用類軟件發(fā)展得極為成功，在為用戶提供了方便的同時(shí)也成為了商家和廣告主聚焦的熱門地帶。隨著APP產(chǎn)品在智能手機(jī)和平板電腦等移動(dòng)終端上取得了統(tǒng)治性的市場地位后，其間的競爭也日趨激烈。APP移動(dòng)客戶端的界面設(shè)計(jì)受到了互聯(lián)網(wǎng)企業(yè)的高度重視。 想成為有競爭力的APP軟件，用戶體驗(yàn)是第一位的。 傳統(tǒng)的平面設(shè)計(jì)準(zhǔn)則下構(gòu)建的靜態(tài)界面逐漸不能在滿足人們?nèi)缃竦囊曈X需求。于是，一種新的視覺藝術(shù)表現(xiàn)形式：動(dòng)態(tài)圖形設(shè)計(jì)Motion Graphic Design， 簡稱MG動(dòng)畫設(shè)計(jì)，迅速地脫穎而出，引發(fā)了移動(dòng)界面設(shè)計(jì)領(lǐng)域的新潮流。那么到底什么是MG動(dòng)畫設(shè)計(jì)？它為UI界面帶來了哪些關(guān)鍵性的作用？

首先，MG動(dòng)畫設(shè)計(jì)并不能說是全新的視覺藝術(shù)，它其實(shí)是動(dòng)畫設(shè)計(jì)與平面設(shè)計(jì)相結(jié)合的產(chǎn)物。 UI界面最初是類似于網(wǎng)頁頁面之間跳轉(zhuǎn)切換的原理來設(shè)計(jì)的。設(shè)計(jì)師很重視每個(gè)頁面的平面視覺設(shè)計(jì)效果和頁面信息處理，但一直忽略了頁面跳轉(zhuǎn)的設(shè)計(jì)。頁面的跳轉(zhuǎn)都是直接的硬切換，類似于電影的剪輯手法。不過，電影剪輯中，場景和角色動(dòng)作為觀眾提供了前因后果等信息，而眾多頁面的直接跳轉(zhuǎn)并不能讓用戶感受到界面與界面之間的關(guān)系。用戶在界面突然變化時(shí)會(huì)覺得困惑和不理解，這就是網(wǎng)頁類界面最初在邏輯關(guān)系設(shè)計(jì)的缺陷。

讓用戶輕松理解頁面之間的關(guān)系其實(shí)是非常重要的，這直接關(guān)系到操作效率。雖然用戶可以通過經(jīng)驗(yàn)來克服這些問題，最終習(xí)慣和學(xué)會(huì)有效地與這款界面進(jìn)行交互，但是突然的變化始終會(huì)讓用戶遲疑，界面體驗(yàn)就一直很糟糕，往往會(huì)影響用戶的進(jìn)一步行為，這對(duì)于APP產(chǎn)品來說是致命的。

因此，設(shè)計(jì)師開始將界面之間的關(guān)系交給MG動(dòng)畫來處理，做成圖形動(dòng)畫來表達(dá)。動(dòng)畫很容易就能看懂，即使再夸張的跳轉(zhuǎn)也沒問題，因?yàn)閯?dòng)畫擅長于提供足夠的視覺信息讓觀眾理解，利用真實(shí)的動(dòng)作來展示對(duì)象的物理變形。這樣一來，MG設(shè)計(jì)就打造出了界面之間必要的視覺線索，讓用戶理解某個(gè)動(dòng)作前后發(fā)生了什么，感覺每個(gè)行為都到有充分的邏輯。

第二點(diǎn)，MG動(dòng)畫設(shè)計(jì)成功地將傳統(tǒng)動(dòng)畫的經(jīng)典表現(xiàn)方式添加到平面版式設(shè)計(jì)語言中，使UI界面呈現(xiàn)出多維的動(dòng)態(tài)設(shè)計(jì)趨勢。

迪斯尼動(dòng)畫師編著的《Animation： The Illusion of Life》中總結(jié)了動(dòng)畫表現(xiàn)的十二法則，如今這些法則已被MG設(shè)計(jì)師應(yīng)用到到界面設(shè)計(jì)之中。其中最有代表性的表現(xiàn)方式為擬物化，夸張和增強(qiáng)現(xiàn)實(shí)。

1. 擬物化，將UI中的元素當(dāng)作真實(shí)獨(dú)立，有物理屬性的的物體。在動(dòng)畫片中，人物和元素都是真實(shí)的，有重量的物體。他們每次走動(dòng)都好像是生活在真實(shí)世界中一樣，這種感覺非常真實(shí)。這種擬物感不僅僅是填充一個(gè)像素區(qū)域那么簡單，這些物件的運(yùn)動(dòng)是通過增加慣性來實(shí)現(xiàn)的。動(dòng)畫的所有的原則，例如：慢進(jìn)慢出，跟隨，和弧形運(yùn)動(dòng)，其隨后所有的討論，都是基于這個(gè)原則，他們是有質(zhì)量的物體。把UI界面中的元素變成獨(dú)立的，區(qū)別于背景的物體，并讓其擁有動(dòng)作慣性是非常重要的，用戶可以連續(xù)并穩(wěn)定的操作他們。

2.夸張，通過夸張的手法，往往可以讓設(shè)計(jì)達(dá)到事倍功半的效果。經(jīng)過夸張手法處理的動(dòng)畫表現(xiàn)的更現(xiàn)實(shí)?？鋸埖谋憩F(xiàn)手法可以突出某些受到忽視的細(xì)節(jié)。在動(dòng)畫中，動(dòng)畫師可以通過夸大某個(gè)細(xì)節(jié)來引起更多的注意力?？赡苓@些細(xì)節(jié)原本很難背察覺。比如當(dāng)用戶的鼠標(biāo)指針移動(dòng)到某一功能時(shí)，icon會(huì)跳動(dòng)一下，提醒用戶點(diǎn)擊之后會(huì)有變化。這樣，可以讓用戶更容易理解界面。他們不斷的為用戶解釋或者暗示界面之間的繼承關(guān)系。如果沒有這樣的線索，用戶會(huì)非常難以理解這些界面。

3. 增強(qiáng)現(xiàn)實(shí)，所有的動(dòng)畫技術(shù)都會(huì)增強(qiáng)某個(gè)現(xiàn)實(shí)，用來加強(qiáng)動(dòng)畫動(dòng)作與觀眾之間的關(guān)系。 MG動(dòng)畫設(shè)計(jì)也是利用這點(diǎn)來增加UI界面與使用者之間的互動(dòng)關(guān)系。例如UI元素快速的進(jìn)入屏幕，然后迅速做出一個(gè)減速再到達(dá)目的地。這種方式有助于讓元素在移動(dòng)中看起來更有物理質(zhì)量。此外，緩進(jìn)緩出效果出現(xiàn)在某一個(gè)快速動(dòng)作之前，有助于觀看時(shí)更加舒適。如果沒有它，UI元素的移動(dòng)會(huì)感覺很假，類似緩進(jìn)緩出這種細(xì)節(jié)效果可以極大的影響一個(gè)界面元素的視覺質(zhì)量。增強(qiáng)現(xiàn)實(shí)的最后一個(gè)方法是跟隨運(yùn)動(dòng)。 在現(xiàn)實(shí)世界中，當(dāng)主物體發(fā)成運(yùn)動(dòng)時(shí)，與其關(guān)聯(lián)的物體會(huì)做出跟隨運(yùn)動(dòng)。 動(dòng)畫師們將這種觀察使用在動(dòng)畫中，當(dāng)動(dòng)畫中的主體物停止后，其他部分細(xì)節(jié)依然可以運(yùn)動(dòng)。包括了身體，衣服，和一些局部的動(dòng)作處理，讓其動(dòng)效變的更加極致。在MG動(dòng)畫中，移動(dòng)APP圖標(biāo)位置是典型的跟隨運(yùn)動(dòng)效果，當(dāng)APP插入一個(gè)新位置時(shí)，其他APP位置跟著位移。

MG設(shè)計(jì)源于動(dòng)畫領(lǐng)域，側(cè)重于娛樂，而傳統(tǒng)界面設(shè)計(jì)側(cè)重于信息的交互式傳遞。如果將將兩者的優(yōu)勢相結(jié)合，由獨(dú)特而流暢的動(dòng)態(tài)圖形動(dòng)畫來提升嚴(yán)謹(jǐn)?shù)幕?dòng)體驗(yàn)，構(gòu)建出用戶與界面之間的獨(dú)特的情感關(guān)系，使人也更容易理解界面，用戶更樂于參與其中。