動(dòng)效設(shè)計(jì)是平面設(shè)計(jì)和動(dòng)畫設(shè)計(jì)兩個(gè)領(lǐng)域交融的產(chǎn)物，起源于上世紀(jì)50年代。80年代后，隨電腦軟件的使用，開始在影視、設(shè)計(jì)、互動(dòng)營(yíng)銷等領(lǐng)域有了很大的發(fā)展。

在構(gòu)成界面設(shè)計(jì)的三大元素（形狀、顏色、動(dòng)畫）中，動(dòng)畫最能夠吸引用戶的視線，引起用戶注意，其次是顏色，最后是形狀。傳統(tǒng)的用戶界面設(shè)計(jì)，受限于時(shí)間的關(guān)系，動(dòng)效設(shè)計(jì)不僅可以表達(dá)頁(yè)面的時(shí)間關(guān)系，還可以敘述因果關(guān)系。

一、動(dòng)效設(shè)計(jì)的意義

對(duì)產(chǎn)品而言，動(dòng)效設(shè)計(jì)能夠：

• 清晰的表達(dá)產(chǎn)品層級(jí)關(guān)系，使界面間銜接更自然；

• 營(yíng)造視覺焦點(diǎn)，引導(dǎo)用戶操作；

• 提升產(chǎn)品易用性，增加用戶黏性；

• 為產(chǎn)品注入活力，提升品質(zhì)和競(jìng)爭(zhēng)力。

對(duì)用戶來說，動(dòng)效設(shè)計(jì)能夠：

• 便于用戶理解，減少認(rèn)知成本；

• 增強(qiáng)用戶操縱感、帶入感，提升用戶體驗(yàn)；

• 每一步的操作都能及時(shí)獲得反饋；

• 形成用戶與界面的互動(dòng)；

• 減弱不可避免的不適感，如減少加載等待的焦慮，緩和失敗界面帶來的失落感。

二、動(dòng)效的分類

常見的動(dòng)效主要有4類：轉(zhuǎn)場(chǎng)類、展示類、引導(dǎo)類和反饋類。

1. 轉(zhuǎn)場(chǎng)類

轉(zhuǎn)場(chǎng)類動(dòng)效用于層級(jí)跳轉(zhuǎn)或場(chǎng)景切換, 除入場(chǎng)和離場(chǎng)動(dòng)效外經(jīng)常輔以縮放、透明度、旋轉(zhuǎn)等平滑的效果，幫助用戶理解界面間的變化和層級(jí)關(guān)系，也讓界面更加真實(shí)生動(dòng)。避免場(chǎng)景的瞬間切換導(dǎo)致用戶產(chǎn)生變化盲視（視覺刺激的突兀變化會(huì)阻止用戶注意到新的信息）。

2. 展示類

展示類動(dòng)效用于突出產(chǎn)品核心功能和特點(diǎn)說明，界面信息按照一定的規(guī)律呈現(xiàn)，引導(dǎo)用戶的視覺流向，幫助用戶更好的理解產(chǎn)品，能夠在第一眼吸引住用戶。常見的如企業(yè)或產(chǎn)品的官網(wǎng)首頁(yè)，能夠?qū)Ξa(chǎn)品起到很好的宣傳作用。

3. 引導(dǎo)類

引導(dǎo)類動(dòng)效通過界面中某些元素的變化，引起用戶注意或引導(dǎo)用戶進(jìn)行操作，避免用戶困惑，能夠自然而然的聚焦用戶視線，降低其他視覺元素的干擾。

4. 反饋類

反饋類動(dòng)效用于對(duì)用戶的操作及時(shí)給出相應(yīng)的反饋，如：懸浮、點(diǎn)擊、拖拽等，以視覺的形式展現(xiàn)給用戶，告知用戶系統(tǒng)正在與用戶發(fā)生交互，讓用戶產(chǎn)生一定的心理預(yù)期。

三、動(dòng)效設(shè)計(jì)的方法

1. 何時(shí)開始動(dòng)效設(shè)計(jì)

產(chǎn)品的設(shè)計(jì)階段，動(dòng)效設(shè)計(jì)應(yīng)當(dāng)在何時(shí)開始呢？

很多人認(rèn)為，動(dòng)效設(shè)計(jì)應(yīng)當(dāng)在視覺設(shè)計(jì)完成之后，對(duì)界面進(jìn)行點(diǎn)綴和豐富，以此來提升界面的B格，達(dá)到高大上的效果，這是完全錯(cuò)誤的。此時(shí)交互和視覺均已定稿，動(dòng)效形式會(huì)因定稿的內(nèi)容受到限制，設(shè)計(jì)上就會(huì)出現(xiàn)牽強(qiáng)，動(dòng)效失去了功能性，為了動(dòng)效而動(dòng)效。

動(dòng)效設(shè)計(jì)應(yīng)伴隨原型設(shè)計(jì)開始，產(chǎn)品中存在交互的地方需要設(shè)計(jì)師仔細(xì)斟酌是否需要?jiǎng)有гO(shè)計(jì)，動(dòng)效的功能是什么，以什么形式出現(xiàn)等問題。這樣能夠保證每個(gè)動(dòng)效都有其存在的意義，又能避免動(dòng)效濫用的情況。

2. 根據(jù)產(chǎn)品特性定義動(dòng)效風(fēng)格

現(xiàn)如今市場(chǎng)上的產(chǎn)品種類眾多，常見如安全、社交、游戲、新聞、財(cái)經(jīng)、效率、體育、工具、商務(wù)等等，都有自身特有的用戶群體。因此在設(shè)計(jì)動(dòng)效時(shí)，除了要考慮動(dòng)效的基本設(shè)計(jì)原則外，還要考慮產(chǎn)品本身的特性和動(dòng)效帶給用戶的心理感受。

如上圖所示，軌跡A和B 都是在動(dòng)效設(shè)計(jì)中常用的緩動(dòng)效果，如果要為一款安全類的產(chǎn)品設(shè)計(jì)動(dòng)效，顯然干凈利落的軌跡B更加適合，若使用軌跡A則會(huì)導(dǎo)致用戶心里不安，感覺產(chǎn)品不可靠，效率低。相對(duì)于B，軌跡A則比較適合兒童類或游戲類產(chǎn)品。

3. 動(dòng)效的響應(yīng)時(shí)長(zhǎng)和持續(xù)時(shí)長(zhǎng)

① 響應(yīng)時(shí)長(zhǎng)

定義：指從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時(shí)長(zhǎng)。

• 對(duì)于由用戶操作直接觸發(fā)的反饋，理想的響應(yīng)時(shí)間應(yīng)該控制在100毫秒內(nèi)；

• 對(duì)于由用戶操作間接觸發(fā)的反饋，響應(yīng)時(shí)長(zhǎng)可允許達(dá)到1秒左右，不可超過2秒無反饋；

• 當(dāng)反饋時(shí)間為2-9秒時(shí)，可使用循環(huán)的加載樣式（如：常見的菊花轉(zhuǎn)）；

• 當(dāng)反饋時(shí)間超過10秒 時(shí)，須使用帶有進(jìn)度指示的加載樣式（如已加載了60%，還剩30秒）。

② 持續(xù)時(shí)長(zhǎng)

定義：從動(dòng)效開始到結(jié)束的時(shí)長(zhǎng)。

• 交互微動(dòng)效的持續(xù)時(shí)間不宜過長(zhǎng)，以避免浪費(fèi)用戶時(shí)間，影響用戶的閱讀和操作效率，其持續(xù)時(shí)間一般不超過500毫秒 ( 加載動(dòng)效除外 )；

• 較快的動(dòng)效更容易吸引用戶注意力，也更節(jié)省時(shí)間；

• 較慢的動(dòng)效較少分散用戶注意力，更適用于非用戶直接觸發(fā)的場(chǎng)景；

• 出場(chǎng)動(dòng)效一般比入場(chǎng)動(dòng)效更快。

4. 動(dòng)效設(shè)計(jì)遵循物理運(yùn)動(dòng)法則

說到物理運(yùn)動(dòng)法則，不得不提到牛頓三大定律。但現(xiàn)實(shí)世界中存在著摩擦力、空氣阻力等外力因素，物體會(huì)做加速或減速運(yùn)動(dòng)，人類也養(yǎng)成了這樣的認(rèn)知。因此在動(dòng)效設(shè)計(jì)時(shí)，物體的運(yùn)動(dòng)要符合現(xiàn)實(shí)世界的運(yùn)動(dòng)規(guī)律，符合物理運(yùn)動(dòng)法則的動(dòng)效才符合用戶的感知。

最常用的緩動(dòng)曲線包括緩入、緩出兩種形式，緩入為加速曲線，緩出為減速曲線?？紤]到速度變化對(duì)用戶心理和注意力的影響，（不斷減速的物體會(huì)吸引用戶的注意力，不斷加速的物體會(huì)失去用戶的注意力），因此入場(chǎng)動(dòng)效要先快后慢，持續(xù)吸引用戶視線，出場(chǎng)動(dòng)效要先慢后快。

5. 注重功能性，把握動(dòng)效設(shè)計(jì)的”度”

注重動(dòng)效的功能性，設(shè)計(jì)前要問反問自己：這個(gè)動(dòng)效的作用是什么？必須要有嗎？去掉會(huì)怎樣？對(duì)用戶來說有什么用？保證每個(gè)動(dòng)效都應(yīng)該有其存在的意義。

功能性動(dòng)效也有簡(jiǎn)單和復(fù)雜之分，上圖數(shù)據(jù)顯示，復(fù)雜的動(dòng)效在用戶使用產(chǎn)品初期對(duì)用戶有很大的吸引力，隨著時(shí)間推移，用戶滿意度會(huì)逐漸下降。

因?yàn)槌跗冢瑥?fù)雜的動(dòng)效設(shè)計(jì)給用戶帶來了新鮮感，用戶也愿意花時(shí)間去了解、學(xué)習(xí)，使用久了，用戶的新鮮感下降，感覺復(fù)雜的動(dòng)效浪費(fèi)時(shí)間，從而引起用戶反感。而簡(jiǎn)單的動(dòng)效，隨時(shí)間增長(zhǎng)，用戶對(duì)產(chǎn)品和動(dòng)效的節(jié)奏慢慢熟悉，滿意度也會(huì)逐漸上升，維持在一個(gè)較高水平。

6. 動(dòng)效要反映品牌調(diào)性

每個(gè)產(chǎn)品都有自己的品牌調(diào)性，動(dòng)效設(shè)計(jì)要符合產(chǎn)品的品牌調(diào)性。對(duì)產(chǎn)品來說，符合品牌調(diào)性的動(dòng)效能夠保持與其他產(chǎn)品的差異化，提升產(chǎn)品的B格，也能夠在用戶心中形成品牌效應(yīng)。如斗魚的加載動(dòng)畫，對(duì)自身品牌形象進(jìn)行有效的傳達(dá)的同時(shí)也給用戶留下了深刻的印象。

7. 考慮實(shí)現(xiàn)成本，做好權(quán)衡

動(dòng)效設(shè)計(jì)不是目的，最終還是需要前端同學(xué)實(shí)現(xiàn)。因此在設(shè)計(jì)時(shí)，要考慮動(dòng)效的可實(shí)現(xiàn)性（機(jī)器資源、設(shè)備兼容性、運(yùn)行能力）和成本（時(shí)間成本、實(shí)開發(fā)成本、人力成本）。如果動(dòng)效最終沒有實(shí)現(xiàn)或?qū)崿F(xiàn)效果不佳，對(duì)用戶體驗(yàn)是一種傷害，同時(shí)也浪費(fèi)了設(shè)計(jì)和開發(fā)的時(shí)間。因此在設(shè)計(jì)之前，要充分與開發(fā)GG們?cè)u(píng)估好開發(fā)的時(shí)間、成本和實(shí)現(xiàn)性。

四、動(dòng)效的輸出

1. 動(dòng)效設(shè)計(jì)文檔

在完成動(dòng)效設(shè)計(jì)之后，要養(yǎng)成將動(dòng)效整理成規(guī)范文檔的習(xí)慣，在文檔中定義好元素的基本參數(shù)和運(yùn)動(dòng)曲線，一方面方便開發(fā)同學(xué)查閱和使用，另一方面也有助于規(guī)范形成，方便其他設(shè)計(jì)同學(xué)使用和參考。

基本參數(shù)包括：位移、縮放、旋轉(zhuǎn)、透明度、顏色。

常見運(yùn)動(dòng)曲線：緩入、緩出、緩入緩出、勻速、彈性，文檔中運(yùn)動(dòng)曲線的值可從 http://cubic-bezier.com/ 中定義。

2. 直接輸出動(dòng)畫

針對(duì)如下圖所示的復(fù)雜的動(dòng)效，前端無法直接寫出樣式，可以通過動(dòng)效設(shè)計(jì)軟件直接生成GIF動(dòng)畫或PNG序列格式。（區(qū)別是，gif格式支持256種顏色，圖片有白邊、鋸齒，而PNG支持1600萬種顏色，質(zhì)量比GIF好很多）

有時(shí)候需要透明的動(dòng)畫格式，如：微博的點(diǎn)贊動(dòng)畫，而背景透明的GIF效果很差，APNG則可以完美解決這個(gè)問題。APNG可以通過軟件（iSparta）將PNG序列文件轉(zhuǎn)化成APNG動(dòng)態(tài)圖片。（文末會(huì)附上iSparta軟件安裝及使用方法）

3. 動(dòng)效演示Demo

設(shè)計(jì)師除了要輸出動(dòng)效設(shè)計(jì)文檔和動(dòng)畫以外，還要有直觀的演示Demo，一方面方便其他同學(xué)查看效果，評(píng)估工作量；二來可以節(jié)省設(shè)計(jì)師與開發(fā)的溝通時(shí)間，也為設(shè)計(jì)師后期驗(yàn)收提供依據(jù)。

動(dòng)效設(shè)計(jì)暫先寫到這里，對(duì)于前文的嘮叨整理如下：