廣州番禺職業技術學院 丘美玲 胡耀民
摘要:
目前國內對APP交互動畫的設計理論研究較為孤立和零散，而且局限在對交互動畫技術研究的范疇，缺乏技術與設計的有機結合。文章對APP交互動畫的設計展開研究， 對APP交互動畫的作用、特點、設計技巧、應用范圍等進行系統分析和梳理，并對APP交互動畫的設計原則進行了探討，豐富App交互動畫的設計研究理論。
關鍵詞：
APP 交互動畫 設計
Abstract：
At present, the domestic research on design theory of APP interactive animation is isolated and fragmented, and is limited to researching on the technique of the interactive animation, and lacks organic combination of technology and design. In this paper, APP interactive animation design is studied, and the roles of APP interactive animations, features, design tips,applications and other systems are analyzed and combed, and APP interactive animation design principles are discussed, and thus interactive animation APP Design theory is enriched.
Keywords:
APP Interactive animation Design
中圖分類號： TB47
文獻標識碼： A
文章編號： 1003-0069（2015）05-0127-02
一 APP與交互式動畫概述
（一）APP的發展
App（ Application）指的是智能手機的第三方應用程序，比較著名的應用商店有蘋果的App Store，谷歌的Google Play Store，微軟的Marketplace等。隨著移動設備的快速崛起，伴隨而來的是App呈現爆發式增長。 2011年以來，人們花費在App上的時間已經超過網頁，而且勢頭不減，人們花費在移動App上時間分配，游戲與社交占據了快80%。在中國最近的5年里， App分發成為各大互聯網巨頭的新寵移動， App正對很多行業如：游戲、藝術品、零售、新聞媒介、旅游等行業產生深刻變革[1]，據相關數據統計，中國已成為APP增長最快的國家之一（圖1）。
（二）交互式動畫
交互動畫是指動畫在播放時支持事件響應和交互功能。簡單說就是動畫在播放時可以接受某種控制，這種控制可以是用戶的某種操作，如點擊，聲控等，這種交互性提供了觀眾參與和控制動畫播放內容的手段，使觀眾由被動接受變為主動選擇[2]。
隨著移動端產品體驗時代的到來，人們對App界面交互設計得越來越高，近幾年，高端機的性能不斷更新換代，手機操作系統的升級，使得交互動畫在App產品領域的應用非常普遍，例如蘋果手機，它自身的iOS用戶界面中添加了精美、細微的交互動畫， iPhone在App設計中充分發揮了動畫在交互易用性方面的優勢，它們使得產品應用的體驗更具吸引力更具動態性、引導性。
（三）App交互動畫的作用
交互性、開放性和沉浸性是交互動畫的三大特性[3]。在App中加入交互動畫能給用戶帶來一種舒適、自然和流暢的感覺，所以，交互動畫逐漸成為了產品與用戶之間的溝通方式，成為產品的肢體語言。在App中適當的交互動畫具有以下三個作用。
（ 1）增強用戶直接操作的感覺
隨著移動設備硬件的不斷發展，以及其軟件的更新，帶給用戶的選擇也會越來越豐富，用戶在使用產品功能的同時，也追求簡易和暢順的操作，能與產品產生良好的互動。例如iOS操作系統中，移動桌面圖標時會產生震動的動效，這種動效會給用戶傳達不穩定的感覺，提示用戶此時在界面上的圖標是可以移動的。又如Google的地圖App，地理位置的標識采用了模擬真實的按圖釘的效果。在設計App產品時，能合理地結合一些物理化的動畫，無論是動畫的時長，還是流暢性都達到了，這些交互動畫的運用就能讓交互更貼近用戶，給用戶提供舒適的體驗。
（ 2）提高用戶興趣，降低學習成本
通過巧妙的交互動畫讓用戶產生良好的心理感受，進而讓用戶更容易了解產品的功能，有時詳細功能的講解，往往不如一個簡單的交互動畫效果更具吸引力。例如， iOS 7的天氣App，界面以可移動的動畫三維圖像展現了當前的天氣情況。打開天氣App，就可以看見界面整個背景是以動畫模仿當時的天氣狀況。例如，晴轉雷雨的天氣，模擬天空的界面圖像從陽光明媚，過渡到烏云逼近隱現，同時還伴隨著動畫效果的電閃雷鳴，動畫效果幾乎模擬了當時真實天氣狀況，又如，不同暗度的夜間動畫圖，不同明度的白天動畫圖，甚至還包括了云彩明亮度、厚度，或下雪等天氣狀況，這樣用戶通過這些模擬天氣的動效，快速且形象地了解到了天氣的變化。
（ 3）強化品牌一致性
很多App產品都把交互動畫作為傳達品牌個性和內涵的重要途徑，我們不難發現很多熱門App產品都有非常出色的動效，獨特的交互動效已經成為了App的標志。不同App動效可以傳達滑稽或者是嚴肅的感覺，也可以是機械或柔和的感覺， App產品選擇恰當的交互動效就能把品牌深深印在用戶腦中。簡單說，使用恰當的動效，就可以增加產品的識別性，可以幫助樹立品牌個性，可以為用戶帶來愉悅的體驗，例如， Path是移動終端的社交類型App，在單一平臺下創建統一的交互體驗是Path的優勢，給人親和，有趣的印象彈出層，界面滑動，分屏，返回，前進等，這些交互動畫無不流露出品牌的特性與情感一個標志性的動畫效果，所以優秀的交互動畫往往也會是一個產品的代言。
二 交互動畫的設計技巧
交互設計中，要制作一個優秀的動畫，可以要從以下三個層面進行認識和思考。
（一）掌握交互動畫的節奏和幅度
做視覺感受順暢的交互動畫，不管是動態、文字按鈕還是動態圖像，最重要的兩點就是時間（ Timing）和節奏（ Spacing），需要注意的是盡量讓動畫符合人的視覺經驗[4]。例如，緩動的效果,通常上自然界較為柔和動作的表現為慢入和慢出，在錘子ROM的UI中普遍使用了這種動畫手段，如時鐘切換的時候指針位移動畫是最為明顯的。又如，拉伸和擠壓，預備動作，逆向緩沖等這些都屬于技巧的掌握。尤其是做UI的動效，只有掌握論文這些技巧才能做出不錯的交互動畫，至少能做出及格的動效。掌握技巧不難，因為技巧都是比較公式化的，多模仿多借鑒好作品的效果，就可以做出較好的交互動效。
（二）闡述清晰，精確引導
APP的界面空間受限于手機屏幕的大小，許多信息和圖像要很好地規劃在方寸之間，一般依據信息的重要性被分為不同的等級，需要多次進入和返回等操作，而動畫是可以清晰闡述產品功能間的切換過程的利用交互動畫增強引導性，是降低軟件操作難度和提升用戶體驗的好方法。一下有三種比較常用的辦法。
（ 1）動態聚焦
通過動態化的處理引導用戶聚焦界面的關鍵部位，以使交互體驗更加流暢。青蛙的眼睛能夠快速捕捉移動中的物體，人眼也具有相似特征，運動中的物體總能引起下意識的關注。如圖（ 2）所示動效，屏幕上方的數字不是直接顯示一個數值，而是從零迅速遞增到特定的數值，特意展現一個交互動態的效果，目的就是為了吸引用戶的目光，起到聚焦的作用。國內的支付寶錢包APP也利用了此類動效。
（ 2）示意過渡
過渡動效就是給界面的變化加上流暢的過渡，目的是引導用戶理解到底發生了什么，而不會使其不知所措。如錘子Rom里，點擊一個App圖標時，整個圖標會放大并翻轉著來到用戶眼前，讓App方格背面成為這個App的界面，就是在告訴用戶，你現在用的是這個App，這個App還在你面前，同樣結束應用的時候也是轉回去，暗示用戶剛剛的頁面都回到這個icon方格里了。
（ 3）空間轉場
轉場動效是設計師普遍重視的一種特效，它的作用也是引導用戶，讓用戶更好地理解頁面跳轉，知道自己身在何方。 iOS7桌面圖標組的進入和退出一則動效就是一個漂亮的轉場動效，為了避免兩個頁面之間的跳轉過于生硬，利用動效填補上了頁面跳轉的中間過程，使得體驗更加流暢和自然。
三 交互動畫設計法則
一個優秀的App交互動畫不僅僅是炫，而且要實用，有的還要考慮手機的性能等因素，所以想做一個好的交互不并容易。
（一）謹慎地增加動畫，傳達有價值的信息
動畫的使用猶如雙刃劍，順其勢可披荊斬棘，塑造良好交互的App產品，如使用不當或是濫用，則往往適得其反。過多無理由的動畫會阻礙應用的流暢性，降低性能，還會分散用戶在任務中的注意力。謹慎地增加動畫，特別是在那些不能提供沉浸性體驗的應用中。最重要的是要有目的和限制性地使用運動效果和UI組件中的動態行為，并確保對結果進行測試。過度使用動態則會使App交互和看起來很迷惑，信息層級關系很難控制。真正優秀的動效不是只有漂亮外表的花瓶，還得具備優化交互和提升體驗的作用。
（二）簡化界面信息和交互層級
利用動效簡化界面信息和交互層級可以降低操作難度和提升用戶體驗，目前App以及wap站的視覺效果絢麗完美的同時，同時帶有很多的復雜視覺元素，處理好每個視覺元素的關系，以及有效地傳達用戶操作后元素之間的關系變化，就需要設計交互動畫，闡述其變化的邏輯與過程，讓操作更合理，更流暢。
例如：例如顯示和隱藏二級操作項，利用動效可以有效控制界面中的信息隱藏，當重復進行某些操作后隱藏的內容會動態展開，從而達到簡化初始界面的目的，使界面大氣簡潔。又如：使按鈕動效化能夠讓界面重要信息動態浮現在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁面跳轉帶來的干擾，使交互體驗更加流暢。
（三）使用風格類型一致的動畫。
為了使動畫的風格保持一致，動效設計師在設計交互動畫的時候與內置動畫保持統一。也就是說，設計師設計的動畫應該切合內置iOS應用的動畫,因為用戶習慣于內置iOS 應用的精細動畫。我們要避免觸及系統的標準行為，盡量尊重用戶習慣[5]。在iPhone中，動畫式交互反饋方式是標準物理法則的風格，比如窗口內容的上下卷滾、元素的出現和消失，以及內容的放大、縮小等。但當你的動畫違背物理定律和自然法則的時候，用戶會感覺到非常不適應。
結語
APP交互動畫化顯然已成為移動互聯網產品界面設計的新趨勢，如何設計出有趣且吸引人的交互動畫已成為設計師們的新課題。不同的產品適合不同類型的交互動畫，有些產品，如游戲適合炫酷的動效，有些則不適合。切記不要動畫而動畫，而應該將其視為提升用戶體驗的新方法。
廣東省高等教育教學改革工程項目：基于中高職銜接的計算機類專業職業教育等級證書體系的研究與實踐 項目編號： 20130101030。
參考文獻
[1] 中文互聯網數據研究資訊中心http://www.199it.com/newly 2011.6
[2] 劉永翔.基于產品可用性的人機界面交互設計研究[J].包裝工程,2008,29(4):81-83
[3] 谷時雨普《多媒體藝術》 [M]．文化藝術出版社.北京2005
[4] (英)艾爾塞克爾,洪芳譯《視覺游戲》 [M]．海南出版社三環出版社,2004
[5] 呂悅寧,譚坤,董國萍:界面藝術設計》 [M]．，高等教育出版社,22010年