廣州番禺職業(yè)技術(shù)學(xué)院 丘美玲 胡耀民

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

關(guān)鍵詞：

APP 交互動(dòng)畫 設(shè)計(jì)

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

中圖分類號(hào)： TB47
文獻(xiàn)標(biāo)識(shí)碼： A 
文章編號(hào)： 1003-0069（2015）05-0127-02

一 APP與交互式動(dòng)畫概述
   （一）APP的發(fā)展
    App（ Application）指的是智能手機(jī)的第三方應(yīng)用程序，比較著名的應(yīng)用商店有蘋果的App Store，谷歌的Google Play Store，微軟的Marketplace等。隨著移動(dòng)設(shè)備的快速崛起，伴隨而來的是App呈現(xiàn)爆發(fā)式增長。 2011年以來，人們花費(fèi)在App上的時(shí)間已經(jīng)超過網(wǎng)頁，而且勢頭不減，人們花費(fèi)在移動(dòng)App上時(shí)間分配，游戲與社交占據(jù)了快80%。在中國最近的5年里， App分發(fā)成為各大互聯(lián)網(wǎng)巨頭的新寵移動(dòng)， App正對(duì)很多行業(yè)如：游戲、藝術(shù)品、零售、新聞媒介、旅游等行業(yè)產(chǎn)生深刻變革[1]，據(jù)相關(guān)數(shù)據(jù)統(tǒng)計(jì)，中國已成為APP增長最快的國家之一（圖1）。
   （二）交互式動(dòng)畫
    交互動(dòng)畫是指動(dòng)畫在播放時(shí)支持事件響應(yīng)和交互功能。簡單說就是動(dòng)畫在播放時(shí)可以接受某種控制，這種控制可以是用戶的某種操作，如點(diǎn)擊，聲控等，這種交互性提供了觀眾參與和控制動(dòng)畫播放內(nèi)容的手段，使觀眾由被動(dòng)接受變?yōu)橹鲃?dòng)選擇[2]。
    隨著移動(dòng)端產(chǎn)品體驗(yàn)時(shí)代的到來，人們對(duì)App界面交互設(shè)計(jì)得越來越高，近幾年，高端機(jī)的性能不斷更新?lián)Q代，手機(jī)操作系統(tǒng)的升級(jí)，使得交互動(dòng)畫在App產(chǎn)品領(lǐng)域的應(yīng)用非常普遍，例如蘋果手機(jī)，它自身的iOS用戶界面中添加了精美、細(xì)微的交互動(dòng)畫， iPhone在App設(shè)計(jì)中充分發(fā)揮了動(dòng)畫在交互易用性方面的優(yōu)勢，它們使得產(chǎn)品應(yīng)用的體驗(yàn)更具吸引力更具動(dòng)態(tài)性、引導(dǎo)性。
   （三）App交互動(dòng)畫的作用
    交互性、開放性和沉浸性是交互動(dòng)畫的三大特性[3]。在App中加入交互動(dòng)畫能給用戶帶來一種舒適、自然和流暢的感覺，所以，交互動(dòng)畫逐漸成為了產(chǎn)品與用戶之間的溝通方式，成為產(chǎn)品的肢體語言。在App中適當(dāng)?shù)慕换?dòng)畫具有以下三個(gè)作用。
   （ 1）增強(qiáng)用戶直接操作的感覺

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

   （ 2）提高用戶興趣，降低學(xué)習(xí)成本
    通過巧妙的交互動(dòng)畫讓用戶產(chǎn)生良好的心理感受，進(jìn)而讓用戶更容易了解產(chǎn)品的功能，有時(shí)詳細(xì)功能的講解，往往不如一個(gè)簡單的交互動(dòng)畫效果更具吸引力。例如， iOS 7的天氣App，界面以可移動(dòng)的動(dòng)畫三維圖像展現(xiàn)了當(dāng)前的天氣情況。打開天氣App，就可以看見界面整個(gè)背景是以動(dòng)畫模仿當(dāng)時(shí)的天氣狀況。例如，晴轉(zhuǎn)雷雨的天氣，模擬天空的界面圖像從陽光明媚，過渡到烏云逼近隱現(xiàn)，同時(shí)還伴隨著動(dòng)畫效果的電閃雷鳴，動(dòng)畫效果幾乎模擬了當(dāng)時(shí)真實(shí)天氣狀況，又如，不同暗度的夜間動(dòng)畫圖，不同明度的白天動(dòng)畫圖，甚至還包括了云彩明亮度、厚度，或下雪等天氣狀況，這樣用戶通過這些模擬天氣的動(dòng)效，快速且形象地了解到了天氣的變化。
   （ 3）強(qiáng)化品牌一致性
    很多App產(chǎn)品都把交互動(dòng)畫作為傳達(dá)品牌個(gè)性和內(nèi)涵的重要途徑，我們不難發(fā)現(xiàn)很多熱門App產(chǎn)品都有非常出色的動(dòng)效，獨(dú)特的交互動(dòng)效已經(jīng)成為了App的標(biāo)志。不同App動(dòng)效可以傳達(dá)滑稽或者是嚴(yán)肅的感覺，也可以是機(jī)械或柔和的感覺， App產(chǎn)品選擇恰當(dāng)?shù)慕换?dòng)效就能把品牌深深印在用戶腦中。簡單說，使用恰當(dāng)?shù)膭?dòng)效，就可以增加產(chǎn)品的識(shí)別性，可以幫助樹立品牌個(gè)性，可以為用戶帶來愉悅的體驗(yàn)，例如， Path是移動(dòng)終端的社交類型App，在單一平臺(tái)下創(chuàng)建統(tǒng)一的交互體驗(yàn)是Path的優(yōu)勢，給人親和，有趣的印象彈出層，界面滑動(dòng)，分屏，返回，前進(jìn)等，這些交互動(dòng)畫無不流露出品牌的特性與情感一個(gè)標(biāo)志性的動(dòng)畫效果，所以優(yōu)秀的交互動(dòng)畫往往也會(huì)是一個(gè)產(chǎn)品的代言。

二 交互動(dòng)畫的設(shè)計(jì)技巧
    交互設(shè)計(jì)中，要制作一個(gè)優(yōu)秀的動(dòng)畫，可以要從以下三個(gè)層面進(jìn)行認(rèn)識(shí)和思考。
   （一）掌握交互動(dòng)畫的節(jié)奏和幅度
    做視覺感受順暢的交互動(dòng)畫，不管是動(dòng)態(tài)、文字按鈕還是動(dòng)態(tài)圖像，最重要的兩點(diǎn)就是時(shí)間（ Timing）和節(jié)奏（ Spacing），需要注意的是盡量讓動(dòng)畫符合人的視覺經(jīng)驗(yàn)[4]。例如，緩動(dòng)的效果,通常上自然界較為柔和動(dòng)作的表現(xiàn)為慢入和慢出，在錘子ROM的UI中普遍使用了這種動(dòng)畫手段，如時(shí)鐘切換的時(shí)候指針位移動(dòng)畫是最為明顯的。又如，拉伸和擠壓，預(yù)備動(dòng)作，逆向緩沖等這些都屬于技巧的掌握。尤其是做UI的動(dòng)效，只有掌握論文這些技巧才能做出不錯(cuò)的交互動(dòng)畫，至少能做出及格的動(dòng)效。掌握技巧不難，因?yàn)榧记啥际潜容^公式化的，多模仿多借鑒好作品的效果，就可以做出較好的交互動(dòng)效。
    （二）闡述清晰，精確引導(dǎo)
    APP的界面空間受限于手機(jī)屏幕的大小，許多信息和圖像要很好地規(guī)劃在方寸之間，一般依據(jù)信息的重要性被分為不同的等級(jí)，需要多次進(jìn)入和返回等操作，而動(dòng)畫是可以清晰闡述產(chǎn)品功能間的切換過程的利用交互動(dòng)畫增強(qiáng)引導(dǎo)性，是降低軟件操作難度和提升用戶體驗(yàn)的好方法。一下有三種比較常用的辦法。
    （ 1）動(dòng)態(tài)聚焦
    通過動(dòng)態(tài)化的處理引導(dǎo)用戶聚焦界面的關(guān)鍵部位，以使交互體驗(yàn)更加流暢。青蛙的眼睛能夠快速捕捉移動(dòng)中的物體，人眼也具有相似特征，運(yùn)動(dòng)中的物體總能引起下意識(shí)的關(guān)注。如圖（ 2）所示動(dòng)效，屏幕上方的數(shù)字不是直接顯示一個(gè)數(shù)值，而是從零迅速遞增到特定的數(shù)值，特意展現(xiàn)一個(gè)交互動(dòng)態(tài)的效果，目的就是為了吸引用戶的目光，起到聚焦的作用。國內(nèi)的支付寶錢包APP也利用了此類動(dòng)效。
    （ 2）示意過渡
    過渡動(dòng)效就是給界面的變化加上流暢的過渡，目的是引導(dǎo)用戶理解到底發(fā)生了什么，而不會(huì)使其不知所措。如錘子Rom里，點(diǎn)擊一個(gè)App圖標(biāo)時(shí)，整個(gè)圖標(biāo)會(huì)放大并翻轉(zhuǎn)著來到用戶眼前，讓App方格背面成為這個(gè)App的界面，就是在告訴用戶，你現(xiàn)在用的是這個(gè)App，這個(gè)App還在你面前，同樣結(jié)束應(yīng)用的時(shí)候也是轉(zhuǎn)回去，暗示用戶剛剛的頁面都回到這個(gè)icon方格里了。
    （ 3）空間轉(zhuǎn)場
    轉(zhuǎn)場動(dòng)效是設(shè)計(jì)師普遍重視的一種特效，它的作用也是引導(dǎo)用戶，讓用戶更好地理解頁面跳轉(zhuǎn)，知道自己身在何方。 iOS7桌面圖標(biāo)組的進(jìn)入和退出一則動(dòng)效就是一個(gè)漂亮的轉(zhuǎn)場動(dòng)效，為了避免兩個(gè)頁面之間的跳轉(zhuǎn)過于生硬，利用動(dòng)效填補(bǔ)上了頁面跳轉(zhuǎn)的中間過程，使得體驗(yàn)更加流暢和自然。

三 交互動(dòng)畫設(shè)計(jì)法則
    一個(gè)優(yōu)秀的App交互動(dòng)畫不僅僅是炫，而且要實(shí)用，有的還要考慮手機(jī)的性能等因素，所以想做一個(gè)好的交互不并容易。
    （一）謹(jǐn)慎地增加動(dòng)畫，傳達(dá)有價(jià)值的信息
    動(dòng)畫的使用猶如雙刃劍，順其勢可披荊斬棘，塑造良好交互的App產(chǎn)品，如使用不當(dāng)或是濫用，則往往適得其反。過多無理由的動(dòng)畫會(huì)阻礙應(yīng)用的流暢性，降低性能，還會(huì)分散用戶在任務(wù)中的注意力。謹(jǐn)慎地增加動(dòng)畫，特別是在那些不能提供沉浸性體驗(yàn)的應(yīng)用中。最重要的是要有目的和限制性地使用運(yùn)動(dòng)效果和UI組件中的動(dòng)態(tài)行為，并確保對(duì)結(jié)果進(jìn)行測試。過度使用動(dòng)態(tài)則會(huì)使App交互和看起來很迷惑，信息層級(jí)關(guān)系很難控制。真正優(yōu)秀的動(dòng)效不是只有漂亮外表的花瓶，還得具備優(yōu)化交互和提升體驗(yàn)的作用。
    （二）簡化界面信息和交互層級(jí)
    利用動(dòng)效簡化界面信息和交互層級(jí)可以降低操作難度和提升用戶體驗(yàn)，目前App以及wap站的視覺效果絢麗完美的同時(shí)，同時(shí)帶有很多的復(fù)雜視覺元素，處理好每個(gè)視覺元素的關(guān)系，以及有效地傳達(dá)用戶操作后元素之間的關(guān)系變化，就需要設(shè)計(jì)交互動(dòng)畫，闡述其變化的邏輯與過程，讓操作更合理，更流暢。

    例如：例如顯示和隱藏二級(jí)操作項(xiàng)，利用動(dòng)效可以有效控制界面中的信息隱藏，當(dāng)重復(fù)進(jìn)行某些操作后隱藏的內(nèi)容會(huì)動(dòng)態(tài)展開，從而達(dá)到簡化初始界面的目的，使界面大氣簡潔。又如：使按鈕動(dòng)效化能夠讓界面重要信息動(dòng)態(tài)浮現(xiàn)在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁面跳轉(zhuǎn)帶來的干擾，使交互體驗(yàn)更加流暢。
    （三）使用風(fēng)格類型一致的動(dòng)畫。
    為了使動(dòng)畫的風(fēng)格保持一致，動(dòng)效設(shè)計(jì)師在設(shè)計(jì)交互動(dòng)畫的時(shí)候與內(nèi)置動(dòng)畫保持統(tǒng)一。也就是說，設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫應(yīng)該切合內(nèi)置iOS應(yīng)用的動(dòng)畫,因?yàn)橛脩袅?xí)慣于內(nèi)置iOS 應(yīng)用的精細(xì)動(dòng)畫。我們要避免觸及系統(tǒng)的標(biāo)準(zhǔn)行為，盡量尊重用戶習(xí)慣[5]。在iPhone中，動(dòng)畫式交互反饋方式是標(biāo)準(zhǔn)物理法則的風(fēng)格，比如窗口內(nèi)容的上下卷滾、元素的出現(xiàn)和消失，以及內(nèi)容的放大、縮小等。但當(dāng)你的動(dòng)畫違背物理定律和自然法則的時(shí)候，用戶會(huì)感覺到非常不適應(yīng)。

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

廣東省高等教育教學(xué)改革工程項(xiàng)目：基于中高職銜接的計(jì)算機(jī)類專業(yè)職業(yè)教育等級(jí)證書體系的研究與實(shí)踐 項(xiàng)目編號(hào)： 20130101030。

參考文獻(xiàn)
[1] 中文互聯(lián)網(wǎng)數(shù)據(jù)研究資訊中心http://www.199it.com/newly 2011.6
[2] 劉永翔.基于產(chǎn)品可用性的人機(jī)界面交互設(shè)計(jì)研究[J].包裝工程,2008,29(4):81-83
[3] 谷時(shí)雨普《多媒體藝術(shù)》 [M]．文化藝術(shù)出版社.北京2005
[4] (英)艾爾塞克爾,洪芳譯《視覺游戲》 [M]．海南出版社三環(huán)出版社,2004
[5] 呂悅寧,譚坤,董國萍:界面藝術(shù)設(shè)計(jì)》 [M]．，高等教育出版社,22010年