動效設計師前景及最佳落地方法

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

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

-

動效設計（Motion Design）是因為整個用戶體驗行業(yè)的發(fā)展而細分出來的設計門類。所以總體來說，

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

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

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

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

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

Tips:

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

動效設計當前狀況

-

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

對接困難：對接困難實際上就是溝通困難，這也是本文要探討的重點。因為界面動效是一種新出現(xiàn)的設計模式，在開發(fā)和設計之間，還沒有一套成熟的對接標準。

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

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

動效設計好落地方法

-

一、對接

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

1. 動效量化

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

 

變化

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

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

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

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

初始狀態(tài)：

位移：X軸 0

旋轉(zhuǎn) ：0度

尺寸：1

透明度：0.2

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

位移：X軸 200px

旋轉(zhuǎn)：+180度

尺寸：1.5

透明度：1

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

時長

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

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

曲線

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

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

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

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

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

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

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

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

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

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

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

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

在前端開發(fā)中，可以直接利用設計給出的 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)在有許多工具可以方便設計師去調(diào)曲線，實時預覽效果，并且顯示成前端需要的格式。在這里推薦兩個：

cubic-bezier.com

css3beziercurve.net/

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

2. 標注

通過以上對動效參數(shù)的量化，我認為一份合格的標注應該是這樣的：

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

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

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

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

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

二、設計方法與工具

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

1. 自動導出類

目前，有像 Lottie、Keyframes 等開源庫，通過 AE 插件，將在 AE 中設計的動效自動導出為前端可用的動效文件，前端只需要在項目中打入對應的開源庫，就可以免去對接交流的苦惱。

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

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

2. 可交互類

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

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

△ 用 Framer 寫的代碼示例

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

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

三、開發(fā)

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

1. CSS 動畫

學習資料推薦 w3school 上的文檔 CSS3 動畫

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

2. 開源庫

應用從設計側(cè)提到過的 Lottie、Keyframe 類開源庫，將 AE 導出的動畫資源直接在項目中應用。

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

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

3. 序列幀

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

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

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

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

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

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

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

提供每幀圖的寬高尺寸

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

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

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

補充一個制作序列幀的工具 gka ：

gka.jpg

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

針對動效設計落地難，提供了對應的解決方法

-

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

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

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

標注模板的下載地址：動效標注模板下載鏈接

2. 設計困難――設計工具

自動導出類 ：Lottie、Keyframes 等開源庫，通過  AE  插件，將在 AE 中設計的動效自動導出為前端可用的動效文件，前端只需要在項目中打入對應的開源庫，就可以免去對接交流的苦惱。

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

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

Animate.css

airbnb/lottie-web

當前標題：動效設計師前景及最佳落地方法
地址分享：http://www.muchs.cn/news/48749.html

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

廣告

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