“看不見”的動畫效果

 　　化動畫效果於無形，是動畫效果的最高境界。

　　動效UI無疑已成大勢所趨。但很多設計師對動畫效果本身過於關注，反而忽視了UI設計的核心是完善細節和功能以取悅用戶。2013年，Pasquale D’Silva接受《Web Directions South》訪談，對此有個很不錯的建議。建議如下：

　　動效越不易察覺越好

　　別讓用戶能明顯地意識到“這是個動畫效果呀”。

　　這正是我們Campaign Monitor's郵箱的幕後團隊銘記並踐行的原則：加動畫的目的是提高性能，潤物細無聲地給予用戶恰到好處的反饋體驗。

　　做了一年郵箱，我切實體會了做網頁動畫(區別於原生應用)的紛繁復雜，遠不止是調速，定距，塑形或者設置平滑值。同一個動畫效果在不同的設備和浏覽器顯示得不一樣，有的甚至就不能正常顯示。我們不得不創造更好的用戶體驗環境以迎合平台間的差異性。舉例來說，蘋果為27英寸的iMac設計了許多漂亮又實用的交互動畫，但最終都沒有投入生產，就是考慮到部分用戶會無法忍受這些動效在其他設備上變得生澀卡頓。

　　動畫效果和交互原型在概念和設計階段的方案五花八門，但只有最實用和最高性能的才能投入生產。我們這些人的工作就是篩選出哪個最實用，進一步改進直至無可挑剔。一切的一切都是為了改善用戶體驗。以下展示了篩選歷程：

　　如何出現下拉界面

　　用戶點擊“下拉”按鈕，界面以按鈕為起點淡入。那麼顯然這個界面鏈接自這個按鈕。

　　如何折疊工具條

　　向下折疊其它欄目，就可以展示本欄目相關標題和內容了。在指針經過時給予輕微的延遲效果，同時讓該區域的UI標志顏色淡化，這能很直觀地告訴用戶這塊“圖”可操作。

　　按鈕呈現的狀態

　　等待總令人抓狂。用戶等待接收郵件文檔時，我們可以做個恰如其分動畫效果表示後台是在忙活著的。當然它實質上不能改變收件所花的時間，但確實能讓等待不那麼難熬。

　　添加或復制界面

　　用戶要添加或復制某界面時，一個新的空間迅速從畫面中央淡入視野。非常直觀。

　　刪除界面

　　當你的郵箱裡有太多相似或近乎重復的內容，這個動畫效果就要派上用場了。向上滑動要刪的內容的界面，它就可以消失了。

　　界面控制器

　　用戶的鼠標懸停在界面上時，該界面就會顯示一些控制器。這些控制器從這個界面產生，用戶很容易明白對其的操作是對這個界面的改動。

　　我知道這些動效還有改進空間——內行一眼就可以看出。但為遷就某些設備，我們不能把動畫效果做得太過精致。這很遺憾。不過我們落實了“以人為本”的理念，這點無可挑剔。

　　當下動畫效果摻和進了越來越多的領域——聊天、寫作、交互設計——但這並不意味著你也要給啥都加上動效。像我前面說的，我們團隊如果真做到完美，上文的那些動畫效果，你用郵箱的時候壓根就沒發現。

　　化動畫效果於無形，是動畫效果的最高境界。