編輯導(dǎo)讀：在使用某些產(chǎn)品的時候，感覺用戶體驗(yàn)不是很絲滑，原因就是缺乏頁面或窗口的過渡動效考慮。交互動效，一直是備受“冷落”的部分，卻影響著用戶的使用感受。本文作者圍繞交互動效進(jìn)行六個維度的分析，希望對你有幫助。

不知道大家有沒有發(fā)現(xiàn)一個現(xiàn)象，很多公司或團(tuán)隊(duì)并沒有獨(dú)立的交互設(shè)計崗位，而交互設(shè)計的工作往往由產(chǎn)品經(jīng)理或UI設(shè)計師來完成。

產(chǎn)品經(jīng)理更加注重業(yè)務(wù)流程和任務(wù)流程的完整性，UI設(shè)計師更加注重表現(xiàn)層的感受，那么交互設(shè)計師都容易忽視的“交互動效”就更容易被忽略了。因此我們總是覺得自己的產(chǎn)品總是比不上大廠的順滑，但又總說不出哪里不對，那么我可以明確的告訴你就是缺乏頁面或窗口的過渡動效考慮。

下面上干貨，先來一張腦圖：

一、動效的分類

從不同的維度進(jìn)行分析，動效設(shè)計類型有不同的分類結(jié)果。

維度1：動效的使用目的

因?yàn)閯有Т嬖谪?fù)面作用，合理的使用它變尤為重要。Cooper (2014) 提出動效需要謹(jǐn)慎的使用。過度的使用動效不僅讓人困惑和反感，而且讓人生理上不舒服。比如蘋果的 IOS7，它過分強(qiáng)烈的視差效果讓很多用戶感到不舒服。交互動效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化。

Saffer(2013) 提出使用動效存在下列目的：

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

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

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

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

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

在這個維度上，我將動效的類型分為“解釋類”、“裝飾類”以及“解釋+裝飾綜合類”。

維度2：動效的出現(xiàn)時機(jī)

根據(jù)動效出現(xiàn)的時機(jī)與作用，將動效大致分為四類，分別是品牌類動效、引導(dǎo)類動效、轉(zhuǎn)場類動效、反饋類動效。

1）牌類動效

通常，品牌類動效出現(xiàn)在開機(jī)頁面。

• • 從狹義上來說，品牌類動效指的是產(chǎn)品的logo動畫，將產(chǎn)品或公司的品牌形象特色進(jìn)行準(zhǔn)確傳達(dá)，如谷歌logo動畫；
  • 從廣義上來說，品牌類動效是產(chǎn)品中統(tǒng)一、獨(dú)特能夠與其他產(chǎn)品產(chǎn)生差異化的動效設(shè)計，甚至能夠上升至產(chǎn)品的“隱形logo”的地位，如蘋果的解鎖動效、MD中的FAT按鈕動效等。

有些產(chǎn)品的品牌類動效的風(fēng)格會遺傳給產(chǎn)品的其他動效設(shè)計，使產(chǎn)品的設(shè)計風(fēng)格與動效特點(diǎn)上保持一致。

2）引導(dǎo)類動效

引導(dǎo)類動效一般出現(xiàn)在引導(dǎo)頁面或入場動效之后，引起用戶注意或引導(dǎo)用戶進(jìn)行操作，從而減少用戶困惑，如APP的引導(dǎo)頁等。引導(dǎo)類動效還包括頁面元素動畫、圖標(biāo)動效，已引起用戶的注意，進(jìn)行操作。

3）轉(zhuǎn)場類動效

轉(zhuǎn)場類動效又可細(xì)分為：離場類動效與入場類動效，二者是相向而生，主要功能是頁面層級展示以及流暢過渡。

離場動效是頁面中元素的離開，入場動效是頁面元素的進(jìn)入，二者占據(jù)著動效設(shè)計的絕大部分，對整個產(chǎn)品形象的塑造起著重要作用，同時在效果上要更加注意克制的設(shè)計要求。

4）反饋類動效

反饋類動效是指用戶在操作后頁面給出的操作反饋提示動效，是銜接用戶操作與頁面跳轉(zhuǎn)的過渡效果。反饋動效可細(xì)分為：實(shí)時反饋動效與整體反饋動效。

在反饋類動效中，設(shè)計師最熟悉的動效是加載動效，其是對用戶點(diǎn)擊一下載的反饋，同時銜接了離場動效與入場動效，使用戶的才做反饋更加順暢，避免中間出現(xiàn)斷層。

維度3：動效的變化屬性

在瀏覽器中最常用、最容易實(shí)現(xiàn)且能保障性能的是?位置（position）、大?。╯cale）、旋轉(zhuǎn)（rotation）、透明度（opacity）?這四種屬性的變化，當(dāng)變化這四種屬性的任意一種或幾種就能達(dá)到交互微動效的目的時，無須再加入其它不必要的屬性，以免影響動效流暢度。

屬性的變化一般又分為?線性（liner）變化?和?曲線（curves）變化兩種。

1）線性變化

線性變化具有?勻速、驟停 這兩個特征，一般適用于與物理屬性無關(guān)的過渡動效（如透明度屬性的變化，包含漸隱漸現(xiàn)或顏色間的切換），或有規(guī)律的加載動效（如均勻的循環(huán)、數(shù)值變化或進(jìn)度變化）。在與物理參數(shù)有關(guān)的變化中（如位置變化），盡量避免使用線性變化，否則很容易給人帶來動效僵硬、不自然的感覺。

2）曲線變化

曲線包含多種類型，在交互微動效設(shè)計中，緩動曲線（easing）的應(yīng)用范圍最廣、效果最自然、對用戶的干擾也較小，多用于與物理屬性相關(guān)的屬性變化中，常用場景如下：

二、動效的設(shè)計原則

Google Material Design(2020) 提出的系統(tǒng)動效原則：

提供有效信息（Informative）：

動效設(shè)計通過強(qiáng)調(diào)元素，操作可用性和操作結(jié)果之間的關(guān)系來通知用戶。

聚焦（Focused）：

動效應(yīng)該集中在重要內(nèi)容上，而不會造成不必要的干擾。

富有表現(xiàn)力（Expressive）：

動效應(yīng)該在用戶的各個使用場景中，為常見的互動添加個性，并能表達(dá)品牌的風(fēng)格。

Apple IOS （2021）提出的系統(tǒng)動效原則：

1）明智地使用動效

不要為了使用動畫而使用動畫。過多或不必要的動畫會使人感到與世隔絕或分心，尤其是在無法提供身臨其境的體驗(yàn)的應(yīng)用程序中。iOS使用運(yùn)動效果（例如視差效果）在主屏幕和其他區(qū)域創(chuàng)建深度感。這些效果可以增加理解和樂趣，但是過度使用它們會使應(yīng)用感到迷惑并且難以控制。如果要實(shí)現(xiàn)運(yùn)動效果，請始終測試結(jié)果以確保效果良好。

2）遵循現(xiàn)實(shí)世界的規(guī)律

人們傾向于接受藝術(shù)感，但是當(dāng)運(yùn)動沒有意義或似乎無視物理規(guī)律時，他們會感到迷失方向。例如，如果有人通過從屏幕頂部向下滑動來顯示視圖，那么他們應(yīng)該能夠通過向上滑動來消除視圖。

3）使用一致的動畫

熟悉、流暢的體驗(yàn)才能使用戶更好的參與其中。他們習(xí)慣于在整個iOS中使用的微妙動畫，例如平滑過渡，設(shè)備方向的流暢變化以及基于物理的滾動。除非您要創(chuàng)建沉浸式體驗(yàn)（例如游戲），否則自定義動畫應(yīng)與內(nèi)置動畫相當(dāng)。

4）將動畫設(shè)為可選

在輔助功能偏好設(shè)置中啟用減少動作選項(xiàng)后，您的應(yīng)用程序應(yīng)最小化或消除應(yīng)用程序動畫。

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

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

騰訊ISUX在交互微動效設(shè)計指南（2017）中提出的功能性動效原則：

1）克制有度

控制時長和出現(xiàn)頻率。不增加額外操作，不干擾用戶。

2）清晰聚焦

重點(diǎn)突出，符合邏輯，給予用戶充足的閱讀時間。

3）自然流暢

保持視覺連續(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. 有趣

在優(yōu)設(shè)網(wǎng)上發(fā)現(xiàn)一個作者，選出了可以運(yùn)用到交互動畫制作的 9 條原則，在這里也分享給大家：

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

三、動效的時長

時間是動效核心元素，設(shè)計動效時需要考慮兩類時間 —— 響應(yīng)時間與持續(xù)時長。

1. 響應(yīng)時間

響應(yīng)時間指從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時間。觸發(fā)機(jī)制不同，響應(yīng)時間的限制也不同：

• • 對于由用戶操作?直接觸發(fā)?的反饋，理想的響應(yīng)時間應(yīng)該控制在?100毫秒內(nèi)
  • 對于由用戶操作?間接觸發(fā)?的反饋，響應(yīng)時長可允許達(dá)到 1秒左右，不可 超過2秒 無反饋
  • 當(dāng) 超過2秒 才能獲取反饋結(jié)果時，須設(shè)計加載動效（loading）：
  • 當(dāng)反饋時間為?2-9秒?時，可使用循環(huán)的加載樣式（如常見的菊花轉(zhuǎn)）
  • 當(dāng)反饋時間?超過10秒?時，須使用帶有進(jìn)度指示的加載樣式（如已加載了60%，還剩30秒）

2. 持續(xù)時間

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

若你希望用戶能清晰地捕捉到元素的漸進(jìn)變化，持續(xù)時須大于200毫秒；若你不介意用戶認(rèn)為元素的改變是瞬間的，希望盡量節(jié)省用戶時間，持續(xù)時間也可設(shè)計在 200毫秒以內(nèi)（如hover到按鈕上顏色瞬間發(fā)生微妙改變） 。

具體的持續(xù)時間的取值，一方面會受到元素的大小、動效的復(fù)雜程度影響；另一方面也會受到動效的目標(biāo) 和 運(yùn)行動效的設(shè)備的影響：

小元素的輕微變化效果（如漸隱漸現(xiàn)、大小變化等小范圍變化），一般在?200~300毫秒以內(nèi)。

較大元素的復(fù)雜變化效果（如包含大范圍緩動位移），可長達(dá)?400-500毫秒。

• 較快的動效更容易吸引用戶注意力，也更節(jié)省時間。若動效元素在用戶的視線之外，為了吸引用戶注意并采取行動，可使用在短時間內(nèi)變化較大的動效（如發(fā)生位置移動和速率改變）；若動效元素已經(jīng)在用戶的注意范圍內(nèi)，為了保持視覺連續(xù)性，完成必要的過渡（如漸隱漸現(xiàn)）后即可結(jié)束。
• 較慢的動效較少分散用戶注意力，更適用于非用戶直接觸發(fā)的場景。若動效不是用戶直接觸發(fā)的，不希望用戶注意力被轉(zhuǎn)移，可使用在長時間內(nèi)變化較小的動效（一般不會出現(xiàn)位置移動）
• 不同設(shè)備的屏幕尺寸和特性不同，理想的持續(xù)時間也不一樣。一般來說，對于移動設(shè)備而言，屏幕越大往往動效的位移也越大，因此持續(xù)時間也應(yīng)該越長（可穿戴設(shè)備上的持續(xù)時間大約比手機(jī)上快30%，平板電腦上的持續(xù)時間大約比手機(jī)上慢30%）。而臺式設(shè)備的動效設(shè)計往往比移動設(shè)備中的動效設(shè)計更簡單快速（150毫秒~200毫秒間較為常見），這是因?yàn)閺?fù)雜的動效在臺式設(shè)備場景下容易出現(xiàn)掉幀、卡頓的情況，瞬時響應(yīng)的動效能避免這一點(diǎn)。

（持續(xù)時間可穿戴設(shè)備＜手機(jī)＜平板電腦，源自 Google Material Design）

出場動效一般比入場動效更快?( 如當(dāng)入場動效設(shè)置為230毫秒時，出場動效可設(shè)置為200毫秒) 這是因?yàn)樵厝雸鰰r用戶一般需要閱讀并處理新出現(xiàn)的信息，而元素出場時通常表明用戶在此元素上的任務(wù)已完成，不需要再關(guān)注了，快速出場能夠節(jié)省用戶更多時間。

3. 補(bǔ)充

轉(zhuǎn)場類動效又可細(xì)分為：離場類動效與入場類動效，二者是相向而生，主要功能是頁面層級展示以及流暢過渡。

離場動效是頁面中元素的離開，入場動效是頁面元素的進(jìn)入，二者占據(jù)著動效設(shè)計的絕大部分，對整個產(chǎn)品形象的塑造起著重要作用，同時在效果上要更加注意克制的設(shè)計要求。

（不同復(fù)雜度的動效用戶驚喜度與使用時長的關(guān)系）

復(fù)雜度高的動效會急劇拉升用戶的驚喜度，但是，隨著時間的推移，驚喜度會逐步降低。在用戶使用的中后期，復(fù)雜的動效往往會引起用戶的反感，影響用戶操作。復(fù)雜度低的動效設(shè)計在用戶驚喜度方面是潛移默化的影響，當(dāng)用戶逐漸熟悉與適應(yīng)產(chǎn)品的動效節(jié)奏，其驚喜度會逐漸上升，最終保持在較高的水平。

四、動效的基本單元拆解

1. 變化的基礎(chǔ)類型

1）Movement 移動

2）Scaling 縮放

3）Rotation 旋轉(zhuǎn)

4）Alpha 透明度

5）Shape 形狀

6）Color 顏色

2. 可調(diào)整的參數(shù)

• Duration 持續(xù)時間
• Speed 變化的速度

3. 常用的變化速度模式（時間-變化量）

1）linear 勻速變化

2）Smoothstep 緩動 慢-快-慢

在物理世界中，對象不會立即啟動或停止。取而代之的是，它們需要時間來加速和減速。沒有緩和的過渡看起來僵硬而機(jī)械，而具有緩和的過渡更讓人聯(lián)想到自然界的運(yùn)動。

3）Spring 彈簧(超出范圍) 正變化-負(fù)變化-正變化…

4）Bounce 彈跳(范圍內(nèi)) 正變化-負(fù)變化-正變化…

5）Anticipate 預(yù)備動作 負(fù)變化-正變化

五、Material Design的常用動效模式

1. container transform 容器轉(zhuǎn)換

所述容器變換圖案被設(shè)計為包括一個容器UI元素之間的過渡。此模式在兩個UI元素之間創(chuàng)建可見連接。通過將一個元素?zé)o縫轉(zhuǎn)換為另一個元素，可以增強(qiáng)兩個元素之間的關(guān)系。例如，當(dāng)卡片轉(zhuǎn)換為詳細(xì)信息頁面時，將用戶的焦點(diǎn)定向到識別該詳細(xì)信息頁面是卡片的擴(kuò)展版本。

1. 將卡片放入詳細(xì)信息頁面
2. 將列表項(xiàng)放入詳細(xì)信息頁面
3. 將FAB放入詳細(xì)信息頁面
4. 將搜索欄擴(kuò)展為搜索

容器轉(zhuǎn)換模式也可以應(yīng)用于僅占據(jù)屏幕一部分且不會擴(kuò)展為全屏視圖的轉(zhuǎn)換：

1. 將FAB轉(zhuǎn)換為菜單
2. 將FAB轉(zhuǎn)換為媒體播放器
3. 將FAB轉(zhuǎn)換為表單
4. 將籌碼轉(zhuǎn)換為擴(kuò)展籌碼

2. Shared axis 共享軸

所述共享軸線模式用于具有空間或?qū)Ш疥P(guān)系UI元素之間的過渡。此模式使用共同的轉(zhuǎn)變?在x，y或z軸上增強(qiáng)元素之間的關(guān)系。

1. 注冊流程沿x軸過渡
2. 步驟沿y軸過渡
3. 父子級導(dǎo)航沿z軸過渡

3. Fade through 淡入淡出（A頁面/狀態(tài)→B頁面/狀態(tài)）

在通過褪色模式被用于不具有彼此牢固的關(guān)系UI元素之間的過渡。

例如，通過點(diǎn)擊底部導(dǎo)航欄觸發(fā)的過渡使用淡入模式。淡入淡出是最佳選擇，因?yàn)榈撞繉?dǎo)航中的目的地通常被分組為可能彼此不相關(guān)的主要任務(wù)。此外，淡入模式不會誤導(dǎo)用戶以為他們可以在目的地之間水平滑動。

1. 點(diǎn)擊底部導(dǎo)航欄中的目的地
2. 點(diǎn)擊刷新圖標(biāo)
3. 點(diǎn)擊帳戶切換器

在淡入過渡中，退出的元素首先淡出。接下來，進(jìn)入的元素逐漸淡入，同時將整體大小從92％縮放到100％。元素縮放比例從92％（而不是0％）開始，以避免引起對過渡的過多關(guān)注。比例變化僅應(yīng)用于進(jìn)入的元素，以便在舊內(nèi)容上強(qiáng)調(diào)新內(nèi)容。

4. Fade 褪色（彈出層的打開和關(guān)閉）

該模式用于在屏幕上，的界限內(nèi)的輸入的UI元素或退出諸如一個對話框，在衰落和從屏幕的中心向外的視圖。

1. 對話框
2. 菜單
3. snack bar
4. FAB

輸入時，元素將使用淡入淡出并按比例從80％縮放到100％。比例動畫從80％（而不是0％）開始，以避免引起對過渡的過多關(guān)注。退出時，元素只會淡出。比例動畫僅應(yīng)用于輸入的元素。這將重點(diǎn)放在新內(nèi)容（輸入元素）上而不是舊內(nèi)容（退出元素）上。

六、具體案例分析

總結(jié)了簡短的3個原則進(jìn)行動效的案例分析：

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

按照場景，目的，制作，評估的四步驟，具體解釋如何綜合運(yùn)用運(yùn)用設(shè)計理論和原則。

案例1：

場景：Banner

目的：State, Attention,Relief

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

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

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

評估：

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

案例2：

場景：Form

目的：State, Attention, Feedback, Individualization

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

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

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

評估：

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

案例3：

場景：Image

目的：Attention, Individualization

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

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

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

評估：

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

最后給大家推薦一款速成的軟件Principle，和sketch的操作很像，幾乎沒有學(xué)習(xí)成本，操作界面如下：

我花了幾分鐘做了一個容器變化的動效：

朋友們，你學(xué)廢了嗎～～～

參考資料：

MD交互規(guī)范：https://www.material.io/design/motion/the-motion-system.html#transition-patterns

騰訊交互微動效設(shè)計指南：https://isux.tencent.com/articles/106.html

本文由 @Rinoa?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議