好奇心總在驅使著人類進步，從二維到五維空間，從登陸月球到地球以外 930 億光年的宇宙空間探索，人類的進步永不止步。如今在互聯網技術的高速發展下，用戶的審美、訴求都在不斷提高，同時反向推動設計的進步。近些年，你會發現，更多的設計“動了起來”。今天就帶大家來了解一下「動態平面設計」。

關于動態設計趨勢：

一、動態平面設計是什么？

「動態設計是基于一定的靜態基本視覺元素，通過動畫軟件將其再設計成一種特定時間內，會發生運動和變化的圖形結果。」

當然在交互設計中，動態平面設計也與界面設計有所交集，被稱之為界面動效，這次我們討論的范圍包含了界面之外的應用場景。對于設計師而言，需要去學習及擁抱這一趨勢。

二、作用

1. 提高連貫性

讓界面元素在用戶流程中順暢地轉變與過渡，將用戶操作導向期望的任務結果。

連續性的動作有助于引導用戶完成任務

2. 鏈接場景

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

3. 視覺吸引

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

三、優勢

相較于靜態平面，更具有感染力，通過增加「刪除線」「眼睛的偏移位置」「伸手動作」來強化海報“不要”的情緒。

增加動態區域后：

設計創意來自@小紅書 HE毛蛋

與靜態平面不同的是，動態平面可在一定時間內給予用戶一定的沉浸體驗。

靜態平面也能給予用戶沉浸體驗，但多數為多張圖去表達含義，大家最熟悉的莫過于漫畫，或是一些影視作品的分鏡，從而達到用戶置身于故事情節內的體驗目的。

動態平面更多的是讓用戶參與到一種交流活動中，用戶可以以自己的選擇去導向一種結果，更趨向于一種簡單的 RPG（角色扮演）游戲。

動起來后的趣味性，也是吸引用戶并且加深記憶點的方式，點擊按鈕的動作對比與方言的結合，使得海報宣傳更加生動且親切，容易增加用戶的代入感。

創意來自@小紅書 HE毛蛋

四、類型

1. 混合媒體/動畫拼貼

動畫拼貼總給人一種復古 vibe，如同像素風格，拉回到舊時光?！竁e the people」是由 Netflix 網飛推出的動畫，以定格、拼貼、字體等多種藝術形式，講述了美國的立法史。

@Netflix

2. 動態字體

動態字體通過變形與音樂相結合，可表達字體的性格，或靈動活潑，或成熟穩重。如果是作為品牌的宣傳，也能起到展示品牌調性的意圖。喜茶聯合方正字體所推出的專屬字體，在字體斜筆和勾畫的彎曲幅度上進行了微調，曲率更克制平滑，使得字體更簡潔、年輕態并多了一份親和力。

@喜茶 x 方正字庫

3. 故障效果

故障錯位感給人一種身臨全數字化氛圍中，特別是賽博朋克的影響，給人一種未來感，在科技進步的同時，又有一定的失序感。

4. 復古懷舊

復古懷舊把人們拉回到文藝復興時期，用舊物搭配上現代的梗致敬經典。

5. 變形

變形使動畫的轉場更有趣且多層次。

6. 液體動態

液體在光線折射下能使物體產生形變，這種動態形式運用到動態平面中，產生一種獨特風格。

五、應用范圍

1. 海報、自媒體等

廈門磐基名品中心 The Little 的開業動態海報，結合了「兒童好物」這一主題，使用的圖形均以簡單的幾何形態勾勒出可愛童趣的一面。通過箱子擬人、幾何形狀的變形及音樂配合達到多元、有趣的表現形式。

@地心引力品牌設計

通過對平面的「轉場」「疊加」「快速切換」等，讓用戶大致了解其設計風格，適合運用至品牌宣傳、個人風格表現等。

@by Design style

對于突出個性風格越發顯著的自媒體時代，每個公眾號都想要閱讀量 10w+文章，排版設計風格已成重要的輔助。通過采訪者相關元素提取到設計排版中，紙板箱印刷字、夜市塑料凳增添了「街頭采訪」的意味，產生一種輕松隨意的交流氛圍。

@by「設計便利店」公眾號

2. 品牌 logo

① airbnb

「airbnb」由 4 個 icon 結合而成，提取了 4 種含義創造出這個新 logo：

1. 以人為本，所有的功能都應基于用戶痛點出發，以用戶使用的滿意度為情緒素材；
2. 其次由產品所到目的地的 icon 作為創作元素；
3. 整個旅程是愉悅的感受，路途中也充滿著驚喜，愛也是人文關懷精神的體現；
4. 取自 airbnb 首字母「A」。

四種圖形的融合，成為 airbnb 的 logo。

通過動態形式，描述「我們是干什么的」。動態 logo 由小場景到大場景切換，并最終回歸到 logo 本身，表達「我們能夠定到任何形式的民宿」。

彈性圓潤的線條給人一種輕松愉悅感，與度假的心情相得益彰。與此同時，品牌表達出能給予用戶多種品類選擇的含義。

@airbnb

② Meta（Facebook）

品牌 logo 改版也可以通過動態形式表達。去年 Facebook 改名為 Meta。logo 也隨之改版，通過一張動態圖能清楚知道，扎克伯格希望 Meta 是多種媒體媒介和技術的集成。

他表示 Facebook 名字不能包含集團的一切，「元宇宙」概念是以 VR 和 AR 技術構建的超級虛擬世界，在此空間中人們可以開虛擬會議室進行工作、社交和玩游戲，它打破了物理空間的局限性。

有很多人將新 logo 解讀為「無限」的符號，象征著「元宇宙」中的無限視野。這說對了一半，這里覺得更多的是借鑒了「莫比烏斯帶」的概念。

「莫比烏斯帶」與普通紙帶具有兩個面（雙側曲面）不同，它只有一個面（單側曲面），因此它就有了可「無限」運動的意義。

莫比烏斯帶

Meta 的動態 logo 使我們看到了從 2D 轉換為 3D 的視角。起先是平面圓環，后來扭曲 180 度，形成 3D 狀態，動態的優勢是讓視覺看見了空間。

3. 網頁交互

網頁也是動態效果最常見的地方，特別是品牌類網站。動態交互首先為了提升品牌影響力與調性，再來網站也是用戶體驗的最直接接觸方式，可能產品實物還未見到，網站即變成了初見面的第一印象。

@蘋果官網

對于工具軟件型網站來說，動態平面更便于用戶去了解產品功能及用途，并給予網站賦予趣味性。

@Figma 官網

一些純視覺的動態交互，適合用在個人主頁、展會等宣傳。

上圖為鼠標拖動的交互

上圖為菜單的交互

4. 商業廣告

動態設計商業廣告方面也不容小覷。蕉內以圓形、矩形、多邊形及圓角矩形為基本元素，象征產品多樣性，通過字符的不斷變換及延展，讓新用戶首先了解到其品牌類別（服飾類），再到之后呈現形象人物，并用品牌色點綴身體部位，表示品牌做的是關于內衣的產品。

@蕉內

diptyque 新產品北京城市限定 PEKIN 宣傳片由 PARALLEL STUDIO 制作，比較特別的是全動畫的視覺效果，櫻花、宮廷與龍的元素穿插其中，優雅且有歷史底蘊，契合北京城市限定主題。

@diptyque

5. 會展宣傳

2020 臺灣設計展主視覺形象由臺灣知名設計工作室卵形設計的負責人葉忠宜操刀，以主題「Check in 新竹--人來風」為核心概念，使用「風」「wifi」「竹」「網絡」「方向」等概念，提取幾何圖形符號來詮釋「一位客人到達新竹的旅程」生動的動態感。

「風」，邊界由圓潤到尖銳，并以轉動的動態形式幻化成新竹獸，網格的拓展讓畫面更具有延展性，旋起「人來風」。

「wifi」，用信號的圖標，體現信息的傳遞與擴散，也是貫穿這一動態主題的媒介之一。

「竹」，字體簡化成箭頭圖形，并作為「去往新竹」的方向指引，存在于畫面中并可擴大至各種設施應用的指示圖形中。

2020 臺灣設計展 logo 動態

第 59 屆 2022 金馬獎主視覺設計由劉耕名擔任視覺統籌，并攜手 Bito 設計團隊打造。其動態視覺海報在平面狀態時，被分為正視圖與側視圖，而在 3D 動效海報中，將「59」字型構成金馬圖騰，通過 90 度翻轉時，則變換形態為「金馬」兩字。

「金馬」兩字以幕后工作人員避免光線反射的黑色服裝為底色，呈現噴漆顏料水漬、定位膠帶的標記、劇場器材間的磨損刮痕，各種記號形成交錯的痕跡。這也體現了他們在幕后兢兢業業地付出，克服無數困難的勇氣。

“金馬 59” 主視覺橫版及豎版

6. NFT 相關

伴隨著數字藝術近年來的興起，很多平面設計大師也開始駐足于此，對于普通數字愛好者來說，也能將自己的創作品發布于 OpenSea（海外）或是國內部分 NFT 平臺（NFT 中國等）進行交易。

OpenSea 官網

《Vogue Taiwan》以「Formosa Love（福爾摩沙之愛）」和「一座島嶼的可能性」為題，邀請平面設計師聶永真打造 2021 年 7 月號的特別版封面。聶永真這幅封面作品以 30 以太幣、92,029.20 美金（約人民幣 60 萬）成交。

后續聶永真受臺灣地區微風集團的邀請為他們打造了 502 枚 NFT。本系列 NFT 共推出 502 枚，除了 2 枚為特別版，由微風及設計師聶永真分別擁有外，其余 500 枚又以 75%、20%、5%的比例被分為三個等級。

以上設計作品版權歸品牌和作者所有，更多內容請移步官網 https://www.breezeverse.io/#mint

歡迎關注作者微信公眾號：「Gtech UED」