2022-6-14 博博
動(dòng)態(tài)設(shè)計(jì)(Motion Design)有助于創(chuàng)建令人愉悅且直觀的用戶(hù)界面。好的動(dòng)態(tài)設(shè)計(jì),不僅能引導(dǎo)用戶(hù)對(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ì)必席卷所有人的目光。
動(dòng)態(tài)能激發(fā)用戶(hù)的情緒,為靜態(tài)的視覺(jué)設(shè)計(jì)注入活力與生命力。有趣、奇妙、吸引人的動(dòng)態(tài),能讓你的產(chǎn)品展現(xiàn)與眾不同的魅力。另一方面,動(dòng)態(tài)有助于支持可用性,通過(guò)自然流暢的物理運(yùn)動(dòng),突顯元素在過(guò)渡時(shí)的關(guān)聯(lián)性與狀態(tài)變化,增強(qiáng)用戶(hù)對(duì)產(chǎn)品功能的感知。
因此,動(dòng)態(tài)設(shè)計(jì)必須是有意義的,同時(shí)兼具可用性與美感,UX 行業(yè)也將動(dòng)態(tài)設(shè)計(jì)視為多學(xué)科的交集,細(xì)分成一個(gè)專(zhuān)業(yè)的設(shè)計(jì)門(mén)類(lèi)。作為 UI 和 UX 設(shè)計(jì)中重要的組成部分,動(dòng)態(tài)設(shè)計(jì)從三個(gè)層面發(fā)揮影響力:
提高連貫性(Increase Continuity)
讓界面元素在用戶(hù)流程中順暢地轉(zhuǎn)變與過(guò)渡,將用戶(hù)操作導(dǎo)向期望的任務(wù)結(jié)果。
連接場(chǎng)景(Connect Scenes)
在轉(zhuǎn)換場(chǎng)景的過(guò)程中扮演潤(rùn)滑劑的角色,闡明場(chǎng)景之間的位置、層級(jí)與空間的關(guān)系。
視覺(jué)吸引(Visually Appealing)
聚焦用戶(hù)視線(xiàn),將其注意力放在重要的事情上,從而起到信息傳達(dá)、提升識(shí)別度的作用。
植基于 UI 和 UX 設(shè)計(jì)而發(fā)展的第三維度,動(dòng)態(tài)設(shè)計(jì)的趨勢(shì)自然與兩者密不可分。綜觀近年,多數(shù)作品巧妙地運(yùn)用絢麗的動(dòng)態(tài)圖像(Motion Graphics)與動(dòng)效設(shè)計(jì),讓新的視覺(jué)手法得以表現(xiàn)更為出彩。再者,隨著移動(dòng)端芯片性能提升,跳脫二維平面的表現(xiàn)形式不再難以實(shí)現(xiàn),讓設(shè)計(jì)師能夠解開(kāi)束縛,發(fā)揮無(wú)限的想像空間。2021 年的動(dòng)態(tài)設(shè)計(jì)可歸納為三個(gè)趨勢(shì):
增強(qiáng)表達(dá)(Enhance Expression)
運(yùn)用引人注目的表現(xiàn)手法將信息傳遞給用戶(hù),包括變形、動(dòng)態(tài)文字和背景動(dòng)畫(huà)。
創(chuàng)造層次(Create Hierarchy)
在視覺(jué)平面中創(chuàng)建空間層次結(jié)構(gòu),遮罩與視差是常用的表現(xiàn)手法。
擴(kuò)展維度(Expand Dimensions)
突破二維限制,將界面元素多維化營(yíng)造空間感,例如 3D 動(dòng)態(tài)圖形和攝像機(jī)運(yùn)動(dòng)。
變形創(chuàng)造了一種連續(xù)的敘事?tīng)顟B(tài),告知用戶(hù)元素的狀態(tài)或作用發(fā)生變化,是一種最引人注目的表現(xiàn)手法,能將形狀、圖像、色彩無(wú)縫地融合與過(guò)渡。
動(dòng)畫(huà)插圖 Animated Illustrations
2021 年看到許多有趣、吸引人的插圖,而更多的設(shè)計(jì)師開(kāi)始為靜態(tài)圖像添加動(dòng)態(tài),也讓 GIF 和動(dòng)畫(huà)插圖越來(lái)越受歡迎。
動(dòng)畫(huà)插圖看起來(lái)更生動(dòng),并帶有敘事性質(zhì)。在示例中,運(yùn)用動(dòng)畫(huà)插圖來(lái)呈現(xiàn)這杯果汁是由哪些水果打成,比起文字描述更能吸引觀眾的注意力。
by Lobster
通過(guò)動(dòng)畫(huà)插圖來(lái)呈現(xiàn)同一系列的轉(zhuǎn)變,有利于延續(xù)外形上的特征,讓不同的物體具有連結(jié)性。比如從桌子、衣柜到燈具的連續(xù)變化,同樣風(fēng)格的系列家具利用動(dòng)畫(huà)來(lái)體現(xiàn)一致性。
by Graceful illustrations ?
流體動(dòng)態(tài) Liquid Motion
動(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)畫(huà)趨勢(shì)之一。
運(yùn)用流體動(dòng)態(tài)來(lái)展現(xiàn)抽象的有機(jī)體,除了輕易地攫取受眾目光,還讓人不自覺(jué)地佇足在畫(huà)面上,感受流體變化的韻律與美感。這類(lèi)動(dòng)態(tài)設(shè)計(jì)可作為烘托主題的背景動(dòng)畫(huà),或是吸引目光焦點(diǎn)的主角。
by ?anton mishin?
流體動(dòng)態(tài)運(yùn)用到網(wǎng)站設(shè)計(jì)所營(yíng)造的視覺(jué)沖擊力更為驚艷,能為用戶(hù)帶來(lái)獨(dú)特、新鮮的視覺(jué)感受, 使得流體動(dòng)態(tài)深受風(fēng)格前衛(wèi)的設(shè)計(jì)師喜愛(ài)。網(wǎng)站還能利用鼠標(biāo)懸停與流體進(jìn)行互動(dòng),因此會(huì)在許多特效網(wǎng)站見(jiàn)到流體動(dòng)態(tài)的蹤跡。
by Gilles Tossoukpé
動(dòng)態(tài)漸變 Dynamic Gradients
扁平化設(shè)計(jì)缺少現(xiàn)實(shí)質(zhì)感的元素,搭配漸變色能有效緩解不足,為設(shè)計(jì)創(chuàng)造深度與層次。變化中的漸變色同時(shí)帶有動(dòng)感與舒緩,充滿(mǎn)活力卻又平靜。使用動(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)漸變。
by Pixelz Studio
微交互 Micro Interactions
在用戶(hù)體驗(yàn)設(shè)計(jì)中微交互變得日益重要,而動(dòng)態(tài)設(shè)計(jì)正是微交互的靈魂所在,即使只是微小的視覺(jué)提示或反饋,都是人機(jī)交互易于使用的關(guān)鍵。從經(jīng)典案例來(lái)看,微交互的動(dòng)畫(huà)細(xì)節(jié)必須帶有明確的目的性,讓用戶(hù)獲得實(shí)時(shí)反饋,指導(dǎo)用戶(hù)進(jìn)行下一步。從近幾年的設(shè)計(jì)趨勢(shì)來(lái)看,微交互已成為不可或缺的存在。
by Илья Бабушкин
by Google
動(dòng)畫(huà)商標(biāo) Animated Logos
過(guò)去幾年動(dòng)畫(huà)商標(biāo)是最流行的動(dòng)畫(huà)趨勢(shì)之一,通過(guò)各種視覺(jué)效果,設(shè)計(jì)師能創(chuàng)造出不同類(lèi)型的動(dòng)畫(huà)商標(biāo),許多企業(yè)開(kāi)始采用動(dòng)畫(huà)商標(biāo)作為吸引注意力的手段。多數(shù)情況下,商標(biāo)是進(jìn)入網(wǎng)站時(shí)最先看到的東西,因此商標(biāo)應(yīng)該令人難忘、引人入勝,并使用符號(hào)或排版來(lái)揭示品牌個(gè)性。結(jié)合動(dòng)畫(huà)的優(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.
by Meta
動(dòng)態(tài)文字是使用移動(dòng)文本來(lái)吸引注意力的動(dòng)畫(huà)技術(shù),許多卓越的品牌在網(wǎng)頁(yè)設(shè)計(jì)中使用動(dòng)態(tài)文字,為網(wǎng)站外觀增添動(dòng)感和視覺(jué)沖擊力,是近年 UI 動(dòng)畫(huà)的趨勢(shì)之一。
設(shè)計(jì)師使用動(dòng)態(tài)文字為單詞或句子添加生動(dòng)的元素,借此定下情緒氛圍與設(shè)計(jì)基調(diào),吸引用戶(hù)的注意力。幾種常見(jiàn)的表現(xiàn)手法,擠壓和拉伸一個(gè)詞能會(huì)喚起一種俏皮感,而連續(xù)重復(fù)這個(gè)詞則具有催眠感和前衛(wèi)感。另外,使用大號(hào)和粗體字體來(lái)增強(qiáng)份量以強(qiáng)調(diào)某些信息,也是動(dòng)態(tài)文字的特征之一。
無(wú)論在電商網(wǎng)站、電視廣告或音樂(lè)視頻,動(dòng)態(tài)文字都占有舉足輕重的地位,有利于加深用戶(hù)對(duì)品牌的關(guān)注與印象。
by HOLOGRAPHIK®
by Hrvoje Grubisic
通過(guò)背景動(dòng)畫(huà)來(lái)強(qiáng)化敘事,成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動(dòng)態(tài)的品牌故事,展示有趣的制造過(guò)程、產(chǎn)品的使用場(chǎng)景。背景動(dòng)畫(huà)深獲大眾喜愛(ài),它能讓用戶(hù)在進(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)畫(huà)。
by Carlo Soleri
by Kirill Zhukovsky
遮罩過(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)畫(huà)之一。
切換場(chǎng)景 Scene-Switching
其中一種遮罩過(guò)渡,是將當(dāng)前場(chǎng)景完全置換,如同揭開(kāi)蒙在上層的布,逐漸展露疊在下方的景,并利用景物相似性和動(dòng)作延續(xù)性,讓兩個(gè)場(chǎng)景能夠順暢地銜接,不致于差異過(guò)大,造成用戶(hù)心理負(fù)擔(dān)。
by intent
by Minh Pham ?
狀態(tài)變換 State Transformation
另一種遮罩的表現(xiàn)形式,較無(wú)明顯的場(chǎng)景過(guò)渡,而是利用遮罩來(lái)表現(xiàn)景物的狀態(tài)變化,界面元素和布局基本保持一致,以此塑造無(wú)縫過(guò)渡的視覺(jué)效果,這種手法被廣泛地使用,例如氣候變化、人物換裝、產(chǎn)品組合等。
by Daniel Tan
by Outcrowd
視差是利用不同的界面元素以不同的速率移動(dòng),創(chuàng)造前后景深的分離效果,借此在平面中塑造空間層次,已成為網(wǎng)站首頁(yè)最為普遍的表現(xiàn)形式。
視差之所以能形成一股風(fēng)潮,廣為各個(gè)行業(yè)所接受,一方面是信息層級(jí)更加清晰,明確定義各種元素的關(guān)系,讓用戶(hù)專(zhuān)注于主要操作和內(nèi)容,將背景或非交互元素往后退,同時(shí)保持設(shè)計(jì)的完整性。另一方面是豐富的層次變化,當(dāng)用戶(hù)滾動(dòng)或滑動(dòng)時(shí),能在扁平化界面拉開(kāi)空間關(guān)系,利用不同的速率和縱深,塑造多層次的感官體驗(yàn)。
by Studio V?R
by Studio V?R
近年來(lái),結(jié)合 3D 動(dòng)態(tài)圖形的界面設(shè)計(jì)呈現(xiàn)爆炸式增長(zhǎng),雖然創(chuàng)建 3D 動(dòng)畫(huà)需要更多的時(shí)間、技巧與協(xié)作,但不可否認(rèn)的,3D 動(dòng)畫(huà)比 2D 圖形更加逼真,從而提供更具吸引力和互動(dòng)性的用戶(hù)體驗(yàn),并有效地展示品牌的活力。
更生動(dòng)的表情 Lively Emoji
動(dòng)畫(huà)的吸引力在于能夠創(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)潮。
by Outcrowd
營(yíng)造空間感 Spatial Awareness
3D 動(dòng)態(tài)圖形為平面設(shè)計(jì)建構(gòu)了空間敘事框架,在扁平化界面中展現(xiàn)立體感,從而表達(dá)空間中元素的位置與層級(jí)關(guān)系。多維化的發(fā)展趨勢(shì),推動(dòng)了視覺(jué)表達(dá)形式的演變,空間感讓界面設(shè)計(jì)更符合人類(lèi)的認(rèn)知邏輯,運(yùn)用各種 3D 運(yùn)動(dòng)特效,包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z 軸位移等,打造令人難忘的感官?zèng)_擊。
by UI8
by Bruno Ortolland
擬人動(dòng)畫(huà) Anthropomorphic Animations
擬人化能讓物體、植物、動(dòng)物等非人類(lèi)事物,表現(xiàn)出人類(lèi)屬性的行為與狀態(tài)。動(dòng)畫(huà)片運(yùn)用擬人的手法是最普遍的,1927 年迪士尼第一部系列動(dòng)畫(huà)《幸運(yùn)兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟?lèi)行事的事物所吸引,越來(lái)越多設(shè)計(jì)師在界面中添加擬人元素,利用這種效果讓畫(huà)面更加生動(dòng)有趣,增強(qiáng)用戶(hù)體驗(yàn)的愉悅感。
by Gregory Riaguzov
在動(dòng)態(tài)設(shè)計(jì)中,攝像機(jī)運(yùn)動(dòng)是最自由、靈活的一種表現(xiàn)形式,能讓畫(huà)面過(guò)渡更有張力,突破 2D 平面在視角上的限制,創(chuàng)造一個(gè)無(wú)界線(xiàn)的立體空間。常見(jiàn)于影視、動(dòng)畫(huà)和廣告的攝像機(jī)運(yùn)動(dòng),包括推近、拉出、平移、跟拍等方式,備受動(dòng)態(tài)設(shè)計(jì)師青睞,讓用戶(hù)以多變的視野探索數(shù)字產(chǎn)品。
推近/拉出 Dolly In/Dolly Out
推鏡頭是指被拍攝的對(duì)象不動(dòng),攝像機(jī)由遠(yuǎn)而近,朝著對(duì)象不斷推進(jìn), 用來(lái)突出人或物的主體。鏡頭推近的運(yùn)動(dòng)方式,用來(lái)呈現(xiàn)從整體到局部、由分散到集中的變化,引領(lǐng)用戶(hù)進(jìn)入故事情景,給人一種身臨其境的感受。
相反地,拉鏡頭則是將攝像機(jī)后退,使畫(huà)面逐漸遠(yuǎn)離被攝主體,側(cè)重的是從局部到整體、由點(diǎn)到面的轉(zhuǎn)變,強(qiáng)調(diào)主體所處的空間環(huán)境。隨鏡拉出的景象,能激起人們無(wú)限的想像。
水平/垂直移動(dòng) Truck/Pedestal
水平向左或向右,垂直向上或向下移動(dòng)攝像機(jī),使畫(huà)面不斷變化,讓用戶(hù)跟隨鏡頭視角一起移動(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)。
結(jié)合多種運(yùn)鏡 Multiple Camera Movements
運(yùn)用多種攝像機(jī)運(yùn)動(dòng)相當(dāng)普遍,既能擴(kuò)大視野,又有很強(qiáng)的空間感,可以更加自由與多樣地展示不同視角和情景。比方說(shuō)結(jié)合橫搖(Pan)、直搖(Tilt)和跟隨(Tracking)鏡頭,連續(xù)而詳盡地展示一個(gè)產(chǎn)品,由于畫(huà)面始終跟隨一個(gè)主體,有利于突出產(chǎn)品特征,并讓用戶(hù)從不同的角度和距離觀看產(chǎn)品,是一種增強(qiáng)臨場(chǎng)感和參與感的有效方法。
一鏡到底 One Shot
在電影中為了不將觀眾的情感和注意力割裂,使用一個(gè)鏡頭來(lái)完成全片的場(chǎng)景刻畫(huà)和敘事,這種拍攝手法被稱(chēng)作一鏡到底或長(zhǎng)鏡頭。連續(xù)鏡頭逐漸被運(yùn)用到界面過(guò)渡,以此增強(qiáng)操作過(guò)程的流暢性,例如一氣呵成的購(gòu)物體驗(yàn),或是貫穿全場(chǎng)的人物角色,其特點(diǎn)是給用戶(hù)最沉浸的感官體驗(yàn),無(wú)間斷地體驗(yàn)整個(gè)流程。
動(dòng)態(tài)設(shè)計(jì)作為近年熱門(mén)的創(chuàng)作形式,廣泛應(yīng)用到各個(gè)領(lǐng)域,逐漸成為設(shè)計(jì)的主流趨勢(shì)。受益于技術(shù)演進(jìn)與發(fā)展,從創(chuàng)意生產(chǎn)到落地實(shí)現(xiàn),動(dòng)態(tài)設(shè)計(jì)的門(mén)檻不再遙不可及。設(shè)計(jì)師得以將想法轉(zhuǎn)化為生動(dòng)、有趣的作品,并有機(jī)會(huì)創(chuàng)造新的表現(xiàn)手法,玩出許多新花樣,成為 2021 年動(dòng)態(tài)設(shè)計(jì)的特色。
本文歸納的設(shè)計(jì)趨勢(shì),有助于啟發(fā)設(shè)計(jì)師對(duì)動(dòng)態(tài)設(shè)計(jì)的想像,激發(fā)更多創(chuàng)作靈感,為靜態(tài)界面賦予靈魂,打造令人難忘的視覺(jué)體驗(yàn)和品牌形象。
轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.88yangsc.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)站設(shè)計(jì)之一:怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)
網(wǎng)站設(shè)計(jì)之二:旅游網(wǎng)站設(shè)計(jì)分析!教你10個(gè)小技巧
網(wǎng)站設(shè)計(jì)之三:實(shí)例教學(xué)!如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中?
網(wǎng)站設(shè)計(jì)之四:另辟蹊徑談創(chuàng)新!提升網(wǎng)站設(shè)計(jì)形式的幾種方法
網(wǎng)站設(shè)計(jì)之五:經(jīng)驗(yàn)分享:移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計(jì)之六:4000 字快速回顧20多年的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展史!
網(wǎng)站設(shè)計(jì)之七:騰訊出品!2021-2022設(shè)計(jì)趨勢(shì)報(bào)告:動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八:為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)?
網(wǎng)站設(shè)計(jì)之九:高手出品!2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十:如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)?來(lái)看 58 設(shè)計(jì)師的總結(jié)!
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.88yangsc.com