1. 動態(tài)在 UI/UX 扮演的角色

動態(tài)能激發(fā)用戶的情緒，為靜態(tài)的視覺設(shè)計(jì)注入活力與生命力。有趣、奇妙、吸引人的動態(tài)，能讓你的產(chǎn)品展現(xiàn)與眾不同的魅力。另一方面，動態(tài)有助于支持可用性，通過自然流暢的物理運(yùn)動，突顯元素在過渡時的關(guān)聯(lián)性與狀態(tài)變化，增強(qiáng)用戶對產(chǎn)品功能的感知。

因此，動態(tài)設(shè)計(jì)必須是有意義的，同時兼具可用性與美感，UX 行業(yè)也將動態(tài)設(shè)計(jì)視為多學(xué)科的交集，細(xì)分成一個專業(yè)的設(shè)計(jì)門類。作為 UI 和 UX 設(shè)計(jì)中重要的組成部分，動態(tài)設(shè)計(jì)從三個層面發(fā)揮影響力：

提高連貫性（Increase Continuity）

讓界面元素在用戶流程中順暢地轉(zhuǎn)變與過渡，將用戶操作導(dǎo)向期望的任務(wù)結(jié)果。

連接場景（Connect Scenes）

在轉(zhuǎn)換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關(guān)系。

視覺吸引（Visually Appealing）

聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達(dá)、提升識別度的作用。

2. 動態(tài)設(shè)計(jì)趨勢

植基于 UI 和 UX 設(shè)計(jì)而發(fā)展的第三維度，動態(tài)設(shè)計(jì)的趨勢自然與兩者密不可分。綜觀近年，多數(shù)作品巧妙地運(yùn)用絢麗的動態(tài)圖像（Motion Graphics）與動效設(shè)計(jì)，讓新的視覺手法得以表現(xiàn)更為出彩。再者，隨著移動端芯片性能提升，跳脫二維平面的表現(xiàn)形式不再難以實(shí)現(xiàn)，讓設(shè)計(jì)師能夠解開束縛，發(fā)揮無限的想像空間。2021 年的動態(tài)設(shè)計(jì)可歸納為三個趨勢：

增強(qiáng)表達(dá)（Enhance Expression）

運(yùn)用引人注目的表現(xiàn)手法將信息傳遞給用戶，包括變形、動態(tài)文字和背景動畫。

創(chuàng)造層次（Create Hierarchy）

在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)，遮罩與視差是常用的表現(xiàn)手法。

擴(kuò)展維度（Expand Dimensions）

突破二維限制，將界面元素多維化營造空間感，例如 3D 動態(tài)圖形和攝像機(jī)運(yùn)動。

增強(qiáng)表達(dá)

1. 變形 Morphing

變形創(chuàng)造了一種連續(xù)的敘事狀態(tài)，告知用戶元素的狀態(tài)或作用發(fā)生變化，是一種最引人注目的表現(xiàn)手法，能將形狀、圖像、色彩無縫地融合與過渡。

動畫插圖 Animated Illustrations

2021 年看到許多有趣、吸引人的插圖，而更多的設(shè)計(jì)師開始為靜態(tài)圖像添加動態(tài)，也讓 GIF 和動畫插圖越來越受歡迎。

動畫插圖看起來更生動，并帶有敘事性質(zhì)。在示例中，運(yùn)用動畫插圖來呈現(xiàn)這杯果汁是由哪些水果打成，比起文字描述更能吸引觀眾的注意力。

by Lobster

通過動畫插圖來呈現(xiàn)同一系列的轉(zhuǎn)變，有利于延續(xù)外形上的特征，讓不同的物體具有連結(jié)性。比如從桌子、衣柜到燈具的連續(xù)變化，同樣風(fēng)格的系列家具利用動畫來體現(xiàn)一致性。

by Graceful illustrations ?

流體動態(tài) Liquid Motion

動態(tài)的有機(jī)形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強(qiáng)視覺效果。流體動態(tài)并非明確的過渡與場景轉(zhuǎn)換，而是顏色在流動的液體中擴(kuò)散，進(jìn)而創(chuàng)造出抽象或真實(shí)的視覺形狀。這種風(fēng)格能實(shí)現(xiàn)無縫過渡，并為設(shè)計(jì)增添有機(jī)感，也是 2021 年最引人注目的動畫趨勢之一。

運(yùn)用流體動態(tài)來展現(xiàn)抽象的有機(jī)體，除了輕易地攫取受眾目光，還讓人不自覺地佇足在畫面上，感受流體變化的韻律與美感。這類動態(tài)設(shè)計(jì)可作為烘托主題的背景動畫，或是吸引目光焦點(diǎn)的主角。

by ?anton mishin?

流體動態(tài)運(yùn)用到網(wǎng)站設(shè)計(jì)所營造的視覺沖擊力更為驚艷，能為用戶帶來獨(dú)特、新鮮的視覺感受， 使得流體動態(tài)深受風(fēng)格前衛(wèi)的設(shè)計(jì)師喜愛。網(wǎng)站還能利用鼠標(biāo)懸停與流體進(jìn)行互動，因此會在許多特效網(wǎng)站見到流體動態(tài)的蹤跡。

by Gilles Tossoukpé

動態(tài)漸變 Dynamic Gradients

扁平化設(shè)計(jì)缺少現(xiàn)實(shí)質(zhì)感的元素，搭配漸變色能有效緩解不足，為設(shè)計(jì)創(chuàng)造深度與層次。變化中的漸變色同時帶有動感與舒緩，充滿活力卻又平靜。使用動態(tài)漸變能讓設(shè)計(jì)師展示一系列不斷變化的情緒，許多內(nèi)容創(chuàng)作者和品牌已經(jīng)注意到這一點(diǎn)，開始在廣告活動、識別設(shè)計(jì)和數(shù)字內(nèi)容使用動態(tài)漸變。

by Pixelz Studio

微交互 Micro Interactions

在用戶體驗(yàn)設(shè)計(jì)中微交互變得日益重要，而動態(tài)設(shè)計(jì)正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機(jī)交互易于使用的關(guān)鍵。從經(jīng)典案例來看，微交互的動畫細(xì)節(jié)必須帶有明確的目的性，讓用戶獲得實(shí)時反饋，指導(dǎo)用戶進(jìn)行下一步。從近幾年的設(shè)計(jì)趨勢來看，微交互已成為不可或缺的存在。

by Илья Бабушкин

by Google

動畫商標(biāo) Animated Logos

過去幾年動畫商標(biāo)是最流行的動畫趨勢之一，通過各種視覺效果，設(shè)計(jì)師能創(chuàng)造出不同類型的動畫商標(biāo)，許多企業(yè)開始采用動畫商標(biāo)作為吸引注意力的手段。多數(shù)情況下，商標(biāo)是進(jìn)入網(wǎng)站時最先看到的東西，因此商標(biāo)應(yīng)該令人難忘、引人入勝，并使用符號或排版來揭示品牌個性。結(jié)合動畫的優(yōu)勢，設(shè)計(jì)師可以運(yùn)用一些動態(tài)或效果來講述簡短的故事以強(qiáng)調(diào)品牌特征，并為靜態(tài)排版和商標(biāo)注入一股活力。

by Yulia K.

by Meta

2. 動態(tài)文字 Kinetic Typography

動態(tài)文字是使用移動文本來吸引注意力的動畫技術(shù)，許多卓越的品牌在網(wǎng)頁設(shè)計(jì)中使用動態(tài)文字，為網(wǎng)站外觀增添動感和視覺沖擊力，是近年 UI 動畫的趨勢之一。

設(shè)計(jì)師使用動態(tài)文字為單詞或句子添加生動的元素，借此定下情緒氛圍與設(shè)計(jì)基調(diào)，吸引用戶的注意力。幾種常見的表現(xiàn)手法，擠壓和拉伸一個詞能會喚起一種俏皮感，而連續(xù)重復(fù)這個詞則具有催眠感和前衛(wèi)感。另外，使用大號和粗體字體來增強(qiáng)份量以強(qiáng)調(diào)某些信息，也是動態(tài)文字的特征之一。

無論在電商網(wǎng)站、電視廣告或音樂視頻，動態(tài)文字都占有舉足輕重的地位，有利于加深用戶對品牌的關(guān)注與印象。

by HOLOGRAPHIK®

by Hrvoje Grubisic

3. 背景動畫 Background Animation

通過背景動畫來強(qiáng)化敘事，成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動態(tài)的品牌故事，展示有趣的制造過程、產(chǎn)品的使用場景。背景動畫深獲大眾喜愛，它能讓用戶在進(jìn)入登錄頁或網(wǎng)站首頁時，輕易地了解更多有關(guān)公司或產(chǎn)品的信息。調(diào)研顯示，從銀行、醫(yī)療保健公司、電商零售商、餐館到 B2B 供應(yīng)商，這些跨越不同細(xì)分市場和行業(yè)的網(wǎng)站都開始使用背景動畫。

by Carlo Soleri

by Kirill Zhukovsky

創(chuàng)造層次

1. 遮罩 Masking

遮罩過渡是將幾何或有機(jī)形狀作為銜接下個場景的遮擋物，等同于舞臺幕布設(shè)計(jì)，能在界面元素進(jìn)場或退場時創(chuàng)造連續(xù)性效果。這種表現(xiàn)手法簡潔高效，是最常見的過渡動畫之一。

切換場景 Scene-Switching

其中一種遮罩過渡，是將當(dāng)前場景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動作延續(xù)性，讓兩個場景能夠順暢地銜接，不致于差異過大，造成用戶心理負(fù)擔(dān)。

by intent

by Minh Pham ?

狀態(tài)變換 State Transformation

另一種遮罩的表現(xiàn)形式，較無明顯的場景過渡，而是利用遮罩來表現(xiàn)景物的狀態(tài)變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產(chǎn)品組合等。

by Daniel Tan

by Outcrowd

2. 視差 Parallax

視差是利用不同的界面元素以不同的速率移動，創(chuàng)造前后景深的分離效果，借此在平面中塑造空間層次，已成為網(wǎng)站首頁最為普遍的表現(xiàn)形式。

視差之所以能形成一股風(fēng)潮，廣為各個行業(yè)所接受，一方面是信息層級更加清晰，明確定義各種元素的關(guān)系，讓用戶專注于主要操作和內(nèi)容，將背景或非交互元素往后退，同時保持設(shè)計(jì)的完整性。另一方面是豐富的層次變化，當(dāng)用戶滾動或滑動時，能在扁平化界面拉開空間關(guān)系，利用不同的速率和縱深，塑造多層次的感官體驗(yàn)。

by Studio V?R

by Studio V?R

擴(kuò)展維度

1. 3D 動態(tài)圖形 3D Motion Graphics

近年來，結(jié)合 3D 動態(tài)圖形的界面設(shè)計(jì)呈現(xiàn)爆炸式增長，雖然創(chuàng)建 3D 動畫需要更多的時間、技巧與協(xié)作，但不可否認(rèn)的，3D 動畫比 2D 圖形更加逼真，從而提供更具吸引力和互動性的用戶體驗(yàn)，并有效地展示品牌的活力。

更生動的表情 Lively Emoji

動畫的吸引力在于能夠創(chuàng)建各種角色，并為無生命物體注入生命力，表情符號就是一個很好的例子。作為獨(dú)特的網(wǎng)絡(luò)語言，表情符號生動地描摹日常面對面交流的非言語信息，隨著圖形界面的設(shè)計(jì)趨勢逐漸結(jié)合 2D 與 3D，運(yùn)用 3D 動態(tài)圖形來創(chuàng)造更加動感、擬人化的表情，能讓這些非言語信息更加豐富，有機(jī)會引領(lǐng)下一波風(fēng)潮。

by Outcrowd

營造空間感 Spatial Awareness

3D 動態(tài)圖形為平面設(shè)計(jì)建構(gòu)了空間敘事框架，在扁平化界面中展現(xiàn)立體感，從而表達(dá)空間中元素的位置與層級關(guān)系。多維化的發(fā)展趨勢，推動了視覺表達(dá)形式的演變，空間感讓界面設(shè)計(jì)更符合人類的認(rèn)知邏輯，運(yùn)用各種 3D 運(yùn)動特效，包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z 軸位移等，打造令人難忘的感官沖擊。

by UI8

by Bruno Ortolland

擬人動畫 Anthropomorphic Animations

擬人化能讓物體、植物、動物等非人類事物，表現(xiàn)出人類屬性的行為與狀態(tài)。動畫片運(yùn)用擬人的手法是最普遍的，1927 年迪士尼第一部系列動畫《幸運(yùn)兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟愋惺碌氖挛锼?，越來越多設(shè)計(jì)師在界面中添加擬人元素，利用這種效果讓畫面更加生動有趣，增強(qiáng)用戶體驗(yàn)的愉悅感。

by Gregory Riaguzov

2. 攝像機(jī)運(yùn)動 Camera Movements

在動態(tài)設(shè)計(jì)中，攝像機(jī)運(yùn)動是最自由、靈活的一種表現(xiàn)形式，能讓畫面過渡更有張力，突破 2D 平面在視角上的限制，創(chuàng)造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機(jī)運(yùn)動，包括推近、拉出、平移、跟拍等方式，備受動態(tài)設(shè)計(jì)師青睞，讓用戶以多變的視野探索數(shù)字產(chǎn)品。

推近/拉出 Dolly In/Dolly Out

推鏡頭是指被拍攝的對象不動，攝像機(jī)由遠(yuǎn)而近，朝著對象不斷推進(jìn)， 用來突出人或物的主體。鏡頭推近的運(yùn)動方式，用來呈現(xiàn)從整體到局部、由分散到集中的變化，引領(lǐng)用戶進(jìn)入故事情景，給人一種身臨其境的感受。

相反地，拉鏡頭則是將攝像機(jī)后退，使畫面逐漸遠(yuǎn)離被攝主體，側(cè)重的是從局部到整體、由點(diǎn)到面的轉(zhuǎn)變，強(qiáng)調(diào)主體所處的空間環(huán)境。隨鏡拉出的景象，能激起人們無限的想像。

by Michael Crawford

by Ali Zafar Iqbal

水平/垂直移動 Truck/Pedestal

水平向左或向右，垂直向上或向下移動攝像機(jī)，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動，產(chǎn)生一種置身其中的感覺。這種運(yùn)鏡方式，通常用于具體的場景，利用角色或景物的延續(xù)性來消除場景過渡時的邊界，表現(xiàn)出一種流動感，無論是手勢滑動或鼠標(biāo)滾動都能有順暢的操作體驗(yàn)。

by Netguru

by Minh Pham

結(jié)合多種運(yùn)鏡 Multiple Camera Movements

運(yùn)用多種攝像機(jī)運(yùn)動相當(dāng)普遍，既能擴(kuò)大視野，又有很強(qiáng)的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結(jié)合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續(xù)而詳盡地展示一個產(chǎn)品，由于畫面始終跟隨一個主體，有利于突出產(chǎn)品特征，并讓用戶從不同的角度和距離觀看產(chǎn)品，是一種增強(qiáng)臨場感和參與感的有效方法。

by Sang Nguyen

by Paul Ilnitski

一鏡到底 One Shot

在電影中為了不將觀眾的情感和注意力割裂，使用一個鏡頭來完成全片的場景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長鏡頭。連續(xù)鏡頭逐漸被運(yùn)用到界面過渡，以此增強(qiáng)操作過程的流暢性，例如一氣呵成的購物體驗(yàn)，或是貫穿全場的人物角色，其特點(diǎn)是給用戶最沉浸的感官體驗(yàn)，無間斷地體驗(yàn)整個流程。

by Orizon: UI/UX Design Agency

by Minh Pham ?

結(jié)語

動態(tài)設(shè)計(jì)作為近年熱門的創(chuàng)作形式，廣泛應(yīng)用到各個領(lǐng)域，逐漸成為設(shè)計(jì)的主流趨勢。受益于技術(shù)演進(jìn)與發(fā)展，從創(chuàng)意生產(chǎn)到落地實(shí)現(xiàn)，動態(tài)設(shè)計(jì)的門檻不再遙不可及。設(shè)計(jì)師得以將想法轉(zhuǎn)化為生動、有趣的作品，并有機(jī)會創(chuàng)造新的表現(xiàn)手法，玩出許多新花樣，成為 2021 年動態(tài)設(shè)計(jì)的特色。

本文歸納的設(shè)計(jì)趨勢，有助于啟發(fā)設(shè)計(jì)師對動態(tài)設(shè)計(jì)的想像，激發(fā)更多創(chuàng)作靈感，為靜態(tài)界面賦予靈魂，打造令人難忘的視覺體驗(yàn)和品牌形象。

文章來源：優(yōu)設(shè) 作者：騰訊ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)