本文將通過綜合視角并結合近期的趨勢理念，為大家講解動態設計的起源、延續與趨勢。

看到文章的標題，一定會有人產生類似的疑問：為什么不用動畫設計亦或是動效設計來作為主題標語，而是用動態設計這個相對泛性的詞語呢。因為動態設計本身就是一種藝術設計的跨界，在移動端我們稱之為動效設計，在影視欄包等領域我們又稱之為動畫設計，甚至是VFX設計。

不論我們目前所著手的是何種項目，都可以通過其一致的內核來窺探它在設計時間線中的演變形式以及當下趨勢方向。

本文將通過綜合視角并結合近期的趨勢理念，為大家帶來特定角度的幾點分享：

動態設計的發展起源

1. 動態設計十二定律的確立

有關動態設計十二定律基本法則的起源可以追溯至迪士尼動畫師 OllieJohnston 與FrankThomas 在1981年所出的一書《The Illusion of Life: Disney Animation》，書中分別從12種不同的類目切入，深度闡述各類動態設計的指導原則，雖然當時是借由2D動畫制作所發展出來的規則，但直到現在的3D動畫制作上也都能適用。

▲ 《The Illusion of Life: Disney Animation》

十二定律分別為：擠壓和拉伸、預備動作、演出布局、連續運動和姿態對應、跟隨和重疊動作、緩入緩出、弧線運動、次要動作、時間節奏、夸張手法、扎實的描繪、吸引力。以上12條基礎原理便是構建起整個動態設計高樓的奠基石。

▲ 十二定律原則分類

十二定律不僅僅能夠服務動畫設計師來打造出一部部深入人心的動畫電影，同時很多東西也適用于體驗設計，從整體視角上塑造用戶商業產品。

Rebecca Ussai 曾基于十二定律總結出了5條用戶體驗設計法則，分別是反饋交互、前饋、空間感、用戶焦點、品牌調性，同時向我們傳達了為用戶帶來真實、情感共鳴的體驗設計出發點，在整體上打造令用戶愉悅的產品體驗。

▲ Rebecca Ussai 的5條用戶體驗原則

2. 衍生變化更加的多樣性

隨著動態藝術的風靡，影視特效、欄目包裝、動畫CG、視頻廣告、UI動畫等等，越來越多行業開始萌發更多的動態創造力。

畢竟靜態的圖文內容已經不再是絕對的主流，相反動態設計的先天優勢更能契合發展時代下人們的感官訴求。

▲ 動態呈現具備更多的信息透出

3. 技術進化帶來的效果爆炸

技術帶來的變革最直觀的體現是設計的升維以及渲染技術的突破式發展，不再受制于軟硬件下的創造力局限。

對于大體量的公司而言，動態表現不再是難點，更需要考慮的是創意的天馬行空與最后執行的完美落地。

▲ NUBIA-RedMagic by Multiple owners.

動態設計的個性延續

1. 品牌的演繹化

當一個企業的品牌影響力隨著市場受眾的認可度不斷擴大，勢必需要在更多的特征方面來體現其潛在的品牌價值。

此時品牌借助動態化設計的演繹便是一個新的方向，我們可以從很多品牌的設計演繹上看到其承載個性與傳播的價值。

▲ 知名品牌合集

文化輸出：Google Doodle 是為慶祝節日、紀念日、成就以及紀念杰出人物等而誕生的產品，其為人稱道的經典設計不勝枚舉，在重要節日里 Google 首頁商標就會根據其節日特征變幻出豐富的表現樣式。

通過極具出彩的動態化設計賦予節日以全新的情感滲透，這種方式已經慢慢成為互聯網移動端產品中一種通用的表現方式。

▲ Ladislao José Biro 誕辰 117 周年

▲ 瑪麗亞·塞韋拉·歐諾芙莉安娜誕辰 196 周年

內核精神：Coca Cola 的品牌廣告常常以極具腦洞的表現手法為人所津津樂道，例如年初的 A Coke is a Coke 廣告所想要體現的Together Is Beautiful 通過動態鏡頭的巧妙運用闡述了其品牌情緒想要展示給消費者的本質面。

▲ A Coke is a Coke

▲ Together Is Beautiful

2. 語言的體系化

每個具備生態影響力的公司往往需要一套具備整合能力的體系來輻射旗下眾多子業務，從而間接影響其產品的用戶體驗認同感，使用戶能夠感知的不再是冰冷的文字，而是具備深刻印象的動態化體驗感知。

▲ 體系的整體到細節

微軟、谷歌、蘋果、IBM等都擁有符合自身特色的設計體系，正確運用動態化的設計有助于不同環境、不同文化、不同習慣的國家與人群之間能夠正確解讀其所傳遞出來的體系思想。

在基于設計體系的基礎之上必然會衍生出更具像化的設計落地，這便是設計的語言，一種將上層體系直觀化的產品UI方案。目前已經逐漸成為各個公司在產品設計中不可或缺的一部分。

▲ 微軟 Office 365

▲ Google Design Lanugage

3. 故事的主題化

當下在很多發布會的現場我們經常會看到不同的開幕&開場視頻，他們以一個個鮮明的主題作為對故事前瞻的切入向與會者傳遞出本次組織者的命題方向，視頻動畫中常常帶著極為強烈的制作風格，往往能夠作為特定領域影響力的傳播標桿。

▲ Opening Film — March 2019 Apple Event

▲ TED Ningbo

動態設計的當下趨勢

1. 數學分型

在數字藝術流行的今天，影視行業的高度發展，各種技術壁壘不斷被打破，特別是在以Houdini為首的節點式軟件有成為未來獨當一面的勢頭下，動態設計已經愈發沒有一個準確的邊界。

當我們把數學和動態這兩個拿捏在一起的時候，會發現不曾看到過的圖形之美已經升華到更高的層次；特別是分型算法在結合了動態表現之后，我們會認為這或許會是動態設計在計算表現領域中的一種極致。

▲ Mine The Scrap – Ars Electronica Teaser

動態的抽象：文字、數字、圖片、視頻、聲音等等一切皆可被動態顆粒度化，并使用數學圖形的方式用特定命題進行展示，進而達到某種特定的目的。

▲ Sberbank-175_ Big Data

▲ “SAY_SUPERSTRINGS” _ Data Journey

圖形之美：全媒體時代所有人都在嘗試能夠超脫于傳統美術手法的設計形式，比如線條與點塑造出更具超前意識的設計風格，這些圖形風格結合了算法所誕生的全新創意范疇越來越多得被人們所關注。

▲ Porsche BlackBox – WebGL Experience

▲ Telegraph Audience Data

2. 數據可視

上面我們已大概了解到數據與數學催化下的產物是以何種姿態展示自身的動態美感，接下來我們需要用更為合適的方案來將這些看似無法理解的圖形數字進行直觀的可視化挖掘，這也是我們稱之為的數據可視化設計。

▲ Data Visualization – Dean Cheesman

大屏設計：把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。

在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。

▲ MCD`18

▲ Bloomberg | RCRT Data Viz

HUD & FUI：隨著數字媒體終端的多樣化，作為用戶，我們將可以體驗到更多更有活力而流暢的全渠道多端數字體驗，在這樣一個大環境下，不同的載體將會有其獨特的全新展示形式和交互行為方向。

▲ Electric vehicle cluster design

▲ EV battery charging status

3. 跨維結合

傳統平面設計與三位設計之際的界限不再絕對獨立，或者說2D和3D正在互相借鑒融合，我們或許會看到揉雜著復古風格下的3D運動圖形海報，也可能會看到依拖3D技法下的立體2D動畫。

▲ Francis Mallmann on Growing Up

Isometric：通常翻譯為等距設計，為了增加立體感，采用了傾斜角度的視角，擁有出色的視覺表現。近兩年越來越多的設計師使用了此風格的插畫表現產品，外加上很火的深色漸變效果。簡直讓人欲罷不能。

這種看似簡單而有硬朗的表現手法目前同矢量插圖一樣仍舊是備受關注與討論的話題。創作者們往往可以用更為獨特的方式來講述故事。

▲ OnStreet

▲ ValleyHub – isometric explainer video

Shader：一種通過材質來表現畫面的渲染手段，因其具備設計者高度個人特色的渲染風格而備受推崇，再通過例如C4D等軟件的動態處理后更具視覺沖擊。

▲ Guerlain: Météorites

▲ Pikotea

4. 自然表達

回歸到我們文章最開始的動態設計十二定律上面，動態設計的終極目標便是能夠模擬真實自然環境下的反饋，并將這種反饋通過可視化的運動表現手段傳遞給用戶。

這其實是很難用語言描述清楚的，正如我們平時可能會說：“這個交互過渡讓我感覺非常的舒服”。這便是自然表達的一種境界，能夠被感知，但卻無法被輕易察覺的細節體驗設計。

圍繞真實表達的動態化設計一直在全球設計師的努力下不斷更替與探索，相信有一天會有更為系統化的定義與產品方向出現。

▲ Tomorrow – Rishab Soni

寫在最后

設計的趨勢往往是在一個大周期中不斷交替，而動態設計的本質卻始終在圍繞如何給用戶帶來更優的體驗表達在努力：通過建立動態設計在產品和用戶之間的信任感，令用戶感到愉悅和滿足；不斷打磨動態細節，并豐富真實表達下的理念輸出，從而使設計與商業之間的結合美而簡單。

文章參考：

《The Illusion of Life: Disney Animation》

《The 5 Principles of UX Choreography》

《HIGH – ON DESIGN》

圖片來源于網絡，已注明具體項目名稱

作者：平臺產品設計組，公眾號：淘寶設計（ID：ali-taobaoued）

來源：https://mp.weixin.qq.com/s/JHp_d5rDGiZ0uHxlgK58fw

題圖來自Unsplash，基于CC0協議