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