2016-11-1 用心設計
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
來源：UI中國
圖片來源：Barthelemy Chalvet
如何利用動效提升用戶體驗
動畫可以講述故事。不是很長很復雜而是很簡單的故事，而像是 "嘿，你現(xiàn)在要看看這個！" 或 "哇，你競爭成功了！"。然而，動效的目的不是娛樂用戶，而是幫助他們理解發(fā)什么什么事，或者如何有效的使用你的軟件。在Zurb的敘述中很清晰的表明了：
我們不再是設計靜態(tài)的屏幕，用戶將會從我們的設計中看到實際的內容。
動效可以廣泛用于統(tǒng)一美感和功能的平衡，它可以影響行為、溝通狀態(tài)、引導用戶和幫助他們查看自己行為的結果。下面是一些例子，是在一些方面可以增加動效改進UI的經驗：
加載不再無聊
如果你不能縮短加載時間和無聊的旋轉圖標（基本上只是提醒用戶正在等待），那么可以用動效代替等待的時間，應該盡力讓等待變得更加愉快。幾乎任何網站或者app會利用屏幕的線框圖上微妙的動效讓用戶在等待期間參與進來。
屏幕線框圖在內容完全加載之前完成UI。圖片來源：tandemseven
不能削減設計狀態(tài)的變化
動效可以使轉換更加明顯，用戶明確知道開始到結束發(fā)生了什么。一個好的過渡設計會讓用戶清楚的理解他們的注意力應該在什么地方。
Adrian Zumbrunnen上有個很好的滾動動畫的例子，當用戶點擊一個鏈接時，幫助用戶聯(lián)系上下文。只是一個普通的靜態(tài)頁面感覺會很生硬：
直接切換感覺很不自然，用戶很難接受這種變化。圖片來源：smashingmagazine
帶有動效的行為：
動效就是貼近生活。圖片來源：smashingmagazine
如你所見，轉換幫助用戶加快理解界面。它還可以引導用戶下一步的交互。
解釋元素之間的關系
動效可以增強直接操縱的感覺。
例如，一個菜單圖標和一個播放控制圖標可以來回切換。這種動效應該在添加交互時通知用戶按鈕的功能。轉換播放圖標到暫停，意味著這兩個圖標是連接著的，當一個存在時另一個不存在。
在這個情況中，屏幕中控制音樂的位置的動效很吸引眼球。圖片來源：Material Design
另一個例子，當按下浮動按鈕時，加號變成一支鉛筆。這表明了鉛筆是主要的操作。這個小細節(jié)在猜測接下來發(fā)生什么和圖標在不同狀態(tài)下的含義總是不同的。
圖片來源：Material Design
用動效反饋來說明問題
動效可以增強用戶的操作。
例如，表單輸入可以用動效進行增強。如果輸入正確可以用一個簡單的點頭動效。而當輸入不正確則水平搖晃。當用戶注意到這個動效就會立刻理解行為。
形式上在在向你搖頭。圖片來源：Micha?l Villar
用動效反饋老展示已經完成
動畫可以幫助人們理解他們行為的結果。遵循的原則："展示，而不是說。"，你可以用動效反饋已經完成。
在下面的例子，當用戶點擊"支付"，一個短暫的轉輪顯示成功的狀態(tài)。檢查動效讓用戶覺得他們容易的進行了支付，他們希望有這樣重要的細節(jié)。
圖片來源：Micha?l Villar
總結
在一個復雜的情況下動效是很強大的。花時間考慮動效的存在是很重要的。我們需要從研究運動開始，考慮設計中必須的動效，因為設計不僅僅是視覺的呈現(xiàn)。就像Steve Jobs 說過關于設計的一句話：
設計并非外觀怎樣或者感覺如何。設計是解決它是怎樣工作的。
謝謝你們。
原文地址：https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.8z12f07cx
作者地址：https://uxplanet.org/@101
藍藍設計( www.payeee.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務