@野子Joey ：動(dòng)效如今被廣泛的使用在界面設(shè)計(jì)中。但如何合理使用實(shí)效，而不是讓動(dòng)效干擾用戶，卻少有總結(jié)的經(jīng)驗(yàn)。因此本文旨在結(jié)合現(xiàn)有的動(dòng)效資源和案例，總結(jié)一下動(dòng)效的使用目的，使用場(chǎng)景以及實(shí)現(xiàn)技術(shù)。

注：由于動(dòng)圖過(guò)大，壓縮有損細(xì)節(jié)，不過(guò)對(duì)了解動(dòng)效的原理沒(méi)有影響，見(jiàn)諒。

文章結(jié)構(gòu)：

1. 現(xiàn)狀介紹
2. 動(dòng)效使用歷史
3. 動(dòng)效的使用目的
4. 動(dòng)效使用場(chǎng)景
5. 使用動(dòng)效的注意事項(xiàng)
6. 如何制作流暢的動(dòng)效

現(xiàn)狀

動(dòng)畫(huà)作為一種娛樂(lè)方式，被好萊塢的大神們已經(jīng)運(yùn)用到了出神入化的地步。作為一個(gè)設(shè)計(jì)新人，我主要關(guān)注如何運(yùn)用動(dòng)效在 UI 設(shè)計(jì)上，希望它也能夠給界面提升一些趣味性。

如今你可以在各種網(wǎng)站和 APP 上看到動(dòng)效的身影。設(shè)計(jì)師想通過(guò)運(yùn)動(dòng)的物體來(lái)吸引用戶的注意力，從而實(shí)現(xiàn)其目的。然而，有些動(dòng)效僅僅是為了好看而做，并沒(méi)有和界面的實(shí)際功能聯(lián)系起來(lái)，因此造成用戶的認(rèn)知障礙。如何將動(dòng)效運(yùn)用在合適的場(chǎng)景，以及如何制作流暢的動(dòng)效成為了很多設(shè)計(jì)師思考的問(wèn)題。

動(dòng)效使用歷史

Haziwani 和 Berrand(2016) 總結(jié)到，在1970年左右，用戶界面還只是一系列頭尾相連的 PDF，沒(méi)有任何的動(dòng)效。直到喬幫主發(fā)布了發(fā)布了 Macintash(1984)，情況得到了一些改善。但是由于電腦畫(huà)面處理能力的限制，動(dòng)效使用的十分有限。隨著電腦性能的提升，越來(lái)越多的動(dòng)效被使用到電腦和手機(jī)當(dāng)中。

到了2007年，改變?nèi)祟?lèi)的產(chǎn)品 IPhone 問(wèn)世了。它極大了顛覆了人們對(duì)電子設(shè)備體驗(yàn)的感受。動(dòng)效真正開(kāi)始進(jìn)入了每個(gè)人的日常生活。為什么大家都愛(ài)使用動(dòng)效呢？Cooper(2014) 解釋到，動(dòng)效是一種強(qiáng)大的機(jī)制，可以解釋和說(shuō)明物體間的關(guān)系。這個(gè)機(jī)制在手持設(shè)備上尤其有用，因?yàn)槭殖衷O(shè)備的屏幕大小有限，人們可以利用動(dòng)效充分使用隱藏內(nèi)容的功效。轉(zhuǎn)場(chǎng)動(dòng)效幫助用戶構(gòu)建了清晰的思維模式 —— 新的內(nèi)容從哪來(lái)，新內(nèi)容和舊內(nèi)容之間的關(guān)系是什么。動(dòng)效在網(wǎng)站上的效果也非常好，它可以有效的引導(dǎo)用戶瀏覽界面。

動(dòng)效的使用目的

因?yàn)閯?dòng)效存在負(fù)面作用，合理的使用它變尤為重要。Cooper (2014) 提出動(dòng)效需要謹(jǐn)慎的使用。過(guò)度的使用動(dòng)效不僅讓人困惑和反感，而且讓人生理上不舒服。比如蘋(píng)果的 IOS7，它過(guò)分強(qiáng)烈的視差效果讓很多用戶感到不舒服。

交互動(dòng)效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化。Saffer(2013) 提出使用動(dòng)效存在下列目的：

• 吸引用戶注意力在指定區(qū)域
• 表現(xiàn)對(duì)象和用戶操作間的關(guān)系
• 維持多窗口或多狀態(tài)的上下文關(guān)系
• 提供持續(xù)性事件的認(rèn)知感
• 創(chuàng)造虛擬空間引導(dǎo)用戶在狀態(tài)和功能間轉(zhuǎn)化
• 創(chuàng)造沉浸感和趣味性 （每一個(gè)舉一個(gè)動(dòng)圖例子）

Yalanska(2016) 也定義了 UI 動(dòng)效的四項(xiàng)作用：

• 支持微交互
• 顯示運(yùn)動(dòng)過(guò)程
• 解釋
• 裝飾

Google 的 Material Design(2017), 提出在 MD 中，動(dòng)效用來(lái)描述空間關(guān)系，功能，富有美感和流動(dòng)性的目標(biāo)。 動(dòng)效顯示 APP 是如何組織的以及它能夠做什么，具體如下：

• 引導(dǎo)窗口切換
• 提示用戶接下來(lái)發(fā)生的事
• 對(duì)象間的層級(jí)感和空間感
• 減緩用戶對(duì)等待事件的認(rèn)知
• 美感和個(gè)性化

綜上，筆者總結(jié)了交互動(dòng)效的使用目的, SAFRI，游獵法則（少了第二個(gè)A，原詞 SAFARI）

1.State

告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的

當(dāng)界面中對(duì)象狀態(tài)需要發(fā)生變化時(shí)，可以用動(dòng)效展示變化的過(guò)程，讓用戶更清楚的感知到該變化。相應(yīng)的，當(dāng)窗口發(fā)生變化時(shí)，可以用動(dòng)效更清楚展示窗口是如何從一個(gè)狀態(tài)轉(zhuǎn)變到另一個(gè)狀態(tài)的。

2. Attention

吸引用戶注意力，告訴用戶做什么

當(dāng)你想讓用戶關(guān)注某一個(gè)區(qū)域，或執(zhí)行某一個(gè)操作時(shí)，可以通過(guò)動(dòng)效吸引他們的注意力。當(dāng)用戶需要執(zhí)行操作時(shí)，注意 UI 和動(dòng)效的結(jié)合要能告知用戶需要進(jìn)行的操作。

3. Feedback

告訴用戶操作和對(duì)象間的關(guān)系

當(dāng)用戶執(zhí)行了某一操作后，動(dòng)效是一個(gè)非常好用的反饋機(jī)制。通過(guò)動(dòng)效的適當(dāng)運(yùn)用，用戶可以清晰感知到自己操作的反饋，讓用戶知道自己做了什么。

4. Relief

緩解用戶對(duì)應(yīng)用處理速度的感知

當(dāng)應(yīng)用執(zhí)行一個(gè)長(zhǎng)時(shí)間操作時(shí)，可以用動(dòng)效緩解用戶對(duì)時(shí)間的感知，甚至創(chuàng)建一個(gè)假的動(dòng)效效果（其實(shí)應(yīng)用并不用處理這么長(zhǎng)時(shí)間）。當(dāng)下許多 APP 下拉時(shí)的加載動(dòng)效運(yùn)用的便是該原理。對(duì)于用戶，他們關(guān)注的是感受到的速度，而不是應(yīng)用實(shí)際消耗的速度。

5. Individuation

讓產(chǎn)品更有趣和個(gè)性

為了讓產(chǎn)品更有趣味性，可以在某些場(chǎng)合適當(dāng)運(yùn)用動(dòng)效創(chuàng)造一些讓人愉悅的動(dòng)畫(huà)效果。兩點(diǎn)是筆者覺(jué)得需要注意的，一是動(dòng)效時(shí)間要足夠短，二是動(dòng)效要足夠流暢。

需要說(shuō)明的是，這些目的不是獨(dú)立存在的。設(shè)計(jì)師可以運(yùn)用其中任意幾條去設(shè)計(jì)一個(gè)動(dòng)效。比如，兩個(gè)窗口間的切換動(dòng)效不僅吸引了用戶的注意力，告訴用戶面板在切換了。而且還告訴用戶兩個(gè)面板的位置和空間關(guān)系，上下，左右還是前后。

△ State + Attention + Feedback

△ State + Attention + Feedback + Individuation

喬幫主說(shuō)過(guò)：“設(shè)計(jì)并不僅僅是它看到或感受到的樣子。設(shè)計(jì)應(yīng)該表現(xiàn)它怎么工作的。“筆者認(rèn)為動(dòng)效也是一樣的道理，動(dòng)效應(yīng)該它怎么工作的。設(shè)計(jì)動(dòng)效時(shí)問(wèn)自己1個(gè)問(wèn)題，這個(gè)動(dòng)效的目的是什么？

動(dòng)效使用場(chǎng)景

如果我們拆分動(dòng)效到具體的使用場(chǎng)景，Cao(2015) 幫我們羅列了當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)中的10大使用場(chǎng)景，大部分場(chǎng)景也適用于手機(jī)應(yīng)用中：

1. 滾動(dòng) Banner

2. 表單

3. 視覺(jué)中心

4. 導(dǎo)航欄和菜單

5. 轉(zhuǎn)場(chǎng)動(dòng)效

6.背景動(dòng)效

7. 加載動(dòng)效

8. 滾動(dòng)事件觸發(fā)的動(dòng)效

9. 鼠標(biāo) Hover 動(dòng)效

10. 圖片動(dòng)效

使用動(dòng)效的注意事項(xiàng)

當(dāng)我們制作交互動(dòng)效的時(shí)候，有哪些事情是我們可以提前注意，或者有哪些標(biāo)準(zhǔn)可以用來(lái)評(píng)判是不是一個(gè)好動(dòng)效。Saffer(2013) 說(shuō)到如果你做一件事可以不用動(dòng)效，那盡量避免。從微信和 Facebook 這種全民 APP 在動(dòng)效使用上自制不難看出。

其次，動(dòng)效本身需要符合其傳達(dá)的意義。比如用戶上下滑動(dòng)屏幕，窗口內(nèi)容就該上下變換，而不是左右變換。僅僅為了動(dòng)效而作動(dòng)效是不可取的，交互動(dòng)效需要盡可能解釋其本身含義。

2016年，Hazwani 和 Bernard(2016) 列出了4個(gè)讓動(dòng)效具有意思的注意事項(xiàng)：

1. 概念轉(zhuǎn)換：不要獨(dú)立的設(shè)計(jì)界面布局和動(dòng)效。設(shè)計(jì)它們的時(shí)候思考它們之間的聯(lián)系，如何它們之間轉(zhuǎn)化更自然，符合內(nèi)容的語(yǔ)義。
2. 解釋關(guān)系：每個(gè)元素都有其意義，狀態(tài)，位置等屬性。嘗試用動(dòng)效反應(yīng)這些屬性間的關(guān)系。比如點(diǎn)擊一個(gè)按鈕，如果會(huì)觸發(fā)一個(gè)面板。更好的效果是讓面板從按鈕處出現(xiàn)且漸入，而不是讓面板直接漸入。
3. 唯一性：不要讓一個(gè)相同概念的元素在畫(huà)面中同時(shí)出現(xiàn)在2個(gè)地方。這會(huì)讓用戶對(duì)理解該元素的意義產(chǎn)生困惑。比如點(diǎn)擊小圖顯示大圖，小圖在大圖顯示的過(guò)程中依然出現(xiàn)在用戶視野內(nèi)。
4. 空間一致性：動(dòng)效在空間上需要符合實(shí)際性。當(dāng)一個(gè)元素從左側(cè)離開(kāi)視線后，潛意識(shí)里你會(huì)預(yù)判它回來(lái)的方向也是從左側(cè)。

在 2015 澳大利亞的 CSS 峰會(huì)上， Cock(2015) 談到需要在實(shí)際開(kāi)發(fā)中注意的四個(gè)基本 UI 動(dòng)效原則：

1. Web 開(kāi)發(fā)時(shí)多使用 opacity 和 transform properties 的組合，其他的屬性變化會(huì)導(dǎo)致 WEB 渲染變慢，影響體驗(yàn)。筆者查閱了一下，更準(zhǔn)確的是說(shuō)，多使用 CSS3 中的 transfrom-3D 屬性，因?yàn)檫@些屬性會(huì)通過(guò) GPU 硬件來(lái)處理，而不是通常處理網(wǎng)站的 CPU
2. 讓動(dòng)效足夠快 （300ms 左右），提供給用戶視覺(jué)上的愉悅，而不是帶來(lái)延遲的觀感
3. 獨(dú)立的運(yùn)動(dòng)物體各個(gè)部分，這樣使整體動(dòng)畫(huà)更豐富，不呆板
4. 使用自定義的動(dòng)效函數(shù)，讓你的動(dòng)效與眾不同

Material Design(2017) 也提出了4點(diǎn)原則：

1. 響應(yīng)：動(dòng)效要快速響應(yīng)用戶的操作，移動(dòng)設(shè)備上，長(zhǎng)動(dòng)畫(huà)大約在 300-400ms 之間，短動(dòng)畫(huà)大約在 150-200ms 之間。
2. 自然：對(duì)于動(dòng)效的運(yùn)動(dòng)狀態(tài)，要符合真實(shí)世界，因此要根據(jù)實(shí)際情況運(yùn)用合適的 natural easing curves
3. 感知：運(yùn)動(dòng)的物體對(duì)周?chē)奈矬w會(huì)產(chǎn)生影響，因此要考慮其周?chē)沫h(huán)境
4. 目的：動(dòng)效要具有目的性，傳達(dá)給用戶特性的信息

綜上，筆者總結(jié)了簡(jiǎn)短的3個(gè)原則：

1. 邏輯：動(dòng)效是否符合客觀邏輯（響應(yīng)時(shí)間，方向，一致性，目的）
2. 時(shí)間：動(dòng)效的時(shí)長(zhǎng)是否合適（視覺(jué)上感受良好）
3. 真實(shí)：動(dòng)效是否反映了真實(shí)世界的運(yùn)動(dòng)規(guī)律（慣性，緩入緩出）

如何制作流暢的動(dòng)效

筆者明白“紙上得來(lái)終覺(jué)淺，覺(jué)知此事要躬行”的意義。于是收集完理論后，筆者便開(kāi)始了對(duì)動(dòng)效制作的探索。首先學(xué)習(xí)了迪士尼動(dòng)畫(huà)師 Johnson 和 Thomas 的動(dòng)畫(huà)圣經(jīng)—《The Illusion of Life: Disney Animation》其中的12條動(dòng)畫(huà)設(shè)計(jì)原則：

1. 壓縮和拉伸
2. 預(yù)期感
3. 布局
4. 一氣呵成和分批設(shè)計(jì)
5. 跟隨和重疊動(dòng)作
6. 緩入和緩出
7. 弧
8. 第二動(dòng)作
9. 時(shí)間
10. 夸張
11. 立體感
12. 有趣

這些原則雖然是針對(duì)動(dòng)畫(huà)片的，但是筆者在研究了它們后，按照自己的理解，選出了可以運(yùn)用到交互動(dòng)畫(huà)制作的 9 條原則：

1. 時(shí)間和節(jié)奏：動(dòng)畫(huà)的總時(shí)長(zhǎng)和每幀動(dòng)畫(huà)間的距離（先快后慢，或先慢后快）
2. 緩入和緩出：符合現(xiàn)實(shí)世界規(guī)律，物體不能憑空運(yùn)動(dòng)和停止，有加速和減速過(guò)程
3. 預(yù)期感：給動(dòng)畫(huà)添加一個(gè)反向動(dòng)畫(huà)，讓動(dòng)畫(huà)更突出，更好的幫助用戶理解動(dòng)畫(huà)
4. 壓縮和拉伸：制造視覺(jué)上的假想，突出效果
5. 弧：符合現(xiàn)實(shí)世界規(guī)律，少有純直線運(yùn)動(dòng)
6. 跟隨和重疊動(dòng)作：輔物體會(huì)追隨主物體運(yùn)動(dòng)，且由于慣性，會(huì)有時(shí)間延遲
7. 第二動(dòng)作：添加第二動(dòng)作用于豐富第一動(dòng)作
8. 夸張：讓動(dòng)畫(huà)更具個(gè)性
9. 有趣：結(jié)合以上8點(diǎn)，傳遞給用戶一個(gè)有趣的印象

設(shè)計(jì)師可以靈活選擇其中的幾個(gè)原則進(jìn)行自己的動(dòng)效設(shè)計(jì)。筆者接下來(lái)會(huì)將會(huì)運(yùn)用動(dòng)效制作技術(shù)「主要是 CSS/JS, After Effects, 和 FramerJS」，按照?qǐng)鼍埃康模谱鳎u(píng)估的四步驟，具體解釋如何綜合運(yùn)用運(yùn)用以上理論。

1

場(chǎng)景：Banner

目的：State, Attention, Individualization, Relief

制作：

筆者做的旋轉(zhuǎn) Banner, 主要用到了 Framer 的 PageComponent. 用定時(shí)器控制 Page 的切換，和底部導(dǎo)航圓點(diǎn)樣式的切換。需要掌握了簡(jiǎn)單 coffeeScript 的語(yǔ)法即可。

細(xì)節(jié)優(yōu)化：

1. 添加一個(gè)加載按鈕的效果，讓用戶感受到還有多久切換到下一個(gè) Banner。技術(shù)上使用的是 CSS 的 background-image: linear-gradient 屬性。通過(guò)控制其投射角度，動(dòng)態(tài)變化大小。
2. 時(shí)間上，24 frames/s 是一個(gè)適中的節(jié)奏。所以假定 2s 走完 360 度，則每 0.0417s 走完 7.5 度。實(shí)時(shí)刷新界面即可。其次，轉(zhuǎn)完一圈后的氣泡效果的時(shí)間為 0.3 左右，符合Material Design 對(duì)手持設(shè)備動(dòng)效時(shí)間的要求。
3. Easing function上，左滑動(dòng)畫(huà)使用的是 ease-out, 又慢到快的劃出屏幕，符合實(shí)際。圓的旋轉(zhuǎn)是 linear, 時(shí)間是均勻流動(dòng)的。
4. 動(dòng)畫(huà)上的細(xì)節(jié)加在了氣泡上，氣泡是先縮小再放大，縮小是為了給接下來(lái)的放大提供一個(gè)預(yù)判，應(yīng)用了 Anticipation 原理。其次是刻意夸張了縮小的效果，scale 0.5->0.1, opacity 0.1->1, 應(yīng)用了 Exaggeration 原理。縮小時(shí)用的 easing function 是ease-in-out, 放大用的是 ease-out。符合客觀規(guī)律。

評(píng)估：

1. 邏輯：符合一致性。該動(dòng)效實(shí)現(xiàn)了四個(gè)動(dòng)效目的。響應(yīng)時(shí)間還可以進(jìn)一步優(yōu)化。
2. 時(shí)間：采用 Material Design 標(biāo)準(zhǔn)，可根據(jù)實(shí)際情況進(jìn)一步優(yōu)化
3. 真實(shí)：Easing Function 符合實(shí)際情況。夸張部分動(dòng)畫(huà)為了突出動(dòng)效效果。氣泡破裂的感覺(jué)還可以進(jìn)一步優(yōu)化。

2

場(chǎng)景：Form

目的：State, Attention, Feedback, Individualization

制作：

筆者做的 Form 表單效果, 模仿的 Google 登陸。使用的 PageComponent 控制頁(yè)面切換。由于 Framer 原聲不支持表單輸入控件，另外用到了 Github 上的一個(gè) Input 插件模擬動(dòng)態(tài)輸入效果

細(xì)節(jié)優(yōu)化：

1. 頭像添加一個(gè)背景色的改變，也就是動(dòng)態(tài)的導(dǎo)入用戶頭像，用到了 Scale 屬性。并同時(shí)把用戶的賬號(hào)顯示在頭像下方。
2. 按鈕添加 MouseDown 效果，監(jiān)聽(tīng)用戶單機(jī)事件，當(dāng)鼠標(biāo)按下時(shí)，按鈕添加選中效果。鼠標(biāo)放開(kāi)時(shí)，效果消失，返回原狀態(tài)。運(yùn)用的是 Frame 的 State 變化機(jī)制。
3. Easing function上，進(jìn)入的效果都是 ease-out, 出去的效果都是 ease-in, 符合實(shí)際場(chǎng)景
4. 注意一下小圖標(biāo)的觸摸區(qū)域，要保證其足夠大，很容易被手指點(diǎn)擊到。即返回圖標(biāo)背后是有一塊更大的透明區(qū)域用來(lái)接收點(diǎn)擊事件。

評(píng)估：

1. 邏輯：符合方向的一致性。該動(dòng)效實(shí)現(xiàn)了四個(gè)動(dòng)效目的。
2. 時(shí)間：采用 Material Design 標(biāo)準(zhǔn)，可根據(jù)實(shí)際情況進(jìn)一步優(yōu)化
3. 真實(shí)：Easing Function 符合實(shí)際情況。個(gè)性化還可以再提升，使其更有趣點(diǎn)。

3

場(chǎng)景：Stage

目的： Attention, Feedback, Relief, Individualization

制作：

筆者做的 Stage 點(diǎn)擊效果，利用 boxShadow 的動(dòng)態(tài)變化吸引用戶注意力使其點(diǎn)擊。然后使用 Svg 畫(huà)圓形，并使用 Utils.modulate 動(dòng)態(tài)控制 stroke-dashoffset 的變化形成動(dòng)態(tài)圓。最后提示界面出現(xiàn)。

細(xì)節(jié)優(yōu)化：

1. 點(diǎn)擊方塊后，添加了一個(gè)先放大，再縮小的效果，運(yùn)用了 Anticipation 的原理，使其更自然。
2. 大方塊縮小后，添加了一個(gè)方塊像上移動(dòng)同時(shí)變成圓的效果，最后和圓的起點(diǎn)連接在一起，使動(dòng)畫(huà)更整體，運(yùn)用了 Second Animation 原理。
3. Easing function上，進(jìn)入的效果都是 ease-out, 出去的效果都是 ease-in, 圓使用的是 ease-out-in 給用戶一種加載時(shí)的動(dòng)態(tài)感，減少用戶等待知覺(jué)

評(píng)估：

1. 邏輯：該動(dòng)效實(shí)現(xiàn)了四個(gè)動(dòng)效目的。
2. 時(shí)間：采用 Material Design 標(biāo)準(zhǔn)，可嘗試多一些選擇，看看有沒(méi)有更有趣的
3. 真實(shí)：Easing Function 符合實(shí)際情況。可以多試一些 Custom 的 easing-functions

4

場(chǎng)景：Menu

目的： State, Attention, Feedback, Individualization

制作：

筆者做的 Menu 菜單效果，利用 Rotate 屬性動(dòng)效變化菜單按鈕的形狀給用戶反饋。菜單內(nèi)容是三個(gè)獨(dú)立的長(zhǎng)方形，但是都是一個(gè)共同父元素的 Children, 方便通過(guò)父元素控制其整體移動(dòng)。

細(xì)節(jié)優(yōu)化：

1. Icon 一開(kāi)始是兩條橫線反方向旋轉(zhuǎn) 45 度形成 X, 后來(lái)利用 Exaggeration 原理使其同方向旋轉(zhuǎn)形成 90 夾角，所以第一條橫線旋轉(zhuǎn)了 145 度，看上去更有視覺(jué)效果。
2. 菜單內(nèi)容出現(xiàn)后，添加了一個(gè)移動(dòng)效果，需要保證其速度足夠快，不會(huì)讓用戶等待，同時(shí)增加了動(dòng)畫(huà)的趣味性。
3. Easing function上，菜單按鈕使用了 Spring 緩動(dòng)，使其有彈性的感覺(jué)，增加趣味性。菜單進(jìn)入的效果是 ease-out, 出去 ease-in, 出現(xiàn)后移動(dòng)的效果是 ease-in-out

評(píng)估：

1. 邏輯：該動(dòng)效實(shí)現(xiàn)了四個(gè)動(dòng)效目的。
2. 時(shí)間：采用 Material Design 標(biāo)準(zhǔn)，保證其足夠短。
3. 真實(shí)：Easing Function 符合實(shí)際情況。長(zhǎng)方形的分離，采用了 Material Design 標(biāo)準(zhǔn)。

5

場(chǎng)景: Transition

目的： State, Attention, Feedback, Individualization

制作：
筆者做的 Transition 效果，通過(guò)控制元素 x 位置和 Scale 屬性，形成轉(zhuǎn)場(chǎng)效果。

細(xì)節(jié)優(yōu)化：

1. 點(diǎn)擊按鈕后，按鈕動(dòng)態(tài)旋轉(zhuǎn)并逐漸放大消失，控制其與新內(nèi)容同時(shí)移動(dòng)，營(yíng)造新內(nèi)容是由按鈕產(chǎn)生的視覺(jué)錯(cuò)覺(jué)，運(yùn)用了 Follow through 理論。
2. 增加了點(diǎn)擊后的 Ripple 效果，用于給用戶即使反饋。
3. Easing function上，進(jìn)入的效果是 ease-out, 出去 ease-in。同時(shí)出去的時(shí)間要短于進(jìn)入的，不重要的事件減少其用戶等待時(shí)間。

評(píng)估：

1. 邏輯：該動(dòng)效實(shí)現(xiàn)了四個(gè)動(dòng)效目的。
2. 時(shí)間：采用 Material Design 標(biāo)準(zhǔn)，保證其足夠短。
3. 真實(shí)：Easing Function 符合實(shí)際情況。可以多試試一些別的趣味性效果，比如熱氣球的上浮感。

6

場(chǎng)景: Background

目的：Attention, Individualization

制作：
筆者做的 Background 效果，通過(guò)控制三層元素的 x 的位置，設(shè)置不同的速率，產(chǎn)生視差滾動(dòng)的效果。反復(fù)執(zhí)行動(dòng)畫(huà)即可。

細(xì)節(jié)優(yōu)化：

1. 近大遠(yuǎn)小，近實(shí)遠(yuǎn)虛，近快遠(yuǎn)慢。
2. Easing function上，模擬上浮的效果，先慢后快。

評(píng)估：

1. 邏輯：該動(dòng)效實(shí)現(xiàn)了兩個(gè)動(dòng)效目的。在手機(jī)端筆者不建議使用 Background 效果，手機(jī)更注重快捷性，其屏幕大小有限，這種全屏動(dòng)畫(huà)占了手機(jī)屏幕所有空間，干擾更為重要的內(nèi)容呈現(xiàn)。
2. 時(shí)間：時(shí)間過(guò)長(zhǎng)，更偏向視覺(jué)效果，而不是交互。
3. 真實(shí)：如果是純視覺(jué)效果，可以再添加一個(gè)氣泡上升到頂部爆炸的效果。不過(guò)這種效果最好用 AE 做，再轉(zhuǎn)成 gif 了，不太適合用 Layer 來(lái)模擬。

7

場(chǎng)景: Loading

目的： Attention, Relief, Individualization

制作：
筆者做的 Loading 效果，通過(guò)三角函數(shù)控制元素 x 位置和 y 位置，形成蝴蝶結(jié)路徑效果。公式

x = midX + maxX * math.sin(二倍周期)
y = midY + maxY * math.sin(一倍周期)

注意，x 的周期保證為 y 周期的2倍，這樣保證了 x 完成一圈的時(shí)候，y 完成了兩圈，動(dòng)態(tài)就成了蝴蝶結(jié)的形狀。

細(xì)節(jié)優(yōu)化：

1. 增加了一個(gè)方向相反的圓，兩個(gè)圓的移動(dòng)更有 Loading 的感覺(jué)
2. 當(dāng) 2 個(gè)圓相遇時(shí)，動(dòng)態(tài)改變其顏色，使動(dòng)畫(huà)更加有趣
3. Easing function 這里用的是 Utils.interval 按照固定時(shí)間間隔進(jìn)行變化的，因?yàn)檐浖恢С衷€運(yùn)動(dòng)，屬于線性變化。

評(píng)估：

1. 邏輯：該動(dòng)效實(shí)現(xiàn)了三個(gè)動(dòng)效目的。
2. 時(shí)間：相對(duì)于最終的三角函數(shù)，時(shí)間上可以具體調(diào)試時(shí)改動(dòng)。
3. 真實(shí)：Easing Function 有待提高，現(xiàn)在只是線性，最好能模擬出中心具有引力的感覺(jué)，越距離中心越快，越遠(yuǎn)越慢。

8

場(chǎng)景：Scrolling

目的：State, Attention, Feedback, Individualization

制作：
筆者做的滾動(dòng)出發(fā)卡片式折疊，模仿的“得到”APP。藍(lán)色卡片分成上下兩部分，然后拼合在一起。利用 CSS 的 RotationX 屬性分別控制其旋轉(zhuǎn)的角度。然后監(jiān)聽(tīng) Scrolling 事件，根據(jù)上滑，下滑的距離，動(dòng)態(tài)控制 RotationX 實(shí)現(xiàn)其效果。

細(xì)節(jié)優(yōu)化：

1. 假定光都從上方照下，當(dāng)卡片折疊時(shí)，會(huì)產(chǎn)生陰影，且上方陰影會(huì)比下方更重。所以筆者給上層和下層卡片分別加了一層動(dòng)態(tài)變化的陰影。
2. 由于現(xiàn)實(shí)世界的透視，近大遠(yuǎn)小，筆者利用 CSS 的 Perspective 屬性使卡片具有該效果。
3. 該動(dòng)效屬于實(shí)時(shí)響應(yīng)，動(dòng)效要對(duì)應(yīng)操作，使其更具控制感，筆者沒(méi)有考慮緩入和緩出動(dòng)畫(huà)效果（減少用戶認(rèn)知的干擾），使用的 Framer 內(nèi)置的 Utils.modulate() 映射函數(shù)直接在 Scrolling 距離和卡片的 RotationX 上做的映射。

評(píng)估：

1. 邏輯：實(shí)時(shí)響應(yīng)，陰影，符合客觀概率。該動(dòng)效實(shí)現(xiàn)了 4 個(gè)動(dòng)效目的。對(duì) Perspective 屬性還有待進(jìn)一步研究，讓透視看起來(lái)更逼真（透視大小，物體大小，人眼距離相匹配）。
2. 時(shí)間：角度和距離直接映射，操作時(shí)視覺(jué)上感受良好。
3. 真實(shí)：對(duì)真實(shí)世界運(yùn)用規(guī)律的反映有待進(jìn)一步加強(qiáng)（慣性）。卡片折痕處的效果還可以進(jìn)一步優(yōu)化，數(shù)學(xué)上研究一下三角函數(shù)，盡量準(zhǔn)確計(jì)算出旋轉(zhuǎn)角度和位移的關(guān)系。

9

場(chǎng)景：Hover

目的：State, Attention, Feedback, Individualization

制作：
筆者做的 LongPress 效果，因?yàn)槭謾C(jī)場(chǎng)景并沒(méi)有瀏覽器中的 Hover，所以筆者用了長(zhǎng)按場(chǎng)景。主要還是 位置，透明度，大小 等屬性的結(jié)合生成的效果。

細(xì)節(jié)優(yōu)化：

1. 愛(ài)心在縮小前，運(yùn)用 Anticipation 原理先放大一點(diǎn)，讓動(dòng)畫(huà)更流暢
2. 點(diǎn)贊 Icon 和 數(shù)字的動(dòng)態(tài)變化，讓動(dòng)效更具個(gè)性化
3. 實(shí)時(shí)相應(yīng)的部分使用 linear 函數(shù)，進(jìn)入先快后慢，退出先慢后快

評(píng)估：

1. 邏輯：反饋符合認(rèn)知，用戶能理解長(zhǎng)按所具有的意義。實(shí)現(xiàn)了 4 個(gè)目的
2. 時(shí)間：采用 Material Design 標(biāo)準(zhǔn)，保證其足夠短。
3. 真實(shí)：愛(ài)心的填充效果還可以?xún)?yōu)化成從底部上漲到頂部，更符合認(rèn)知。這里受限于我沒(méi)有找到 Framer 使用 Mask 的方法，沒(méi)辦法讓愛(ài)心形狀成為填充層的蒙板，所以改成了從中心擴(kuò)線，以后學(xué)會(huì)了再改正。

10

場(chǎng)景：Image

目的：Attention, Individualization

制作：
筆者做的 Image 動(dòng)畫(huà)。兩個(gè)圖片層，循環(huán)滾動(dòng)。把云朵層單獨(dú)提取出來(lái)，通過(guò)位置上的控制，使其在指定時(shí)間產(chǎn)生移動(dòng)的效果。

細(xì)節(jié)優(yōu)化：

1. 如果使用圖片動(dòng)畫(huà)，插畫(huà)的質(zhì)量要保證足夠好。顏色，漸變的使用符合常識(shí)。注意高光，陰影，漸變方向等細(xì)節(jié)。
2. 添加了云層的移動(dòng)，使2個(gè)動(dòng)畫(huà)圖片之間產(chǎn)生了聯(lián)系，有一種時(shí)間上的過(guò)度感，從白晝到黑夜。

評(píng)估：

1. 邏輯：符合生活常識(shí)。實(shí)現(xiàn)了 2 個(gè)目的，個(gè)人還是不建議在手機(jī)使用圖片效果，交互目的偏少，且需要消耗大量帶寬。
2. 時(shí)間：時(shí)間略長(zhǎng)，可以設(shè)計(jì)一些時(shí)間短且有趣的圖片動(dòng)畫(huà)。
3. 真實(shí)：由于 Framer 不太適合制作純視覺(jué)上的動(dòng)效，多圖層同時(shí)動(dòng)畫(huà)很容易導(dǎo)致瀏覽器渲染產(chǎn)生問(wèn)題，動(dòng)畫(huà)看起來(lái)很抖動(dòng)。這里的云層（只是個(gè)圖片圖層）只做了一個(gè)移動(dòng)，更真實(shí)的可以做一個(gè)抖動(dòng)效果。不過(guò)那樣我覺(jué)的更適合使用 AE 制作成 Gif 再導(dǎo)出。但 Gif 會(huì)存在質(zhì)量偏低的問(wèn)題。使用 Svg 和 Canvas 技術(shù)來(lái)制作復(fù)雜的 Web 動(dòng)效是更明智的選擇。

感想

1. ?做動(dòng)效之前，先把靜態(tài)稿做出來(lái)，便于條理的梳理，樣式的統(tǒng)一。磨刀不誤砍柴工嘛。并且像 Framer 這種支持直接導(dǎo)入 Sketch 文件的軟件，僅作為展示時(shí)（不考慮文件大小），盡可以直接使用圖片作為圖層，省去了自己寫(xiě)css的時(shí)間。

2. 由于 Photoshop 轉(zhuǎn) Gif 的能力有限，做動(dòng)效時(shí)（如果要導(dǎo)出 Gif), 不要使用特別復(fù)雜的漸變，同時(shí)保證圖片大小不要長(zhǎng)寬別超過(guò) 800px。轉(zhuǎn) Gif 時(shí)，Gif 的抖動(dòng)值選擇在圖片大小和圖片清晰度之間做一個(gè)平衡即可。筆者一般直接開(kāi) 4 聯(lián)看效果，然后選擇一個(gè)合適的，前提是你的電腦內(nèi)存足夠大，不然會(huì)很卡。

3. 再耐心多一點(diǎn)，再多思考一點(diǎn)。筆者交互設(shè)計(jì)才入門(mén)，還有很多不足。動(dòng)畫(huà)部分會(huì)持續(xù)完善更新，也歡迎各位童鞋與我多多交流，共同進(jìn)步。

加作者個(gè)人微信號(hào)一起進(jìn)步：470341376

「動(dòng)效設(shè)計(jì)三步走」

1. 先學(xué)會(huì)分析：《動(dòng)效丨七何分析法幫你全面分析界面動(dòng)效》
2. 動(dòng)效設(shè)計(jì)方法：《改善你的UX設(shè)計(jì)！值得參考的四個(gè)動(dòng)效使用方法》
3. 提升用戶體驗(yàn)：《5個(gè)小技巧，用動(dòng)效提升界面的用戶體驗(yàn)就這么簡(jiǎn)單》

原文地址：jianshu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com