導語：令人愉悅的動效幾乎已經成為如今網頁設計的標準配置了，融入動效的互動細節讓現代網頁同以往的設計在根本上區別開來。動效不僅可以表現狀態，引導使用者的關注點，幫助用於預測互動的結果，甚至影響使用者的行為。下面是一些常見的動態效果，歡迎參考！
在逐步的探索和發展過程中，動效在網頁和APP中的運用方法與技巧已經逐步成熟，形成了一套相對系統的模式。今天的文章我們通過一系列例項，來展示一下動效是如何改善整個使用者體驗的。
載入動效
動效最常用的一個地方就是進度條。載入進度條的載入動效會改變使用者對於時間的`感知，通過轉移注意力的方式讓使用者等待感降低。
如果你無法將等待的時長縮短，那麼儘量令這個過程有趣。
簡單的載入動效其實比複雜的更好。額外的東西，比如聲音效果就沒有存在的必要了。使用者在有趣的動效上投注了越多的注意力，就越容易忽略等待的過程。
即使載入時間很短，有趣的動效依然能讓這點時間變得好玩。
進度動效
動效還可以用來展示互動或者操作的進度。下面的這個載入進度條就是這類動效的代表：
這個是Aviasales 的進度條。
同樣的，你還可以考慮使用進度條來展示多個不同的步驟：
介面框架
介面框架會將介面載入之後的大概樣式給展示出來，介面框架會讓使用者產生內容一瞬間就載入好了的錯覺。這種動效可以應用在絕大多數的網頁和APP當中，它會明顯強化使用者的參與感。
視覺反饋
將介面反饋視覺化地呈現給使用者是非常實用的.良好的互動設計需要視覺反饋來支撐，傳達互動完成後的結果，讓互動可用、可見、可預期。網站介面中哪些元素可互動如果是不可知的、互動的結果也不可預期，混亂就不可避免了。周密的互動設計可以幫助使用者理解，將這種混亂降到最低。
懸停動效
桌面端互動主要還是藉助觸控板和滑鼠，游標懸停特效很大程度是為這種情況而存在的，同時，它也是最常見的動效之一。
當用戶不知道某個控制元件怎用的時候，會很直覺地將游標移動到上面去，這個時候，懸停特效能夠很好的吸引他們的目光。
移動端由於互動方式的差異，幾乎沒法使用懸停動效。無論是按鈕還是輸入框，當你點選螢幕的時候就已經觸發控制元件了，只能在隨後呈現結果，而無法像懸停動效一樣預覽。
吸引注意力
被運動的事物所吸引，是人類的生物本能。這也使得動效成為了吸引使用者注意力的完美工具。
舉個例子，表單輸入的使用者體驗加入動效就有很大的提升空間。比如你可以在使用者輸入完成或者輸入正確之後，給使用者一個點頭的動效，在輸入錯誤之後左右晃動提供“搖頭拒絕”的動效，人性化地傳遞資訊，使用者也是很容易理解的。
導航
從設計趨勢上來說，越來越多的網站開始選擇使用隱藏式的導航選單，將更多的選項隱藏在漢堡選單之後。而選單的開啟和關閉中肯定需要動效加持來降低突兀的過渡，如果設計的足夠精巧，使用者會立刻被吸引住。
平滑的狀態切換
無論是從一個Tab切換到另外一個Tab，還是介面模式的變化，狀態切換是UI介面中最常見的情況，動效能夠讓狀態切換平滑無比。在《Smart Transitions In User Experience Design》 這篇文章中， Adrian Zumbrunnen 提供了一個很好的粒子，動效是如何幫助使用者理解上下文和狀態變化和不同的部分的。
簡單對比一下下面的兩個案例，就知道生硬的切換和平滑切換之間的差別了。
創意特效
充滿創意的特效總能讓使用者真正難以忘懷，它們的價值在於取悅使用者，讓人記住。
長滾動頁面
不得不說，首屏的設計一直是網頁設計的焦點所在，設計師將注意力集中在這個充滿價值的區域是有道理的。但是頁面餘下的部分同樣很重要，事實上，有個說法是“正常媒體頁面上百分之66%的使用者注意力都在首屏之下”，因此結合了動效的長滾動頁面同樣非常有用。
