MG動畫設計在移動界面中的表現方式

吳曉煒

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

關鍵詞：APP產品；MG動畫設計；移動界面設計

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

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

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

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

第二點，MG動畫設計成功地將傳統動畫的經典表現方式添加到平面版式設計語言中，使UI界面呈現出多維的動態設計趨勢。

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

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

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

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

MG設計源于動畫領域，側重于娛樂，而傳統界面設計側重于信息的交互式傳遞。如果將將兩者的優勢相結合，由獨特而流暢的動態圖形動畫來提升嚴謹的互動體驗，構建出用戶與界面之間的獨特的情感關系，使人也更容易理解界面，用戶更樂于參與其中。