基于APP的交互動畫設計與應用

摘要：

目前國內(nèi)對APP交互動畫的設計理論研究較為孤立和零散，而且局限在對交互動畫技術研究的范疇，缺乏技術與設計的有機結(jié)合。文章對APP交互動畫的設計展開研究，對APP交互動畫的作用、特點、設計技巧、應用范圍等進行系統(tǒng)分析和梳理，并對APP交互動畫的設計原則進行了探討，豐富App交互動畫的設計研究理論。

關鍵詞：

APP 交互動畫 設計

中國分類號：TB47

文獻標識碼：A

文章編號：1003-0069 （2015） 05-0127-02

一 APP與交互式動畫概述

（一）APP的發(fā)展

App （Application）指的是智能手機的第三方應用程序，比較著名的應用商店有蘋果的App Store，谷歌的Google Play Store，微軟的Marketplace等。隨著移動設備的快速崛起，伴隨而來的是App呈現(xiàn)爆發(fā)式增長。2011年以來，人們花費在App上的時間已經(jīng)超過網(wǎng)頁，而且勢頭不減，人們花費在移動App上時間分配，游戲與社交占據(jù)了快80%。在中國最近的5年里，App分發(fā)成為各大互聯(lián)網(wǎng)巨頭的新寵移動，App正對很多行業(yè)如：游戲、藝術品、零售、新聞媒介、旅游等行業(yè)產(chǎn)生深刻變革，據(jù)相關數(shù)據(jù)統(tǒng)計，中國已成為APP增長最快的國家之一（圖1）。

（二）交互式動畫

交互動畫是指動畫在播放時支持事件響應和交互功能。簡單說就是動畫在播放時可以接受某種控制，這種控制可以是用戶的某種操作，如點擊，聲控等，這種交互性提供了觀眾參與和控制動畫播放內(nèi)容的手段，使觀眾由被動接受變?yōu)橹鲃舆x擇。

隨著移動端產(chǎn)品體驗時代的到來，人們對App界面交互設計得越來越高，近幾年，高端機的性能不斷更新?lián)Q代，手機操作系統(tǒng)的升級，使得交互動畫在App產(chǎn)品領域的應用非常普遍，例如蘋果手機，它自身的iOS用戶界面中添加了精美、細微的交互動畫，iPhone在App設計中充分發(fā)揮了動畫在交互易用性方面的優(yōu)勢，它們使得產(chǎn)品應用的體驗更具吸引力更具動態(tài)性、引導性。

（三）App交互動畫的作用

交互性、開放性和沉浸性是交互動畫的三大特性。在App中加入交互動畫能給用戶帶來一種舒適、自然和流暢的感覺，所以，交互動畫逐漸成為了產(chǎn)品與用戶之間的溝通方式，成為產(chǎn)品的肢體語言。在App中適當?shù)慕换赢嬀哂幸韵氯齻€作用。

（1）增強用戶直接操作的感覺

隨著移動設備硬件的不斷發(fā)展，以及其軟件的更新，帶給用戶的選擇也會越來越豐富，用戶在使用產(chǎn)品功能的同時，也追求簡易和暢順的操作，能與產(chǎn)品產(chǎn)生良好的互動。例如iOS操作系統(tǒng)中，移動桌面圖標時會產(chǎn)生震動的動效，這種動效會給用戶傳達不穩(wěn)定的感覺，提示用戶此時在界面上的圖標是可以移動的。又如Google的地圖App，地理位置的標識采用了模擬真實的按圖釘?shù)男ЧＴ谠O計App產(chǎn)品時，能合理地結(jié)合一些物理化的動畫，無論是動畫的時長，還是流暢性都達到了，這些交互動畫的運用就能讓交互更貼近用戶，給用戶提供舒適的體驗。

（2）提高用戶興趣，降低學習成本

通過巧妙的交互動畫讓用戶產(chǎn)生良好的心理感受，進而讓用戶更容易了解產(chǎn)品的功能，有時詳細功能的講解，往往不如一個簡單的交互動畫效果更具吸引力。例如，iOS 7的天氣App，界面以可移動的動畫三維圖像展現(xiàn)了當前的天氣情況。打開天氣App，就可以看見界面整個背景是以動畫模仿當時的天氣狀況。例如，晴轉(zhuǎn)雷雨的天氣，模擬天空的界面圖像從陽光明媚，過渡到烏云逼近隱現(xiàn)，同時還伴隨著動畫效果的電閃雷嗚，動畫效果幾乎模擬了當時真實天氣狀況，又如，不同暗度的夜間動畫圖，不同明度的白天動畫圖，甚至還包括了云彩明亮度、厚度，或下雪等天氣狀況，這樣用戶通過這些模擬天氣的動效，快速且形象地了解到了天氣的變化。

（3）強化品牌一致性

很多App產(chǎn)品都把交互動畫作為傳達品牌個性和內(nèi)涵的重要途徑，我們不難發(fā)現(xiàn)很多熱門App產(chǎn)品都有非常出色的動效，獨特的交互動效已經(jīng)成為了App的標志。不同App動效可以傳達滑稽或者是嚴肅的感覺，也可以是機械或柔和的感覺，App產(chǎn)品選擇恰當?shù)慕换有Ь湍馨哑放粕钌钣≡谟脩裟X中。簡單說，使用恰當?shù)膭有В涂梢栽黾赢a(chǎn)品的識別性，可以幫助樹立品牌個性，可以為用戶帶來愉悅的體驗，例如，Path是移動終端的社交類型App，在單一平臺下創(chuàng)建統(tǒng)一的交互體驗是Path的優(yōu)勢，給人親和，有趣的印象彈出層，界面滑動，分屏，返回，前進等，這些交互動畫無不流露出品牌的特性與情感一個標志性的動畫效果，所以優(yōu)秀的交互動畫往往也會是一個產(chǎn)品的代言。

二 交互動畫的設計技巧

交互設計中，要制作一個優(yōu)秀的動畫，可以要從以下三個層面進行認識和思考。

（一）掌握交互動畫的節(jié)奏和幅度

做視覺感受順暢的交互動畫，不管是動態(tài)、文字按鈕還是動態(tài)圖像，最重要的兩點就是時間（Timing）和節(jié)奏（Spacing），需要注意的是盡量讓動畫符合人的視覺經(jīng)驗。例如，緩動的效果，通常上自然界較為柔和動作的表現(xiàn)為慢入和慢出，在錘子ROM的UI中普遍使用了這種動畫手段，如時鐘切換的時候指針位移動畫是最為明顯的。又如，拉伸和擠壓，預備動作，逆向緩沖等這些都屬于技巧的掌握。尤其是做UI的動效，只有掌握論文這些技巧才能做出不錯的交互動畫，至少能做出及格的動效。掌握技巧不難，因為技巧都是比較公式化的，多模仿多借鑒好作品的效果，就可以做出較好的交互動效。

（二）闡述清晰，精確引導

APP的界面空間受限于手機屏幕的大小，許多信息和圖像要很好地規(guī)劃在方寸之間，一般依據(jù)信息的重要性被分為不同的等級，需要多次進入和返回等操作，而動畫是可以清晰闡述產(chǎn)品功能間的切換過程的，利用交互動畫增強引導性，是降低軟件操作難度和提升用戶體驗的好方法?！掠腥N比較常用的辦法。

（1）動態(tài)聚焦

通過動態(tài)化的處理引導用戶聚焦界面的關鍵部位，以使交互體驗更加流暢。青蛙的眼睛能夠快速捕捉移動中的物體，人眼也具有相似特征，運動中的物體總能引起下意識的關注。如圖（2）所示動效，屏幕上方的數(shù)字不是直接顯示一個數(shù)值，而是從零迅速遞增到特定的數(shù)值，特意展現(xiàn)一個交互動態(tài)的效果，目的就是為了吸引用戶的目光，起到聚焦的作用。國內(nèi)的支付寶錢包APP也利用了此類動效。

（2）示意過渡

過渡動效就是給界面的變化加上流暢的過渡，目的是引導用戶理解到底發(fā)生了什么，而不會使其不知所措。如錘子Rom里，點擊一個App圖標時，整個圖標會放大并翻轉(zhuǎn)著來到用戶眼前，讓App方格背面成為這個App的界面，就是在告訴用戶，你現(xiàn)在用的是這個App，這個App還在你面前，同樣結(jié)束應用的時候也是轉(zhuǎn)回去，暗示用戶剛剛的頁面都回到這個icon方格里了。

（3）空間轉(zhuǎn)場

轉(zhuǎn)場動效是設計師普遍重視的一種特效，它的作用也是引導用戶，讓用戶更好地理解頁面跳轉(zhuǎn)，知道自己身在何方。iOS7桌面圖標組的進入和退出一則動效就是一個漂亮的轉(zhuǎn)場動效，為了避免兩個頁面之間的跳轉(zhuǎn)過于生硬，利用動效填補上了頁面跳轉(zhuǎn)的中間過程，使得體驗更加流暢和自然。

三 交互動畫設計法則

一個優(yōu)秀的App交互動畫不僅僅是炫，而且要實用，有的還要考慮手機的性能等因素，所以想做一個好的交互不并容易。

（一）謹慎地增加動畫，傳達有價值的信息

動畫的使用猶如雙刃劍，順其勢可披荊斬棘，塑造良好交互的App產(chǎn)品，如使用不當或是濫用，則往往適得其反。過多無理由的動畫會阻礙應用的流暢性，降低性能，還會分散用戶在任務中的注意力。謹慎地增加動畫，特別是在那些不能提供沉浸性體驗的應用中。最重要的是要有目的和限制性地使用運動效果和UI組件中的動態(tài)行為，并確保對結(jié)果進行測試。過度使用動態(tài)則會使App交互和看起來很迷惑，信息層級關系很難控制。真正優(yōu)秀的動效不是只有漂亮外表的花瓶，還得具備優(yōu)化交互和提升體驗的作用。

（二）簡化界面信息和交互層級

利用動效簡化界面信息和交互層級可以降低操作難度和提升用戶體驗，目前App以及wap站的視覺效果絢麗完美的同時，同時帶有很多的復雜視覺元素，處理好每個視覺元素的關系，以及有效地傳達用戶操作后元素之間的關系變化，就需要設計交互動畫，闡述其變化的邏輯與過程，讓操作更合理，更流暢。

例如：例如顯示和隱藏二級操作項，利用動效可以有效控制界面中的信息隱藏，當重復進行某些操作后隱藏的內(nèi)容會動態(tài)展開，從而達到簡化初始界面的目的，使界面大氣簡潔。又如：使按鈕動效化能夠讓界面重要信息動態(tài)浮現(xiàn)在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁面跳轉(zhuǎn)帶來的干擾，使交互體驗更加流暢。

（三）使用風格類型一致的動畫。

為了使動畫的風格保持一致，動效設計師在設計交互動畫的時候與內(nèi)置動畫保持統(tǒng)一。也就是說，設計師設計的動畫應該切合內(nèi)置iOS應用的動畫，因為用戶習慣于內(nèi)置iOS應用的精細動畫。我們要避免觸及系統(tǒng)的標準行為，盡量尊重用戶習慣。在iPhone中，動畫式交互反饋方式是標準物理法則的風格，比如窗口內(nèi)容的上下卷滾、元素的出現(xiàn)和消失，以及內(nèi)容的放大、縮小等。但當你的動畫違背物理定律和自然法則的時候，用戶會感覺到非常不適應。

結(jié)語

APP交互動畫化顯然已成為移動互聯(lián)網(wǎng)產(chǎn)品界面設計的新趨勢，如何設計出有趣且吸引入的交互動畫已成為設計師們的新課題。不同的產(chǎn)品適合不同類型的交互動畫，有些產(chǎn)品，如游戲適合炫酷的動效，有些則不適合。切記不要動畫而動畫，而應該將其視為提升用戶體驗的新方法。