基于需求匹配的移動(dòng)應(yīng)用交互動(dòng)效設(shè)計(jì)研究

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

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

doi：10.3969/J.ISSN.1672-7274.2025.02.046

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

1" "移動(dòng)應(yīng)用動(dòng)效設(shè)計(jì)問(wèn)題分析

1.1 過(guò)度的設(shè)計(jì)

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

1.2 不一致的設(shè)計(jì)

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

1.3 不合理的設(shè)計(jì)

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

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

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

2.1 用戶需求分析

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

（1）在基礎(chǔ)使用層面，用戶有學(xué)習(xí)引導(dǎo)的需求。移動(dòng)端產(chǎn)品具備復(fù)雜的信息架構(gòu)，新用戶可能難以快速上手。動(dòng)效設(shè)計(jì)能引導(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]。動(dòng)效反饋是完成交互操作必要的一環(huán)。

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

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

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

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

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

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

2.3 綜合需求分析

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

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

3.1 動(dòng)效設(shè)計(jì)原則

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

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

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

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

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

3.2 動(dòng)效設(shè)計(jì)類型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4" "結(jié)束語(yǔ)

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

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

參考文獻(xiàn)

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

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

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

[4] 王嘉騏.交互界面動(dòng)效的情感化設(shè)計(jì)與趣味性審美[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àn)的移動(dòng)應(yīng)用動(dòng)效設(shè)計(jì)研究[J].設(shè)計(jì)，2022，35（4）：100-102.

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

作者簡(jiǎn)介：潛" "冬（1992-），女，漢族，碩士，山西長(zhǎng)治人，研究方向?yàn)閯?dòng)效設(shè)計(jì)。

黃慶慧（1980-），女，漢族，本科，湖北宜城人，研究方向?yàn)閯?dòng)效設(shè)計(jì)。

沈希鵬（1991-），男，漢族，碩士，廣東潮州人，研究方向?yàn)閯?dòng)效設(shè)計(jì)。

潘慧敏（1992-），女，漢族，本科，廣東廣州人，研究方向?yàn)閯?dòng)效設(shè)計(jì)。

柯樹(shù)森（1989-），男，漢族，本科，廣東吳川人，研究方向?yàn)閯?dòng)效設(shè)計(jì)。