令人愉悅的動效幾乎已經成為如今網頁設計的標準配置了，融入動效的互動細節讓現代網頁同以往的設計在根本上區別開來。動效不僅可以表現狀態，引導多使用者的關注點，幫助用於預測互動的結果，甚至影響多使用者的行為。

　　在逐步的探索和發展過程中，動效在網頁和 WordPress APP 中的運用方法與技巧已經逐步成熟，形成了一套相對系統的模式。今天的文章我們透過一系列例項，來展示一下動效是如何改善整個多使用者體驗的。

　　載入動效

　　動效常用的一個地方就是進度條。載入進度條的載入動效會改變多使用者對於時間的感知，透過轉移注意力的方式讓多使用者等待感降低。

　　簡單的載入動效其實比複雜的更好。額外的東西，比如聲音效果就沒有存在的必要了。多使用者在有趣的動效上投注了越多的注意力，就越容易忽略等待的過程。

　　即使載入時間很短，有趣的動效依然能讓這點時間變得好玩。

　　進度動效

　　動效還可以用來展示互動或者操作的進度。下面的這個載入進度條就是這類動效的代表：

　　介面框架

　　介面框架會將介面載入之後的大概樣式給展示出來，介面框架會讓多使用者產生內容一瞬間就載入好了的錯覺。這種動效可以應用在絕大多數的網頁和 WordPress APP 當中，它會明顯強化多使用者的參與感。

　　視覺反饋

　　將介面反饋視覺化地呈現給多使用者是非常實用的. 良好的互動設計需要視覺反饋來支撐，傳達互動完成後的結果，讓互動可用、可見、可預期。網站介面中哪些元素可互動如果是不可知的、互動的結果也不可預期，混亂就不可避免了。周密的互動設計可以幫助多使用者理解，將這種混亂降到低。

　　懸停動效

　　桌面端互動主要還是藉助觸控板和滑鼠，遊標懸停特效很大程度是為這種情況而存在的，同時，它也是常見的動效之一。

　　當多使用者不知道某個控制元件怎用的時候，會很直覺地將遊標移動到上面去，這個時候，懸停特效能夠很好的吸引他們的目光。

　　移動端由於互動方式的差異，幾乎沒法使用懸停動效。無論是按鈕還是輸入框，當您點選螢幕的時候就已經觸發控制元件了，只能在隨後呈現結果，而無法像懸停動效一樣預覽。

　　長滾動頁面

　　不得不說，屏的設計一直是網頁設計的焦點所在，設計師將注意力集中在這個充滿價值的區域是有道理的。但是頁面餘下的部分同樣很重要，事實上，有個說法是 “正常媒體頁面上百分之 66% 的多使用者注意力都在屏之下”，因此結合了動效的長滾動頁面同樣非常有用。

　　動效讓滾動式的互動充滿了趣味。

　　動畫能夠讓長滾動頁面所承載的故事更加鮮活有意思，相比於炫酷的動效，微妙的動效給人的感覺更加到位。您可以將您的網站設計成可滾動的 “區塊”，每個區塊中呈現不同的內容，下面的案例就是這麼做的：

　　結語

　　動效拓展了介面的視覺維度，它連線互動，讓介面的功能和效果都更加圓融。