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

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

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

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

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

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

維度1：動(dòng)效的使用目的

因?yàn)閯?dòng)效存在負(fù)面作用，合理的使用它變尤為重要。Cooper (2014) 提出動(dòng)效需要謹(jǐn)慎的使用。過度的使用動(dòng)效不僅讓人困惑和反感，而且讓人生理上不舒服。比如蘋果的 IOS7，它過分強(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)過程
• 解釋
• 裝飾

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

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

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

維度2：動(dòng)效的出現(xiàn)時(shí)機(jī)

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

1）牌類動(dòng)效

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

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

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

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

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

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

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

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

4）反饋類動(dòng)效

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

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

維度3：動(dòng)效的變化屬性

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

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

1）線性變化

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

2）曲線變化

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

二、動(dòng)效的設(shè)計(jì)原則

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

提供有效信息（Informative）：

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

聚焦（Focused）：

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

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

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

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

1）明智地使用動(dòng)效

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

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

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

3）使用一致的動(dòng)畫

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

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

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

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

1. 響應(yīng)：動(dòng)效要快速響應(yīng)用戶的操作，移動(dòng)設(shè)備上，長動(dòng)畫大約在 300-400ms 之間，短動(dòng)畫大約在 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ì)周圍的物體會(huì)產(chǎn)生影響，因此要考慮其周圍的環(huán)境
4. 目的：動(dòng)效要具有目的性，傳達(dá)給用戶特性的信息

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

1）克制有度

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

2）清晰聚焦

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

3）自然流暢

保持視覺連續(xù)性，緩動(dòng)過渡。做到不卡、不閃、不跳。

迪士尼動(dòng)畫師 Johnson 和 Thomas 的動(dòng)畫圣經(jīng)—《The Illusion of Life: Disney Animation》其中的12條動(dòng)畫設(shè)計(jì)原則：

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

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

1. 時(shí)間和節(jié)奏：動(dòng)畫的總時(shí)長和每幀動(dòng)畫間的距離（先快后慢，或先慢后快）
2. 緩入和緩出：符合現(xiàn)實(shí)世界規(guī)律，物體不能憑空運(yùn)動(dòng)和停止，有加速和減速過程
3. 預(yù)期感：給動(dòng)畫添加一個(gè)反向動(dòng)畫，讓動(dòng)畫更突出，更好的幫助用戶理解動(dòng)畫
4. 壓縮和拉伸：制造視覺上的假想，突出效果
5. ?。悍犀F(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)畫更具個(gè)性
9. 有趣：結(jié)合以上8點(diǎn)，傳遞給用戶一個(gè)有趣的印象

三、動(dòng)效的時(shí)長

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

1. 響應(yīng)時(shí)間

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

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

2. 持續(xù)時(shí)間

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

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

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

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

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

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

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

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

3. 補(bǔ)充

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

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

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

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

四、動(dòng)效的基本單元拆解

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

1）Movement 移動(dòng)

2）Scaling 縮放

3）Rotation 旋轉(zhuǎn)

4）Alpha 透明度

5）Shape 形狀

6）Color 顏色

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

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

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

1）linear 勻速變化

2）Smoothstep 緩動(dòng) 慢-快-慢

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

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

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

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

五、Material Design的常用動(dòng)效模式

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

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

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

容器轉(zhuǎn)換模式也可以應(yīng)用于僅占據(jù)屏幕一部分且不會(huì)擴(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. 父子級(jí)導(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ù)。此外，淡入模式不會(huì)誤導(dǎo)用戶以為他們可以在目的地之間水平滑動(dòng)。

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

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

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

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

1. 對(duì)話框
2. 菜單
3. snack bar
4. FAB

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

六、具體案例分析

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

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

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

案例1：

場景：Banner

目的：State, Attention,Relief

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

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

1. 添加一個(gè)加載按鈕的效果，讓用戶感受到還有多久切換到下一個(gè) Banner。技術(shù)上使用的是 CSS 的 background-image: linear-gradient 屬性。通過控制其投射角度，動(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)畫使用的是 ease-out, 又慢到快的劃出屏幕，符合實(shí)際。圓的旋轉(zhuǎn)是 linear, 時(shí)間是均勻流動(dòng)的。
4. 動(dòng)畫上的細(xì)節(jié)加在了氣泡上，氣泡是先縮小再放大，縮小是為了給接下來的放大提供一個(gè)預(yù)判，應(yīng)用了 Anticipation 原理。其次是刻意夸張了縮小的效果，scale 0.5->0.1, opacity 0.1->1, 應(yīng)用了 Exaggeration 原理?？s小時(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)畫為了突出動(dòng)效效果。氣泡破裂的感覺還可以進(jìn)一步優(yōu)化。

案例2：

場景：Form

目的：State, Attention, Feedback, Individualization

制作：筆者做的 Form 表單效果, 模仿的 Google 登陸。使用的 PageComponent 控制頁面切換。由于 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)聽用戶單機(jī)事件，當(dāng)鼠標(biāo)按下時(shí)，按鈕添加選中效果。鼠標(biāo)放開時(shí)，效果消失，返回原狀態(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)擊事件。

評(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：

場景：Image

目的：Attention, Individualization

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

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

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

評(píng)估：

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

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

我花了幾分鐘做了一個(gè)容器變化的動(dòng)效：

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

參考資料：

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

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

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

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