【譯】設(shè)計師不可不知的八大網(wǎng)頁動畫設(shè)計
時間：2023-10-05 07:36:01 | 來源：網(wǎng)站運營
時間：2023-10-05 07:36:01 來源：網(wǎng)站運營
【譯】設(shè)計師不可不知的八大網(wǎng)頁動畫設(shè)計：關(guān)于本文：
原文地址翻譯地址 譯者：野草
首發(fā)于前端早讀課【第851期】
（動畫效果請點擊查看以上幾個超鏈接，本站好像不支持！?。。?/i>由于動畫的實用性與趣味性，在現(xiàn)代網(wǎng)頁設(shè)計中它已經(jīng)成為了不可或缺的一部分。它可以交流狀態(tài)，引導(dǎo)用戶關(guān)注，幫助用戶查看行為反饋，甚至影響用戶行為。動畫可以使網(wǎng)站與眾不同，讓人眼前一亮。
本文總結(jié)了能改善用戶體驗的八大網(wǎng)頁動畫設(shè)計，并用實際例子加以說明。
過程處理
加載動畫
網(wǎng)頁中最常用的動畫莫過于加載動畫了，有趣的加載動畫會減少用戶對時間的感知。
若在減少加載時間上束手無策，請務(wù)必保證等待過程輕松愉悅。
加載動畫越簡單越好，額外的效果比如聲音都是不必要的。并且，好的加載動畫是有帶入感的。當(dāng)用戶等待過程中有事可做的時候，他們就不會等得那么焦急。即使等待時間很短，有趣的加載動畫可以給用戶帶來一些樂趣。
進度動畫
動畫可以直觀地顯示你的進度。加載進度條是最經(jīng)典的進度動畫。
你也可以用進度動畫來描述在多步驟過程中你進行到哪一步。
占位首屏
占位首屏(Skeleton screen)是當(dāng)內(nèi)容尚未加載完之前，用灰色框去占位的空白頁面。當(dāng)內(nèi)容逐步加載，灰色占位框被真正的內(nèi)容替代，再結(jié)合動畫會給人內(nèi)容即將加載完畢的感覺，也遠遠減少了用戶的等待時間。幾乎任何網(wǎng)站都可以用占位首屏加動畫的形式，這過程用戶也是挺有參與感的。
視覺反饋
好的交互設(shè)計應(yīng)該提供顯而易見的反饋，告知用戶行為的結(jié)果。為了避免用戶不知道網(wǎng)頁上哪個元素是可交互的，或者都不知道下一步要做些什么，用心地去設(shè)計好簡潔且易懂的交互是很重要的。
鼠標懸浮動畫/突出效果（移動端）
鼠標懸浮動畫是最經(jīng)典的視覺反饋之一。當(dāng)用戶不確定某個元素的功能時，他會將鼠標移至該元素上試探試探。因此你應(yīng)該將鼠標懸浮動畫設(shè)計地很直觀。
但在移動端沒有鼠標，也就沒有鼠標懸浮效果。你得想其他的辦法來區(qū)分可交互元素在點擊前后的區(qū)別，給用戶直觀的視覺反饋。反饋會暗示用戶他們的行為已經(jīng)得到了響應(yīng)。如下圖中的元素帶有陰影，暗示著該元素可能可以被點擊。當(dāng)用戶嘗試點擊它后，它下降了。
吸引注意力
不可否認，人類是一群視覺動物。用動畫來吸引用戶注意力和強調(diào)用戶行為是再好不過了。
例如，帶上動畫效果的表單填寫可以顯得更加生動形象。如果用戶輸入正確，表單“點頭”表示通過。反之，用“搖頭”來表示您的輸入有誤。配上如此生動的動畫，其中的含義想必用戶一目了然。
導(dǎo)航
關(guān)系過渡
目前流行的導(dǎo)航方式為，頁面的左上角或者右上角有個像漢堡形狀的小圖標，點擊它彈出隱藏的導(dǎo)航界面。在這個過程中，如何避免唐突的界面切換，建立兩個狀態(tài)之間的聯(lián)系就是動畫發(fā)揮作用的時候了。出色的動畫切換設(shè)計可以讓用戶一眼就能明白應(yīng)該關(guān)注什么。
我們來看Brian Hoff Design網(wǎng)站的首頁。當(dāng)用戶點擊右上角帶圓的箭頭時，一個放大版的菜單從右側(cè)出現(xiàn)。出現(xiàn)的動畫讓人看起來這個菜單本來就在頁面的右側(cè)，只是在我們屏幕之外，按鈕點擊之后從右側(cè)滑進來，整個過程非常自然。
狀態(tài)過渡
在同一頁面中的狀態(tài)轉(zhuǎn)換中動畫過渡顯得至關(guān)重要。Adrian Zumbrunnen在他的文章Smart Transitions In User Experience Design中提供了一個非常好的例子，來幫助我們說明動畫在用戶切換同一頁面不同部分的時候如何幫助用戶保持對整個頁面直觀的理解。這個例子呈現(xiàn)的是點擊導(dǎo)航鏈接時，硬生生的切換和過渡的切換二者效果的對比。
顯然，后者的用戶體驗好多了，它能讓用戶清晰地知道目前處于頁面的什么位置。
創(chuàng)意動效
充滿創(chuàng)意的動畫可以大大提升用戶體驗的愉悅感，給用戶留下深刻的印象。它是真正讓界面娛樂用戶的存在。
敘事式滾動
曾經(jīng)，“首屏至上”(above the fold)規(guī)則無可爭議（譯者注：此處的首屏是指打開網(wǎng)址不用滾動頁面就能看到的第一屏內(nèi)容）。于是，設(shè)計師們盡其所能將有價值的信息集中到首屏。所幸，“首屏至上”不完全正確。事實上，當(dāng)用戶瀏覽一個媒體網(wǎng)站時，66%的注意力是花在首屏以下的內(nèi)容。這使得滾動交互設(shè)計成為了一個不可避免的問題。
動畫讓滾動式的交互充滿了生機和樂趣。
用敘事的滾動動畫給原本死氣沉沉的界面注入了生命力。它不是用非常普通的視覺差動畫，而是用一些更加精致的動畫。比如將網(wǎng)站以“屏”劃分，每屏內(nèi)用動畫去講生動的故事。下圖例子中，簡單的動畫效果加上滾屏效果使得網(wǎng)站顯得栩栩如生。
總結(jié)
設(shè)計不僅僅是視覺呈現(xiàn)，它更應(yīng)該是交互動畫。交互動畫是與用戶交流很重要的手段。我們應(yīng)該從一開始就要理解網(wǎng)頁設(shè)計中交互動畫起到的本質(zhì)作用，并將動畫交互作為網(wǎng)頁設(shè)計中不可分割的一部分。
在線咨詢