超全面的UI設計動效的基本規(guī)則總結

 

現(xiàn)如今，優(yōu)秀的界面動畫很能讓人產生深刻印象，甚至是帶來驚喜。它一方面表達了界面之間的交互過程，解釋說明如何使用應用，另一方面也能正確引導用戶的注意力。在瀏覽關于動效的文章時，我發(fā)現(xiàn)幾乎所有的文章都只描述了特定的案例或者關于動畫的一般事實，但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關于界面動畫的使用規(guī)范。在這篇文章中我不會寫任何新的知識，我只是想把所有的主要原則和規(guī)范做一個收集歸納，這樣就能便于其他設計師進行快速決策了。接下來從三個方向總結動效表達形式。

 

一、動效時間節(jié)奏

二、動效模式

三、動效案例分類

 

 

一、動效時間節(jié)奏

 

1：動畫的速度和持續(xù)時間

當界面元素改變他們的狀態(tài)和位置時，動畫的持續(xù)時間應該以用戶能注意到又不用等待為標準。合適的動畫時長，既不要太快也不至于慢到讓用戶打哈欠。

 

大量的研究發(fā)現(xiàn)在界面中最優(yōu)的時間是200-500ms。這個數(shù)字是根據(jù)人類大腦的特殊性得出來的。任何小于100ms的動畫是人類很難感知到的，而其他大于1秒的動畫又會讓用戶覺得有些延遲，不夠流暢。

動畫的持續(xù)時間是使得界面流暢的關鍵

 

在手機上，谷歌設計規(guī)范同樣建議動畫的持續(xù)時間在200-300ms為宜。在平板電腦上，這個時間會稍微長30%，大約在400-450ms。原因很簡單，在更大的屏幕上，元素變化的位置路徑會更長。基于此，在可穿戴設備中，持續(xù)時間又要縮短30%了，大約在150-200ms，因為小屏幕上元素變化的位置路徑會更短。設備的大小會影響動畫的持續(xù)時間。

 

在網(wǎng)頁上又會是另外一種方式。由于我們習慣于在瀏覽器中快速打開網(wǎng)頁，所以我們也希望在不同的狀態(tài)之間能夠快速切換。所以，在網(wǎng)頁上的動畫應該要比在手機上持續(xù)時間少2倍多，在150-200ms之間。一旦超過這個時間區(qū)間，用戶就會覺得網(wǎng)頁是不流暢的，或者覺得是不是網(wǎng)絡有了問題。但是，如果你是在頁面中創(chuàng)建一些裝飾性的動畫或者目的是為了吸引用戶的注意力，此時就應該拋棄這些規(guī)范，時間你可以做的更長一些。

大界面中的動畫就一定是慢的嗎？并不一定。還需要記住的一點就是，無論在什么平臺，動畫的持續(xù)時間不僅跟它的移動距離有關，還跟它本身的大小有關系。小的元素或者變化不大的動畫應該要移動的更快，而大的元素或者復雜的元素持續(xù)時間稍長一些看起來會更好。

 

在大小相同的對象中，移動距離最短的物體應該最先停止。小的對象與大的對象相比較，小對象移動速度顯得更慢，因為會產生更大的偏移量。動畫的持續(xù)時間取決于物體的大小和移動的距離。

 

 

當對象發(fā)生碰撞時，根據(jù)物理原則，碰撞的能量必須在碰撞對象之間平均分布。而如果在界面中只能看到碰撞體的一部分回彈，往往會顯得不夠自然。因此，最好避免回彈效果，只在一些特殊情況下才用到它。避免使用彈跳效果，因為它會分散注意力。

 

 

物體的運動軌跡應該是清晰銳利的，所以盡量不要使用動態(tài)模糊（在AE中做動畫效果除外）。即使是在現(xiàn)在最新的設備上也很難重現(xiàn)這些效果，不能把這種動態(tài)模糊的動畫效果應用到界面中。動畫中盡量不要使用動態(tài)模糊。

 

 

列表項的出現(xiàn)應該只允許有一個短暫的延遲。每一個新列表項的出現(xiàn)間隔應該在20-25ms之間。元素出現(xiàn)太慢的話，會讓用戶感到很不爽。列表項出現(xiàn)的動畫應該在20-25ms之間。

 

 

 

2：緩動

 

緩動可以讓物體運動的更加自然。這是動畫的基本原理之一，在?Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書中有詳細的解釋。為了讓動畫看起來不會覺得太過機械，物體的運動應該會同時伴有一些加速度，就像現(xiàn)實世界中的運動一樣，不會有絕對勻速的運動形式。

緩動的物體會比較線性運動的物體看起來更加自然

 

 

3：線性運動

 

不受任何物理因素影響的運動叫做勻速運動，這種動畫在用戶眼中看來是非常的機械和不真實的。

所有的APP動畫都會用到動畫曲線。我將試著去解釋如何閱讀它們并說明它們的含義。下面的例子中，運動就是勻速的，可以看到對象在相同的時間間隔中移動了相同的位置。

線性動畫在什么時候會用到？舉個例子，對象僅改變它的顏色和透明度的時候會用到。一般來說，當一個對象不改變它的位置而只是改變狀態(tài)時，可以嘗試用線性動畫來改變狀態(tài)。

 

4：緩入或者說加速曲線

我們可以在曲線上看到，在相同時間內，位置的變化會越來越大。這就說明一個物體是在進行加速運動。

 

 

這種曲線一般應用在對象移出界面時，這些可能是系統(tǒng)通知，也可能只是界面中的卡片設計。但是記住，這種動畫曲線只是會用在物體移出界面時，而反過來就不適用了。

 

 

動畫曲線有助于表達正確的情緒。在下面的例子中，物體動畫的持續(xù)時間和位移大小都是相同的，但你會發(fā)現(xiàn)即使是曲線上一些微小的變化也會讓你看動畫的感受不同。

當然，通過改變曲線，可以讓物體的運動顯得更加真實自然。

相同的持續(xù)時間和相同的位移變化，但是會有不同的感受

 

 

5：緩出或者說減速曲線

與緩入恰恰相反，物體的運動在開始時位移變化很大，但是后面會越來越小直到最后完全停止。

減速曲線

 

 

這種類型的運動曲線通常是用在物體進入界面中時——快速進入屏幕然后再慢慢停下來，在不同卡片或對象從屏幕外進入界面時可以應用上。

減速曲線在此時會讓動畫顯得更加自然

 

 

 

6：緩入緩出或者說標準曲線

這種曲線使物體有加速和減速的過程。這種類型的動畫在界面中是最常用的，當你還在遲疑該用怎樣的動畫曲線時，選擇標準曲線準沒錯。

標準曲線

 

 

根據(jù)谷歌規(guī)范，建議最好是用一些非對稱曲線來使得物體運動的更加自然真實。動畫的結尾會比動畫的開頭更加需要去強調，這樣的結果是加速時間要小于減速時間。在這個情況下，動畫能夠引導用戶更加關注元素的結束部分，以至于關注到其新的狀態(tài)。

注意觀察對稱與非對稱曲線的區(qū)別

 

 

緩入緩出動畫常被用在界面中對象從一個位置移動到另一個位置時。在這種情況下，動畫的目的是為了不讓人有過多不必要的關注。

卡片的非對稱曲線運動

 

 

同樣的情況還適用于，元素在界面中消失后用戶還能隨時顯示，抽屜導航就是這樣的例子。

抽屜導航的收起過程就是應用到了標準曲線

 

 

從很多例子中可以看出許多初學者都忽略了一個基本的規(guī)則——開始動畫不等同于結束動畫，應該分別去設置，比如在抽屜導航動效中——打開是一個減速動畫但關閉時卻是一個標準曲線動畫。另外，根據(jù)谷歌設計規(guī)范，物體出現(xiàn)的動畫持續(xù)時間應該略長，以吸引用戶更多的注意力。

側邊欄的動畫是配合減速曲線和標準曲線一起來實現(xiàn)的。有一個立方貝塞爾函數(shù)常用來描述這種速度曲線。之所以叫立方是因為它是基于2個點來的。第一個點在坐標軸中是（0，0）（左下），最后一個點是（1，1）(右上)。

基于此，我們只需要描述圖上的兩個點，這是由貝塞爾函數(shù)的四個參數(shù)給出的:前兩個是第一個點的坐標x和y，后兩個是第二個點的坐標x和y。

 

為了便于實際工作，我建議使用2個工具網(wǎng)站來操作

https://easings.net/

http://cubic-bezier.com

第一個包含一些最常使用的曲線列表，可以直接將其復制到原型工具中去。

第二個是可以給你自己自定義動畫的曲線，并能實時查看效果。

 

 

不同類型的動畫曲線以及他們不同的參數(shù)

 

 

7：動畫在界面中的編排

就像芭蕾舞編排一樣，主要思想是從一個狀態(tài)到另一個狀態(tài)的過渡引導用戶注意力方向。

一般會有2種編排形式——同級動畫和從屬動畫。

 

 

同級動畫

同級動畫意味著所有對象的外觀都服從一個特定的規(guī)則。

在這種情況下，所有卡片都按一個相同的流程出現(xiàn)，引導用戶注意力在一個方向上，即從上到下。如果我們不按照這個順序，用戶的注意力就會分散，如果所有元素同時出現(xiàn)也會很糟糕。

用戶的注意力應被引導在一個方向上

 

 

至于表格視圖，就會略微有些復雜。這種情況下，用戶往往是以對角線為焦點去看界面的，所以逐個出現(xiàn)的形式也比較糟糕。另外，逐個出現(xiàn)的動畫在時間上也會過長，而且把用戶的注意力引導成鋸齒狀，這是很不友好的。

按對角線出現(xiàn)的表格視圖動畫

 

 

從屬動畫

從屬動畫是指有一個核心運動的元素，它吸引用戶所有的注意力，其他元素也都跟隨它的運動。這種類型的動畫會顯得更有秩序感，讓用戶更多的去關注到內容本身。

而在其他情況下，用戶是很難知道他到底要去看哪個元素，注意力很容易被分散。如果要設置多個動畫元素，一定要清楚的知道他的動畫順序，并盡可能的將其他動畫元素弱化。

只賦予一個中心對象生命是值得的，而所有其他的對象都服從于它。否則，用戶就不知道到底應該注意哪個元素。

 

 

根據(jù)谷歌規(guī)范，當運動物體的大小不成比例地改變時，它們應該沿著弧線而不是直線運動。這有助于使動畫更自然。所謂“不成比例”，是指物體的高度和寬度的增加/減少是不對稱地進行的，即以不同的速度變化(例如，一個正方形變成一個矩形)。

物體的運動如果不成比例，那應該按弧線變化。

 

 

當對象按比例改變其大小時，則此時直線運動的形式會更好。由于這種運動形式做起來容易得多，弧線軌跡運動的規(guī)律就往往被忽視。在現(xiàn)在很多應用中，我們都能找到這種例子。

等比的物體運動軌跡應該使用直線

 

 

曲線軌跡運動也會有兩種實現(xiàn)方式：第一種是開始水平移動，然后以垂直運動結束;第二種是開始垂直移動，然后以水平運動結束。

 

物體沿曲線移動的路徑必須與滾動界面的方向重合。例如，在下面的例子中，我們可以上下滾動界面，相應地，卡片以垂直的方式展開更合適——先向右，然后向下。

展開/折疊卡片的方向應與界面的軸線重合

 

如果物體的運動路徑彼此相交，它們就應該不能穿過對方。物體應該通過減慢或加速自身的速度為另一個物體的運動留下足夠的空間。另一種方式——只是推開其他物體。為什么要這么做？因為我們假設界面中的所有對象都位于一個平面上。（譯者注：對于這一點我不是很認同，為了更加真實么？）

在運動過程中，物體不應該互相穿透，而是為另一個物體的運動留下空間。

 

 

在另一種情況下，移動的物體可以通過抬高于其他物體，而不會以溶解或通過其他物體的形式來移動。為什么?因為我們相信界面上元素的行為應該要符合物理定律，在現(xiàn)實世界中沒有任何實體能夠做到直接穿透對方。

 

如果我們總結上述所有的規(guī)律和原則，可以得出界面動畫應該要反映物質世界的運動,例如我們都知道的，摩擦，加速等等。模仿現(xiàn)實世界的行為我們可以創(chuàng)建一個優(yōu)秀的動畫，滿足用戶的心理預期。一個優(yōu)秀的動畫，應該是不會那么刻意，也不會分散用戶對目標的注意力。如果是的話，就需要優(yōu)化它，或者干脆把動畫去掉。核心標準是動畫不應該降低用戶執(zhí)行任務的效率。但是不要忘記，用戶對動畫的好壞感受，是感性大于理性的。所以，最好是把做出來的動畫給用戶進行評鑒，然后再不斷優(yōu)化它。

 

 

 

 

二、動效模式

 

1.縮放

通過對目標對象的突出顯示來吸引和引導用戶的視線。

適合場景：當你設計的元素期望用戶點擊。例如在你的頁面中新推出了活動或者是優(yōu)惠項目，這個效果可以加強用戶點擊的欲望。

 

 

2.旋轉

當一個特定對象需要被突出顯示，旋轉動畫可以引人注目。最常見的就是我們在iOS上刪除應用時，應用圖標都會通過這種動畫來提示用戶。

適合場景：當選中的元素需要進行二次確認操作，這個動效能反饋被選中。例如刪除安裝的應用。

 

 

3.著色

通過用顏色的區(qū)分來突出顯示的對象，一般用于點擊或是選中的狀態(tài)。

適合場景：如果在選項中可以進行多選，這個動效就特別適用。例如選擇關注的明星，人物等。

 

 

4.褪色

周圍對象的顏色變淡來突出顯示的目標對象。此效果在點擊圖片放大時用的較多。

適合場景：如果在選中這個元素時將產生過渡,例如在一些選中圖片進行放大過渡時，這個動效會更加適合。

 

 

 

5.模糊

周圍對象模糊來突出顯示的目標對象，iOS中的3D touch就是使用的這個效果。

適合場景：當多維度的交互產生時，不同的操作產生不同的結果，用動效反饋會更加合適，模糊背景突出選中狀態(tài)可以是長按的交互操作，iOS中的3D touch就是使用的這個效果。

 

 

6.變暗

用周圍元素的變暗來凸顯目標對象，多用于彈窗的出現(xiàn)。

適合場景：選中一個元素，背景變暗類似于浮動效果，多用于選中的元素還要進行下一步操作，例如彈窗和輸入框的彈出。

 

 

7.翻轉

用翻轉目標對象來顯示選中對象。我們玩一些翻牌小游戲的時候經常會出現(xiàn)這樣的效果。

適合場景：點擊某個元素之后需要強烈反饋的。例如我們做一些趣味小游戲時，選中之后加上翻轉效果會讓用戶產生期待感。平時慎用，這個動效會產生延緩等待的感覺。

 

 

8.發(fā)光凸顯

通過對光影的變化來凸顯目標效果。地圖目標顯示經常會使用這樣的效果。

適合場景：使用發(fā)光效果來增加點擊引導，例如一些重要按鈕或者新增的功能模塊，通過發(fā)光來引導用戶點擊。

 

 

9.改變深度

目標移到其他對象之前，來突出移動的目標的結果，用戶看起來像是改變了深度。多用于列表的移動。

適合場景：兩個或者多個對象進行切換時。例如一些影片或是圖片的切換，表示同一層級下的不同選項。

 

 

10.放大

目標對象在用戶交互的時候放大，如果對象沒有被激活應該回到原來的大小。通過放大目標來顯示哪個對象在活躍并且正在交互中。多用于一些tab的切換。

適合場景：多個元素進行切換選擇時。例如tab切換、圖標切換。

 

 

 

三、動效案例分類

 

1.滑動

信息列表會跟隨著用戶的交互手勢而動，然后卡片到相應的位置上，保持整齊感，它屬于指向型動畫，物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉場，有效幫助用戶清理頁面層級的排列情況。

適合場景：當你設計的元素需要導航以列表方式呈現(xiàn)的時候可以使用滑動效果。例如一些明星的選擇，款式的選擇，適合用這樣的方式呈現(xiàn)。

 

 

2.擴大

頁面中的卡片會從縮略圖轉化為全屏視圖（一般這個卡片的中心點也會跟隨移動到屏幕的中央）。反向動效就是卡片從全屏視圖轉換為縮略圖。它的優(yōu)點是能清楚的告訴用戶點擊的地方被放大了。

適合場景：當你設計的元素是需要和用戶進行單一交互的時候。例如點開圖片查看詳情，讓轉場過渡更自然。

 

 

3.最小化

頁面元素點擊之后縮小，然后移動到屏幕上相應的位置，相反的動效就是擴大，從縮略圖重新變?yōu)槿?。這樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒有動效引導，可能用戶需要花時間去尋找。

適合場景：當用戶想要最小化某個元素的時候。例如搜索、添加快捷按鈕的點擊事件，符合從哪來到哪去的原理。

 

 

4.切換對象

當前頁面移動到后面，新的頁面移動到前面，這樣能夠清楚解釋頁面之間是進行切換的，不會顯得轉換的太突兀和莫名其妙。

適合場景：當用戶在元素之間切換?；瑒有Ч鄬碚f比較單一和常見，使用動效切換可以讓用戶產生眼前一亮的效果，例如一些商品款式的切換，就可以使用這樣的效果。

 

 

5.展開推疊

堆疊在一起的元素被展開。能夠清楚的告訴用戶每個元素的排列情況，從哪里來到哪里去，也顯得更加有趣。

適合場景：當用戶打開一堆功能選項的時候。例如一個功能里面隱藏了好幾個二級功能時，就可以使用這樣的效果，利于用戶引導。

 

 

6.翻頁

當用戶實施滑動手勢的時候，出現(xiàn)像現(xiàn)實生活中翻頁一般的效果。真正動效轉場也能夠清晰的展現(xiàn)列表層級的信息架構，并且模仿現(xiàn)實生活中的動效更加富有情感。

適合場景：當用戶進行一些翻頁操作時。例如看小說，讀長篇文章，使用這樣的效果會更貼近現(xiàn)實生活，引起用戶共鳴。

 

 

7.添加到列表

新的元素加入到原有的列表中，舊的元素被推開而不是替換，從而有現(xiàn)實中騰出位置的感覺，這種轉場效果能夠清楚的展現(xiàn)列表重新排列的過程，讓用戶知道新舊信息的位置，不會產生迷惑。

適合場景：當用戶需要進行新操作時。有一些頁面呈現(xiàn)的是將新的事件替換掉舊的，而使用這樣的動效可以讓用戶更清晰的知道自己做了什么，例如點贊，打賞。

 

 

8.導航標簽轉換

根據(jù)內容的轉換，按鈕相應的在視覺上做出改變，而標題是隨著內容移動而改變的，這樣能夠清晰的展示標簽和內容之間的從屬關系，讓用戶能夠清晰理解頁面之間的架構。

適合場景：同一層級頁面之間的切換。例如切換導航，或者進度流程。使用動效可以讓用戶更了解架構，是標簽而不是按鈕的感覺。

 

 

9.融合

元素會根據(jù)用戶的點擊交互而分離或者是結合，用戶可以感受到元素與元素之間的關聯(lián)，比起直接切換，顯然用融合動畫更加有趣。

適合場景：當用戶操作一個功能點時可能會處罰其他功能。例如運動app開始健身或者跑步的時候，點擊開始后會出現(xiàn)暫定或是結束。

 

 

10.滾動

根據(jù)用戶的手勢進行滾動操作，非常使用與列表信息的查看。這個交互方式是我們用的最頻繁的，仙子我們也可以加入一些動效使這個交互更加的有趣和豐富。

適合場景：當用戶垂直或者水平移動頁面時。例如列表，圖片，很多場景下都可以使用，也因此過于平凡，可以加一些動效讓頁面活起來。

 

 

11.平移

當一張圖片在我們有限的屏幕里沒有辦法看完的時候，會使用這樣的效果。除了放大效果，這樣的平移還可以加上動效配合一些功能使用。

適合場景：移動大于界面的的頁面。例如地圖，可以配合其他功能滾動產生平移效果。

 

 

12.保存指示器

用戶一旦進行保存、下載某個物體，物體會復制一份，同時縮小、移動到保存指示器中。這樣可以提示用戶下載或者是收藏的內容在哪里可以找到，能夠告訴用戶對象已經被添加。

適合場景：當用戶添加書簽、下載、保存，加入等行為的時候使用。