動畫是一種給網(wǎng)站帶來生機(jī)的有趣的方式。如果使用得當(dāng)，它可以吸引觀眾的注意力，使你的網(wǎng)站更有吸引力，甚至提高你為客戶提供轉(zhuǎn)換的機(jī)會。

不幸的是，就像網(wǎng)頁設(shè)計(jì)世界中的許多事情一樣，動畫也很容易讓人忘乎所以。作為專業(yè)的設(shè)計(jì)師和開發(fā)者，我們需要在網(wǎng)站項(xiàng)目中充分利用動畫和創(chuàng)建一個充斥著太多活動的網(wǎng)站之間找到一條分界線。

幸運(yùn)的是，當(dāng)您閱讀完這篇文章時，您將對如何在web設(shè)計(jì)中使用動畫有一個更深入的了解，而不會太過深入。

介紹網(wǎng)頁設(shè)計(jì)中的動畫

今天，動畫在網(wǎng)絡(luò)上幾乎無處不在。

在過去，當(dāng)設(shè)計(jì)師第一次發(fā)現(xiàn)他們可以在他們的網(wǎng)站中嵌入移動時，我們看到的動畫量往往比需要的要高。有些網(wǎng)站完全使用Flash，所有元素都可以動畫化，這并不少見。

幸運(yùn)的是，現(xiàn)代網(wǎng)頁設(shè)計(jì)的趨勢已經(jīng)把這些做法拋在腦后了。如今，將動畫作為整體用戶體驗(yàn)的一部分，而不是將其作為吸引用戶注意的核心部分，這種做法更加普遍。例如，你可能已經(jīng)注意到在圖庫中有大量的動畫滑塊顯示圖片，或者當(dāng)人們懸停在一個按鈕上時的過渡動畫。

因?yàn)橥耆珱]有動畫是完全有可能構(gòu)建一個完整的網(wǎng)站的，所以今天創(chuàng)建一個吸引人的網(wǎng)站的關(guān)鍵是確保你使用的每個動畫都服務(wù)于特定的目的。你的動畫應(yīng)該使網(wǎng)站更有吸引力，更容易使用，更好的導(dǎo)航。添加太多，甚至可能會降低站點(diǎn)的速度。

那么，在網(wǎng)頁設(shè)計(jì)中使用動畫有什么意義呢?

1. 加載動畫

在網(wǎng)站中使用動畫的最好方法之一是在頁面加載時分散用戶的注意力和樂趣。你可以用動畫來傳遞一種獨(dú)特的體驗(yàn)，甚至只是突出你的品牌好玩的本質(zhì)。例如，看看這個名為“Tightrope”的經(jīng)典加載動畫。

你也可以使用粒子動畫之類的東西來捕捉客戶的注意力，并幫助你的訪問者在訪問網(wǎng)站時放松。粒子動畫可以是交互式的，也可以是非交互式的。當(dāng)頁面加載時間過長時，粒子動畫可以很好地防止訪問者感到沮喪。

一個名為“粒子之愛”的網(wǎng)站向你展示了你可以用實(shí)時動畫創(chuàng)造什么樣的體驗(yàn)。

你越能讓訪問者在他們需要的信息正在載入的時候沉浸其中，他們就越不可能點(diǎn)擊“返回”按鈕。

2. Microinteraction動畫

微交互是一種快速而簡單的動畫，帶有特定的用例。通常，當(dāng)您與特定元素交互時，該動畫會提供視覺反饋和信息。

例如，Colin Garven的微交互設(shè)計(jì)鼓勵用戶在登錄字段中輸入他們的電子郵件地址和密碼:

理想情況下，使用微交互的最佳方式是讓它們盡可能地微妙。這些工具并不是用來竊取頁面上其他信息的。然而，它們有時可以鼓勵你的觀眾在轉(zhuǎn)換過程中進(jìn)入下一個階段。

動畫微交互可以是復(fù)雜的，也可以是基本的，隨你選擇。例如，你可以在以下情況使用它們:

突出顯示某個功能是否開啟或關(guān)閉;

讓用戶知道什么時候操作成功了(比如用聯(lián)系人表單發(fā)送消息);

展示重要信息，如在桌子上標(biāo)價;

動畫圖標(biāo)在你的網(wǎng)站上鼓勵行動;

根據(jù)你使用動畫的經(jīng)驗(yàn)，你甚至可以找到帶有內(nèi)置選項(xiàng)的主題和插件。

3.動態(tài)背景

一個動畫背景可以讓你的網(wǎng)站從人群中脫穎而出。然而，重要的是要記住，過多的動畫會使你的網(wǎng)站比它需要的更慢和更笨拙。

mystaticself.com網(wǎng)站的動畫背景是奇妙的介紹客戶的新信息與一個方便的動態(tài)菜單。

通常情況下，你應(yīng)該為一個網(wǎng)站創(chuàng)建自己的動態(tài)背景的唯一原因，是它是否會以某種方式改善你的客戶體驗(yàn)。

記住，確保你在你的網(wǎng)站上使用的動畫不會使你的網(wǎng)站的任何方面更難使用。動畫背景需要提供一個贊美你現(xiàn)有的網(wǎng)站，而不是分散客戶的什么，他們想做的。

在你開始所有的背景動畫之前，專注于動畫圖像的小部分，一次一小部分。你也可以用非常小的動作來為組件制作動畫。

4. 發(fā)現(xiàn)隱藏的信息

另一個在網(wǎng)頁設(shè)計(jì)中使用動畫的好方法是利用它來展示重要的信息。例如，導(dǎo)航菜單在你的網(wǎng)站設(shè)計(jì)中是一個重要的組成部分，但它也會占用很多寶貴的空間。

在某些情況下，當(dāng)用戶滾動到一個小框或圖標(biāo)上時，就會出現(xiàn)一個隱藏菜單，這可能很有意義。如果你的網(wǎng)站有大量的頁面，你也可以考慮動畫下拉菜單。

看看這個有趣的CSS3動畫菜單示例:

當(dāng)你將鼠標(biāo)懸停在這些部分上時，這些部分會改變顏色并移動，這樣更容易看到你點(diǎn)擊的確切位置。

當(dāng)你在玩動畫菜單的時候，它完全取決于你想要多有創(chuàng)意。最簡單的選擇通常是使用一個組件來改變鼠標(biāo)懸停效果的顏色或形狀。然而，您也可以公開隱藏的菜單和額外的信息。

例如，在一些網(wǎng)站上，你可以創(chuàng)建翻轉(zhuǎn)過來的圖片來顯示另一邊的信息。這意味著您可以創(chuàng)建一個關(guān)于頁面，其中包含團(tuán)隊(duì)成員的照片，這些照片可以翻轉(zhuǎn)來顯示個人簡介信息。

只要確保一切都運(yùn)行順利，無論是在臺式機(jī)上還是在移動設(shè)備上。

5. 試著旋轉(zhuǎn)木馬

最后，我們來看看在網(wǎng)頁設(shè)計(jì)中使用動畫的最簡單和最流行的方法。旋轉(zhuǎn)木馬是當(dāng)今web上幾乎所有主題的共同組成部分。它們在展示有用信息方面非常有用，比如一個網(wǎng)站提供了什么，或者哪些交易是可行的。

創(chuàng)建旋轉(zhuǎn)木馬時，可以讓用戶控制圖像轉(zhuǎn)換的速度，也可以實(shí)現(xiàn)自動移動。heathfield.co。英國網(wǎng)站，設(shè)計(jì)者增加了按鈕，讓你可以在照片之間來回翻轉(zhuǎn)，同時也確保動畫是自動的。

如果沒有動畫向你展示圖片滑入空間，每一張圖片之間的轉(zhuǎn)換將是瞬間的——這對觀眾來說會更不和諧。

滑塊是當(dāng)今web設(shè)計(jì)中非常常見的組件，以至于客戶幾乎希望在許多網(wǎng)站上看到它們。這意味著，如果你不想在你的網(wǎng)站上做任何過于戲劇化的事情，你可以享受一個非常有效的體驗(yàn)。

您可以使用滑塊的一切，從炫耀產(chǎn)品，顯示客戶的推薦和更多。這是一種將大量有用信息壓縮到網(wǎng)站上一個小空間的好方法。

小心使用網(wǎng)站動畫

對于大多數(shù)設(shè)計(jì)動畫和網(wǎng)頁的設(shè)計(jì)師來說，最重要的一點(diǎn)是，好東西太多是完全有可能的。當(dāng)你要為你的客戶創(chuàng)造驚人的設(shè)計(jì)時，你可以利用動畫來鼓勵更多的參與和獨(dú)特的體驗(yàn)。然而，你不應(yīng)該讓自己做得太過火。

與其讓頁面的每個方面都動畫化來不斷吸引訪問者的注意力，不如思考一下如何通過正確的動畫選擇來讓訪問者的體驗(yàn)更吸引人。如果整個頁面的背景動畫不適合你的目標(biāo)受眾，也許導(dǎo)航條或滑塊上的自定義動畫會是一個不錯的選擇。

同時，記住要充分利用市場上最新的技術(shù)為網(wǎng)頁設(shè)計(jì)添加動畫。CSS3、JavaScript和HTML5的良好組合通常可以更容易地創(chuàng)建更具沉浸感、高質(zhì)量的動畫，用戶可以在桌面和移動設(shè)備上進(jìn)行交互。