如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

動畫效果如今已經(jīng)深入到 UI界面的每個角落。屏與屏之間的切換因?yàn)閯有Ф@得更加連貫，交互的上下文邏輯也因?yàn)閯有У募映侄忧逦?。動效對于產(chǎn)品和用戶而言，都是一個不可多得的重要組成部分。但是當(dāng)我瀏覽相關(guān)的文章的時候，發(fā)現(xiàn)絕大多數(shù)的動效有關(guān)的文章，都僅僅只是針對特定的動效設(shè)計案例來進(jìn)行分析和描述，少有文章真正系統(tǒng)地闡述動效應(yīng)該遵循怎樣的規(guī)則，符合什么樣的特征。這篇文章當(dāng)中，我不會講述什么新穎的技巧或者前沿的趨勢，但是我會將動效設(shè)計的主要原則和標(biāo)準(zhǔn)都匯集到一起，總結(jié)出來。

有了這篇文章，你就不用在其他地方學(xué)習(xí)基本的動效設(shè)計規(guī)則了。

動效的持續(xù)時長和速度

當(dāng)元素的位置和狀態(tài)發(fā)生改變的時候，動效的速度應(yīng)該足夠慢，維持足夠長的時間，讓用戶能夠注意到變化，但是同時，又不能慢到需要用戶去等待。

大量的研究表明，動效的最佳持續(xù)時長是200毫秒到500毫秒之間。這個研究數(shù)字是基于人腦的認(rèn)知方式和信息消化速度得出來的。任何低于100毫秒的動效對于人的眼睛而言，幾乎都是瞬間，很難被識別出來。而超過1秒的動效會讓人有遲滯感。

△ 界面中動效持續(xù)時長

在手機(jī)這樣的移動端設(shè)備上，按照 Material Design 的建議，動效時長應(yīng)該控制在200~300毫秒之間，在平板電腦上，這個時長應(yīng)該延長大概30%，也就是說，時長應(yīng)該在400~450毫秒之間。原因很簡單，屏幕尺寸越大，元素在發(fā)生位移的時候，跨越的距離越長，速度一定的情況下，時長自然越長。相應(yīng)的，在可穿戴設(shè)備的小屏幕上，這個時長應(yīng)該縮短30%，在150~200毫秒之間。

△ 移動端設(shè)備的屏幕尺寸影響動畫的持續(xù)時長

網(wǎng)頁動效的處理方式也不一樣。由于我們習(xí)慣在瀏覽器中直接打開網(wǎng)頁，考慮到瀏覽器性能和大家的使用習(xí)慣，用戶對于瀏覽器中動效變化速率的預(yù)期還是比較快的。相比于移動端中的動效速度，網(wǎng)頁中的速度會快上一倍，換句話說，就是動效的持續(xù)時長應(yīng)該在150~200毫秒之間。如果持續(xù)時間太長，用戶會忍不住覺得網(wǎng)頁卡住了。

不過，如果你的網(wǎng)頁中所用的動效并非功能性的，而是裝飾用的，或者用來吸引用戶的注意力，那么請忘記這個規(guī)則，在這種情況下，動效可以更長。

更大的屏幕=更慢的動效？絕不是如此！

請務(wù)必記住，無論是在什么平臺上，動效的持續(xù)時長絕不是單純?nèi)Q于屏幕尺寸和運(yùn)動距離，還取決于平臺特征、元素大小、功能設(shè)定等等。較小的元素或者較小的變化，相應(yīng)的動效應(yīng)該更快一點(diǎn)。因此，大而復(fù)雜的元素動效持續(xù)時間更長，看起來也更舒服一點(diǎn)。

大小相同的元素，在移動的時候，移動距離最短的元素，是停止下來的。

與較大的元素相比，較小的元素運(yùn)動速度應(yīng)該更慢，因?yàn)橄嗤囊苿泳嚯x，對于小元素而言，位移距離和自身大小比例倍數(shù)更大，相對偏移更遠(yuǎn)。

△ 動效的持續(xù)時長還和元素大小、運(yùn)動距離有關(guān)

動效的運(yùn)動規(guī)律要符合物理規(guī)律，當(dāng)元素運(yùn)動到邊界，發(fā)生碰撞的時候，碰撞的「能量」最終是要均勻分?jǐn)傁聛淼?，而彈跳的在多?shù)情況下是不適合的，僅在特殊情況下適合使用。

△ 避免使用彈跳，它會分散用戶的注意力

元素的運(yùn)動過程應(yīng)該是清晰的，盡量不要在運(yùn)動中使用模糊的效果（是的，說的就是 AE 的模糊動效愛好者們），模糊的動效不適合在 UI界面中使用。

△ 不要在動效中使用模糊效果

列表項（新聞列表、郵件列表等）所使用的動效，在實(shí)際運(yùn)動的過程中，項和項之間應(yīng)該有輕微的延遲，元素之間的延遲應(yīng)該控制在20~25毫秒之間，如果持續(xù)時間再長，可能會給人一種遲滯的觀感。

△ 列表項之間的延遲應(yīng)該在20~25毫秒

緩動

緩動指的是物體在物理規(guī)則下，漸進(jìn)加速或減速的現(xiàn)象。在動效中加入緩動的效果能夠讓運(yùn)動顯得更加自然，這是運(yùn)動的基本原則之一。對于緩動，迪士尼的兩位關(guān)鍵性的動畫大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過非常詳盡的描述。

為了不讓動效看起來機(jī)械或者人工痕跡太明顯，元素的運(yùn)動應(yīng)該有漸進(jìn)加速和漸進(jìn)減速的特征，就像物理世界當(dāng)中其他的物體這樣。

勻速直線運(yùn)動

不受任何物理力量的影響，勻速直線運(yùn)動看起來是非常不自然的，尤其是對于人眼而言。

所有用來設(shè)計動畫的應(yīng)用都會使用坐標(biāo)軸和曲線來闡述動效的運(yùn)動特征，我將嘗試闡述它們的含義，以及如何使用。坐標(biāo)軸的 X軸是實(shí)現(xiàn)，而 Y軸則表示的唯一，換句話來說，如同我們在初中物理中所學(xué)到的，坐標(biāo)軸上的線條描述的是速度和加速度的特征。下面所示的直線，表示速度是均勻的，也就是勻速直線運(yùn)動，物體在相同時間內(nèi)運(yùn)動的距離是不變的。

△ 勻速直線運(yùn)動的座標(biāo)圖

均勻的變化通常只會用在色彩的改變或者透明的改變上，一般來說，我們也可以讓背景元素均勻運(yùn)動，而前景元素保持不變，來呈現(xiàn)它的狀態(tài)，就像上圖一樣。

緩動加速曲線

通過曲線我們可以看到，物體開始時候的初速度比較低，運(yùn)動緩慢，隨后速度逐漸增加，這意味著物體在加速運(yùn)動。

△ 加速曲線

當(dāng)物體加速飛出屏幕的時候，可以使用這種加速曲線，比如界面中被用戶使用滑動手勢甩出去的卡片。但是請記住，只有當(dāng)運(yùn)動對象需要完全離開界面的時候才會這么使用，如果它還需要再回來的話，則不行。

△ 以加速運(yùn)動將卡片扔出屏幕

動畫曲線有助于正確傳達(dá)訊息，甚至表達(dá)情緒和感覺。在下面的案例當(dāng)中，我們可以看每個元素的運(yùn)動位移是完全一樣的，所消耗的總時長也是一樣的，但是運(yùn)動的速率變化是不同的，這一點(diǎn)也體現(xiàn)在曲線上，所表現(xiàn)出來的情緒也不同。當(dāng)然，通過調(diào)整曲線，你能夠讓物體的運(yùn)動軌跡盡可能接近現(xiàn)實(shí)世界。

緩動減速曲線

當(dāng)元素從屏幕外運(yùn)動到屏幕內(nèi)的時候，動效應(yīng)該遵循這類曲線的運(yùn)動特征。從全速進(jìn)入屏幕開始，速度降低，直到完全停止。

△ 減速曲線

減速曲線可以適用于多種不同的 UI控件和元素，包括從屏幕外進(jìn)入屏幕內(nèi)的的卡片、條目等。

△ 減速曲線案例

緩動標(biāo)準(zhǔn)曲線

在這種曲線之下，物體從靜止開始加速，到達(dá)速度最高點(diǎn)之后開始減速直到靜止。這種類型的元素在 UI界面中最為常見，每當(dāng)你不知道要在動效中使用哪種運(yùn)動方式的時候，可以試試標(biāo)準(zhǔn)曲線。

△ 標(biāo)準(zhǔn)曲線

根據(jù) Material Design 的規(guī)范，最好使用不那么對稱的增速和減速的過程，讓動效看起來更加真實(shí)。同時大家會更加在意運(yùn)動的結(jié)果，曲線的末端，也就是運(yùn)動結(jié)束的過程最好進(jìn)行適當(dāng)?shù)膹?qiáng)調(diào)，換句話說就是減速過程持續(xù)的時長最好超過開始加速的時長，用戶將會更加清楚地觀察到運(yùn)動的最終結(jié)果，從而更好地明白運(yùn)動的終止?fàn)顟B(tài)。

△ 對稱和非對稱運(yùn)動的差異

當(dāng)元素從屏幕的一個位置移動到另外一個位置的時候，最好使用這種標(biāo)準(zhǔn)的緩動曲線，這個過程中，盡量不要讓動畫效果引人注意，不要使用戲劇化的效果。

△ 卡片元素從屏幕上運(yùn)動的時候，不對稱的緩動曲線

當(dāng)元素從屏幕上消失的時候，采用了相同的不對稱緩動曲線，用戶同樣可以通過滑動回到之前的位置。這個環(huán)節(jié)使用了抽屜式導(dǎo)航控件。

△ 抽屜式導(dǎo)航隨著緩動曲線從屏幕上隱藏

從這些案例當(dāng)中，可以看出許多動效的初學(xué)者對于運(yùn)動規(guī)則的了解還不足。比如下面的這個動效，元素隨著減速曲線出現(xiàn)，然后使用標(biāo)準(zhǔn)緩動曲線消失。根據(jù) Material Design 的標(biāo)準(zhǔn)，新出現(xiàn)的元素持續(xù)的時間應(yīng)該更長，因?yàn)樾枰嗟淖⒁饬Α?

△ 導(dǎo)航菜單的出現(xiàn)和消失

貝賽爾曲線函數(shù) cubic-bezier（）是用來描述曲線的，它的名字前面之所以帶有 Cubic 是因?yàn)槊總€貝賽爾曲線的描述都是基于四個不同的參數(shù)來確定的。曲線的起點(diǎn)（0，0）和終點(diǎn)（1，1）在坐標(biāo)軸上的位置是已經(jīng)事先確定的。

為了簡化你對于貝賽爾曲線的理解，我們推薦兩個網(wǎng)站，分別是 easings.net 和 cubic-bezier.com ，前者包含了最常見的曲線的列表，你可以將他們復(fù)制到你的原型工具中，第二個網(wǎng)站為你提供了不同曲線的參數(shù)，你可以直接在其中查看各種對象的移動方式。

△ 不同類型的 cubic-bezier（）的曲線和參數(shù)

界面動效的編排

就像芭蕾舞的舞蹈編排一樣，動畫效果也是需要編排的，它的主要目的是讓元素從一個狀態(tài)切換到下一個狀態(tài)，自然過渡，讓用戶的注意力自然地被引導(dǎo)過去。

編排有兩種不同的方式，一種是均等交互，另一種是從屬交互。

均等交互

均等交互意味著所有的元素和對象都遵循一個特定的編排的規(guī)則。

在這個實(shí)例當(dāng)中，所有的卡片都遵循著一個方向來引導(dǎo)用戶的注意力，自上到下地次第加載。相反，沒有按照這樣清晰的規(guī)則來加載，用戶的注意力會被分散，元素的外觀排布也會顯得比較糟糕。

△ 用戶的注意力應(yīng)該沿著一個流向來引導(dǎo)

至于表格式的布局，它相對就復(fù)雜一點(diǎn)。在這里，用戶的視線流向應(yīng)該是清晰的對角線方向，因此，逐個區(qū)塊次第出現(xiàn)是一個糟糕的設(shè)計。這樣的逐個顯示，一方面耗時太長，另一方面會讓用戶覺得元素的加載方式是鋸齒狀的，這種方式并不合理。

△ 沿著對角線加載

從屬交互

從屬交互指的是使用一個中心對象作為主體，來吸引用戶的注意力，而其他的元素從屬于它來逐步呈現(xiàn)。這樣的動畫設(shè)計能夠創(chuàng)造更強(qiáng)的秩序感，讓主要的內(nèi)容更容易引起用戶的注意。

在其他的設(shè)計當(dāng)中，用戶很難搞清楚哪個才是主要的，因?yàn)樽⒁饬Ρ环稚⒘?。因此，如果要設(shè)置多個動畫元素，應(yīng)該定義清楚誰為主，誰是中心，并且盡量按照從屬關(guān)系來次第呈現(xiàn)不同的子元素。

如果只有一個中心對象，那么其他的對象的運(yùn)動方式都要受它制約，否則用戶分不清楚主次。

根據(jù) Material Design 的規(guī)定，當(dāng)元素不成比例地變幻尺寸的時候，它應(yīng)該沿著弧線運(yùn)動，而不是直線運(yùn)動，這樣有助于讓它看起來更加自然。所謂「不成比例」地變化指的是元素的長和寬的變化并不是按照相同比例來縮放或者變化的，換句話來說，變化的速度也不一樣。（比如，方形變成矩形）

△ 不成比例地改變對象外觀的時候，運(yùn)動軌跡應(yīng)該是弧線的

相反，如果元素是按照比例改變大小的時候，應(yīng)該沿著直線移動，這樣不僅操作更加方便，而且更符合均勻變化的特征。看一下真實(shí)的案例，你會發(fā)現(xiàn)直線的運(yùn)動軌跡會更加合理。

△ 成比例變化大小的時候，應(yīng)該沿著直線運(yùn)動

當(dāng)元素不成比例放大的時候，運(yùn)動軌跡是弧線，而這種弧線運(yùn)動軌跡有兩種不同的呈現(xiàn)一種，一種軌跡是初始方向?yàn)榇怪狈较蚨\(yùn)動結(jié)束時瞬間運(yùn)動方向是水平的（Horizontal out），另外一種初始方向是水平方向而運(yùn)動結(jié)束時瞬間運(yùn)動方向是垂直的（Vertical out）。

那么怎么選取這個方向呢？很簡單，元素運(yùn)動曲線的方向，應(yīng)該是要向界面的主要運(yùn)動方向的主軸靠攏重合。舉個例子，在下面的動效當(dāng)中，整個界面的滾動方向是上下滾動，主軸是縱向的，因此，當(dāng)卡片點(diǎn)擊之后被展開的時候，會先向右水平移動，并最終以垂直運(yùn)動結(jié)束，運(yùn)動的最終方向，切線是垂直的，也就和垂直方向的主軸重合了。

△ 元素按照弧線展開的時候，最終方向應(yīng)該和主軸重合

如果幾個不同的元素的運(yùn)動軌跡相交，那么他們不能彼此穿越。如果每個元素都必須通過某個交點(diǎn)，抵達(dá)另外一個位置，那么應(yīng)該次第減速，依次通過這個點(diǎn)，給彼此留出足夠的空間。另外一種選擇，是元素不相交，而是像實(shí)體一樣在靠近的時候，彼此推開。為什么？因?yàn)槲覀兺ǔ＜俣ń缑嬷兴械脑囟嘉挥谕粋€平面當(dāng)中。

在運(yùn)動過程中，元素不應(yīng)彼此穿越，而應(yīng)該互相留出空間。

但是這一點(diǎn)也不是一成不變的。在比較擁擠的界面當(dāng)中，某個元素可以「越過」其他的元素，它同樣沒有穿過其他的元素消失，而是單純的移動。這一點(diǎn)從某種意義上也是延續(xù)自我們?nèi)粘５奈锢硪?guī)律，只不過我們會默認(rèn)界面中的元素在這個情況下?lián)碛辛烁叨冗@樣的屬性。

△ 元素可以越過其他的元素運(yùn)動

結(jié)語

我們總結(jié)了這么多動效運(yùn)動的規(guī)則和原則，從某種意義上還是延續(xù)自我們對于物理世界的認(rèn)知，摩擦力和加速度在虛擬界面中以另外的方式續(xù)存著。模仿現(xiàn)實(shí)世界的界面讓我們對于界面的秩序有更清晰的認(rèn)知，允許我們更輕松的了解和訪問界面的內(nèi)容。

如果動效按照正確的方式來設(shè)計，它應(yīng)該是不顯著，且不會分散用戶注意力的。如果不是這樣，那么你需要讓動效更微妙一點(diǎn)，實(shí)在不行甚至需要將它移除。動效不應(yīng)該成為影響用戶操控界面的障礙，或者轉(zhuǎn)移注意力的存在。

當(dāng)然，即使是遵循這么多規(guī)律，動效的設(shè)計依然是一門藝術(shù)，而非單純的科學(xué)，多做測試多摸索總是有必要的。

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。