在我們的生活中，對按鈕會有按下去的反應。可以預測在數字接口使用方法也是一樣的，進行會有怎樣的反應的預測是十分重要的。
操作結果的可視化
按照基本規則，使用動畫進行反饋，你可以很好的強調什么操作是錯誤的。
例如，如果你輸入密碼錯誤，讓我們添加一個左右抖動的視覺動畫吧。像【出錯啦，請再試一次】這樣，左右搖頭的效果。當用戶看到這些動效后，可以立即了解當前的狀況。
另外，您還可以強化用戶當前正在運行的動作。在下面的例子中，當用戶點擊提交按鈕，在成功之前通過一點點加載動畫來顯示。加載對號的動效，使用戶感覺過程已經成功完成。
02.抑制狀態的變化
至于添加動效最好的地方，就是讓【變化的瞬間】變得引人注目。用戶界面狀態的變化，特別是網站上突然的變化，很難讓用戶理解當前究竟發生了什么。在這變化的瞬間，就可以在UI中添加動效進行緩和。
建立連接
動畫的變化，能向用戶接口展示各種各樣的狀態，作為一個如同中介一樣的角色，幫助用戶理解當前正在發生著什么。用戶只需跟隨動效，就能夠理解2個UI狀態之間究竟有著怎樣的聯系。
另外，也可以利用他顯示縮略圖和詳細信息。
這張動畫卡片，是通過點擊將重疊的詳細信息進行展示，它清楚地表明了是同一個項目。
注意變化
當一個新的對象已經公開時網頁上的按鈕點不動，動效有助于我們在被掩蓋的信息中清楚的找到它。比如通過滑動打開內容來隱藏信息，你可以在需要關注時用到這種變化效果。
在下面的案例中，當您單擊漢堡包圖標時，導航菜單用幻燈片展示。通過這種動作，用戶就可以明白，導航菜單不會消失。
03.系統狀態的可視化
作為Jakob 為了可用性推導出來的答案之一，系統狀態的可見性仍然是用戶界面設計中最重要的原則之一。對于用戶來說，把握理解系統當前的狀況，是非常重要的。
進度條
上傳和下載數據的過程是采用功能性動效的一個很好的機會。有動效的加載欄，可以直觀的看到動作加載完成預計還要多少時間。
另外，當操作未能成功進行時，動效也很有用。例如在下載失敗的時候，你就需要考慮如何讓失敗畫面看起來比較舒服。
下拉刷新
用戶的等待時間是從動作開始的瞬間開始，最糟糕的情況是不知道系統是否收到指示。
下拉刷新這一技術，讓我們嘗試在操作瞬間作出反應。告訴用戶你的進程已經開始，最重要的是給與用戶視覺反饋，在這里使用動畫將非常有幫助。
請用心去腦補火箭刷的一下就上天了好厲害好厲害這樣一幅畫面，我盡力了，老馬不讓我傳這張gif我也很絕望啊！
04.解說動畫
有時，用戶需要一些額外的幫助來了解用戶流程或如何與某些界面元素進行交互。對于包含用戶的新的或不熟悉的功能或交互的用戶界面尤其如此。
新手上路
用戶入門需要一個完美的UX，第一次看到的操作動畫對于首次使用者如何與應用程序進行互動有著巨大的影響。無論多么復雜的東西，動畫都能通過有趣的方法傳達出來。他有著無限的可能性。
視覺提示
動畫可以提供一些易于理解的視覺線索。解說動畫，通常是在網頁第一次被打開時看到，通過動畫可以表現頁面上特定的要素在什么情況下可以使用。
這種類型的動畫，通過故事的進行漸漸的看到全體的效果網頁上的按鈕點不動，在游戲中經常被利用。只有當用戶自己的經驗到達一個點的時候，才會觸發這個提示。
最后
動畫是一個復雜而強有力的工具。
我們需要從一開始就采納這種效果，并將其視為我們設計的自然部分，因為設計不僅僅是視覺呈現。正如史蒂夫·喬布斯談到設計時所說的：設計不僅是外形和感覺,設計關乎如何運作。
關注『UI設計達人』
看更多精選UI設計文章
↓↓↓