動態(tài)設(shè)計（Motion Design）有助于創(chuàng)建令人愉悅且直觀的用戶界面。好的動態(tài)設(shè)計，不僅能引導用戶對數(shù)字產(chǎn)品的體驗，還可傳達有關(guān)產(chǎn)品的品牌信息。本文將介紹近來最流行的動態(tài)設(shè)計趨勢，這些令人驚艷的動效表現(xiàn)手法，在不久的將來勢必席卷所有人的目光。
1.1 動態(tài)在UI/UX扮演的角色
讓界面元素在用戶流程中順暢地轉(zhuǎn)變與過渡，將用戶操作導向期望的任務(wù)結(jié)果。
在轉(zhuǎn)換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關(guān)系。
聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達、提升識別度的作用。
1.2 動態(tài)設(shè)計趨勢
運用引人注目的表現(xiàn)手法將信息傳遞給用戶，包括變形、動態(tài)文字和背景動畫。
在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)，遮罩與視差是常用的表現(xiàn)手法。
突破二維限制，將界面元素多維化營造空間感，例如3D動態(tài)圖形和攝像機運動。
2.1 變形 Morphing
2021年看到許多有趣、吸引人的插圖，而更多的設(shè)計師開始為靜態(tài)圖像添加動態(tài)，也讓GIF和動畫插圖越來越受歡迎。
動態(tài)的有機形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強視覺效果。流體動態(tài)并非明確的過渡與場景轉(zhuǎn)換，而是顏色在流動的液體中擴散，進而創(chuàng)造出抽象或真實的視覺形狀。這種風格能實現(xiàn)無縫過渡，并為設(shè)計增添有機感，也是2021年最引人注目的動畫趨勢之一。
扁平化設(shè)計缺少現(xiàn)實質(zhì)感的元素，搭配漸變色能有效緩解不足，為設(shè)計創(chuàng)造深度與層次。變化中的漸變色同時帶有動感與舒緩，充滿活力卻又平靜。使用動態(tài)漸變能讓設(shè)計師展示一系列不斷變化的情緒，許多內(nèi)容創(chuàng)作者和品牌已經(jīng)注意到這一點，開始在廣告活動、識別設(shè)計和數(shù)字內(nèi)容使用動態(tài)漸變。
在用戶體驗設(shè)計中微交互變得日益重要，而動態(tài)設(shè)計正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機交互易于使用的關(guān)鍵。從經(jīng)典案例來看，微交互的動畫細節(jié)必須帶有明確的目的性，讓用戶獲得實時反饋，指導用戶進行下一步。從近幾年的設(shè)計趨勢來看，微交互已成為不可或缺的存在。
by Илья Бабушкин
過去幾年動畫商標是最流行的動畫趨勢之一，通過各種視覺效果，設(shè)計師能創(chuàng)造出不同類型的動畫商標，許多企業(yè)開始采用動畫商標作為吸引注意力的手段。多數(shù)情況下，商標是進入網(wǎng)站時最先看到的東西，因此商標應(yīng)該令人難忘、引人入勝，并使用符號或排版來揭示品牌個性。結(jié)合動畫的優(yōu)勢，設(shè)計師可以運用一些動態(tài)或效果來講述簡短的故事以強調(diào)品牌特征，并為靜態(tài)排版和商標注入一股活力。
by Yulia K.
動態(tài)文字是使用移動文本來吸引注意力的動畫技術(shù)，許多卓越的品牌在網(wǎng)頁設(shè)計中使用動態(tài)文字，為網(wǎng)站外觀增添動感和視覺沖擊力，是近年UI動畫的趨勢之一。
by HOLOGRAPHIK®
通過背景動畫來強化敘事，成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動態(tài)的品牌故事，展示有趣的制造過程、產(chǎn)品的使用場景。背景動畫深獲大眾喜愛，它能讓用戶在進入登錄頁或網(wǎng)站首頁時，輕易地了解更多有關(guān)公司或產(chǎn)品的信息。調(diào)研顯示,從銀行、醫(yī)療保健公司、電商零售商、餐館到B2B供應(yīng)商，這些跨越不同細分市場和行業(yè)的網(wǎng)站都開始使用背景動畫。
by Carlo Soleri
by Kirill Zhukovsky
3.1 遮罩 Masking
遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物，等同于舞臺幕布設(shè)計，能在界面元素進場或退場時創(chuàng)造連續(xù)性效果。這種表現(xiàn)手法簡潔高效，是最常見的過渡動畫之一。
其中一種遮罩過渡，是將當前場景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動作延續(xù)性，讓兩個場景能夠順暢地銜接，不致于差異過大，造成用戶心理負擔。
by intent
另一種遮罩的表現(xiàn)形式，較無明顯的場景過渡，而是利用遮罩來表現(xiàn)景物的狀態(tài)變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產(chǎn)品組合等。
by Daniel Tan
3.2 視差 Parallax
視差是利用不同的界面元素以不同的速率移動，創(chuàng)造前后景深的分離效果，借此在平面中塑造空間層次，已成為網(wǎng)站首頁最為普遍的表現(xiàn)形式。
by Studio V?R
4.1 3D動態(tài)圖形 3D Motion Graphics
近年來，結(jié)合3D動態(tài)圖形的界面設(shè)計呈現(xiàn)爆炸式增長，雖然創(chuàng)建3D動畫需要更多的時間、技巧與協(xié)作，但不可否認的，3D動畫比2D圖形更加逼真，從而提供更具吸引力和互
動畫的吸引力在于能夠創(chuàng)建各種角色，并為無生命物體注入生命力，表情符號就是一個很好的例子。作為獨特的網(wǎng)絡(luò)語言，表情符號生動地描摹日常面對面交流的非言語信息，隨著圖形界面的設(shè)計趨勢逐漸結(jié)合2D與3D，運用3D動態(tài)圖形來創(chuàng)造更加動感、擬人化的表情，能讓這些非言語信息更加豐富，有機會引領(lǐng)下一波風潮。
3D動態(tài)圖形為平面設(shè)計建構(gòu)了空間敘事框架，在扁平化界面中展現(xiàn)立體感，從而表達空間中元素的位置與層級關(guān)系。多維化的發(fā)展趨勢，推動了視覺表達形式的演變，空間感讓界面設(shè)計更符合人類的認知邏輯，運用各種3D運動特效，包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z軸位移等，打造令人難忘的感官沖擊。
by UI8
擬人化能讓物體、植物、動物等非人類事物，表現(xiàn)出人類屬性的行為與狀態(tài)。動畫片運用擬人的手法是最普遍的，1927年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟愋惺碌氖挛锼?，越來越多設(shè)計師在界面中添加擬人元素，利用這種效果讓畫面更加生動有趣，增強用戶體驗的愉悅感。
在動態(tài)設(shè)計中，攝像機運動是最自由、靈活的一種表現(xiàn)形式，能讓畫面過渡更有張力，突破2D平面在視角上的限制，創(chuàng)造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動，包括推近、拉出、平移、跟拍等方式，備受動態(tài)設(shè)計師青睞，讓用戶以多變的視野探索數(shù)字產(chǎn)品。
推鏡頭是指被拍攝的對象不動，攝像機由遠而近，朝著對象不斷推進， 用來突出人或物的主體。鏡頭推近的運動方式，用來呈現(xiàn)從整體到局部、由分散到集中的變化，引領(lǐng)用戶進入故事情景，給人一種身臨其境的感受。
by Michael Crawford
水平向左或向右，垂直向上或向下移動攝像機，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動，產(chǎn)生一種置身其中的感覺。這種運鏡方式，通常用于具體的場景，利用角色或景物的延續(xù)性來消除場景過渡時的邊界，表現(xiàn)出一種流動感，無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。
by Netguru
運用多種攝像機運動相當普遍，既能擴大視野，又有很強的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結(jié)合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續(xù)而詳盡地展示一個產(chǎn)品，由于畫面始終跟隨一個主體，有利于突出產(chǎn)品特徵，并讓用戶從不同的角度和距離觀看產(chǎn)品，是一種增強臨場感和參與感的有效方法。
by Gregory Riaguzov
在電影中為了不將觀眾的情感和注意力割裂，使用一個鏡頭來完成全片的場景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長鏡頭。連續(xù)鏡頭逐漸被運用到界面過渡，以此增強操作過程的流暢性，例如一氣呵成的購物體驗，或是貫穿全場的人物角色，其特點是給用戶最沉浸的感官體驗，無間斷地體驗整個流程。
by Orizon: UI/UX Design Agency
by Minh Pham ?
