知識星球
從我在這個網站上開始寫《Flashless Animation》這篇文章到現在已經兩年了。從那時起，互動動畫已經從像圓潤的APP一樣的使用者介面到互動式雜誌在網站上流行。對網頁互動動畫師、互動開發人員、使用者體驗師、使用者介面設計人員和許多其它與互動動畫有關的人員來說，這是一個多麼令人興奮的時間。
但是匆忙的設計互動動畫，似乎表示我們很少討論是否必須要使用互動動畫，而是更多地討論我們用互動動畫能幹什麼？我們花費很多時間為怎麼以 60fps 使所有東西可以動畫而著急，而不是設計一些方法讓初級使用者避免障礙。
我喜愛網頁動畫，並以它為生。我知道動畫能被濫用，而且我們都拿flash-trubation來娛樂。但是在網頁設計期間積累的教訓，我們忘記它是如此的快啊。視差滾動效應也許是對這原因產生的大概介紹。在Flash和網頁動畫API這一令人深思的時期，我們確實學到了很多。
所以這裡的五點建議，我們可以用於把處於互動動畫濫用邊緣的使用者拉回到高水平上。有這幾點建議在心中，我們可以讓2015的網頁動畫年真正地屬於它自己。
有目的性的使用動畫
很遺憾，大量的Web開發社群認為動畫是裝飾性的。UI設計師和互動開發人員當然理解的更到位。但是當我給一個工作室培訓互動動畫的時候，我知道我的學生是在和一些決策者做艱苦的鬥爭，這些決策者認為有動畫會非常美妙並要求盡可能的在專案的結尾附上動畫，而我的學生則認為不然。
這種觀念差異很難動搖，但是當我們精心做動畫的時候這種觀念差異也許就會消失。附加動畫帶來的危害比益處要多，這點很少被使用者考慮。例如，使用者也許會抱怨動畫太快或者太慢，或者他們不知道動畫在展示什麼。
當我今年參加 Chrome 開發峰會的時候，我有和 Roma Shah 交流的機會，她是 Polymer Material Design 背後的 UX 主管。我問她有什麼建議給在設計當中使用動畫和轉場的設計師。她簡單的回答：有目的地使用動畫。如果你不能慢下來想想如何做互動動畫並代表使用者做一個充分知情和精心製作的決定，那麼你最好不要做這個嘗試。動畫需要花費精力來製作，而一個差勁的動畫比沒有更糟糕。
不止《生活的錯覺》這把書中提到的動畫 12 條準則
我們總是試著在激發我們興趣卻毫不相干的事情之間找到相關性。最近越來越多的人把《生活的錯覺》放在挨著《理解漫畫》這本書的同一個書架上。這些書給我們帶來很多來自其它領域的有用的觀點。然而，我們不應該在網站上犯類似與漫畫書與動畫片的錯誤。雖然它們可以幫助我們用新的角度理解我們的工作，但是這些概念會或多或少產生上述混淆兩者概念的作用。
我一直在慎重地思考《生活的錯覺》，迪士尼動畫工作室的經驗豐富的工程師們在書中提出了動畫十二條準則。這些規則對做動人的、逼真的動畫非常有用，如像彈起的球、蹦跳的松鼠、絢麗的物理極光一樣的頁面轉場動畫。但是什麼時候或者怎樣把一個動畫作為一個大型互動體驗的一部分，這些準則沒有對這些問題做方向性的指導。比如一個下拉操作需要多久才能伸展完畢，或者一組可操作物件是應該按照順序，還是按照整體做成動畫。
這十二條準則僅僅是一個開始地方，除此之外我們還有其它很多東西要學習。我已經寫過至少六條應用到web和app的設計互動動畫功能。當我們思考做互動動畫時，我們不僅僅考慮做什麼動畫、動畫的物理學，還要考慮為什麼要做動畫，怎樣做動畫。如果動畫是多餘的或者令人費解的，再嚴密的物理設計也是徒勞的。
有用、有必要，然後是漂亮
有一句行內話：除非一個動畫既是必須又是有用的，要不然不要做它；如果它既是必須的，又是有用的，那就毫不猶豫去把它做漂亮。當說到動畫和網頁，目前很少有文章寫什麼樣的動畫是有用或者必要的。我們大部分都是傾向於做漂亮、令人愉快、令人有趣的動畫。雖然動畫的外觀漂亮很重要，但是外觀是僅次於使用者的整體體驗的。
第一次我在掌機看到黃色口袋妖怪的開機動畫時，我被迷住了。到了第六次的時候，當Freak的遊戲圖示出現在螢幕上時，我被開始按鈕搞的厭煩了。當我們在做設計的時候，令我們高興和有意義的東西對使用者來說卻是未必的。像黃色口袋妖怪令人欣喜的開機動畫一樣，純粹令人愉快的動畫即使是被使用者欣然的接受，但是太多次的重覆卻最終無意義的動畫，使用者就會慢慢對該動畫產生厭惡之情。
如果一個動畫不能在某種方式上幫助使用者，如讓使用者知道他們在網站的什麼位置或者一個頁面上的兩個元素是如何彼此相關的，那麼它是在耗費電池併在不停地產生僅僅令使用者高興的效果。資源很少得到合理的利用。
動畫不是僅僅為了令使用者高興，首先，我們必須能讓動畫給使用者清晰的表達兩個意思。以從 Finethought.com 網站上這個選單圖示為例。當我們點選這個選單圖示時，它向我們表達了兩個意思。
1.這個選單按鈕用動畫給使用者以反饋，錶面這個圖示已經被點選了。
2.這個選單按鈕表明透過點選關閉圖示，頁面的內容將會發生改變。
假定我們有兩個好的理由來做互動動畫，那麼就會有理由來取悅使用者。
以四倍速度讓動畫更快
有一個傳統動畫的概覽法適合於網頁動畫：不管你的動畫應該持續多久，把動畫的持續時間減半，然後再減半。當我們設計動畫幾個小時之後，我們對時間的感覺會變長。對我們來說速度很快的動畫，對大部分使用者來講已經到了無法忍受的慢。事實上，最近來自於使用者對網站動畫介面的絕大數批評似乎是：“它太慢了。”一個好的動畫是不唐突的並且速度是非常快的。
如果讓你的動畫持續時間處於一個最佳值，那麼請把動畫持續時間減少到原來的四分之一。
安裝一個關閉開關
不管一個動畫是多麼的富有見解和必要性，總有一些人對動畫不感冒。對這些人來說，我們必須增加一種方式來讓他們關閉網頁上的動畫。
幸運的是，網頁設計師已經在考慮賦予使用者一些自己做決定來改變網頁體驗的權力。以下麵的動畫為例，這個《小魚商店》的動畫電影網站允許使用者關閉視差效果。雖然它不能移除全部動畫，但是這個網站確實減少了動畫的視覺給使用者帶來的頭暈的感覺。
在我們網頁設計的工具庫中，動畫是一個強有力的工具。但是我們必須小心：如果我們濫用動畫，動畫也許會帶來不好的效果；如果我們低估動畫，它就不能完全發揮它的作用。但是如果我們恰到好處的使用動畫，當既有必要又有用的使用動畫，賦予使用者關閉的動畫的權力，那麼動畫會變成一個幫助我們建造一些用起來簡單、帶給我們快樂的東西。
讓我們把2015的網頁動畫年帶給使用者吧！
原文出處：24ways.org
譯文出處：伯樂線上 – Abel
連結：http://web.jobbole.com/82345/