本文將通過綜合視角并結(jié)合近期的趨勢(shì)理念，為大家講解動(dòng)態(tài)設(shè)計(jì)的起源、延續(xù)與趨勢(shì)。

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

不論我們目前所著手的是何種項(xiàng)目，都可以通過其一致的內(nèi)核來窺探它在設(shè)計(jì)時(shí)間線中的演變形式以及當(dāng)下趨勢(shì)方向。

本文將通過綜合視角并結(jié)合近期的趨勢(shì)理念，為大家?guī)硖囟ń嵌鹊膸c(diǎn)分享：

動(dòng)態(tài)設(shè)計(jì)的發(fā)展起源

1. 動(dòng)態(tài)設(shè)計(jì)十二定律的確立

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

▲ 《The Illusion of Life: Disney Animation》

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

▲ 十二定律原則分類

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

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

▲ Rebecca Ussai 的5條用戶體驗(yàn)原則

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

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

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

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

3. 技術(shù)進(jìn)化帶來的效果爆炸

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

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

▲ NUBIA-RedMagic by Multiple owners.

動(dòng)態(tài)設(shè)計(jì)的個(gè)性延續(xù)

1. 品牌的演繹化

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

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

▲ 知名品牌合集

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

通過極具出彩的動(dòng)態(tài)化設(shè)計(jì)賦予節(jié)日以全新的情感滲透，這種方式已經(jīng)慢慢成為互聯(lián)網(wǎng)移動(dò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 通過動(dòng)態(tài)鏡頭的巧妙運(yùn)用闡述了其品牌情緒想要展示給消費(fèi)者的本質(zhì)面。

▲ A Coke is a Coke

▲ Together Is Beautiful

2. 語言的體系化

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

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

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

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

▲ 微軟 Office 365

▲ Google Design Lanugage

3. 故事的主題化

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

▲ Opening Film — March 2019 Apple Event

▲ TED Ningbo

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

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

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

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

▲ Mine The Scrap – Ars Electronica Teaser

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

▲ Sberbank-175_ Big Data

▲ “SAY_SUPERSTRINGS” _ Data Journey

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

▲ Porsche BlackBox – WebGL Experience

▲ Telegraph Audience Data

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

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

▲ Data Visualization – Dean Cheesman

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

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

▲ MCD`18

▲ Bloomberg | RCRT Data Viz

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

▲ Electric vehicle cluster design

▲ EV battery charging status

3. 跨維結(jié)合

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

▲ Francis Mallmann on Growing Up

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

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

▲ OnStreet

▲ ValleyHub – isometric explainer video

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

▲ Guerlain: Météorites

▲ Pikotea

4. 自然表達(dá)

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

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

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

▲ Tomorrow – Rishab Soni

寫在最后

設(shè)計(jì)的趨勢(shì)往往是在一個(gè)大周期中不斷交替，而動(dòng)態(tài)設(shè)計(jì)的本質(zhì)卻始終在圍繞如何給用戶帶來更優(yōu)的體驗(yàn)表達(dá)在努力：通過建立動(dòng)態(tài)設(shè)計(jì)在產(chǎn)品和用戶之間的信任感，令用戶感到愉悅和滿足；不斷打磨動(dòng)態(tài)細(xì)節(jié)，并豐富真實(shí)表達(dá)下的理念輸出，從而使設(shè)計(jì)與商業(yè)之間的結(jié)合美而簡(jiǎn)單。

文章參考：

《The Illusion of Life: Disney Animation》

《The 5 Principles of UX Choreography》

《HIGH – ON DESIGN》

圖片來源于網(wǎng)絡(luò)，已注明具體項(xiàng)目名稱

作者：平臺(tái)產(chǎn)品設(shè)計(jì)組，公眾號(hào)：淘寶設(shè)計(jì)（ID：ali-taobaoued）

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

題圖來自Unsplash，基于CC0協(xié)議