MG動畫設(shè)計在移動界面中的表現(xiàn)方式

吳曉煒

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

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

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

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

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

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

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

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

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

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

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

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