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

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

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

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

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

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

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

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

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

1. 加載動(dòng)畫

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

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

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

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

2. Microinteraction動(dòng)畫

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

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

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

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

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

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

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

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

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

3.動(dòng)態(tài)背景

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

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

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

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

在你開(kāi)始所有的背景動(dòng)畫之前，專注于動(dòng)畫圖像的小部分，一次一小部分。你也可以用非常小的動(dòng)作來(lái)為組件制作動(dòng)畫。

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

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

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

看看這個(gè)有趣的CSS3動(dòng)畫菜單示例:

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

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

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

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

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

最后，我們來(lái)看看在網(wǎng)頁(yè)設(shè)計(jì)中使用動(dòng)畫的最簡(jiǎn)單和最流行的方法。旋轉(zhuǎn)木馬是當(dāng)今web上幾乎所有主題的共同組成部分。它們?cè)谡故居杏眯畔⒎矫娣浅Ｓ杏?，比如一個(gè)網(wǎng)站提供了什么，或者哪些交易是可行的。

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

如果沒(méi)有動(dòng)畫向你展示圖片滑入空間，每一張圖片之間的轉(zhuǎn)換將是瞬間的——這對(duì)觀眾來(lái)說(shuō)會(huì)更不和諧。

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

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

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

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

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

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