什么是動(dòng)態(tài)設(shè)計(jì)，不了解？木關(guān)系，百度移動(dòng)用戶體驗(yàn)部 高級(jí)視覺設(shè)計(jì)師 @TCWison 為動(dòng)態(tài)設(shè)計(jì)吹響了集結(jié)號(hào)，從前世今生談到在互聯(lián)網(wǎng)的具體應(yīng)用，還捎帶個(gè)人的實(shí)戰(zhàn)演示，推薦童鞋們來了解下，為什么說動(dòng)態(tài)設(shè)計(jì)是碎片化閱讀時(shí)代的一大利器。

一、Motion Design 的前生今世

@TCWison （百度移動(dòng)用戶體驗(yàn)部 高級(jí)視覺設(shè)計(jì)師 ）：什么是Motion Design？相信很多人在看到逼格如此高的兩個(gè)單詞后，都會(huì)產(chǎn)生這樣的疑問。讓我們先看一個(gè)視頻，它會(huì)給你最直觀的認(rèn)識(shí)：What is Motion Design

怎么樣？思路是否清晰了一些？簡(jiǎn)而言之，Motion Design就是動(dòng)態(tài)設(shè)計(jì)，有時(shí)也稱為Motion Graphic Design，即運(yùn)動(dòng)圖形設(shè)計(jì)（以下統(tǒng)稱MG。其實(shí)嚴(yán)格意義上講，運(yùn)動(dòng)圖形設(shè)計(jì)是動(dòng)態(tài)設(shè)計(jì)里一個(gè)細(xì)分的風(fēng)格，但由于它極具代表性且作品數(shù)量眾多，在一些專業(yè)人士的定義里兩者逐漸趨同。關(guān)于運(yùn)動(dòng)圖形設(shè)計(jì)與動(dòng)態(tài)設(shè)計(jì)之間的關(guān)系，《從信息傳達(dá)角度解讀Motion Graphics》這篇雄文闡述的非常清楚，大家可以拜讀一下），它是遵循平面設(shè)計(jì)的原則和視聽語言，用視頻或動(dòng)畫技術(shù)創(chuàng)作出一種動(dòng)態(tài)影像的設(shè)計(jì)形式。

MG通常結(jié)合了許多不同的元素，如二維和三維動(dòng)畫，視頻素材，字體版式，插畫，攝影，音樂等。MG通常并不像傳統(tǒng)的動(dòng)畫具有個(gè)性鮮明的角色或者曲折的劇情，雖然有時(shí)也會(huì)有一些角色動(dòng)畫，但他們不是主角，而他們傳遞的信息或者表達(dá)的氛圍才是。

二、Motion Design在互聯(lián)網(wǎng)時(shí)代的應(yīng)用

在長(zhǎng)時(shí)間的歷史演變中，MG常見的應(yīng)用是電影片頭片尾，在TVC廣告末尾的標(biāo)志動(dòng)畫，以及電視包裝當(dāng)中常用的Logo演繹，ID呼號(hào)，角標(biāo)等等。而隨著行業(yè)的不斷發(fā)展，MG涉及的領(lǐng)域也開始細(xì)分，越來越多的從業(yè)人員從電影、電視這些傳統(tǒng)的領(lǐng)域向其他新媒體遷移，這其中就包括互聯(lián)網(wǎng)行業(yè)。

微博（Twitter）、人人（Facebook）、優(yōu)酷（Youtube）等社交網(wǎng)絡(luò)的興起，使得人們能獲取的信息呈爆炸式的增長(zhǎng)。而溯本追源，信息的傳播，無非三個(gè)方式：文字、圖片和視頻。作為其中最讓人印象深刻，傳播效果最好的載體，視頻為MG提供了更大的展示舞臺(tái)和想象空間。同時(shí)，也有越來越多的互聯(lián)網(wǎng)團(tuán)隊(duì)和企業(yè)意識(shí)到MG的作用，并嘗試?yán)盟奶攸c(diǎn)與優(yōu)勢(shì)為自己創(chuàng)造效益?？偨Y(jié)一下，MG在互聯(lián)網(wǎng)領(lǐng)域的應(yīng)用，可分為以下幾個(gè)方面：

1、產(chǎn)品展示

展示產(chǎn)品（或概念原型）的功能、界面、交互操作等細(xì)節(jié)。更直觀的讓用戶了解一款產(chǎn)品的核心特征、用途、使用方法等細(xì)節(jié)。

示例1、Campus Quad iOS app – Case Study preview

示例2、Snack Promotion

2、品牌建設(shè)

在展示功能的基礎(chǔ)上，豐富的動(dòng)態(tài)Video也是闡（tí）述（shēng）理（bī）念（gé）的好方式。有趣的故事大家都愛聽。Apple前段時(shí)間的幾個(gè)品牌宣傳視頻，就讓人嘆為觀止：

示例1、Designed by Apple in California

示例2、iPhone 5c – Designed Together

另一家科技巨頭Google在這方面也是佼佼者，幾乎旗下的每款產(chǎn)品發(fā)布時(shí)，都會(huì)有相應(yīng)的品牌視頻推出。不但生動(dòng)形象的推廣了產(chǎn)品，也為這家極客氣息濃重的公司，平添了幾分人情味。

示例1、Google Now

示例2、Google Keep

示例3、Google Driver

示例4、Google Fiber

3、動(dòng)效原型

除了Video Show之外，MG在產(chǎn)品領(lǐng)域也有大展拳腳的地方，這就是動(dòng)效原型設(shè)計(jì)。傳統(tǒng)意義上講，產(chǎn)品的動(dòng)效、界面transition是交互設(shè)計(jì)師的業(yè)務(wù)范疇。但相信廣大交互設(shè)計(jì)師在工作中總會(huì)有這樣的煩惱：1、動(dòng)效設(shè)計(jì)很難用傳統(tǒng)的交互文檔表述，只能拿類似動(dòng)態(tài)效果的應(yīng)用與開發(fā)人員溝通，不夠規(guī)范。2、交互設(shè)計(jì)師并非動(dòng)態(tài)相關(guān)專業(yè)出身，對(duì)于動(dòng)效規(guī)律并沒有直觀的認(rèn)識(shí)。加之相關(guān)素材搜集有一定的難度，且缺乏管理，導(dǎo)致設(shè)計(jì)的時(shí)候缺乏靈感來源。

AE中的動(dòng)畫曲線可以解釋不同屬性在對(duì)應(yīng)時(shí)間內(nèi)的參數(shù)變化

（Picture from Tencent ISUX）

想要突破這些局限，就需要?jiǎng)討B(tài)設(shè)計(jì)師（Motion Designer）的介入了。制作動(dòng)效原型，降低溝通成本，與交互設(shè)計(jì)師合作，發(fā)揮各自優(yōu)勢(shì)，總結(jié)、收集、制作動(dòng)效庫平臺(tái)。甚至與開發(fā)人員合作，將動(dòng)畫內(nèi)容進(jìn)行數(shù)據(jù)轉(zhuǎn)化，以保證動(dòng)畫效果可以好還原。尋找收集可復(fù)用的動(dòng)效代碼。這些都會(huì)對(duì)產(chǎn)品動(dòng)效方面的創(chuàng)新，平臺(tái)化、接口化的建設(shè)產(chǎn)生極大的推動(dòng)。

示例1、UI8 Wireframe Kit 2.0

示例2、PassPic

4、趣味性應(yīng)用

人的想象力無限，任何條條框框都無法將她束縛?？倳?huì)有一些趣味的動(dòng)效應(yīng)用能讓人眼前一亮。與靜態(tài)的圖片相比，動(dòng)態(tài)圖好比畫龍點(diǎn)睛的一筆，為運(yùn)營(yíng)設(shè)計(jì)增加了諸多趣味。

示例1、@財(cái)新新世紀(jì)周刊：“富”道人家 by @L-X-U

示例2、@韓寒：?jiǎn)栴}寫在臉上，答案飄在風(fēng)中 by @L-X-U

示例3、@綠色和平：如何跑贏霧霾？ by @L-X-U

更有甚者，在新版手機(jī)QQ和新浪微博客戶端的啟動(dòng)畫面中，也看到了MG的身影，有興趣的同學(xué)們一定要更新體會(huì)一下。

示例1、手機(jī)QQ安卓4.6.1版開機(jī)啟動(dòng)畫面

示例2、微博客戶端4.2.5 beta1版開機(jī)啟動(dòng)畫面

三、人員要求及制作流程

理論說了這么多，大家心中是否會(huì)有這樣一個(gè)問題，如何才能制作出精彩的MG作品？我們可以從人員和流程這兩個(gè)方面探討一下。

1、只有優(yōu)秀的人才能完成優(yōu)秀的作品。

那么怎樣才算是一名優(yōu)秀的動(dòng)態(tài)設(shè)計(jì)師呢？不同于傳統(tǒng)的電視、影視制作公司，互聯(lián)網(wǎng)公司的動(dòng)態(tài)設(shè)計(jì)師通常隸屬于UE設(shè)計(jì)部門，人數(shù)通常很少（這是因?yàn)榇蟛糠只ヂ?lián)網(wǎng)公司對(duì)視頻并沒有系統(tǒng)的需求，且一些大型項(xiàng)目還有專門的外包團(tuán)隊(duì)支持，所以無需大量招聘相關(guān)人員組成專門的團(tuán)隊(duì)），像專業(yè)制作公司那樣前期、后期、三維、合成各司其職的情況幾乎不可能出現(xiàn)。這就要求每個(gè)設(shè)計(jì)師必須具備獨(dú)立完成項(xiàng)目的能力，不能奢望每個(gè)項(xiàng)目都能有同事在專業(yè)上進(jìn)行配合。

其次，互聯(lián)網(wǎng)公司產(chǎn)品迭代的速度非常快，每個(gè)月甚至每周都可能有新版發(fā)版，這也決定了設(shè)計(jì)師必須仔細(xì)權(quán)衡制作成本，在效果與效率之間尋求平衡，能四兩撥千斤的解決問題才是王道。第三，互聯(lián)網(wǎng)公司的動(dòng)態(tài)設(shè)計(jì)師必須是具備橫向能力的T型人才。從某種意義上講，設(shè)計(jì)是相通的。一個(gè)優(yōu)秀的動(dòng)態(tài)設(shè)計(jì)師，也應(yīng)該是一名合格的視覺設(shè)計(jì)師。在項(xiàng)目的間歇期，融入產(chǎn)品線，利用自己的特長(zhǎng)（如三維能力、合成能力等）為其他設(shè)計(jì)運(yùn)營(yíng)的同事提供視覺支持，這樣才能將自己的價(jià)值大化的展現(xiàn)出來，而非被動(dòng)的等待需求，逐漸成為產(chǎn)品的局外人。

動(dòng)態(tài)設(shè)計(jì)師的T型能力模型

最后，保持好奇心。關(guān)注探索身邊的互聯(lián)網(wǎng)產(chǎn)品，培養(yǎng)自己的產(chǎn)品感，愿意投身于這個(gè)充滿競(jìng)爭(zhēng)與機(jī)會(huì)的行業(yè)，參與設(shè)計(jì)影響億萬人的產(chǎn)品。滿滿的愛輔以你專業(yè)的能力，誰又能想象會(huì)爆發(fā)出怎樣的能量呢？想想還真有點(diǎn)兒小激動(dòng)呢……

2、MG的制作流程其實(shí)并不神秘。

軟件上說，Adobe的After Effects是主力制作工具（Flash更多應(yīng)用于互動(dòng)開發(fā)等領(lǐng)域，MG制作上并沒有優(yōu)勢(shì)，所以不是主力軟件）。三維方面，可以選擇Cinema 4D、Maya、3D Max等等任一一款。配合PS、AI，解決絕大多數(shù)制作需求是綽綽有余了。

作者常用的軟件

這里再通過兩個(gè)案例，簡(jiǎn)單講一講具體的制作流程（請(qǐng)注意，這不是一個(gè)教程……）。

案例1、百度手機(jī)桌面3.0版宣傳視頻 ——制作周期：2周

案例2、百度手機(jī)助手品牌宣傳視頻 ——制作周期：4周

四、最后的話

感謝每一個(gè)堅(jiān)持讀到這里的朋友，你們用實(shí)際行動(dòng)證明了自己是一個(gè)有追求的人；一個(gè)脫離了低級(jí)趣味的人……

回顧一下本文重點(diǎn)：

1、Motion Design是遵循平面設(shè)計(jì)的原則和視聽語言，用視頻或動(dòng)畫技術(shù)創(chuàng)作出一種動(dòng)態(tài)影像的設(shè)計(jì)形式。

2、Motion Design在互聯(lián)網(wǎng)領(lǐng)域的4種常見應(yīng)用：產(chǎn)品展示、品牌建設(shè)、動(dòng)效原型和趣味性應(yīng)用。

3、互聯(lián)網(wǎng)公司的動(dòng)態(tài)設(shè)計(jì)師必須是具備單兵作戰(zhàn)能力的T型人才。

4、Motion Design的制作需要前期（PS、AI）、后期（Cinema 4D、After Effects）等多種軟件的聯(lián)合運(yùn)用，互相配合。

行文于此，已至尾聲。這是一個(gè)碎片化的時(shí)代，網(wǎng)絡(luò)帶寬的增長(zhǎng)，社交媒體的爆發(fā)，人們沉浸在紛亂復(fù)雜的信息中，難免迷茫。如何找到一種方式，更直觀便捷的傳遞、獲取信息，是這個(gè)時(shí)代的難題。也許，Motion Design就是答案之一。這也正是我們鉆研它的意義。文筆粗淺，權(quán)當(dāng)拋磚引玉，與各位共勉。

文章題目：大伙都來了解動(dòng)態(tài)設(shè)計(jì)啦
網(wǎng)站URL：http://www.rwnh.cn/news2/160402.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、搜索引擎優(yōu)化、做網(wǎng)站、網(wǎng)站改版、網(wǎng)站收錄、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)