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

不論我們目前所著手的是何種項目，都可以通過其一致的內(nèi)核來窺探它在設(shè)計時間線中的演變形式以及當(dāng)下趨勢方向。本文將通過綜合視角并結(jié)合近期的趨勢理念為大家?guī)硖囟ń嵌鹊膸c分享：

動態(tài)設(shè)計的發(fā)展起源

動態(tài)設(shè)計十二定律的確立

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

▲ 《The Illusion of Life: Disney Animation》

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

▲ 十二定律原則分類

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

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

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

衍生變化更加的多樣性

隨著動態(tài)藝術(shù)的風(fēng)靡，影視特效、欄目包裝、動畫CG、視頻廣告、UI動畫等等，越來越多行業(yè)開始萌發(fā)更多的動態(tài)創(chuàng)造力。

畢竟靜態(tài)的圖文內(nèi)容已經(jīng)不再是絕對的主流，相反動態(tài)設(shè)計的先天優(yōu)勢更能契合發(fā)展時代下人們的感官訴求。

▲ 動態(tài)呈現(xiàn)具備更多的信息透出

技術(shù)進化帶來的效果爆炸

技術(shù)帶來的變革最直觀的體現(xiàn)是設(shè)計的升維以及渲染技術(shù)的突破式發(fā)展，不再受制于軟硬件下的創(chuàng)造力局限。

對于大體量的公司而言，動態(tài)表現(xiàn)不再是難點，更需要考慮的是創(chuàng)意的天馬行空與最后執(zhí)行的完美落地。

▲ NUBIA-RedMagic by Multiple owners.

動態(tài)設(shè)計的個性延續(xù)

01. 品牌的演繹化

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

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

▲ 知名品牌合集

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

通過極具出彩的動態(tài)化設(shè)計賦予節(jié)日以全新的情感滲透，這種方式已經(jīng)慢慢成為互聯(lián)網(wǎng)移動端產(chǎn)品中一種通用的表現(xiàn)方式。

▲ Ladislao José Biro 誕辰 117 周年

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

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

▲ A Coke is a Coke

▲ Together Is Beautiful

02. 語言的體系

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

▲ 體系的整體到細節(jié)

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

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

▲ 微軟 Office 365

▲ Google Design Lanugage

03. 故事的主題化

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

▲ Opening Film — March 2019 Apple Event

▲ TED Ningbo

動態(tài)設(shè)計的當(dāng)下趨勢

01. 數(shù)學(xué)分型

在數(shù)字藝術(shù)流行的今天，影視行業(yè)的高度發(fā)展，各種技術(shù)壁壘不斷被打破，特別是在以Houdini為首的節(jié)點式軟件有成為未來獨當(dāng)一面的勢頭下，動態(tài)設(shè)計已經(jīng)愈發(fā)沒有一個準確的邊界。

當(dāng)我們把數(shù)學(xué)和動態(tài)這兩個拿捏在一起的時候，會發(fā)現(xiàn)不曾看到過的圖形之美已經(jīng)升華到更高的層次；特別是分型算法在結(jié)合了動態(tài)表現(xiàn)之后，我們會認為這或許會是動態(tài)設(shè)計在計算表現(xiàn)領(lǐng)域中的一種極致。

▲ Mine The Scrap - Ars Electronica Teaser

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

▲ Sberbank-175_ Big Data

▲ “SAY_SUPERSTRINGS” _ Data Journey

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

▲ Porsche BlackBox - WebGL Experience

▲ Telegraph Audience Data

02. 數(shù)據(jù)可視

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

▲ Data Visualization - Dean Cheesman

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

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

▲ MCD`18

▲ Bloomberg | RCRT Data Viz

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

▲ Electric vehicle cluster design

▲ EV battery charging status

03. 跨維結(jié)合

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

▲ Francis Mallmann on Growing Up

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

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

▲ OnStreet

▲ ValleyHub - isometric explainer video

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

▲ Guerlain: Météorites

▲ Pikotea

04. 自然表達

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

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

圍繞真實表達的動態(tài)化設(shè)計一直在全球設(shè)計師的努力下不斷更替與探索，相信有一天會有更為系統(tǒng)化的定義與產(chǎn)品方向出現(xiàn)。

▲ Tomorrow - Rishab Soni

寫在最后

設(shè)計的趨勢往往是在一個大周期中不斷交替，而動態(tài)設(shè)計的本質(zhì)卻始終在圍繞如何給用戶帶來更優(yōu)的體驗表達在努力：

通過建立動態(tài)設(shè)計在產(chǎn)品和用戶之間的信任感，令用戶感到愉悅和滿足；不斷打磨動態(tài)細節(jié)，并豐富真實表達下的理念輸出，從而使設(shè)計與商業(yè)之間的結(jié)合美而簡單。

原創(chuàng)： 平臺產(chǎn)品設(shè)計組

公眾號：淘寶設(shè)計