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