關于本文：
原文地址 翻譯地址 譯者：野草
首發于前端早讀課【第851期】

由于動畫的實用性與趣味性，在現代網頁設計中它已經成為了不可或缺的一部分。它可以交流狀態，引導用戶關注，幫助用戶查看行為反饋，甚至影響用戶行為。動畫可以使網站與眾不同，讓人眼前一亮。

本文總結了能改善用戶體驗的八大網頁動畫設計，并用實際例子加以說明。

過程處理

加載動畫

網頁中最常用的動畫莫過于加載動畫了，有趣的加載動畫會減少用戶對時間的感知。

若在減少加載時間上束手無策，請務必保證等待過程輕松愉悅。

加載動畫越簡單越好，額外的效果比如聲音都是不必要的。并且，好的加載動畫是有帶入感的。當用戶等待過程中有事可做的時候，他們就不會等得那么焦急。即使等待時間很短，有趣的加載動畫可以給用戶帶來一些樂趣。

進度動畫

動畫可以直觀地顯示你的進度。加載進度條是最經典的進度動畫。

你也可以用進度動畫來描述在多步驟過程中你進行到哪一步。

占位首屏

占位首屏(Skeleton screen)是當內容尚未加載完之前，用灰色框去占位的空白頁面。當內容逐步加載，灰色占位框被真正的內容替代，再結合動畫會給人內容即將加載完畢的感覺，也遠遠減少了用戶的等待時間。幾乎任何網站都可以用占位首屏加動畫的形式，這過程用戶也是挺有參與感的。

視覺反饋

好的交互設計應該提供顯而易見的反饋，告知用戶行為的結果。為了避免用戶不知道網頁上哪個元素是可交互的，或者都不知道下一步要做些什么，用心地去設計好簡潔且易懂的交互是很重要的。

鼠標懸浮動畫/突出效果（移動端）

鼠標懸浮動畫是最經典的視覺反饋之一。當用戶不確定某個元素的功能時，他會將鼠標移至該元素上試探試探。因此你應該將鼠標懸浮動畫設計地很直觀。

但在移動端沒有鼠標，也就沒有鼠標懸浮效果。你得想其他的辦法來區分可交互元素在點擊前后的區別，給用戶直觀的視覺反饋。反饋會暗示用戶他們的行為已經得到了響應。如下圖中的元素帶有陰影，暗示著該元素可能可以被點擊。當用戶嘗試點擊它后，它下降了。

吸引注意力

不可否認，人類是一群視覺動物。用動畫來吸引用戶注意力和強調用戶行為是再好不過了。

例如，帶上動畫效果的表單填寫可以顯得更加生動形象。如果用戶輸入正確，表單“點頭”表示通過。反之，用“搖頭”來表示您的輸入有誤。配上如此生動的動畫，其中的含義想必用戶一目了然。

導航

關系過渡

目前流行的導航方式為，頁面的左上角或者右上角有個像漢堡形狀的小圖標，點擊它彈出隱藏的導航界面。在這個過程中，如何避免唐突的界面切換，建立兩個狀態之間的聯系就是動畫發揮作用的時候了。出色的動畫切換設計可以讓用戶一眼就能明白應該關注什么。

我們來看Brian Hoff Design網站的首頁。當用戶點擊右上角帶圓的箭頭時，一個放大版的菜單從右側出現。出現的動畫讓人看起來這個菜單本來就在頁面的右側，只是在我們屏幕之外，按鈕點擊之后從右側滑進來，整個過程非常自然。

狀態過渡

在同一頁面中的狀態轉換中動畫過渡顯得至關重要。Adrian Zumbrunnen在他的文章Smart Transitions In User Experience Design中提供了一個非常好的例子，來幫助我們說明動畫在用戶切換同一頁面不同部分的時候如何幫助用戶保持對整個頁面直觀的理解。這個例子呈現的是點擊導航鏈接時，硬生生的切換和過渡的切換二者效果的對比。

顯然，后者的用戶體驗好多了，它能讓用戶清晰地知道目前處于頁面的什么位置。

創意動效

充滿創意的動畫可以大大提升用戶體驗的愉悅感，給用戶留下深刻的印象。它是真正讓界面娛樂用戶的存在。

敘事式滾動

曾經，“首屏至上”(above the fold)規則無可爭議（譯者注：此處的首屏是指打開網址不用滾動頁面就能看到的第一屏內容）。于是，設計師們盡其所能將有價值的信息集中到首屏。所幸，“首屏至上”不完全正確。事實上，當用戶瀏覽一個媒體網站時，66%的注意力是花在首屏以下的內容。這使得滾動交互設計成為了一個不可避免的問題。

動畫讓滾動式的交互充滿了生機和樂趣。

用敘事的滾動動畫給原本死氣沉沉的界面注入了生命力。它不是用非常普通的視覺差動畫，而是用一些更加精致的動畫。比如將網站以“屏”劃分，每屏內用動畫去講生動的故事。下圖例子中，簡單的動畫效果加上滾屏效果使得網站顯得栩栩如生。

總結

設計不僅僅是視覺呈現，它更應該是交互動畫。交互動畫是與用戶交流很重要的手段。我們應該從一開始就要理解網頁設計中交互動畫起到的本質作用，并將動畫交互作為網頁設計中不可分割的一部分。

總結

以上是生活随笔為你收集整理的【译】设计师不可不知的八大网页动画设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。