本設(shè)計(jì)指南適用于UI界面中交互在時(shí)間和緩動(dòng)曲線的選擇上提供了一些通用的設(shè)計(jì)建議，幫助設(shè)計(jì)師理清動(dòng)效設(shè)計(jì)思路，提高設(shè)計(jì)效率。

本設(shè)計(jì)指南適用于UI界面中交互微動(dòng)效，涵蓋入場(chǎng)、出場(chǎng)動(dòng)效，過(guò)渡動(dòng)效和加載動(dòng)效，在時(shí)間和緩動(dòng)曲線的選擇上提供了一些通用的設(shè)計(jì)建議，幫助設(shè)計(jì)師理清動(dòng)效設(shè)計(jì)思路，提高設(shè)計(jì)效率。

一. 本指南的適用范圍

本指南適用于UI界面中交互微動(dòng)效，屬于功能性動(dòng)效。與聚焦于提供娛樂(lè)體驗(yàn)的動(dòng)效（如動(dòng)畫(huà)影片、游戲動(dòng)效等）不同，功能性動(dòng)效的設(shè)計(jì)，有清晰的邏輯目的，聚焦于幫助用戶理解當(dāng)前所處的狀態(tài)。

動(dòng)效范圍涵蓋：

入場(chǎng)\出場(chǎng)動(dòng)效（enter & exit）、過(guò)渡動(dòng)效（transition）和加載動(dòng)效（loading）

二. 設(shè)計(jì)原則和設(shè)計(jì)考量

一個(gè)優(yōu)秀的交互微動(dòng)效，在設(shè)計(jì)上應(yīng)該遵循以下三個(gè)核心原則：

為了確保動(dòng)效有清晰的用途并能完成目標(biāo)，設(shè)計(jì)時(shí)請(qǐng)思考以下幾方面的問(wèn)題：

三. 響應(yīng)時(shí)間與持續(xù)時(shí)間

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

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í)長(zhǎng)可允許達(dá)到 1秒左右，不可 超過(guò)2秒 無(wú)反饋。

當(dāng) 超過(guò)2秒 才能獲取反饋結(jié)果時(shí)，須設(shè)計(jì)加載動(dòng)效（loading）。

當(dāng)反饋時(shí)間為 2-9秒 時(shí)，可使用循環(huán)的加載樣式（如常見(jiàn)的菊花轉(zhuǎn)）。

當(dāng)反饋時(shí)間 超過(guò)10秒 時(shí)，須使用帶有進(jìn)度指示的加載樣式（如已加載了60%，還剩30秒）。

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

交互微動(dòng)效的持續(xù)時(shí)間不宜過(guò)長(zhǎng)，以避免浪費(fèi)用戶時(shí)間，影響用戶的閱讀和操作效率，其持續(xù)時(shí)間一般不超過(guò)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)位移），可長(zhǎ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)，為了保持視覺(jué)連續(xù)性，完成必要的過(guò)渡（如漸隱漸現(xiàn)）后即可結(jié)束。

較慢的動(dòng)效較少分散用戶注意力，更適用于非用戶直接觸發(fā)的場(chǎng)景。若動(dòng)效不是用戶直接觸發(fā)的，不希望用戶注意力被轉(zhuǎn)移，可使用在長(zhǎng)時(shí)間內(nèi)變化較小的動(dòng)效（一般不會(huì)出現(xiàn)位置移動(dòng)）。

不同設(shè)備的屏幕尺寸和特性不同，理想的持續(xù)時(shí)間也不一樣。一般來(lái)說(shuō)，對(duì)于移動(dòng)設(shè)備而言，屏幕越大往往動(dòng)效的位移也越大，因此持續(xù)時(shí)間也應(yīng)該越長(zhǎng)（可穿戴設(shè)備上的持續(xù)時(shí)間大約比手機(jī)上快30%，平板電腦上的持續(xù)時(shí)間大約比手機(jī)上慢30%）。而臺(tái)式設(shè)備的動(dòng)效設(shè)計(jì)往往比移動(dòng)設(shè)備中的動(dòng)效設(shè)計(jì)更簡(jiǎn)單快速（150毫秒~200毫秒間較為常見(jiàn)），這是因?yàn)閺?fù)雜的動(dòng)效在臺(tái)式設(shè)備場(chǎng)景下容易出現(xiàn)掉幀、卡頓的情況，瞬時(shí)響應(yīng)的動(dòng)效能避免這一點(diǎn)。

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

四. 常用動(dòng)效類(lèi)型及應(yīng)用參考

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

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

1.  線性變化

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

2.  曲線變化

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

結(jié)語(yǔ)

交互微動(dòng)效以功能性為主，須遵循克制有度、清晰聚焦、自然流暢這三個(gè)核心設(shè)計(jì)原則。在設(shè)計(jì)前，思考希望如何影響用戶的注意力、動(dòng)效的目標(biāo)是什么、動(dòng)效出現(xiàn)的頻率和觸發(fā)機(jī)制是怎樣的，在設(shè)計(jì)時(shí)選擇合適動(dòng)效類(lèi)型和持續(xù)時(shí)間并關(guān)注反饋的響應(yīng)時(shí)間，做到有理有據(jù)、令人信服。