移動端手機應用中UI動效設計探究

羅艷

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

關鍵詞：UI動效;應用程序;移動端

1、UI動效的概念

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

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

2、UI動效的作用

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

2.1內容的展示

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

2.2品牌的建設

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

2.3趣味性的表達

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

3、UI動效的分類

依據UI界面設計對于動效的需求，將UI動效按照不同的功能劃分成四種類別，分別是反饋動效、切換動效、引導動效、呈現動效。

3.1反饋動效

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

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

3.2切換動效

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

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

3.3引導動效

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

很多應用程序會在界面內容展示時，使元素按照一定的秩序規律逐級呈現，引導用戶視覺焦點走向，幫助用戶更好地感知頁面布局，層級結構和重點內容，同時也能讓整個流程更加豐富流暢，增添了界面的活力。

4、UI動效設計的特性

4.1功能性

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

4.2物理性

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

4.3趣味性

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

5、總結

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

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

參考文獻：

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

[2]邸小松 封姿羽，情感化手機端界面動態效果設計研究[J].吉林，蘭州職業技術學院學報，2021.2.

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