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

由于動(dòng)畫的實(shí)用性與趣味性，在現(xiàn)代網(wǎng)頁設(shè)計(jì)中它已經(jīng)成為了不可或缺的一部分。它可以交流狀態(tài)，引導(dǎo)用戶關(guān)注，幫助用戶查看行為反饋，甚至影響用戶行為。動(dòng)畫可以使網(wǎng)站與眾不同，讓人眼前一亮。

本文總結(jié)了能改善用戶體驗(yàn)的八大網(wǎng)頁動(dòng)畫設(shè)計(jì)，并用實(shí)際例子加以說明。

過程處理

加載動(dòng)畫

網(wǎng)頁中最常用的動(dòng)畫莫過于加載動(dòng)畫了，有趣的加載動(dòng)畫會減少用戶對時(shí)間的感知。

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

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

進(jìn)度動(dòng)畫

動(dòng)畫可以直觀地顯示你的進(jìn)度。加載進(jìn)度條是最經(jīng)典的進(jìn)度動(dòng)畫。

你也可以用進(jìn)度動(dòng)畫來描述在多步驟過程中你進(jìn)行到哪一步。

占位首屏

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

視覺反饋

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

鼠標(biāo)懸浮動(dòng)畫/突出效果（移動(dòng)端）

鼠標(biāo)懸浮動(dòng)畫是最經(jīng)典的視覺反饋之一。當(dāng)用戶不確定某個(gè)元素的功能時(shí)，他會將鼠標(biāo)移至該元素上試探試探。因此你應(yīng)該將鼠標(biāo)懸浮動(dòng)畫設(shè)計(jì)地很直觀。

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

吸引注意力

不可否認(rèn)，人類是一群視覺動(dòng)物。用動(dòng)畫來吸引用戶注意力和強(qiáng)調(diào)用戶行為是再好不過了。

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

導(dǎo)航

關(guān)系過渡

目前流行的導(dǎo)航方式為，頁面的左上角或者右上角有個(gè)像漢堡形狀的小圖標(biāo)，點(diǎn)擊它彈出隱藏的導(dǎo)航界面。在這個(gè)過程中，如何避免唐突的界面切換，建立兩個(gè)狀態(tài)之間的聯(lián)系就是動(dòng)畫發(fā)揮作用的時(shí)候了。出色的動(dòng)畫切換設(shè)計(jì)可以讓用戶一眼就能明白應(yīng)該關(guān)注什么。

我們來看Brian Hoff Design網(wǎng)站的首頁。當(dāng)用戶點(diǎn)擊右上角帶圓的箭頭時(shí)，一個(gè)放大版的菜單從右側(cè)出現(xiàn)。出現(xiàn)的動(dòng)畫讓人看起來這個(gè)菜單本來就在頁面的右側(cè)，只是在我們屏幕之外，按鈕點(diǎn)擊之后從右側(cè)滑進(jìn)來，整個(gè)過程非常自然。

狀態(tài)過渡

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

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

創(chuàng)意動(dòng)效

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

敘事式滾動(dòng)

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

動(dòng)畫讓滾動(dòng)式的交互充滿了生機(jī)和樂趣。

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

總結(jié)

設(shè)計(jì)不僅僅是視覺呈現(xiàn)，它更應(yīng)該是交互動(dòng)畫。交互動(dòng)畫是與用戶交流很重要的手段。我們應(yīng)該從一開始就要理解網(wǎng)頁設(shè)計(jì)中交互動(dòng)畫起到的本質(zhì)作用，并將動(dòng)畫交互作為網(wǎng)頁設(shè)計(jì)中不可分割的一部分。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。