一篇很不錯的文章，所以轉載了一下。文末有文章出處。
動畫效果會講故事。但不是冗長和完整的故事，而是簡單的故事，比如“嗨，你現在該看這里了”或者“哇，你的操作完全正確。”然而，動效的目的不是為了愉悅用戶，而是為了幫助理解操作會有什么進展亦或是提高用戶使用APP的效率。這一點我們可以在 Zurb 的陳述里證實。
我們不僅僅只是設計圖形界面。我們設計的是用戶與他們的屏幕如何互動。
或許動畫效果應用在廣范圍的背景來構建美學與功能的統一：動效能夠影響用戶行為，溝通狀態，引導用戶的注意力以及幫助用戶看到自己動作的反饋。這里有一些例子說明你可以在界面的什么地方增加動畫效果來提升用戶體驗。
加載不能太無聊
你應該嘗試讓等待變得愉悅，如果你不能縮減等待時間的話。動效可以代替煩人的轉啊轉啊轉（這基本上只是提醒用戶他們正在等待）。幾乎任何網頁或者應用都可以利用屏幕框架和巧妙的動畫來維持用戶的興趣。
在頁面完全加載完之前用屏幕框架遞增的方式完成
狀態切換不能太生硬
動畫效果可以讓過渡更加顯著，所以當用戶開始和結束，動畫效果要能展示到底發生了什么。好的過渡設計會讓用戶清楚的明白自己的注意力應該往什么地方放。
Adrian Zumbrunnen 舉了一個關于當用戶點擊鏈接的時候，滾動動畫是如何幫助用戶保持所在的環境的好例子。只要比較靜止的那一瞬間的變化就能明白切換的感覺就像硬切一樣：
突然，不自然地就改變了，這樣的界面切換對用戶來說是非常不舒服的
有動畫效果動作時：
動效給畫面帶來生氣
解釋元素之間的關系
動畫可以提升用戶直接操作的感覺。
舉個例子，一個菜單按鈕平滑過度變成播放控制，再變回來。這個效果會告知用戶這個按鈕的功能，當用戶不太明白這個交互的作用時候。播放按鈕轉變正暫停表明這兩個動作是有關系的，當其他元素出現的時候它們是不存在的。
這個例子里，動畫用來引導眼鏡去看屏幕的中心也就是音樂控件的位置。
另外一個例子，當按下浮動按鈕的時候，加號就會變成一支筆。這說明筆是最主要的創作方式。一個小小的細節也能顯示出接下來會發生什么，讓用戶明白不同情況下標識的含義之間的不同。
錯誤的操作必須有鮮明的反饋
動畫可以加強用戶習慣的的操作。
舉個例子，表上登記的項目可以極大的增強一些動畫。如果正確的數據允許登錄，一個簡單的“點頭”的動畫可以解釋這一點。而水平的抖動可以用來表示未輸入或者輸入錯誤。當用戶注意到動畫的時候他們立刻就能明白這個動作的含義是什么。
圖中展現的是最基本的抖動形式
利用反饋來展現動作完成
動畫可以幫助用戶明白他們操作之后的結果。根據“別說，展現出來”的原則，你可以用動畫反饋展示出到底完成了什么。
下面的例子中，當用戶點擊“付款”，一個簡單的旋轉加載出現在APP支付成功的情況下。對號標志動畫讓用戶覺得很輕松的付了款并且用戶會感謝這些重要的細節。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊更新＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
用戶界面應該在用戶點擊輸入框時，就準確及時地給予響應，表現出上一界面和當前界面的關系，以及哪些元素和操作導致了當前界面的出現。用戶通過點擊應用程序總是能知道發生了什么，這感覺很好。
（元素對用戶的操作意圖給出了合適的回應）
當元素在位置或狀態之間移動時，運動應該足夠簡潔快速，不要造成用戶的等待，同時又能保證過渡動效能夠被用戶所察覺并理解。
避免過慢的動畫，因為它會造成不必要的遲緩并增加完成操作的耗時。
清晰
避免在一次動效中做多件事情，因為當多個項目需要在不同的方向或交叉路徑移動時，它們就會變得很混亂，讓用戶暈頭轉向。
（錯誤方式）
過渡應該是清晰的，簡潔的，連貫的。關于動效，請記住少即是多。因此，我們應該只關注動效對用戶的實際價值。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ** 更新**＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
1.為用戶操作提供視覺反饋
良好的交互設計應該給用戶的每一個操作都提供反饋，無論成功與否。反饋會使用戶覺得自己與屏幕上的元素進行真實互動。功能性動畫可以直觀的演示出這種互動。即便隔著屏幕，也能讓用戶看起來是在直接操作。
而作為系統，當你需要向用戶通知操作的結果時，功能性動畫也是一個很不錯的選擇。當操作沒有成功的時候，功能性動畫可以給用戶一個快速而有簡潔的一個反饋。例如，當我們輸入密碼錯誤的時候，我們采用來回晃動的效果。這個效果會讓我們聯想到日常生活中的擺手和搖頭，而這些都代表著“no”。這些小細節的使用，是打造良好用戶體驗的關鍵。
目的：
確認系統接收到用戶的操作
確認（或拒絕）用戶的行為
2.當前狀態的指示器
給系統當前所處狀態提供一個視覺指引是交互設計中最重要的一點。我們應該讓用戶隨時隨地知道系統當前所處的狀態，而不是讓用戶去猜。
數據的上傳與下載就是一個很好的例子。例如，加載動畫會告訴用戶系統正在下載數據，而且還顯示了下載進程與速度，用戶也對完成時間有了一個大致的期望。
當系統狀態發生重要的變化時，功能性動畫也可以用來提醒用戶。例如，來電提示。
或者，新短信提示。
目的：提供實時通知系統狀態，并讓用戶了解正在發生什么。
3.提示
當用戶第一次使用你的app的時候，如果沒有幫助的話，他們可能會不知道如何操作。
我們應該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。功能性的動畫可以提示用戶去注意那些可以完成的操作。視覺提示可以給用戶告知即將發生的事情。例如，iOS7中相機的這個拍攝動畫。
當一些操作用戶不是很容易發現時，功能性動畫可以演示出操作步驟。
目的：
通過給用戶一些線索來創造期望；
幫助用戶更好的關注界面；
告訴用戶如何能夠和應該與界面上的元素進行交互。
4.導航欄的過渡
導航欄的的轉換是指app中導航菜單狀態的變換。有不同級菜單之間和同級菜單之間的轉換。我們要盡可能的減少那些令人意想不到的過渡效果。功能性動畫可以解釋菜單之間的層級關系，用戶明白菜單轉換的過程中到底發生了什么。
同級轉換發生在同一層級間元素的轉換。
功能性動畫可以聚焦用戶的視覺焦點于轉換的元素上，用戶了解整個轉換過程中新的元素來自那里，舊的元素在哪里隱藏。它提供了視覺線索，增加了交互的可用性。
目的：
闡明界面和元素之間的空間關系；
通過幫助用戶理解頁面中發生的變化，避免了令人意想不到的過渡。
5.營造品牌效應
市場上有很多同類型的app，他們有著相同的功能，可能都有著不錯的用戶體驗。但是那些脫穎而出的app肯定在用戶體驗上走得更遠—建立與用戶之間的感情聯系。
功能性動畫可以成為一個產品的營銷工具，用來表現一家公司的品牌價值或者突出產品的優勢。同時給用戶一種愉快又難忘的用戶體驗。比如Lo-Flo Records網站中，這個動畫會鼓勵用戶進行操作，每一幀都精美的圖案會讓他們期待接下來會看到什么。
用戶比我們預想中更能注意到頁面中的細節，動畫作為一種交互元素可以向用戶傳遞一種情感。一個風格活潑可愛的下拉加載動畫可以給用戶帶來一個愉快的用戶體驗。
目的：
娛樂用戶，在用戶之間產生情感共鳴；
創建產品特征；增加品牌意識。
如何達到平衡
頁面中每一個動畫都應該具有相應的功能，作為一個"花瓶"用來充當美化頁面的動畫不僅無法提升用戶體驗，而且動畫會降低頁面的加載速度。比如下方的一個電子收據動畫，這個動畫看起來很酷炫，但是它的存在使得用戶需要4秒鐘才能看到交易細節。這個等待時間顯然超過了用戶的心里預期。
用戶點擊進入網站或者使用app是帶有目的性的，他們肯定是為了解決特定的需求。搶火車票，看nba比賽亦或者是買一雙皮鞋。這時候我們的動畫應該幫助用戶了解這個產品的空間構架，幫助他們更快的了解，更好的操作。動畫如果做的太過于絢麗，反而會分散用戶的注意力。只有當動畫有了意義，用戶才不會分心。
再好的動畫被過度使用后，也會讓用戶感覺很厭煩。當我們設計一個動畫的時候，要問自己，“當這個動畫第100次出現的時候，用戶會討厭還是直接無視？”
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 更新 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
還可以加入動畫和動效。
圖片來源：Behance
三、卡片的優勢
總結
當動效使用的非常成熟了時候，它是非常有用的。這對與時間安排以及考慮一個動畫是否是有效的是非常重要的。我們需要從開始就接受動畫效果，并且考慮這對于我們設計來說是否自然，因為設計不僅僅只是視覺的展示。就像喬布斯曾經說過一樣：設計不只是看起來及摸起來像什么，設計是如何運作。
