動效在UI設計中有哪三個關鍵用途

隨著技術和硬件設備性能的提升，動效已經不再是視覺設計中的奢侈品。動效不僅僅是華麗的動態效果，它首先幫助設計師和用戶解決了許多界面功能上的問題，讓這用戶更容易理解產品，也讓設計師更好的表達。動效本身還讓整個界面更加活潑，充滿生命力，更加自然的相應讓就用戶和界面之間有了情感的聯系。

動效對于UI界面在功能和情感上的強化到底有哪些呢？今天的文章，我們從三個方面來聊聊這件事情。

1、系統狀態

每個APP 為了保證正常的運行，后臺總會有許多進程在進行著，比如從服務器下載數據，初始化狀態，加載組件等等等等。做這些事情的時候，系統總是需要一定的時間來進行的，但是用戶看著靜止的界面并不會明白這些，所以需要借助動效讓用戶明白，后臺還在運行，在處理數據。通過動效，從視覺上告知用戶這些信息，讓用戶有掌控感，是很有必要的。

加載指示器

對于許多數字產品而言，加載是不可避免的。雖然動效并不能解決加載的問題，但是它會讓等待不再無聊。

當我們無法讓加載時間更短的時候，我們應該讓等待更加有趣。

充滿創意的加載指示器能夠降低用戶對于時間的感知。動效會影響用戶對于你的產品的看法，它會讓界面比實際上看起來更好。

如果一個APP在用戶等待的時候，給他們看更有趣的東西，他們自然會忽略等待本身。

下拉刷新

另外一個著名的動效是下拉刷新，當觸發這個動效之后，移動端設備會更新相應的內容。

小貼士：下拉刷新動效應該和整個設計的風格保持一致，如果APP是極簡風，那么動效也應當如此。

通知

由于動效會自然的引起用戶的注意力，所以使用動畫化的方式來呈現通知是很自然的設計，它不會給用戶帶來太多顛覆性的使用體驗。

2、導航和過渡

動效最基本的功用是呈現過渡狀態。當頁面布局發生改變的時候，動效的存在會幫助用戶理解這種狀態的改變，呈現過渡的過程。一個經典的案例就是漢堡圖標呈現隱藏菜單的過渡動效。

動效能夠有效的吸引用戶的注意力，讓用戶在愉悅的氛圍中獲取信息。

雖然漢堡的動效是用戶最期待的，但是能夠強化導航的動效并不只有這么一種。

可導航內容之間的過渡

設計師使用動效平滑地讓用戶在不同的內容之間過渡、切換，而動效也解釋了UI的變化是怎么發生的。

過渡動效是UI不同狀態的中介環節，它幫助用戶理解。

視覺層次和元素的連接

動效可以完美的解釋界面元素之間的關系，并且闡明它們是如何完美的進行交互的。

功能變化

在許多案例當中，設計師會強行設計一個可點擊的按鈕，在特定情況下，功能會發生改變。在移動端設計中，由于屏幕空間的限制，我們常常會看到這樣的按鈕。

“播放”和“暫停”是最常見的多狀態切換的實例。

這類動效展示了用戶在交互的時候，元素是如何發生轉變的。在下面的案例當中，用戶點擊按鈕，加號變為鉛筆圖標。這表明展開后的交互列表中，鉛筆所代表的是首要操作。這樣的小細節呈現出了可預期的下一步交互。

3、視覺反饋

視覺反饋對于任何UI界面都是非常重要的。視覺反饋讓用戶覺得一切都盡在掌握，可以預期，而這種掌握意味著用戶能夠明白和理解目前的內容和狀態。

確認

用戶界面元素，諸如按鈕和控件，應該看起來是可點擊的，即使它們實際上是在屏幕背后。

在我們的現實生活中，按鈕和各種控件都會對我們的交互產生響應。人們期望在界面中獲得類似的反饋。

為了解決這個問題，設計師引入了視覺化的動效來提醒用戶，讓這些虛擬的按鈕看起來能像真實的那樣有反饋。

視覺化地呈現操作后的結果

動效可以強化每一個交互的結果并且提升用戶交互。在下面的Stripe的案例當中，當用戶點擊“支付”的時候，會有一個短暫的過渡動效，這個動效讓用戶更加欣賞這個過程也讓支付顯得更加便捷輕松。

結語

動效的強大之處在于，它將設計以更為成熟的方式呈現出來，它賦予設計以生命力，讓產品脫穎而出。

【這些最佳實踐幫你在UI設計上更上一層樓】

1. 《網頁設計中，如何突破柵格的限制又保持協調？》
2. 《幫你搞定長滾動網頁的設計最佳實踐》
3. 《覺得自己學了假設計？真正的新用戶引導應該這么設計》
4. 《老生常談！設計高素質的UI應該掌握這7個關鍵屬性》
5. 《這8個要點，能讓你的網頁首圖抓住用戶注意力》

原文地址：uxplanet
原文作者：Nick Babich
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com