張馨月

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

導(dǎo)語

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

1.移動端動畫設(shè)計的發(fā)展

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

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

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

1.2 提升用戶體驗的需要

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

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

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

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

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

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

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

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

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

3.移動端功能性動畫設(shè)計

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

3.1 強調(diào)式功能性動畫

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

3.1.1 反饋動畫

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

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

3.1.2 注意力動畫

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

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

3.1.3 營銷動畫

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

圖4 Facebook 的Logo 動畫

3.2 進程式功能性動畫

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

3.2.1 加載動畫

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

圖5 模仿走鋼絲效果的加載動畫

3.2.2 進度動畫

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

3.3 過渡式功能性動畫

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

3.3.1 滾動動畫

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

3.3.2 過渡動畫

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

圖6 父級對子級過渡的動畫

4.移動端動畫設(shè)計的發(fā)展趨勢

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

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

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

4.2 趣味性交互體驗

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

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

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

圖7 開眼Logo 展示墻

圖8 音樂播放器音頻滾動條

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

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

結(jié)語

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