羅艷

摘要：隨著互聯(lián)網(wǎng)時代的到來，對于UI設(shè)計的需求正在持續(xù)性放大。UI動效的出現(xiàn)更是推動了UI設(shè)計的發(fā)展，UI動效能夠幫助提升用戶體驗，給用戶帶來更好的操作感受，拉進產(chǎn)品與用戶之間的距離。本文主要對UI動效在移動端手機應(yīng)用中的運用進行研究，在概念、作用、分類以及特性幾個方面對UI動效進行了分析，更加全面的剖析適用于手機應(yīng)用程序的動效設(shè)計。

關(guān)鍵詞：UI動效;應(yīng)用程序;移動端

1、UI動效的概念

隨著技術(shù)革新，用戶對于產(chǎn)品細節(jié)的感知度和挑剔程度正在日益劇增，越來越多的產(chǎn)品都在嘗試通過不同的手段來打造產(chǎn)品的差異化，而動效設(shè)計作為近年來大火的設(shè)計趨勢之一也被越來越多的產(chǎn)品所青睞。UI動效日漸從“錦上添花”慢慢變成“必不可少”的優(yōu)秀產(chǎn)品的構(gòu)成元素。

動效源于國外的MG動畫，簡單來說就是會動的圖片，也是處于動畫設(shè)計和平面設(shè)計之間交叉的一門學(xué)科，是運用了動態(tài)的圖形來傳遞信息和表達氛圍的。UI動效是穿插于人機交互的過程中，是為了緩解生硬的跳轉(zhuǎn)和無聊的等待過程中焦躁心情的產(chǎn)物，好的動效能使人感覺舒適，人機交互更流暢，引導(dǎo)性更強，體驗更棒。在進行用戶界面設(shè)計的時候，UI動效可以存在于交互、轉(zhuǎn)場和具體的控件操作上，作為一種狀態(tài)轉(zhuǎn)變、交互反饋和視覺引導(dǎo)的工具而存在。

2、UI動效的作用

UI動效的應(yīng)用能讓設(shè)計師更加充分的表達設(shè)計想法，也能讓用戶更好地了解產(chǎn)品，增添產(chǎn)品的活力，拉進產(chǎn)品與用戶之間的距離。UI動效的典型作用主要有三個方面。

2.1內(nèi)容的展示

UI動效能夠作用于頁面內(nèi)容展示，能夠展示頁面上元素的變換以及頁面之間的切換。通常一個應(yīng)用程序內(nèi)會包含多個頁面，用戶會頻繁地進行頁面切換的操作，轉(zhuǎn)場動效就是幫助完成頁面之間的跳轉(zhuǎn)，使用轉(zhuǎn)場動效完成頁面過渡更加符合用戶的認知心理，可以更好地展示頁面之間的層級關(guān)系和邏輯關(guān)系，減少用戶的認知負擔(dān)。

2.2品牌的建設(shè)

很多時候，靜態(tài)圖片能夠傳遞的信息是非常有限的，運用動態(tài)的表達方式能夠增添其內(nèi)容傳達的維度。在一些刷新加載頁面和啟動頁頁面中，通常會用到應(yīng)用程序的圖標(biāo)進行展現(xiàn)，如果結(jié)合動效的方式來表現(xiàn)，在動效設(shè)計中利用品牌相關(guān)元素來完成圖標(biāo)的動態(tài)變換，這樣能更好的將應(yīng)用程序的內(nèi)涵和動效結(jié)合起來，也能更好地傳遞品牌理念與表達品牌特色。通過UI動效在頁面上的表達，能夠起到品牌建設(shè)的作用，使得品牌傳遞的信息更充分和更立體。

2.3趣味性的表達

加入動效的頁面更具活力，并且增添了產(chǎn)品的趣味性，產(chǎn)生與用戶情感交流的效果。當(dāng)用戶在進行文件下載和頁面刷新等操作時，由于網(wǎng)絡(luò)的原因需要花費一些時間等待命令完成，動效的加入可以讓無聊的等待過程變得友好且有趣，能緩解用戶在等待過程中消極情緒。

3、UI動效的分類

依據(jù)UI界面設(shè)計對于動效的需求，將UI動效按照不同的功能劃分成四種類別，分別是反饋動效、切換動效、引導(dǎo)動效、呈現(xiàn)動效。

3.1反饋動效

反饋類動效主要是為了告訴用戶目前操作到哪，實時狀態(tài)如何，緩解用戶對應(yīng)用處理速度的量化感知。無論是點擊、長按、拖拽滑動等交互行為，都應(yīng)該得到系統(tǒng)的即時反饋，將其以視覺或動效的方式展現(xiàn)，幫助用戶了解當(dāng)前系統(tǒng)對交互過程的響應(yīng)情況，并為用戶帶來安全感。

當(dāng)用戶進行一個操作后，出現(xiàn)反饋，界面操作前的狀態(tài)和操作后的狀態(tài)不一致，通過這個不一致，給予用戶在該操作上得到了提交的反饋，這是將動效運用在操作反饋上。在進度提示反饋中，進度條加載通過動效的表現(xiàn)明確告知用戶當(dāng)前的具體進度和狀態(tài)，讓用戶隨時隨地知道加載所需時間，讓用戶感覺對當(dāng)前操作環(huán)境是可控的，給予用戶安全感。當(dāng)系統(tǒng)狀態(tài)發(fā)生重要的變化時，動效也可以用來提醒用戶，可以給用戶一個快速而又簡潔的一個反饋，這是將動效用于系統(tǒng)提示反饋上。

3.2切換動效

在移動端界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前后變化的邏輯關(guān)系，從而提升產(chǎn)品的使用性。這類動效主要使用在輪播圖、頁面切換以及導(dǎo)航菜單的切換中。

界面的層次結(jié)構(gòu)和元素的互動是非常重要的，在界面中的每個元素都有其定位和目的，UI動效能夠通過用戶的互動有效闡明界面的層級關(guān)系，以動態(tài)的方式表達上下層級的邏輯關(guān)系，更加便于用戶對于產(chǎn)品結(jié)構(gòu)的理解。當(dāng)頁面布局發(fā)生改變時，以動效的方式來進行銜接頁面的跳轉(zhuǎn)，而不是生硬的進行切換，這樣能讓用戶操作起來更加舒適，同時能夠讓用戶清晰地看到過渡的過程并且理解這種狀態(tài)的改變。

3.3引導(dǎo)動效

當(dāng)應(yīng)用程序中的功能比較復(fù)雜或增加了新功能的時候，可以在用戶使用時采用動效對于功能的方向、步驟、位置等進行動態(tài)引導(dǎo)，使用戶快速地了解和掌握該功能。在這里，UI動效如同提示板，會告知用戶如何和產(chǎn)品進行交流互動，能夠直觀的向用戶表達交互操作，起到引導(dǎo)的作用，通過動態(tài)形式來引導(dǎo)用戶對產(chǎn)品有更近一步的認識與了解。

很多應(yīng)用程序會在界面內(nèi)容展示時，使元素按照一定的秩序規(guī)律逐級呈現(xiàn)，引導(dǎo)用戶視覺焦點走向，幫助用戶更好地感知頁面布局，層級結(jié)構(gòu)和重點內(nèi)容，同時也能讓整個流程更加豐富流暢，增添了界面的活力。

4、UI動效設(shè)計的特性

4.1功能性

UI動效能夠在一定層面上解決用戶的需求，能夠優(yōu)化用戶對界面的感知，使其感到更輕快更全面，并且動效設(shè)計的加入還能引起用戶的注意，提示和引導(dǎo)用戶進行下一步的操作。也能提供給用戶操作后的視覺反饋，并為下一步的跳轉(zhuǎn)做準(zhǔn)備。

4.2物理性

動效需符合空間邏輯并根據(jù)物理定律來制作動態(tài)，是定義屏幕和UI設(shè)計元件之間的空間相對關(guān)系，比如相對高度、權(quán)重以及速度等方面。動態(tài)設(shè)計時需要考慮到重力、慣性、速度和剛性等因素，將這些物理屬性融入動效設(shè)計中，得到的動態(tài)效果才會顯得更加真實，用戶也會覺得操作更加自然，當(dāng)然就有助于用戶快速形成使用習(xí)慣，盡可能多使用熟悉并可預(yù)知的動態(tài)。

4.3趣味性

用戶每天都接觸眾多的應(yīng)用程序，不同的程序解決著用戶的各種需求，真正能夠留住用戶都需要有好的用戶體驗來增加用戶粘性。要把動效設(shè)計得有感染力，需要在設(shè)計動畫時不僅讓用戶感覺真實，還要有自己的獨特風(fēng)格。給應(yīng)用程序加上一些動效變化，能夠增添一些關(guān)愛和趣味，讓用戶喜歡上該應(yīng)用程序并產(chǎn)生深刻的品牌印象。

5、總結(jié)

由于人工智能的普及和5G時代的到來，信息體量也是呈幾何數(shù)增長，這也意味著有了技術(shù)的支撐，手機、平板電腦等移動電子設(shè)備的內(nèi)存配置越來越高，UI動效的優(yōu)勢越發(fā)明顯。

UI動效設(shè)計所具備的優(yōu)勢，首先是提升用戶體驗，強化品牌感，強化產(chǎn)品特點，再者是能夠提高流暢度與整體性，環(huán)節(jié)用戶負面情趣，增加趣味性，并且能夠減少溝通成本，賦予設(shè)計師更多的競爭力。動效屬于情感化設(shè)計，從而能提升產(chǎn)品體驗，提高用戶粘性，所以未來是必不可少的！動效設(shè)計能讓用戶更能感受到產(chǎn)品額外的感情，這里也是牽扯到情感化層次的內(nèi)容，未來的交互設(shè)計一定是在于動效設(shè)計的。

參考文獻：

[1]黃方聞，動靜之美—sketch移動UI與交互動效設(shè)計詳解[M].北京，人民郵電出版社，2016.7.

[2]邸小松 封姿羽，情感化手機端界面動態(tài)效果設(shè)計研究[J].吉林，蘭州職業(yè)技術(shù)學(xué)院學(xué)報，2021.2.

[3]奚柯，動效設(shè)計在手機APP界面中的應(yīng)用研究[D].東南大學(xué)，2018179BEDB5-1ADD-47F6-B4D5-A69464486C99