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

注：由于動圖過大，壓縮有損細節(jié)，不過對了解動效的原理沒有影響，見諒。

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

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

現(xiàn)狀

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

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

動效使用歷史

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

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

動效的使用目的

因為動效存在負面作用，合理的使用它變尤為重要。Cooper (2014) 提出動效需要謹慎的使用。過度的使用動效不僅讓人困惑和反感，而且讓人生理上不舒服。比如蘋果的 IOS7，它過分強烈的視差效果讓很多用戶感到不舒服。

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

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

Yalanska(2016) 也定義了 UI 動效的四項作用：

• 支持微交互
• 顯示運動過程
• 解釋
• 裝飾

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

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

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

1.State

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

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

2. Attention

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

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

3. Feedback

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

當用戶執(zhí)行了某一操作后，動效是一個非常好用的反饋機制。通過動效的適當運用，用戶可以清晰感知到自己操作的反饋，讓用戶知道自己做了什么。

4. Relief

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

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

5. Individuation

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

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

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

△ State + Attention + Feedback

△ State + Attention + Feedback + Individuation

喬幫主說過：“設(shè)計并不僅僅是它看到或感受到的樣子。設(shè)計應(yīng)該表現(xiàn)它怎么工作的?！肮P者認為動效也是一樣的道理，動效應(yīng)該它怎么工作的。設(shè)計動效時問自己1個問題，這個動效的目的是什么？

動效使用場景

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

1. 滾動 Banner

2. 表單

3. 視覺中心

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

5. 轉(zhuǎn)場動效

6.背景動效

7. 加載動效

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

9. 鼠標 Hover 動效

10. 圖片動效

使用動效的注意事項

當我們制作交互動效的時候，有哪些事情是我們可以提前注意，或者有哪些標準可以用來評判是不是一個好動效。Saffer(2013) 說到如果你做一件事可以不用動效，那盡量避免。從微信和 Facebook 這種全民 APP 在動效使用上自制不難看出。

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

2016年，Hazwani 和 Bernard(2016) 列出了4個讓動效具有意思的注意事項：

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

在 2015 澳大利亞的 CSS 峰會上， Cock(2015) 談到需要在實際開發(fā)中注意的四個基本 UI 動效原則：

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

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

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

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

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

如何制作流暢的動效

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

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

這些原則雖然是針對動畫片的，但是筆者在研究了它們后，按照自己的理解，選出了可以運用到交互動畫制作的 9 條原則：

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

設(shè)計師可以靈活選擇其中的幾個原則進行自己的動效設(shè)計。筆者接下來會將會運用動效制作技術(shù)「主要是 CSS/JS, After Effects, 和 FramerJS」，按照場景，目的，制作，評估的四步驟，具體解釋如何綜合運用運用以上理論。

1

場景：Banner

目的：State, Attention, Individualization, Relief

制作：

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

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

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

評估：

1. 邏輯：符合一致性。該動效實現(xiàn)了四個動效目的。響應(yīng)時間還可以進一步優(yōu)化。
2. 時間：采用 Material Design 標準，可根據(jù)實際情況進一步優(yōu)化
3. 真實：Easing Function 符合實際情況?？鋸埐糠謩赢嫗榱送怀鰟有Ч?。氣泡破裂的感覺還可以進一步優(yōu)化。

2

場景：Form

目的：State, Attention, Feedback, Individualization

制作：

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

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

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

評估：

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

3

場景：Stage

目的： Attention, Feedback, Relief, Individualization

制作：

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

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

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

評估：

1. 邏輯：該動效實現(xiàn)了四個動效目的。
2. 時間：采用 Material Design 標準，可嘗試多一些選擇，看看有沒有更有趣的
3. 真實：Easing Function 符合實際情況。可以多試一些 Custom 的 easing-functions

4

場景：Menu

目的： State, Attention, Feedback, Individualization

制作：

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

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

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

評估：

1. 邏輯：該動效實現(xiàn)了四個動效目的。
2. 時間：采用 Material Design 標準，保證其足夠短。
3. 真實：Easing Function 符合實際情況。長方形的分離，采用了 Material Design 標準。

5

場景: Transition

目的： State, Attention, Feedback, Individualization

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

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

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

評估：

1. 邏輯：該動效實現(xiàn)了四個動效目的。
2. 時間：采用 Material Design 標準，保證其足夠短。
3. 真實：Easing Function 符合實際情況?？梢远嘣囋囈恍﹦e的趣味性效果，比如熱氣球的上浮感。

6

場景: Background

目的：Attention, Individualization

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

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

1. 近大遠小，近實遠虛，近快遠慢。
2. Easing function上，模擬上浮的效果，先慢后快。

評估：

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

7

場景: Loading

目的： Attention, Relief, Individualization

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

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

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

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

1. 增加了一個方向相反的圓，兩個圓的移動更有 Loading 的感覺
2. 當 2 個圓相遇時，動態(tài)改變其顏色，使動畫更加有趣
3. Easing function 這里用的是 Utils.interval 按照固定時間間隔進行變化的，因為軟件不支持原生曲線運動，屬于線性變化。

評估：

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

8

場景：Scrolling

目的：State, Attention, Feedback, Individualization

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

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

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

評估：

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

9

場景：Hover

目的：State, Attention, Feedback, Individualization

制作：
筆者做的 LongPress 效果，因為手機場景并沒有瀏覽器中的 Hover，所以筆者用了長按場景。主要還是 位置，透明度，大小 等屬性的結(jié)合生成的效果。

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

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

評估：

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

10

場景：Image

目的：Attention, Individualization

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

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

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

評估：

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

感想

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

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

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

加作者個人微信號一起進步：470341376

「動效設(shè)計三步走」

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

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