一、適用范圍
功能性動效：有清晰的邏輯目的，聚焦于幫助用戶理解當(dāng)前所處的狀態(tài)。區(qū)別于提供娛樂體驗的動效（如動畫影片、游戲動效等）
主要涵蓋入場動效（enter）、出場動效（exit）、過渡動效（transition）、加載動效（loading）。
二、設(shè)計原則和設(shè)計考量
一個優(yōu)秀的交互微動效，在設(shè)計上應(yīng)遵循以下三個核心原則：
為了確保動效有清晰的用途并能完成目標(biāo)，設(shè)計時請思考一下幾方面的問題。
三、響應(yīng)時間與持續(xù)時間
時間是動效核心元素，設(shè)計動效時需要考慮兩類時間 —— 響應(yīng)時間與持續(xù)時長
3.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秒）
3.2 持續(xù)時間
交互微動效的持續(xù)時間不宜過長，以避免浪費用戶時間，影響用戶的閱讀和操作效率，其持續(xù)時間一般不超過500毫秒( 加載動效除外 )。
若你希望用戶能清晰地捕捉到元素的漸進(jìn)變化，持續(xù)時須大于200毫秒；若你不介意用戶認(rèn)為元素的改變是瞬間的，希望盡量節(jié)省用戶時間，持續(xù)時間也可設(shè)計在 200毫秒以內(nèi)（如hover到按鈕上顏色瞬間發(fā)生微妙改變） 。
具體的持續(xù)時間的取值，一方面會受到元素的大小、動效的復(fù)雜程度影響；另一方面也會受到動效的目標(biāo)?和 運行動效的設(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毫秒間較為常見），這是因為復(fù)雜的動效在臺式設(shè)備場景下容易出現(xiàn)掉幀、卡頓的情況，瞬時響應(yīng)的動效能避免這一點。
* 出場動效一般比入場動效更快( 如當(dāng)入場動效設(shè)置為230毫秒時，出場動效可設(shè)置為200毫秒) 這是因為元素入場時用戶一般需要閱讀并處理新出現(xiàn)的信息，而元素出場時通常表明用戶在此元素上的任務(wù)已完成，不需要再關(guān)注了，快速出場能夠節(jié)省用戶更多時間。
四、常用動效類型及應(yīng)用參考
在瀏覽器中最常用、最容易實現(xiàn)且能保障性能的是位置（position）、大?。╯cale）、旋轉(zhuǎn)（rotation）、透明度（opacity）這四種屬性的變化，當(dāng)變化這四種屬性的任意一種或幾種就能達(dá)到交互微動效的目的時，無須再加入其它不必要的屬性，以免影響動效流暢度。
屬性的變化一般又分為線性（liner）變化 和曲線（curves）變化兩種。
4.1?線性變化
線性變化具有勻速、驟停這兩個特征，一般適用于與物理屬性無關(guān)的過渡動效（如透明度屬性的變化，包含漸隱漸現(xiàn)或顏色間的切換），或有規(guī)律的加載動效（如均勻的循環(huán)、數(shù)值變化或進(jìn)度變化）。在與物理參數(shù)有關(guān)的變化中（如位置變化），盡量避免使用線性變化，否則很容易給人帶來動效僵硬、不自然的感覺。
4.2 曲線變化
曲線包含多種類型，在交互微動效設(shè)計中，緩動曲線（easing）的應(yīng)用范圍最廣、效果最自然、對用戶的干擾也較小，多用于與物理屬性相關(guān)的屬性變化中，常用場景如下：
結(jié)語
交互微動效以功能性為主，須遵循克制有度、清晰聚焦、自然流暢這三個核心設(shè)計原則。在設(shè)計前，思考希望如何影響用戶的注意力、動效的目標(biāo)是什么、動效出現(xiàn)的頻率和觸發(fā)機(jī)制是怎樣的，在設(shè)計時選擇合適動效類型和持續(xù)時間并關(guān)注反饋的響應(yīng)時間，做到有理有據(jù)、令人信服。
