動(dòng)效設(shè)計(jì)師前景及最佳落地方法

在國(guó)內(nèi)類似BAT大型富有的互聯(lián)網(wǎng)公司內(nèi)都培養(yǎng)著獨(dú)立的動(dòng)效設(shè)計(jì)師（Motion Designer）。他們的主要職責(zé)就是透過(guò)動(dòng)態(tài)的表達(dá)讓一個(gè)設(shè)計(jì)概念活起來(lái)。他們很在行把一個(gè)設(shè)計(jì)概念組織成一個(gè)好的故事線，搭配適合的音樂(lè)跟音效，讓看的人能夠更容易理解設(shè)計(jì)概念的整體性。好的動(dòng)效設(shè)計(jì)師通常都有優(yōu)良的視覺(jué)設(shè)計(jì)技能。有些小公司是讓視覺(jué)設(shè)計(jì)師兼任做動(dòng)效。當(dāng)需求量大的時(shí)候，就可以需要一個(gè)專職的 motion designer。如果一個(gè)UI設(shè)計(jì)師如果動(dòng)效做得好，那他的身價(jià)通?？梢韵鄬?duì)提高了。然而對(duì)于絕大多數(shù)it公司來(lái)說(shuō)，動(dòng)效設(shè)計(jì)產(chǎn)品化還未成熟，在落地過(guò)程中往往會(huì)遇到對(duì)接困難、設(shè)計(jì)困難及實(shí)現(xiàn)困難。本文將會(huì)簡(jiǎn)單闡述動(dòng)效設(shè)計(jì)在國(guó)內(nèi)的行情就業(yè)前景以及好的便捷的實(shí)現(xiàn)方法。

交互設(shè)計(jì)師及就業(yè)前景

-

動(dòng)效設(shè)計(jì)（Motion Design）是因?yàn)檎麄€(gè)用戶體驗(yàn)行業(yè)的發(fā)展而細(xì)分出來(lái)的設(shè)計(jì)門(mén)類。所以總體來(lái)說(shuō)，

1、用戶體驗(yàn)發(fā)展程度越高的地區(qū)，動(dòng)效設(shè)計(jì)需求也越多（歐美 > 國(guó)內(nèi)）；

2、越龐大復(fù)雜的產(chǎn)品，動(dòng)效設(shè)計(jì)需求也越多（PC > Mobile，OS > App）；

3、越大型分工越明確的的設(shè)計(jì)團(tuán)隊(duì)，專職的動(dòng)效設(shè)計(jì)師越多（巨頭 > 創(chuàng)業(yè)公司，Design House除外）；

目前不論國(guó)內(nèi)還是國(guó)外，很多設(shè)計(jì)團(tuán)隊(duì)都配有專職的動(dòng)效設(shè)計(jì)師，比如國(guó)內(nèi)的BAT，國(guó)外的Google、Apple、Microsoft等等，因?yàn)闃I(yè)務(wù)需要，并且他們有錢(qián)，養(yǎng)得起。而一些創(chuàng)業(yè)公司，手頭緊或者需求少，自然希望一個(gè)人能當(dāng)N個(gè)人用，設(shè)計(jì)師可以兼顧動(dòng)效、交互，能順便寫(xiě)個(gè)PRD就更好了...

專業(yè)上，動(dòng)效設(shè)計(jì)在軟件操作上的難度要大于視覺(jué)設(shè)計(jì)，需要付出不少時(shí)間去學(xué)習(xí)，無(wú)形中阻擋了一部分人。所以從效率上講，專職動(dòng)效設(shè)計(jì)師和專職視覺(jué)設(shè)計(jì)師一起配合的效率，肯定高于動(dòng)效、視覺(jué)兼顧的設(shè)計(jì)師自己一個(gè)人搞。這也是為什么那些財(cái)大氣粗的公司選擇聘請(qǐng)專職設(shè)計(jì)師的原因。但是，從質(zhì)量上講，一個(gè)動(dòng)效、視覺(jué)能力俱佳的設(shè)計(jì)師創(chuàng)造出優(yōu)秀作品的概率，肯定大于兩個(gè)各自為戰(zhàn)的專職動(dòng)效設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師，尤其是他們對(duì)對(duì)方的領(lǐng)域沒(méi)什么深入了解的情況下

Tips:

如果題主想找個(gè)UI設(shè)計(jì)的工作，目前看動(dòng)效不是必備的，是加分項(xiàng)。如果題主想成為行業(yè)的引領(lǐng)者，做出為人稱道的設(shè)計(jì)，那就義無(wú)反顧的去學(xué)吧

動(dòng)效設(shè)計(jì)當(dāng)前狀況

-

動(dòng)效落地過(guò)程中面臨的困難可以分成以下三種：

對(duì)接困難：對(duì)接困難實(shí)際上就是溝通困難，這也是本文要探討的重點(diǎn)。因?yàn)榻缑鎰?dòng)效是一種新出現(xiàn)的設(shè)計(jì)模式，在開(kāi)發(fā)和設(shè)計(jì)之間，還沒(méi)有一套成熟的對(duì)接標(biāo)準(zhǔn)。

設(shè)計(jì)困難：界面的動(dòng)效本質(zhì)上是靜態(tài)的界面在時(shí)間和交互維度上的延展，最常用的界面設(shè)計(jì)工具還不能進(jìn)行時(shí)間軸的設(shè)計(jì)，而如 AE 這種傳統(tǒng)的動(dòng)態(tài)設(shè)計(jì)工具缺少可交互性，很難對(duì)界面的交互維度進(jìn)行高精度設(shè)計(jì)。

實(shí)現(xiàn)困難：界面增加了時(shí)間維度，研發(fā)不僅僅需要布局，同樣要把控各個(gè)元素在時(shí)間流上的表現(xiàn)，個(gè)別情況下使用序列幀或者 Gif 的話，又需要嚴(yán)格控制資源大小，在各方面增加了開(kāi)發(fā)的成本。

動(dòng)效設(shè)計(jì)好落地方法

-

一、對(duì)接

開(kāi)發(fā)和設(shè)計(jì)師溝通困難，是因?yàn)闆](méi)有通過(guò)精準(zhǔn)的參數(shù)去描述動(dòng)效。要解決這個(gè)問(wèn)題，我們需要?jiǎng)?chuàng)造一套有效的動(dòng)效標(biāo)注系統(tǒng)，這個(gè)系統(tǒng)必須做到以下兩點(diǎn)：讓設(shè)計(jì)師可以輕松地描述動(dòng)效，讓開(kāi)發(fā)可以準(zhǔn)確地還原動(dòng)效。構(gòu)建這套「標(biāo)注」的方法分以下兩個(gè)部分闡述：

1. 動(dòng)效量化

其實(shí)，界面動(dòng)效背后涉及到的設(shè)計(jì)參數(shù)非常簡(jiǎn)單，只有三種。無(wú)論多復(fù)雜的動(dòng)效也是這三種參數(shù)經(jīng)過(guò)組合拼接出來(lái)的：

 

變化

變化可以劃分為四類（如動(dòng)圖所示），這四類變化基本涵蓋了界面元素的全部運(yùn)動(dòng)方式，只要我們準(zhǔn)確地描述元素在動(dòng)效前后的變化量，就可以準(zhǔn)確地完成「變化」這個(gè)參數(shù)的對(duì)接。

舉個(gè)例子，下面動(dòng)圖中被扔出來(lái)的綠色小恐龍就同時(shí)包含上述四種變化。

它在 AE 中前后變化的參數(shù)如下：

那么這個(gè)時(shí)候我們需要記錄的狀態(tài)（這里只涉及到變化）就應(yīng)該是這樣：

初始狀態(tài)：

位移：X軸 0

旋轉(zhuǎn) ：0度

尺寸：1

透明度：0.2

結(jié)束狀態(tài)：

位移：X軸 200px

旋轉(zhuǎn)：+180度

尺寸：1.5

透明度：1

這樣看就清晰多了。作為一名友善的設(shè)計(jì)師，千萬(wàn)不要隨便拿一個(gè) demo 說(shuō)「就按照這樣做個(gè)差不多的效果就可以了」，那樣的話估計(jì)大部分開(kāi)發(fā)只會(huì)一臉懵逼。

時(shí)長(zhǎng)

第二個(gè)關(guān)鍵參數(shù)就是時(shí)長(zhǎng)，這個(gè)顧名思義也就是動(dòng)畫(huà)播放的時(shí)間長(zhǎng)度。無(wú)論變化是多是少，簡(jiǎn)單還是復(fù)雜，我們需要把每一段變化的時(shí)間確定，時(shí)間短干脆利落，時(shí)間長(zhǎng)輕緩柔和。

在標(biāo)注的時(shí)候，不要忘記標(biāo)注清楚動(dòng)效的起始時(shí)間和終止時(shí)間。

曲線

曲線描述的是物體運(yùn)動(dòng)時(shí)候的速度變化，如果說(shuō)變化和時(shí)長(zhǎng)是動(dòng)效的本體，那么曲線就是動(dòng)效的靈魂。

對(duì)于一個(gè)運(yùn)動(dòng)的物體，同樣的變化，同樣時(shí)間，賦予不同的速度曲線，會(huì)讓它的動(dòng)效產(chǎn)生豐富的變化。 所以在動(dòng)效設(shè)計(jì)中，曲線也是設(shè)計(jì)者最為關(guān)注的部分。

最基礎(chǔ)的速度曲線有線性（就是全程勻速）、緩入、緩出、緩入緩出四種：

雖然大家平時(shí)或多或少都用過(guò)以上幾種曲線來(lái)描述動(dòng)畫(huà)的過(guò)程，但是大家不一定對(duì)曲線的具體用法有真正的理解、下面我會(huì)給出四個(gè)例子，來(lái)闡述一下以上幾種曲線的用法。

在上圖的例子中小圓運(yùn)動(dòng)時(shí)長(zhǎng)一致，它們水平位移，一起到達(dá)終點(diǎn)，但是速度曲線不一樣。

圓一：緩出 ease-out，本來(lái)有一定的速度，慢慢剎車。 適合用在一個(gè)元素進(jìn)入頁(yè)面的時(shí)候。

圓二：緩入 ease-in，本來(lái)沒(méi)速度，越來(lái)越快， 相當(dāng)于一個(gè)東西從零開(kāi)始加速。適合用在一個(gè)元素離開(kāi)頁(yè)面的時(shí)候。

圓三：緩入緩出 ease-in-out，開(kāi)頭結(jié)尾都沒(méi)有速度，先加速、再減速，是我們?nèi)粘Ｉ钪凶畛Ｒ?jiàn)的物理運(yùn)動(dòng)。適合用在一個(gè)元素從頁(yè)面 A 點(diǎn)到 B 點(diǎn)。

圓四：做勻速運(yùn)動(dòng) linear ，看起來(lái)非常死板，不推薦使用。

那么動(dòng)畫(huà)曲線在設(shè)計(jì)工具的哪里出現(xiàn)呢？

AE 中可以通過(guò)值圖表，來(lái)調(diào)整動(dòng)畫(huà)的曲線，并且通過(guò)換算（換算方法）得到可用于開(kāi)發(fā)的 cubic-bezier 曲線參數(shù)，或者通過(guò) Flow 這樣的插件直接用 cubic-bezier 曲線進(jìn)行設(shè)計(jì)。

而在新興設(shè)計(jì)工具（Framer）中，本身工具就直接可以用 cubic-bezier 曲線定義動(dòng)畫(huà)。

在前端開(kāi)發(fā)中，可以直接利用設(shè)計(jì)給出的 cubic-bezier 曲線參數(shù)來(lái)描述動(dòng)畫(huà)，示例如下：

div {

-webkit-transition: all 500ms cubic-bezier(0.10, 0.45, 0.46, 0.99);

transition: all 500ms cubic-bezier(0.10, 0.45, 0.46, 0.99);

}

現(xiàn)在有許多工具可以方便設(shè)計(jì)師去調(diào)曲線，實(shí)時(shí)預(yù)覽效果，并且顯示成前端需要的格式。在這里推薦兩個(gè)：

cubic-bezier.com

css3beziercurve.net/

曲線部分就這樣講完了，順帶提一下，雖然在這里我舉例的是位移的速度曲線，但是其實(shí)旋轉(zhuǎn)、尺寸、透明度等等變化同樣是存在速度曲線的，在這些變化上加上速度曲線一樣可以讓動(dòng)效更加自然貼近真實(shí)。前端也是可以實(shí)現(xiàn)的。

2. 標(biāo)注

通過(guò)以上對(duì)動(dòng)效參數(shù)的量化，我認(rèn)為一份合格的標(biāo)注應(yīng)該是這樣的：

上圖中的交互動(dòng)效來(lái)自 Amazon Prime Music，界面中出現(xiàn)了兩個(gè)元素（加號(hào) icon & 對(duì)勾 icon）的動(dòng)畫(huà)，雖然看起來(lái)非常簡(jiǎn)單，但是包含著極為豐富的變化。

標(biāo)注的時(shí)候除了說(shuō)明動(dòng)效的三元素，還要說(shuō)明觸發(fā)條件以及動(dòng)畫(huà)對(duì)象，所以最好用表格的方式，這樣可以更清晰的把它們每一段變化都清晰羅列出來(lái)：

如圖，注意曲線要標(biāo)注好英文名稱這樣前端才可以拿去用。

這份標(biāo)注的模板我也上傳到云盤(pán)上，鏈接：動(dòng)效標(biāo)注

如果看到這里你還有許多疑問(wèn)，推薦閱讀 MartinRGB 寫(xiě)的 MartinRGB/MTGuideline，里面從交互動(dòng)畫(huà)的風(fēng)格定義，到動(dòng)效設(shè)計(jì)、標(biāo)注、開(kāi)發(fā)流程都有介紹。

二、設(shè)計(jì)方法與工具

最傳統(tǒng)普遍應(yīng)用的動(dòng)效設(shè)計(jì)工具是 After Effects，因?yàn)榭赡芎芏嘣O(shè)計(jì)師在之前就有使用的經(jīng)驗(yàn)，但它也有不符合當(dāng)下需求的缺點(diǎn)：不能交互、產(chǎn)出物不好量化、難分享。而目前也出現(xiàn)了很多新興的設(shè)計(jì)，產(chǎn)出解決方案，下面我會(huì)做一些簡(jiǎn)單的介紹。

1. 自動(dòng)導(dǎo)出類

目前，有像 Lottie、Keyframes 等開(kāi)源庫(kù)，通過(guò) AE 插件，將在 AE 中設(shè)計(jì)的動(dòng)效自動(dòng)導(dǎo)出為前端可用的動(dòng)效文件，前端只需要在項(xiàng)目中打入對(duì)應(yīng)的開(kāi)源庫(kù)，就可以免去對(duì)接交流的苦惱。

雖然看上去十分簡(jiǎn)潔美好，但是這種方案的應(yīng)用場(chǎng)景是有限的，僅適合應(yīng)用在純動(dòng)效元素（例如動(dòng)態(tài) ICON），無(wú)法用于 UI 的界面元素。對(duì) AE 的效果支持也有限，并不是有了庫(kù)就能為所欲為。

但總的來(lái)說(shuō)，自動(dòng)導(dǎo)出類方案可以在純動(dòng)態(tài)元素的場(chǎng)景下大大提升工作效率，產(chǎn)品性能。相比 Gif 或者幀序列，導(dǎo)出的 json 文件容量小，在端上顯示質(zhì)量高。

2. 可交互類

除了依賴于 AE 傳統(tǒng)工具的解決方案，也有更多直接另起爐灶的設(shè)計(jì)工具。目前應(yīng)用較廣的包括 Principle、Flinto、Framer、Origami 等等。相比傳統(tǒng)工具，這些新的工具無(wú)一例外加入了可交互的特性，讓我們可以對(duì)產(chǎn)品的交互流進(jìn)行設(shè)計(jì)和模擬。比起之前，我們可以在設(shè)計(jì)階段就感受產(chǎn)品的「手感」，讓動(dòng)效設(shè)計(jì)的精度到達(dá)一個(gè)新的水平。

在這些雨后春筍般冒出的新工具中，我最喜歡的就是 Framer。它有著其他工具沒(méi)有的獨(dú)特屬性――用代碼構(gòu)建、基于 Web。

△ 用 Framer 寫(xiě)的代碼示例

可能很多設(shè)計(jì)師看到代碼就如臨大敵，但事實(shí)上，因?yàn)橛么a構(gòu)建，設(shè)計(jì)師們可以十分有條理、清晰地設(shè)計(jì)擁有復(fù)雜邏輯的動(dòng)效界面，同時(shí)，動(dòng)畫(huà)部分的代碼內(nèi)容可以直接給開(kāi)發(fā)參考。另外因?yàn)榛?Web 的特性，所有 Web 支持的效果，F(xiàn)ramer 都可以做到，自由度極高，而且設(shè)計(jì)產(chǎn)出可以通過(guò)一個(gè)網(wǎng)址快速分享，讓整條產(chǎn)品線上的人都可以低成本體驗(yàn)?zāi)愕膭?dòng)效設(shè)計(jì)。

除此之外，在「全?！垢拍钤絹?lái)越被重視的今天，設(shè)計(jì)師通過(guò)一個(gè)相對(duì)低成本的方式接觸代碼，了解前端知識(shí)，是一個(gè)非常高效的提升通道。

三、開(kāi)發(fā)

動(dòng)畫(huà)的實(shí)現(xiàn)、常用的有以下幾種。

1. CSS 動(dòng)畫(huà)

學(xué)習(xí)資料推薦 w3school 上的文檔 CSS3 動(dòng)畫(huà)

值得注意的是、設(shè)計(jì)師雖然可以不懂技術(shù)、但是一定要善于利用已有的案例來(lái)表達(dá)自己的設(shè)計(jì)意圖。CSS 可以實(shí)現(xiàn)的動(dòng)畫(huà)案例具體可以查看 Animate.css ，它一個(gè)跨瀏覽器的 CSS3 動(dòng)畫(huà)庫(kù)。如果它的示例中有你想要的動(dòng)效的話，代表可以用 CSS 實(shí)現(xiàn)，除此之外，一些簡(jiǎn)單的矢量規(guī)則動(dòng)效也能夠通過(guò) CSS 實(shí)現(xiàn)。

2. 開(kāi)源庫(kù)

應(yīng)用從設(shè)計(jì)側(cè)提到過(guò)的 Lottie、Keyframe 類開(kāi)源庫(kù)，將 AE 導(dǎo)出的動(dòng)畫(huà)資源直接在項(xiàng)目中應(yīng)用。

上篇中提到的 San 首頁(yè)的 hover 動(dòng)畫(huà)就是用 Lottie 實(shí)現(xiàn)的：

△ 最終實(shí)現(xiàn)結(jié)果

3. 序列幀

序列幀可以理解為跑馬燈，具體實(shí)現(xiàn)方式是提供一張動(dòng)畫(huà)的幀序列拼圖，通過(guò) CSS 和 JS 控制它逐幀播放。跟交互動(dòng)效不太一樣，序列幀動(dòng)畫(huà)一般用在運(yùn)營(yíng)頁(yè)面的動(dòng)畫(huà)里。舉個(gè)例子，之前的春節(jié)活動(dòng)里，我曾經(jīng)做過(guò)一個(gè)序列幀動(dòng)畫(huà)。如下動(dòng)圖所示：

它其實(shí)是用一張張的煙花圖拼接起來(lái)的雪碧圖：

為保證動(dòng)效的好用戶體驗(yàn)，使用序列幀也有許多要求：

加載時(shí)間：最低網(wǎng)速環(huán)境下加載超過(guò) 2s 必須加 loading，loading 加載時(shí)長(zhǎng)不超過(guò) 5s；

移動(dòng)端流量消耗：移動(dòng)端非 wifi 網(wǎng)絡(luò)下，動(dòng)畫(huà)資源限制總大小不超過(guò) 2M。

通常用戶感知流暢幀率為 60fps，為了保證最終效果，一般以 20fps 做為最低播放幀率。（1S播放30幀 ）

當(dāng)然，為了減少溝通中不必要的損耗，在提供序列幀拼圖的時(shí)候，要注意以下交付格式：

提供每幀圖的寬高尺寸

每幀圖的播放時(shí)長(zhǎng)，總幀數(shù)

動(dòng)效 Demo，gif、MP4 等，格式不限

動(dòng)畫(huà)觸發(fā)時(shí)機(jī)，如：頁(yè)面加載結(jié)束時(shí)，某按鈕點(diǎn)擊時(shí)

補(bǔ)充一個(gè)制作序列幀的工具 gka ：

gka.jpg

https://gka.js.org/#/

針對(duì)動(dòng)效設(shè)計(jì)落地難，提供了對(duì)應(yīng)的解決方法

-

1. 對(duì)接困難――量化動(dòng)效

在對(duì)接過(guò)程中，提供一份量化動(dòng)效的標(biāo)準(zhǔn)，讓設(shè)計(jì)師可以更加精準(zhǔn)的描述這個(gè)動(dòng)效，讓開(kāi)發(fā)可以百分百還原這個(gè)動(dòng)效。

標(biāo)注的時(shí)候要把該元素的動(dòng)效三要素 ――變化 、時(shí)長(zhǎng)、曲線 都分別標(biāo)出來(lái)。如下圖：

標(biāo)注模板的下載地址：動(dòng)效標(biāo)注模板下載鏈接

2. 設(shè)計(jì)困難――設(shè)計(jì)工具

自動(dòng)導(dǎo)出類 ：Lottie、Keyframes 等開(kāi)源庫(kù)，通過(guò)  AE  插件，將在 AE 中設(shè)計(jì)的動(dòng)效自動(dòng)導(dǎo)出為前端可用的動(dòng)效文件，前端只需要在項(xiàng)目中打入對(duì)應(yīng)的開(kāi)源庫(kù)，就可以免去對(duì)接交流的苦惱。

可交互類  Framer 上手資料：Melodie：Framer（framerjs.com）如何入門(mén)？

3. 開(kāi)發(fā)困難――開(kāi)源庫(kù)

Animate.css

airbnb/lottie-web

標(biāo)題名稱：動(dòng)效設(shè)計(jì)師前景及最佳落地方法
鏈接URL：http://www.muchs.cn/news49/48749.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、搜索引擎優(yōu)化、網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)