新媒體語境下移動(dòng)端動(dòng)畫設(shè)計(jì)研究

張馨月

（忻州師范學(xué)院，山西 忻州 034000）

導(dǎo)語

隨著5G 網(wǎng)絡(luò)基站建設(shè)的快速推進(jìn)以及5G 網(wǎng)絡(luò)商用步伐的不斷加快，5G 時(shí)代已悄然到來，新媒體產(chǎn)業(yè)鏈正在發(fā)生巨大的變革。面對逐漸加快的生活節(jié)奏，人們每天都在接收各種形式的信息，移動(dòng)終端設(shè)備成為生活中不可或缺的重要角色。隨著各種新媒體終端的不斷發(fā)展，如何將信息又快又好地傳達(dá)，成為當(dāng)下界面設(shè)計(jì)領(lǐng)域一個(gè)炙手可熱的話題。

1.移動(dòng)端動(dòng)畫設(shè)計(jì)的發(fā)展

1.1 新媒體時(shí)代發(fā)展的需要

伴隨著5G 網(wǎng)絡(luò)發(fā)展的新媒體時(shí)代，萬物互聯(lián)的內(nèi)容更加追求個(gè)性化和精準(zhǔn)化，移動(dòng)端的靜態(tài)界面設(shè)計(jì)將面臨巨大的沖擊。在流量更快、硬件更穩(wěn)定的情況下，人們對使用移動(dòng)設(shè)備獲取信息有了更高的需求。如今，為了有效滿足用戶需求、提高認(rèn)知效率，極簡風(fēng)格的界面設(shè)計(jì)逐漸被推崇，大批量的信息可以被快速獲取并解讀，重點(diǎn)信息能夠被準(zhǔn)確定位。但是，當(dāng)界面中的形狀和顏色追求極簡風(fēng)格，用戶易產(chǎn)生枯燥乏味感。此時(shí)，加入動(dòng)態(tài)化展示即可增強(qiáng)說服力和吸引力，動(dòng)畫便成為移動(dòng)端界面設(shè)計(jì)脫穎而出的可靠方式，讓信息的傳達(dá)更加便捷化、生動(dòng)化、情感化。

圖1 界面設(shè)計(jì)和用戶體驗(yàn)關(guān)系圖

1.2 提升用戶體驗(yàn)的需要

在移動(dòng)端的界面設(shè)計(jì)中，動(dòng)畫的應(yīng)用帶來了更大的創(chuàng)意空間，提供了更加順暢的交互和良好的用戶體驗(yàn)。界面中的動(dòng)畫元素不僅要起到裝飾作用，更要把重要的功能和亮點(diǎn)完美呈現(xiàn)。[1]移動(dòng)端動(dòng)畫設(shè)計(jì)的出發(fā)點(diǎn)是提升用戶體驗(yàn)、滿足用戶需求，其首要任務(wù)就是要充分了解用戶的心理特征以及思維方式，在設(shè)計(jì)過程中著重突出視覺效果。因此，設(shè)計(jì)師在移動(dòng)端動(dòng)畫的設(shè)計(jì)過程中，要遵循以下原則。（1）促進(jìn)藝術(shù)與技術(shù)的完美融合。移動(dòng)端動(dòng)畫的藝術(shù)美在于界面的色彩搭配、風(fēng)格基調(diào)、板式布局；技術(shù)性體現(xiàn)在運(yùn)用強(qiáng)大的函數(shù)語言控制交互。將兩者有機(jī)結(jié)合可為用戶同時(shí)帶來視覺享受和沉浸式操縱感。（2）增強(qiáng)人性化反饋，推動(dòng)便捷式操作。移動(dòng)設(shè)備的便捷性已經(jīng)為動(dòng)畫設(shè)計(jì)提供了重要的基礎(chǔ)，力求以人為本，將用戶的根本需求作為移動(dòng)端動(dòng)畫設(shè)計(jì)的出發(fā)點(diǎn)，提升其視覺、聽覺、觸覺方面的良好反饋。（3）注重多維度元素的綜合性。人們使用移動(dòng)設(shè)備獲取信息不再只是通過單一的靜態(tài)圖文或視頻，而是極具人性化和先進(jìn)性信息技術(shù)相融合的展現(xiàn)方式。

2.移動(dòng)端動(dòng)畫設(shè)計(jì)的傳播優(yōu)勢

動(dòng)畫的優(yōu)勢在于其傳播速度快、視覺效果好、傳播量大，可以隨時(shí)根據(jù)時(shí)代特色更新表現(xiàn)風(fēng)格，具有獨(dú)特的生命力和競爭力。界面設(shè)計(jì)中的配色、排版、按鈕和圖標(biāo)是連接設(shè)計(jì)師與用戶的橋梁，藝術(shù)特色的完美呈現(xiàn)和技術(shù)運(yùn)用的有機(jī)結(jié)合，使移動(dòng)端信息的傳播具備顯著優(yōu)勢。

2.1 視覺傳播優(yōu)勢

當(dāng)移動(dòng)端界面呈現(xiàn)在用戶面前時(shí)，由于人的生理特質(zhì)，其視線首先會(huì)對整個(gè)畫面進(jìn)行通篇略讀，隨后會(huì)停留在某個(gè)重點(diǎn)區(qū)域，這個(gè)區(qū)域即為視覺重心。受動(dòng)畫中界面元素的布局以及動(dòng)作變化、顏色搭配等因素影響，移動(dòng)端動(dòng)畫可以迅速將用戶的視覺重心落到主題上，這是動(dòng)畫融入移動(dòng)端界面的存在意義。第一，簡潔的界面能夠快速傳達(dá)關(guān)鍵信息內(nèi)容，為用戶節(jié)省了不少查詢主題的時(shí)間。第二，移動(dòng)端界面的關(guān)鍵性內(nèi)容一般會(huì)在中央?yún)^(qū)域呈現(xiàn)，動(dòng)畫整體風(fēng)格注重形式簡約可以避免輔助信息喧賓奪主。第三，在界面中添加部分裝飾性動(dòng)態(tài)元素，例如Banner、Logo、邊框等作為點(diǎn)綴。既滿足了移動(dòng)端動(dòng)畫的信息傳遞功能，又可以在用戶的視覺體驗(yàn)上帶來舒適的平衡感和節(jié)奏感。[2]

2.2 交互傳播優(yōu)勢

在移動(dòng)端交互界面中，動(dòng)畫設(shè)計(jì)占絕對的傳播優(yōu)勢。它繼承和發(fā)展了平面圖形語言的內(nèi)涵、外延，可多維地展示信息內(nèi)容，用戶不僅可以接收到表面?zhèn)鬟f的信息[3]，還可以通過點(diǎn)擊界面按鈕元素發(fā)出指令，查詢更詳細(xì)的信息。這樣的動(dòng)畫交互讓用戶從被動(dòng)的接收者變?yōu)橹鲃?dòng)的參與者。[4]比如用戶搖晃手機(jī)時(shí)，界面中的小元素會(huì)跟著搖晃；或者點(diǎn)擊界面中的按鈕時(shí)，會(huì)配合動(dòng)畫發(fā)出反饋的震動(dòng)等。移動(dòng)端動(dòng)畫通過結(jié)合各類交互技術(shù)為用戶提供靈活的操作，以帶來更多感官上的全新體驗(yàn)，獲得更好的傳播效果。

2.3 信息傳播優(yōu)勢

移動(dòng)設(shè)備接收的大部分信息本身是文字化的，需要用戶有足夠的時(shí)間和耐心去閱讀。通過有趣的動(dòng)畫設(shè)計(jì)，不僅可以縮短獲取信息的時(shí)間，還可以讓信息傳達(dá)出更加豐富直觀的效果，同時(shí)也能感受到設(shè)計(jì)師流露的理念和情感。移動(dòng)端動(dòng)畫設(shè)計(jì)利用圖形語言的特點(diǎn)，將具象與抽象結(jié)合、圖形與文字結(jié)合，把概念和信息運(yùn)用創(chuàng)造性的動(dòng)畫形式描繪，引導(dǎo)人們的視覺流程獲取信息內(nèi)容。在傳達(dá)美感和形式感的同時(shí)，讓人們理解和感受相關(guān)信息的概念和內(nèi)涵，這就需要移動(dòng)端動(dòng)畫設(shè)計(jì)靈活運(yùn)用更多細(xì)節(jié)動(dòng)效。比如，能夠在圖形和文字之間動(dòng)態(tài)轉(zhuǎn)換，在抽象圖形和具象圖形之間動(dòng)態(tài)轉(zhuǎn)換，形成一個(gè)明確的視覺流程[5]，實(shí)現(xiàn)更加精確的信息傳播。

3.移動(dòng)端功能性動(dòng)畫設(shè)計(jì)

功能性動(dòng)畫是一種嵌入界面設(shè)計(jì)中微妙的動(dòng)畫，具有明確合理的目標(biāo)達(dá)到視覺傳達(dá)效果。[6]移動(dòng)端界面設(shè)計(jì)應(yīng)用功能性動(dòng)畫，能夠有效防止用戶生理特質(zhì)導(dǎo)致的變化視盲，減少閱讀和理解的時(shí)間成本；同時(shí)實(shí)現(xiàn)了人機(jī)交互功能，大大增強(qiáng)了用戶體驗(yàn)感。功能性動(dòng)畫在移動(dòng)端界面設(shè)計(jì)主要有強(qiáng)調(diào)式功能性動(dòng)畫、進(jìn)程式功能性動(dòng)畫、過渡式功能性動(dòng)畫三類表現(xiàn)方式。

3.1 強(qiáng)調(diào)式功能性動(dòng)畫

良好的交互設(shè)計(jì)應(yīng)該明確引導(dǎo)用戶進(jìn)行每一步操作，幫助用戶輕而易舉地與屏幕上的元素進(jìn)行互動(dòng)。強(qiáng)調(diào)式功能性動(dòng)畫即向用戶提供操作方式、傳達(dá)重點(diǎn)信息，并給予快速簡潔的操作反饋。這種類型的動(dòng)畫是提供良好用戶體驗(yàn)的關(guān)鍵，它具體可分為反饋動(dòng)畫、注意力動(dòng)畫和營銷動(dòng)畫。

3.1.1 反饋動(dòng)畫

在日常生活中，當(dāng)按下一個(gè)真實(shí)的按鈕，人們會(huì)通過觸覺反饋感受到真實(shí)的按壓力和反彈力。假如用戶通過移動(dòng)設(shè)備點(diǎn)擊屏幕時(shí)并沒有類似于現(xiàn)實(shí)存在的觸覺反饋，但反饋動(dòng)畫可為用戶提供有效交互，界面中會(huì)通過顯示“確認(rèn)”“拒絕”的系統(tǒng)按鈕來接收用戶的查閱意向，把物理的振動(dòng)感受轉(zhuǎn)換為視覺信息來為界面程序提供響應(yīng)。例如圖2的App標(biāo)簽導(dǎo)航欄，用戶通過點(diǎn)擊、滑動(dòng)等手勢，可感受到按鈕模仿果凍的彈出物理交互動(dòng)作。既快速得到操作成功與否的反饋，又獲得了視覺，甚至聽覺方面的美妙感受。

圖2 手機(jī)App 導(dǎo)航欄模仿果凍彈出交互動(dòng)作

3.1.2 注意力動(dòng)畫

當(dāng)用戶與移動(dòng)端App 進(jìn)行互動(dòng)時(shí)，注意力動(dòng)畫一般通過視覺層次結(jié)構(gòu)的變化引起用戶的注意，并將其引導(dǎo)至必要的細(xì)節(jié)。同時(shí)，它還可以吸引用戶將注意力凝聚到核心信息，快速根據(jù)提示查看重點(diǎn)內(nèi)容。如圖3的手機(jī)端數(shù)據(jù)分析App，通過四個(gè)不同色塊的按鈕，將App的四大功能一目了然的作出分類。用戶通過點(diǎn)擊被選擇的按鈕會(huì)滑動(dòng)到界面中央，并伴隨動(dòng)畫展示引出該分類下的內(nèi)容，成功引起用戶的注意。

圖3 數(shù)據(jù)類App 界面操作動(dòng)畫

3.1.3 營銷動(dòng)畫

移動(dòng)設(shè)備市場上有很多類型的App、主題等，但位居下載榜單前列的一定都有一個(gè)共同的特點(diǎn)，即注重建立與用戶之間的情感聯(lián)系。運(yùn)用營銷動(dòng)畫可以帶來難忘的用戶體驗(yàn)，突出產(chǎn)品優(yōu)勢，達(dá)到極好的營銷效果。例如圖4，F(xiàn)acebook 的Logo 動(dòng)畫，短短5 秒便展示出主題和文化內(nèi)涵。設(shè)計(jì)師明確地將對應(yīng)產(chǎn)品的品牌所涉及的內(nèi)容整合成動(dòng)畫，化身成為一款營銷工具，來展示產(chǎn)品的品牌價(jià)值和功能亮點(diǎn)，給用戶眼前一亮的體驗(yàn)。

圖4 Facebook 的Logo 動(dòng)畫

3.2 進(jìn)程式功能性動(dòng)畫

不同移動(dòng)端界面的操作系統(tǒng)和信息布局各異，當(dāng)用戶在使用移動(dòng)設(shè)備時(shí)，為了避免其為下一步操作做猜測或盲目無效試探，能夠?yàn)橛脩籼峁┮粋€(gè)簡易且明確的視覺指引便尤為重要了。進(jìn)程式功能性動(dòng)畫的靈活性、吸引力、直接性為用戶帶來極大的便捷[7]，它具體可分為加載動(dòng)畫和進(jìn)度動(dòng)畫。

3.2.1 加載動(dòng)畫

用戶在操作移動(dòng)設(shè)備的過程中，或多或少都會(huì)遇到加載等待的問題。運(yùn)用富有創(chuàng)意的加載動(dòng)畫來替代空虛的漫長等待，能夠有效減少用戶對時(shí)間流逝的感受，有效地緩解焦慮感。如今，無論是各類網(wǎng)站、小程序或是App，都會(huì)利用加載動(dòng)畫來豐富等待的時(shí)間。但目前仍有一部分加載動(dòng)畫離不開圓圈自轉(zhuǎn)的表現(xiàn)形式，視覺感上略顯單一。因此，移動(dòng)端加載動(dòng)畫可以考慮設(shè)計(jì)更豐富的動(dòng)作，并加入有趣的情節(jié)進(jìn)行循環(huán)播放。例如圖5的加載動(dòng)畫，進(jìn)度條的設(shè)計(jì)模仿鋼絲，數(shù)據(jù)則如同走鋼絲效果，這種擬人化的表現(xiàn)手法為用戶帶來興奮的視覺感受。

圖5 模仿走鋼絲效果的加載動(dòng)畫

3.2.2 進(jìn)度動(dòng)畫

用戶在操作頁面時(shí)，如果遇到時(shí)間過長的交互，就需要保持等待。在此過程中，需要讓用戶明確操作程序的進(jìn)展?fàn)顟B(tài)。進(jìn)度動(dòng)畫的作用就是為用戶提供保證，運(yùn)用進(jìn)度條和時(shí)間軸向他們提供明確的進(jìn)展?fàn)顩r，并在此過程獲得愉悅感。這樣趨于情感化的設(shè)計(jì)，讓用戶樂在其中。

3.3 過渡式功能性動(dòng)畫

移動(dòng)設(shè)備界面中的每個(gè)交互元素，其動(dòng)作運(yùn)行始終都有過渡式功能性動(dòng)畫在其中。這是由于過渡式功能性動(dòng)畫可以清晰地展示出界面與元素之間的空間關(guān)系，讓用戶明白元素轉(zhuǎn)換的動(dòng)作過程，了解整個(gè)過程中新的元素怎樣出現(xiàn)，舊的元素如何消失。這樣，用戶的視覺焦點(diǎn)就聚集在交互元素上，自身形成了視覺線索，達(dá)到引導(dǎo)用戶操作的目的，并增強(qiáng)了交互性。過渡式功能性動(dòng)畫具體可分為滾動(dòng)動(dòng)畫和過渡動(dòng)畫。

3.3.1 滾動(dòng)動(dòng)畫

無論在Web 端或是移動(dòng)端界面，滾動(dòng)是用戶較習(xí)慣使用的典型交互之一。滾動(dòng)動(dòng)畫不僅僅局限于垂直方向和水平方向的操作，還可以通過淡入淡出、翻轉(zhuǎn)、滑動(dòng)、縮放等動(dòng)作展示。不僅可以明確地引導(dǎo)用戶完成信息的獲取，還為整個(gè)交互過程增添了動(dòng)感和美感。

3.3.2 過渡動(dòng)畫

在移動(dòng)端的界面操作中，由于用戶無法預(yù)知即將發(fā)生的交互，則需要過渡動(dòng)畫幫助用戶保持導(dǎo)向，這樣就不會(huì)感覺內(nèi)容的突然變化。過渡動(dòng)畫的每一個(gè)動(dòng)作都不是隨機(jī)的，其背后都有相應(yīng)的目的。比如圖6是一個(gè)很好的示例，這是移動(dòng)端界面中的用戶選擇列表，通過點(diǎn)擊小卡片按鈕放大其詳細(xì)視圖。在視圖擴(kuò)展期間，小卡片移動(dòng)并擴(kuò)展為更大的卡片展示信息詳情。這樣的過渡動(dòng)畫簡單連貫，并給予用戶十分清晰的導(dǎo)向。

圖6 父級對子級過渡的動(dòng)畫

4.移動(dòng)端動(dòng)畫設(shè)計(jì)的發(fā)展趨勢

近幾年，移動(dòng)端的交互界面愈來愈呈現(xiàn)出“萬物皆可動(dòng)”的發(fā)展態(tài)勢。[7]同時(shí)，用戶使用移動(dòng)設(shè)備體驗(yàn)界面操作的快感已從“潮流式追求”發(fā)展到“個(gè)性化定制”，交互也漸漸從“可點(diǎn)擊”的功能擴(kuò)大到“可選擇”。

4.1 直觀性引導(dǎo)操作

移動(dòng)端界面根據(jù)不同功能進(jìn)行引導(dǎo)動(dòng)畫設(shè)計(jì)，用戶能夠更易于理解，便于操作。對界面中呈現(xiàn)的新功能或者較重要的功能在設(shè)計(jì)時(shí)，除通過常規(guī)的視覺化增強(qiáng)和浮層提示外，添加相應(yīng)的引導(dǎo)式動(dòng)畫展示內(nèi)容，傳達(dá)信息更加直觀清晰，提高產(chǎn)品的感官體驗(yàn)，以此提高用戶的關(guān)注度。[8]例如優(yōu)酷App 在用戶初入界面時(shí)，會(huì)設(shè)置彈出式引導(dǎo)動(dòng)畫——“抓住你的創(chuàng)作靈感”，整體基調(diào)極具青春活力。這樣的視覺風(fēng)格與引導(dǎo)動(dòng)畫展現(xiàn)形式結(jié)合，既可以提高用戶關(guān)注度和參與度，同時(shí)也增強(qiáng)了感官體驗(yàn)。

4.2 趣味性交互體驗(yàn)

（1）常見的品牌 Logo 展示形式都比較中規(guī)中矩，一般以橫向或者縱向整齊排版。近期有少數(shù)品牌墻以動(dòng)畫形式展現(xiàn)，例如開眼App，將展示Logo 以圓形呈現(xiàn)，并設(shè)計(jì)氣泡堆積碰撞的動(dòng)態(tài)效果，且用戶還可以進(jìn)行拖拽互動(dòng)。未被操作的 Logo 會(huì)自動(dòng)漂浮到界面頂部，該設(shè)計(jì)形式不僅打破了常規(guī)，也帶給用戶十分有趣的互動(dòng)體驗(yàn)。

（2）移動(dòng)端信息欄界面的頭像區(qū)域，一般以靜態(tài)形式呈現(xiàn)，通常不會(huì)設(shè)置交互操作，只會(huì)為營造氛圍設(shè)置裝飾元素。但目前有個(gè)別App 的個(gè)人中心界面，能夠針對用戶頭像的擺放位置進(jìn)行拖拽，同時(shí)，拖拽動(dòng)作會(huì)伴隨振動(dòng)感，釋放后會(huì)彈出趣味性表情圖。如此，將交互體驗(yàn)感和個(gè)人中心頭像融合設(shè)計(jì)，既提升信息欄的趣味性，又給用戶帶來更高的親和力。

（3）音樂類App 已不局限于聽覺體驗(yàn)，視覺享受也將備受用戶追捧。例如在音樂播放界面底部的音頻滾動(dòng)條，可采用不同的元素進(jìn)行設(shè)計(jì)，根據(jù)音量變化體現(xiàn)不同音樂的差異，且用戶可根據(jù)喜好選擇滾動(dòng)條風(fēng)格，獲得獨(dú)特的感官體驗(yàn)。這樣具有可選擇性的個(gè)性化設(shè)計(jì)表達(dá)可以打造獨(dú)特的記憶點(diǎn)，被更多用戶選擇。

圖7 開眼Logo 展示墻

圖8 音樂播放器音頻滾動(dòng)條

4.3 流行性提升關(guān)注

時(shí)下的流行元素和風(fēng)格，將成為移動(dòng)端動(dòng)畫設(shè)計(jì)的熱門素材。如極光風(fēng)效果目前呈現(xiàn)較為流行的趨勢，被廣泛運(yùn)用于背景、彈窗、圖標(biāo)、按鈕等的設(shè)計(jì)中，并以動(dòng)畫形式展現(xiàn)，不僅強(qiáng)化視覺表現(xiàn)，還可以使相關(guān)產(chǎn)品展示更年輕化。[9]例如優(yōu)酷 App 在會(huì)員信息頁面，使用極光風(fēng)的動(dòng)畫元素對打卡按鈕進(jìn)行設(shè)計(jì)，打破了常規(guī)式的按鈕設(shè)計(jì)，效果好評如潮。又如部分界面的背景層，對其中的卡片式設(shè)計(jì)進(jìn)行強(qiáng)化，在橫向滑動(dòng)時(shí)作極光風(fēng)色彩變化。這樣的處理過渡自然美觀，表現(xiàn)形式也獨(dú)特新穎。

結(jié)語

動(dòng)畫在移動(dòng)端動(dòng)畫的運(yùn)用能夠?yàn)橛脩籼峁┝己玫囊曈X感受和操作體驗(yàn)，具體包括視覺吸引、功能反饋、趣味交互等展現(xiàn)手法，從而有效提升用戶的感知度和參與度，更好地實(shí)現(xiàn)信息的傳達(dá)，增強(qiáng)移動(dòng)端界面的傳播功能。[10]在新媒體時(shí)代，提升用戶體驗(yàn)感的同時(shí)為移動(dòng)端動(dòng)畫技術(shù)樹立了新的航標(biāo)，也為各個(gè)領(lǐng)域的動(dòng)畫設(shè)計(jì)技術(shù)創(chuàng)造了新的理論依據(jù)，促進(jìn)了動(dòng)畫領(lǐng)域的更新發(fā)展。移動(dòng)端界面設(shè)計(jì)應(yīng)時(shí)刻以用戶的實(shí)際需求為出發(fā)點(diǎn)，遵循功能性動(dòng)畫的設(shè)計(jì)原則，充分利用新技術(shù)和新媒介的優(yōu)勢，創(chuàng)作審美與功能兼?zhèn)涞膭?dòng)畫設(shè)計(jì)產(chǎn)品。如此，更多富有科技含量的智能化設(shè)計(jì)勢必會(huì)如同雨后春筍般催生出來，動(dòng)畫的智能化和交互化將會(huì)被推上一個(gè)新的高度。