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

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

-

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

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

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

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

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

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

Tips:

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

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

-

動效落地過程中面臨的困難可以分成以下三種：

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

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

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

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

-

一、對接

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

1. 動效量化

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

 

變化

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

舉個例子，下面動圖中被扔出來的綠色小恐龍就同時包含上述四種變化。

它在 AE 中前后變化的參數(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ì)師，千萬不要隨便拿一個 demo 說「就按照這樣做個差不多的效果就可以了」，那樣的話估計(jì)大部分開發(fā)只會一臉懵逼。

時長

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

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

曲線

曲線描述的是物體運(yùn)動時候的速度變化，如果說變化和時長是動效的本體，那么曲線就是動效的靈魂。

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

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

雖然大家平時或多或少都用過以上幾種曲線來描述動畫的過程，但是大家不一定對曲線的具體用法有真正的理解、下面我會給出四個例子，來闡述一下以上幾種曲線的用法。

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

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

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

圓三：緩入緩出 ease-in-out，開頭結(jié)尾都沒有速度，先加速、再減速，是我們?nèi)粘Ｉ钪凶畛Ｒ姷奈锢磉\(yùn)動。適合用在一個元素從頁面 A 點(diǎn)到 B 點(diǎn)。

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

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

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

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

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

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í)時預(yù)覽效果，并且顯示成前端需要的格式。在這里推薦兩個：

cubic-bezier.com

css3beziercurve.net/

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

2. 標(biāo)注

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

上圖中的交互動效來自 Amazon Prime Music，界面中出現(xiàn)了兩個元素（加號 icon & 對勾 icon）的動畫，雖然看起來非常簡單，但是包含著極為豐富的變化。

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

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

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

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

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

最傳統(tǒng)普遍應(yī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)出解決方案，下面我會做一些簡單的介紹。

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

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

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

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

2. 可交互類

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

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

△ 用 Framer 寫的代碼示例

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

除此之外，在「全?！垢拍钤絹碓奖恢匾暤慕裉欤O(shè)計(jì)師通過一個相對低成本的方式接觸代碼，了解前端知識，是一個非常高效的提升通道。

三、開發(fā)

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

1. CSS 動畫

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

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

2. 開源庫

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

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

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

3. 序列幀

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

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

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

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

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

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

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

提供每幀圖的寬高尺寸

每幀圖的播放時長，總幀數(shù)

動效 Demo，gif、MP4 等，格式不限

動畫觸發(fā)時機(jī)，如：頁面加載結(jié)束時，某按鈕點(diǎn)擊時

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

gka.jpg

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

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

-

1. 對接困難――量化動效

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

標(biāo)注的時候要把該元素的動效三要素 ――變化 、時長、曲線 都分別標(biāo)出來。如下圖：

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

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

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

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

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

Animate.css

airbnb/lottie-web

當(dāng)前標(biāo)題：動效設(shè)計(jì)師前景及最佳落地方法
地址分享：http://www.rwnh.cn/news/48749.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、微信公眾號、域名注冊、網(wǎng)站營銷

廣告

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