UI互動動效設計標準與規範探索
今天分享一篇在medium很火的文章《UI互動動效設計標準與規範探索》這篇文字將系統性的給你介紹UI互動動畫該如何深入研究，希望對您有用！
The ultimate guide to proper use of animation in UX
現如今，優秀的介面動畫很能讓人產生深刻印象，甚至是帶來驚喜。它一方面表達了介面之間的互動過程，解釋說明如何使用應用，另一方面也能正確引導使用者的注意力。在瀏覽關於動效的文章時，我發現幾乎所有的文章都只描述了特定的案例或者關於動畫的一般事實，但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關於介面動畫的使用規範。在這篇文章中我不會寫任何新的知識，我只是想把所有的主要原則和規範做一個收集歸納，這樣就能便於其他設計師進行快速決策了。
動畫的速度和持續時間
當介面元素改變他們的狀態和位置時，動畫的持續時間應該以使用者能注意到又不用等待為標準。
合適的動畫時長，既不要太快也不至於慢到讓使用者打哈欠。
大量的研究發現在介面中最優的時間是200-500ms。這個數字是根據人類大腦的認知水平得出來的。任何小於100ms的動畫是人類很難感知到的，而其他大於1秒的動畫又會讓使用者覺得有些延遲，不夠流暢。
動畫的持續時間是使得介面流暢的關鍵
在手機上，谷歌設計規範同樣建議動畫的持續時間在200-300ms為宜。在平板電腦上，這個時間會稍微長30%，大約在400-450ms。原因很簡單，在更大的螢幕上，元素變化的位置路徑會更長。基於此，在可穿戴裝置中，持續時間又要縮短30%了，大約在150-200ms，因為小螢幕上元素變化的位置路徑會更短。
裝置的大小會影響動畫的持續時間
在網頁上又會是另外一種方式。由於我們習慣於在瀏覽器中快速開啟網頁，所以我們也希望在不同的狀態之間能夠快速切換。所以，在網頁上的動畫應該要比在手機上持續時間少2倍多，在150-200ms之間。一旦超過這個時間區間，使用者就會覺得網頁是不流暢的，或者覺得是不是網路有了問題。
但是，如果你是在頁面中建立一些裝飾性的動畫或者目的是為了吸引使用者的注意力，此時就應該拋棄這些規範，時間你可以做的更長一些。
大介面中的動畫就一定是慢的嗎？並不一定。
還需要記住的一點就是，無論在什麼平臺，動畫的持續時間不僅跟它的移動距離有關，還跟它本身的大小有關係。小的元素或者變化不大的動畫應該要移動的更快，而大的元素或者複雜的元素持續時間稍長一些看起來會更好。
在大小相同的物件中，移動距離最短的物體應該最先停止。小的物件與大的物件相比較，小物件移動速度顯得更慢，因為會產生更大的偏移量。
動畫的持續時間取決於物體的大小和移動的距離
當物件發生碰撞時，根據物理原則，碰撞的能量必須在碰撞物件之間平均分佈。而如果在介面中只能看到碰撞體的一部分回彈，往往會顯得不夠自然。因此，最好避免回彈效果，只在一些特殊情況下才用到它。
避免使用彈跳效果，因為它會分散注意力。
物體的運動軌跡應該是清晰銳利的，所以儘量不要使用動態模糊（在AE中做動畫效果除外）。即使是在現在最新的裝置上也很難重現這些效果，不能把這種動態模糊的動畫效果應用到介面中。
動畫中儘量不要使用動態模糊
列表項的出現應該只允許有一個短暫的延遲。每一個新列表項的出現間隔應該在20-25ms之間。元素出現太慢的話，會讓使用者感到很不爽。
列表項出現的動畫應該在20-25ms之間。
緩動
緩動可以讓物體運動的更加自然。這是動畫的基本原理之一，在 Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書中有詳細的解釋。
為了讓動畫看起來不會覺得太過機械，物體的運動應該會同時伴有一些加速度，就像現實世界中的運動一樣，不會有絕對勻速的運動形式。
緩動的物體會比較線性運動的物體看起來更加自然
線性運動
不受任何物理因素影響的運動叫做勻速運動，這種動畫在使用者眼中看來是非常的機械和不真實的。
所有的APP動畫都會用到動畫曲線。我將試著去解釋如何閱讀它們並說明它們的含義。下面的例子中，運動就是勻速的，可以看到物件在相同的時間間隔中移動了相同的位置。
線性運動
線性動畫在什麼時候會用到？舉個例子，物件僅改變它的顏色和透明度的時候會用到。一般來說，當一個物件不改變它的位置而只是改變狀態時，可以嘗試用線性動畫來改變狀態。
緩入或者說加速曲線
我們可以在曲線上看到，在相同時間內，位置的變化會越來越大。這就說明一個物體是在進行加速運動。
加速運動曲線
這種曲線一般應用在物件移出介面時，這些可能是系統通知，也可能只是介面中的卡片設計。但是記住，這種動畫曲線只是會用在物體移出介面時，而反過來就不適用了。
加速曲線應用在物體移出介面時
動畫曲線有助於表達正確的情緒。在下面的例子中，物體動畫的持續時間和位移大小都是相同的，但你會發現即使是曲線上一些微小的變化也會讓你看動畫的感受不同。
當然，通過改變曲線，可以讓物體的運動顯得更加真實自然。
相同的持續時間和相同的位移變化，但是會有不同的感受
緩出或者說減速曲線
與緩入恰恰相反，物體的運動在開始時位移變化很大，但是後面會越來越小直到最後完全停止。
減速曲線
這種型別的運動曲線通常是用在物體進入介面中時——快速進入螢幕然後再慢慢停下來，在不同卡片或物件從螢幕外進入介面時可以應用上。
減速曲線在此時會讓動畫顯得更加自然
緩入緩出或者說標準曲線
這種曲線使物體有加速和減速的過程。這種型別的動畫在介面中是最常用的，當你還在遲疑該用怎樣的動畫曲線時，選擇標準曲線準沒錯。
標準曲線
根據谷歌規範，建議最好是用一些非對稱曲線來使得物體運動的更加自然真實。動畫的結尾會比動畫的開頭更加需要去強調，這樣的結果是加速時間要小於減速時間。在這個情況下，動畫能夠引導使用者更加關注元素的結束部分，以至於關注到其新的狀態。
注意觀察對稱與非對稱曲線的區別
緩入緩出動畫常被用在介面中物件從一個位置移動到另一個位置時。在這種情況下，動畫的目的是為了不讓人有過多不必要的關注。
卡片的非對稱曲線運動
同樣的情況還適用於，元素在介面中消失後用戶還能隨時顯示，抽屜導航就是這樣的例子。
抽屜導航的收起過程就是應用到了標準曲線
從很多例子中可以看出許多初學者都忽略了一個基本的規則——開始動畫不等同於結束動畫，應該分別去設定，比如在抽屜導航動效中——開啟是一個減速動畫但關閉時卻是一個標準曲線動畫。另外，根據谷歌設計規範，物體出現的動畫持續時間應該略長，以吸引使用者更多的注意力。
側邊欄的動畫是配合減速曲線和標準曲線一起來實現的
有一個立方貝塞爾函式常用來描述這種速度曲線。之所以叫立方是因為它是基於2個點來的。第一個點在座標軸中是（0，0）（左下），最後一個點是（1，1）(右上)。
基於此，我們只需要描述圖上的兩個點，這是由貝塞爾函式的四個引數給出的:前兩個是第一個點的座標x和y，後兩個是第二個點的座標x和y。
為了便於實際工作，我建議使用2個工具網站來操作
https://easings.net/zh-cn http://cubic-bezier.com
第一個包含一些最常使用的曲線列表，可以直接將其複製到原型工具中去。第二個是可以給你自己自定義動畫的曲線，並能實時檢視效果。
不同型別的動畫曲線以及他們不同的引數
動畫在介面中的編排
就像芭蕾舞編排一樣，主要思想是從一個狀態到另一個狀態的過渡引導使用者注意力方向。
一般會有2種編排形式——同級動畫和從屬動畫。
同級動畫
同級動畫意味著所有物件的外觀都服從一個特定的規則。
在這種情況下，所有卡片都按一個相同的流程出現，引導使用者注意力在一個方向上，即從上到下。如果我們不按照這個順序，使用者的注意力就會分散，如果所有元素同時出現也會很糟糕。
使用者的注意力應被引導在一個方向上
至於表格檢視，就會略微有些複雜。這種情況下，使用者往往是以對角線為焦點去看介面的，所以逐個出現的形式也比較糟糕。另外，逐個出現的動畫在時間上也會過長，而且把使用者的注意力引導成鋸齒狀，這是很不友好的。
按對角線出現的表格檢視動畫
從屬動畫
從屬動畫是指有一個核心運動的元素，它吸引使用者所有的注意力，其他元素也都跟隨它的運動。這種型別的動畫會顯得更有秩序感，讓使用者更多的去關注到內容本身。
而在其他情況下，使用者是很難知道他到底要去看哪個元素，注意力很容易被分散。如果要設定多個動畫元素，一定要清楚的知道他的動畫順序，並儘可能的將其他動畫元素弱化。
只賦予一箇中心物件生命是值得的，而所有其他的物件都服從於它。否則，使用者就不知道到底應該注意哪個元素。
根據谷歌規範，當運動物體的大小不成比例地改變時，它們應該沿著弧線而不是直線運動。這有助於使動畫更自然。所謂“不成比例”，是指物體的高度和寬度的增加/減少是不對稱地進行的，即以不同的速度變化(例如，一個正方形變成一個矩形)。
物體的運動如果不成比例，那應該按弧線變化。
當物件按比例改變其大小時，則此時直線運動的形式會更好。由於這種運動形式做起來容易得多，弧線軌跡運動的規律就往往被忽視。在現在很多應用中，我們都能找到這種例子。
等比的物體運動軌跡應該使用直線
曲線軌跡運動也會有兩種實現方式:第一種是開始水平移動，然後以垂直運動結束;第二種是開始垂直移動，然後以水平運動結束。
物體沿曲線移動的路徑必須與滾動介面的方向重合。例如，在下面的例子中，我們可以上下滾動介面，相應地，卡片以垂直的方式展開更合適——先向右，然後向下。
展開/摺疊卡片的方向應與介面的軸線重合
如果物體的運動路徑彼此相交，它們就應該不能穿過對方。物體應該通過減慢或加速自身的速度為另一個物體的運動留下足夠的空間。另一種方式——只是推開其他物體。為什麼要這麼做？因為我們假設介面中的所有物件都位於一個平面上。（譯者注：對於這一點我不是很認同，為了更加真實麼？）
在運動過程中，物體不應該互相穿透，而是為另一個物體的運動留下空間。
在另一種情況下，移動的物體可以通過抬高於其他物體，而不會以溶解或通過其他物體的形式來移動。為什麼?因為我們相信介面上元素的行為應該要符合物理定律，在現實世界中沒有任何實體能夠做到直接穿透對方。
物體可以被抬高於其他元素之上來移動
總結
如果我們總結上述所有的規律和原則，可以得出介面動畫應該要反映物質世界的運動,例如我們都知道的，摩擦，加速等等。模仿現實世界的行為我們可以建立一個優秀的動畫，滿足使用者的心理預期。
一個優秀的動畫，應該是不會那麼刻意，也不會分散使用者對目標的注意力。如果是的話，就需要優化它，或者乾脆把動畫去掉。核心標準是動畫不應該降低使用者執行任務的效率。
但是不要忘記，使用者對動畫的好壞感受，是感性大於理性的。所以，最好是把做出來的動畫給使用者進行評鑑，然後再不斷優化它。