摘要：目的：研究基于需求匹配的移動應(yīng)用產(chǎn)品交互動效設(shè)計原則和類型，以期在提升用戶使用體驗的同時降低產(chǎn)品性能成本，提升產(chǎn)品吸引力，增強(qiáng)品牌感知。方法：分析移動應(yīng)用交互動效設(shè)計存在的問題，并從用戶需求和產(chǎn)品需求兩方面進(jìn)行動效設(shè)計需求分析，結(jié)合設(shè)計心理學(xué)理論研究基于需求匹配的移動應(yīng)用交互動效設(shè)計。結(jié)果：構(gòu)建基于需求匹配的移動應(yīng)用交互動效設(shè)計原則及典型動效類型。結(jié)論：基于需求匹配的交互動效設(shè)計在用戶需求和產(chǎn)品需求之間建立平衡點，在滿足用戶交互需求的同時，提升產(chǎn)品品牌認(rèn)知度，塑造用戶與產(chǎn)品交互的良性互動，提升移動應(yīng)用的交互體驗。

關(guān)鍵詞：移動應(yīng)用；動效設(shè)計；需求分析；品牌感知

doi：10.3969/J.ISSN.1672-7274.2025.02.046

中圖分類號：TB 472；TN 929.5" " " " " 文獻(xiàn)標(biāo)志碼：A" " " " " " 文章編碼：1672-7274（2025）02-0-03

Interactive Motion Design in Mobile Applications Basedon Demand Matching

QIAN Dong， HUANG Qinghui， SHEN Xipeng， PAN Huimin， KE Shusen

（China Mobile Internet Co.， Ltd， Guangzhou 510510， China）

Abstract： The work aims to explore the principles and types of interactive motion design for mobile applications based on the matching of user and product demands， and strive to enhance user experience while reducing product performance cost， increasing product appeal， and enhancing brand perception. It analyzes the existing problems and conducts demand analysis based on both user and product demands. It applies design psychology theory in the research of interactive motion design. Interactive motion design in mobile applications based on demand matching establishes a balance between user demands and product demands， and improves positive interaction experience for mobile applications.

Keywords： mobile application; motion design; demand analysis; brand perception

自用戶界面出現(xiàn)之初，動效設(shè)計就已成為人機(jī)交互中不可或缺的一部分，微軟DOS命令行界面閃爍的光標(biāo)設(shè)計就是在指示用戶輸入的內(nèi)容會顯示的位置[1]。隨著移動互聯(lián)網(wǎng)的興起，動效設(shè)計也擴(kuò)展到移動端應(yīng)用中。優(yōu)秀的動效設(shè)計不僅帶來審美享受，還能引導(dǎo)用戶注意力提升交互體驗。然而，隨著應(yīng)用發(fā)展逐步成熟，用戶與產(chǎn)品之間的需求有時存在不匹配的問題。因此，基于需求匹配的動效設(shè)計不僅能提升用戶體驗，也能滿足產(chǎn)品迭代和品牌認(rèn)知的需求。

1" "移動應(yīng)用動效設(shè)計問題分析

1.1 過度的設(shè)計

移動應(yīng)用中常存在過度的動效設(shè)計。如在不重要的功能跳轉(zhuǎn)頁面增加復(fù)雜的轉(zhuǎn)場方式等。過度的動效設(shè)計雖然可以吸引用戶眼球，但可能分散用戶注意力，忘記本來的操作路徑和目的，同時降低產(chǎn)品性能，增加維護(hù)成本。

1.2 不一致的設(shè)計

為保持產(chǎn)品一致性，通常相同場景的動效設(shè)計應(yīng)統(tǒng)一。同公司或平臺的應(yīng)用應(yīng)采用相似設(shè)計以強(qiáng)化品牌感。然而，隨著應(yīng)用迭代需求，可能導(dǎo)致動效設(shè)計不一致，進(jìn)而造成用戶感知不一致。

1.3 不合理的設(shè)計

動效設(shè)計還需要考慮用戶的操作邏輯，給予用戶適時清晰的操作反饋。不合理的動效設(shè)計無法準(zhǔn)確傳達(dá)預(yù)期的信息和反饋，會令用戶感到困惑。

2" "移動應(yīng)用動效設(shè)計需求分析

在移動應(yīng)用交互中，用戶為核心體驗者。情境感知使得產(chǎn)品基于當(dāng)前情境和任務(wù)，為用戶提供適時信息和服務(wù)。同時，產(chǎn)品作為服務(wù)功能的載體，交互動效為其交互過程提供了過渡和反饋。因此，在設(shè)計時需兼顧用戶與產(chǎn)品的雙重需求。

2.1 用戶需求分析

不同的產(chǎn)品有不同的用戶群體，產(chǎn)品方需通過用戶訪談、問卷調(diào)查等方式定期對用戶群體的屬性和特征進(jìn)行研究，以更好地了解用戶情境，并根據(jù)用戶情境主動識別用戶行為和任務(wù)情境[2]，從而增強(qiáng)交互動效設(shè)計的情境適應(yīng)性。在典型的移動應(yīng)用交互情境中，用戶對動效設(shè)計三個層面的需求總結(jié)如下：

（1）在基礎(chǔ)使用層面，用戶有學(xué)習(xí)引導(dǎo)的需求。移動端產(chǎn)品具備復(fù)雜的信息架構(gòu)，新用戶可能難以快速上手。動效設(shè)計能引導(dǎo)用戶理解產(chǎn)品結(jié)構(gòu)、熟悉操作流程。

（2）在行為期望層面，用戶有接收反饋的需求。在交互情境中，用戶的每一次操作都需要收到確認(rèn)和反饋信息。諾曼認(rèn)為產(chǎn)品需要向用戶提供信息，使用戶知道某一操作是否已經(jīng)完成以及操作所產(chǎn)生的結(jié)果，反饋信息應(yīng)當(dāng)符合用戶意圖，并以用戶易于理解的方式呈現(xiàn)[3]。動效反饋是完成交互操作必要的一環(huán)。

（3）在精神情感層面，用戶有趣味性滿足的需求。按照馬斯洛層次需求理論推導(dǎo)，在滿足基礎(chǔ)可用性的情況下，用戶在交互設(shè)計中也需要情感滿足[4]。趣味的動效設(shè)計能滿足用戶的娛樂性交互需求，提升用戶的愉悅感。

2.2 產(chǎn)品需求分析

動效設(shè)計需考慮產(chǎn)品目標(biāo)，不同階段有不同關(guān)鍵指標(biāo)，如用戶的參與度、轉(zhuǎn)化率和滿意度。在典型的移動應(yīng)用交互情境中，產(chǎn)品對動效設(shè)計三個層面的需求總結(jié)如下：

（1）在服務(wù)支撐層面，產(chǎn)品有降低能耗的需求。動效會占用一定資源，影響性能，需減少不必要和煩瑣的設(shè)計，降低內(nèi)存占用，提升使用性能。

（2）在基本業(yè)務(wù)層面，產(chǎn)品有增加易用性的需求。動效設(shè)計可引導(dǎo)用戶操作，提示關(guān)鍵信息，提高操作效率，幫助用戶快速上手并養(yǎng)成使用習(xí)慣。

（3）在表現(xiàn)拓展層面，產(chǎn)品有增加吸引力和傳達(dá)品牌價值的需求。通過動效設(shè)計打造與競品的差異化，提升用戶喜愛度和黏性，吸引用戶深入探索內(nèi)容；通過核心場景動效展示品牌價值，提升品牌形象和認(rèn)知。

2.3 綜合需求分析

對用戶和產(chǎn)品的需求進(jìn)行綜合分析，得出移動應(yīng)用的動效設(shè)計需滿足功能需求、情感需求和性能需求。

3" "基于需求匹配的移動應(yīng)用動效設(shè)計

3.1 動效設(shè)計原則

（1）自然。動效設(shè)計應(yīng)遵循真實世界的物理定律，如慣性和重力，以增強(qiáng)真實性和可預(yù)測性。這樣可以使用戶的交互體驗更自然，同時，應(yīng)確保動效流暢且符合物理規(guī)律，避免卡頓或不自然的現(xiàn)象。

（2）簡潔。對于動效設(shè)計，應(yīng)盡量簡化動效，縮短過渡時間，避免復(fù)雜和多余的動作。防止用戶注意力分散，讓用戶更專注于核心功能。同時，簡潔的動效還能降低產(chǎn)品能耗，提升性能。

（3）一致。在動效設(shè)計中，應(yīng)統(tǒng)一同一應(yīng)用場景下的風(fēng)格、時長、曲線和幀率等屬性，在增強(qiáng)界整體性的同時還有助于用戶更好地理解界面元素的變化。

（4）品牌。為了增強(qiáng)品牌特性，可基于品牌符號設(shè)計動效，這些動效應(yīng)在產(chǎn)品中規(guī)律性地反復(fù)出現(xiàn)，以加深用戶的記憶。這不僅增加了設(shè)計的趣味性，還提升了產(chǎn)品的吸引力和品牌感知。

使用品牌色可以加強(qiáng)品牌形象和用戶記憶。例如，中移互聯(lián)網(wǎng)公司采用其Logo的藍(lán)綠色調(diào)，通過三個圓形節(jié)點和它們之間的連線展示，改變節(jié)點大小和連線長度來表現(xiàn)旋轉(zhuǎn)。這三個圓形節(jié)點代表產(chǎn)品、用戶和品牌，象征在數(shù)智化時代公司與產(chǎn)品和用戶間建立的智能連接和共享關(guān)系。

3.2 動效設(shè)計類型

移動應(yīng)用中不同的使用場景對應(yīng)不同的動效類型，不同的動效類型也對應(yīng)不同的時長、運動曲線、幀率等基本參數(shù)。

動效時長受到其復(fù)雜程度和影響區(qū)域大小的影響。對于簡單動效如漸隱漸現(xiàn)或小范圍大小變化，時長通常在300 ms以內(nèi)。而對于復(fù)雜形狀或大范圍移動的動效，時長可以延長至500 ms。

動效設(shè)計中貝塞爾曲線常用于創(chuàng)建平滑的動畫過渡。主要類型包括標(biāo)準(zhǔn)曲線、加速曲線和減速曲線。標(biāo)準(zhǔn)曲線適用于始終在視線內(nèi)的元素，中段速度最快；加速曲線適用于元素的出場或消失，從靜止逐漸加速；減速曲線適用于進(jìn)場元素，速度從快到慢，最終靜止。

動效幀率（fps）即每秒鐘顯示的幀數(shù)。一般動效要達(dá)到流暢的效果需60 fps，插畫類動效幀率達(dá)到30 fps即可。

結(jié)合上文分析的交互動效設(shè)計綜合需求和通用原則，移動應(yīng)用中常見的動效設(shè)計類型及基本參數(shù)總結(jié)如下：

（1）進(jìn)度動效。進(jìn)度動效用于顯示任務(wù)進(jìn)度、載入狀態(tài)或數(shù)據(jù)更新，幫助用戶直觀了解系統(tǒng)處理的進(jìn)程，減少用戶的等待焦慮。

設(shè)計進(jìn)度指示器時，應(yīng)根據(jù)應(yīng)用場景和設(shè)計目的選擇顏色。建議使用品牌色為填充色，偏向品牌色的淺灰色為底色，停滯時使用紅色警示色。適用于顯示上傳下載和任務(wù)完成進(jìn)度等場景。

（2）加載動效。加載動效用于展示系統(tǒng)狀態(tài)，如獲取內(nèi)容或處理數(shù)據(jù)中。融合插畫元素可以增強(qiáng)情感表現(xiàn)和品牌特色，有趣的加載設(shè)計可以顯著提高用戶的等待體驗[5]加載動效時長根據(jù)系統(tǒng)處理時間決定，常采用線性或標(biāo)準(zhǔn)曲線，適用于圖片、視頻加載和下拉刷新等場景。

頁面加載動效的顏色應(yīng)根據(jù)背景色調(diào)選擇，淺色背景用品牌色系，深色背景用黑白灰色系，以提供足夠?qū)Ρ榷炔p少視覺疲勞。在網(wǎng)絡(luò)慢或需加載大量內(nèi)容時，建議使用骨架屏動效，該動效模擬內(nèi)容的最終布局，提供直觀的界面展示，改善用戶的等待體驗，增強(qiáng)對產(chǎn)品性能的正面感知。

（3）元素過渡動效。元素過渡動效指界面中元素的變化。元素變化的基本因素可以分為位移、縮放、形變、旋轉(zhuǎn)[6]，以及顏色和透明度的變化。元素過渡動效讓界面變化更自然流暢，增強(qiáng)用戶體驗的連貫性。過渡動效時長通常不超過200 ms。根據(jù)元素類型使用不同運動曲線：變化元素用標(biāo)準(zhǔn)曲線，進(jìn)場元素用減速曲線，出場元素用加速曲線。適用于照片瀏覽、圖文詳情等場景。

（4）界面元素變化包括單元素變化和多元素編排。多元素編排涉及較大范圍或全屏變化，展示元素間的邏輯關(guān)系，如主次和先后，以引導(dǎo)用戶注意力。在含共享容器的變化中，應(yīng)保持元素與容器動作的一致性，確保產(chǎn)品感知的統(tǒng)一。

（5）轉(zhuǎn)場動效。轉(zhuǎn)場動效可展示界面間的過渡變化，強(qiáng)調(diào)觸發(fā)元件與新頁面的連貫性，中心擴(kuò)散式轉(zhuǎn)場比左側(cè)、向下及向上覆蓋的轉(zhuǎn)場方式對于用戶沉浸體驗的效果更好[7]這種動效使用戶能清楚理解產(chǎn)品的界面結(jié)構(gòu)和空間關(guān)系。轉(zhuǎn)場時長通常不超過500 ms，切出時使用加速曲線，切入時使用減速曲線，適用于導(dǎo)航欄、二級頁面等切換場景。

轉(zhuǎn)場動效可分為左右層級頁面轉(zhuǎn)場和上下層級頁面轉(zhuǎn)場?？筛鶕?jù)具體需求在動效規(guī)范中統(tǒng)一頁面轉(zhuǎn)場切入的方向和方式，建立產(chǎn)品的一致性感知。

（6）手勢動效。手勢動效涉及觸控設(shè)備上的操作如點擊、滑動、捏合等，提供即時的操作反饋，增強(qiáng)用戶互動的自然感。動效時長通常在350 ms內(nèi)，根據(jù)變化的復(fù)雜度調(diào)整，一般使用標(biāo)準(zhǔn)曲線。適用于圖片捏合、列表滑動等場景。

手勢動效分為三部分：跟手階段強(qiáng)調(diào)實時響應(yīng)，離手瞬間保持響應(yīng)連貫性，離手后根據(jù)慣性繼續(xù)滑動，以貼合自然運動規(guī)律。

（7）插畫動效。插畫動效通過動態(tài)插畫在界面中傳達(dá)信息或引導(dǎo)用戶，能表達(dá)特定情感并吸引用戶注意力，提高信息傳遞效率。這種動效通常為循環(huán)動畫，適用于啟動頁和廣告banner等場景。

插畫動效雖趣味性強(qiáng)，但也應(yīng)避免設(shè)計過于復(fù)雜，以在確保功能可見性的同時不干擾用戶對界面其他內(nèi)容的感知和操作。

（8）圖標(biāo)微動效。圖標(biāo)微動效是界面中小圖標(biāo)的動畫或反饋，用于交互反饋與提升趣味性，增強(qiáng)用戶交互體驗。

4" "結(jié)束語

當(dāng)前移動應(yīng)用的動效設(shè)計常存在過度設(shè)計、不一致和不合理問題。需要在分析用戶和產(chǎn)品需求的基礎(chǔ)上，確立自然、簡潔、一致和品牌的設(shè)計原則。不同類型的動效應(yīng)強(qiáng)調(diào)功能和情感需求，并適用于相應(yīng)的場景?；谛枨笃ヅ涞囊苿討?yīng)用動效設(shè)計可以滿足產(chǎn)品和用戶的功能、情感及性能需求。

本文主要針對典型移動應(yīng)用交互情境進(jìn)行分析，具體的產(chǎn)品和用戶可能存在個性化因素的影響。未來隨著人工智能技術(shù)進(jìn)展，動效設(shè)計可能會實現(xiàn)智能化和自適應(yīng)化，根據(jù)用戶行為和喜好調(diào)整動效參數(shù)，并更注重情感化設(shè)計，以更自然地滿足用戶需求。

參考文獻(xiàn)

[1] 徐千堯，徐迎慶.智能手機(jī)動效設(shè)計研究[J].計算機(jī)輔助設(shè)計與圖形學(xué)學(xué)報，2020，32（7）：1095-1100.

[2] 張超，譚楓，康藝方.移動端導(dǎo)航中的微交互設(shè)計研究[J].工業(yè)設(shè)計，2021（7）：114-115.

[3] 諾曼.設(shè)計心理學(xué)[M].北京：中信出版社，2003：28-66.

[4] 王嘉騏.交互界面動效的情感化設(shè)計與趣味性審美[J].信息與電腦，2021，33（21）：10-12.

[5] Li S， Chen C H.The effects of visual feedback designs on long wait time of mobile application user interface[J].Interacting with Computers， 2019， 31（1）： 1-12.

[6] 高小汶，胡偉峰.基于情感體驗的移動應(yīng)用動效設(shè)計研究[J].設(shè)計，2022，35（4）：100-102.

[7] 張博，胡瑩.基于沉浸體驗的標(biāo)簽式導(dǎo)航轉(zhuǎn)場方式研究[J].包裝工程，2020，41（6），205-210.

作者簡介：潛" "冬（1992-），女，漢族，碩士，山西長治人，研究方向為動效設(shè)計。

黃慶慧（1980-），女，漢族，本科，湖北宜城人，研究方向為動效設(shè)計。

沈希鵬（1991-），男，漢族，碩士，廣東潮州人，研究方向為動效設(shè)計。

潘慧敏（1992-），女，漢族，本科，廣東廣州人，研究方向為動效設(shè)計。

柯樹森（1989-），男，漢族，本科，廣東吳川人，研究方向為動效設(shè)計。