雖然這些動(dòng)畫元素可能是創(chuàng)造性和有趣的，但它們往往比它們更有價(jià)值。動(dòng)畫是人們添加到網(wǎng)站上的重要元素之一，因?yàn)樗鼈兛雌饋砗芸幔词顾鼈儧]有任何實(shí)際用途。因此，雖然你可以通過一種有吸引力、有品味的方式添加動(dòng)畫元素，甚至支持良好的用戶體驗(yàn)，但重要的是先退一步，了解它們的用途和可能出錯(cuò)的方式。

為什么要使用網(wǎng)站動(dòng)畫？

如果你想在你的網(wǎng)站上添加動(dòng)畫元素，你應(yīng)該能夠?qū)⑺鼈兣c特定的目的聯(lián)系起來。動(dòng)畫的精心組合達(dá)到以下三個(gè)方面之一：

它吸引了人們的興趣。

您希望用戶注意頁面上的元素。也許這是一張互動(dòng)地圖或買家指南。你不應(yīng)該用太多的動(dòng)畫來淹沒你的用戶，以免分散頁面的其他部分，但一個(gè)小動(dòng)畫可以讓你的用戶知道頁面元素不僅僅是眼睛。

它回應(yīng)一個(gè)動(dòng)作。

動(dòng)畫是向用戶發(fā)送操作反饋的有用方法。當(dāng)你喜歡社交媒體上的照片時(shí)，一個(gè)微妙的動(dòng)畫元素會(huì)讓你知道動(dòng)作已經(jīng)完成了。或者你可能會(huì)發(fā)送一條信息，動(dòng)畫會(huì)讓你知道它已經(jīng)成功發(fā)送了。如果郵差猴子沒有告訴我們我們的電子郵件已經(jīng)發(fā)送了，我們會(huì)在哪里？

它發(fā)送通知。

之后，簡短的動(dòng)畫可以提醒我們界面中發(fā)生的重要事情。你忘了填表格上的重要內(nèi)容了嗎？你的收件箱里有新郵件嗎？熟練使用時(shí)，通知動(dòng)畫有助于防止用戶出錯(cuò)。

換句話說，雖然網(wǎng)站動(dòng)畫可以給用戶體驗(yàn)帶來好處，但網(wǎng)站經(jīng)常過度使用這些效果，使它們變得臃腫和功能障礙。在你開始在你的網(wǎng)站上添加它們之前，你應(yīng)該問自己一些問題。

你的動(dòng)畫有用嗎？

這應(yīng)該是你為你的網(wǎng)站做出設(shè)計(jì)決策的黃金標(biāo)準(zhǔn)。有用嗎？如果你做僅僅因?yàn)椋愕木W(wǎng)站的整體感覺就不會(huì)那么引人注目和目標(biāo)驅(qū)動(dòng)。遵循良好的編輯原則，減少長期加載的混亂和摩擦。

您的動(dòng)畫會(huì)影響用戶體驗(yàn)嗎？

在單擊鏈接或閱讀所需信息之前，您必須等待動(dòng)畫嗎？這是一次令人沮喪的經(jīng)歷，但它已經(jīng)變得非常普遍。該網(wǎng)站將使用精心制作的動(dòng)畫來轉(zhuǎn)換頁面。雖然效果可能很酷，但很快就會(huì)消失。有時(shí)用戶只是想實(shí)現(xiàn)他們想要的。后退一步，保持動(dòng)畫完整。

你的動(dòng)畫會(huì)導(dǎo)致輔助功能問題嗎？

一些用戶無法訪問你的網(wǎng)站，比阻礙用戶體驗(yàn)的動(dòng)畫更糟糕。不幸的是，這可能是使用屏幕閱讀器或依賴鍵盤導(dǎo)航的用戶的主要問題。如果網(wǎng)站動(dòng)畫破壞了這些輔助工具的工作模式，則從網(wǎng)站中刪除它們。