可以花很多時間來讓網站看起來很漂亮。可以設計最耀眼的佈局，新增能找到的最美麗的圖片，放入優雅的排版——以及做更多的事情來使網站看起來很棒。網站看起來已經很美了。但如何讓它感覺也很美? 通過使用動畫。

動畫是使網站活潑起來的東西。如果做得好，它們可以把使用網站變成一種令人愉快的、神奇的體驗。

但是，使用動畫有正確的方式，也有錯誤的方式。如果實施不正確，動畫會造成迷惑、不和諧和混亂。它們不但不能吸引人們來到網站，反而會疏遠他們。

本文 WordPress 站羣美國 WordPress 主機小編將解釋如何以正確的方式使用動畫，以便建立不僅看起來很美，而且感覺也很美的網站。

為什麼應該在網站上新增動畫

不應該將動畫視為事後的想法。它們不是新增到網站設計中的 “香料” 。儘管它們做到了，但其目的和作用遠不止於此。

動畫向使用者展示了資訊如何在網站上流動。它們可以幫助訪問者更好地理解網站如何運作。

以下是使用網站動畫眾多原因中的幾個：

1. 建立流暢的轉換。通常情況下，點選按鈕，或網站上的連結時，它會立即開啓下一個頁面、表單或任何旨在開啓的東西。

通過動畫，可以建立滑入或彈出的過渡，這樣使用者就可以看到結果的頁面出現。網站有” 標籤式” 介面時，這一點特別有用。

2. 提供內容：假設網站上有很多內容，使用者需要向下滾動才能檢視更多。

為了暗示讀者他們必須採取這個行動，可以將內容進行動畫處理以在頁面上向上滑動。這樣，任何人都會得到暗示，向下滾動可能會有更多的內容。

3.
給予反饋：如果網站上有很多互動元素，動畫就會特別有用。例如，使用者將滑鼠懸停在一個按鈕上時，可以將其製作成動畫，以表示可以點選。或者可以在使用者在網站的表格中輸入欄位時，將其變亮。

有了這種動畫，網站將更加方便瀏覽，因為它會根據人們與網站的互動情況提供反饋。

4. 講述故事：如果網站相當複雜，並且想給訪問者提供一個有關如何使用網站的教程，可以使用動畫來實現。

此外，還可以使用動畫進行通知，在出現 404 等錯誤期間提供緩解效果，以及任何其他目的。

5. 顯示進度：如果網站需要顯示進度，例如，作為載入欄或其他內容的及時顯示，可以使用動畫使其生動，以顯示這些元素的實時進展。

瞭解了這些，就能更有效地決定將哪些動畫放在網站的什麼地方。更多相關的內容可以閲讀 如何用驚豔的網站內容吸引訪問者

專業提示：在初始線框中新增動畫。

如果自己設計網站，或者聘請了設計師，可以將動畫新增到線框中。

它可以很簡單，例如記下是要滑動影象，還是要隨著使用者滾動淡入文字，或者當遊標停留在按鈕上時，按鈕放大。更多的相關內容可以閲讀 企業 WordPress 建站需要購買什麼樣的網站空間呢 。

WordPress 網頁設計中動畫的 12 個原則

和任何決定一樣，應該知道為什麼要做這個決定。為什麼 X 動畫需要放在網站的 Y 元素上?

意識到為什麼每個動畫都存在於網站，對於創造所尋找的效果至關重要。否則，網站動畫不是為了創造令人愉悦的體驗，而是在創造無厘頭的動畫電影。

為了防止這種情況發生，本節將討論 WordPress 網頁設計中動畫的 12 條原則。

它們基於 Frank Thomas 和 Ollie
Johnson 廣受歡迎的書《生命的幻覺：迪斯尼動畫》中所寫的原則，迄今為止，它們的思想仍廣泛用於各種動畫。

原則一：壓縮與伸展

這個動畫原理表明，如果想讓物體看起來栩栩如生，要讓它們有一種有質量的感覺。可以通過
“壓縮” 或” 伸展” 一個物件與另一個物件互動時的方式來表現這一點。

例如，可以將網站上的按鈕製作成動畫，讓它們在點選時縮小，或者當懸停在選單項或連結上時變大。

當想向訪問者展示他們可以與網站上的元素進行互動時，可以使用這種動畫原理。

原則二：預備動作

可能已經注意到，在某些網站上事情會突然發生。點選一個連結，然後立即轉到網站的不同部分。或者點選按鈕時，彈出視窗會立即出現在面前，或者開始播放視訊。

如果網站上發生這種情況，可能會顯得有些疏離。

為了解決這個問題，可以在網站上新增 “預備” 動畫。這些動畫 “緩和 “訪問者到他們想去的地方或在他們面前的物件。

例如，如果有人點選連結以進入網站的下一頁，可以將它做成動畫，讓內容從左邊或右邊滑入，讓訪問者知道他們剛剛訪問了前一頁。或者，如果有彈出視窗，可以通過動畫讓它在螢幕上漸漸消失，來
“緩和 “它。

原則三：佈局

有時，會希望人們關注螢幕上的某個特定元素，比如文章部分、訂閲按鈕或捐贈框。要做到這一點，可以做所謂的佈局。

佈局中可以做兩件事：

可以掩蓋其餘的元素來突出想要的元素。例如，可以模糊網站的其他部分，使想讓人注意的元素成為焦點。

可以讓某元素移動，而其他元素保持靜態。例如，如果網站上有訂閲按鈕或捐贈按鈕，可以將它做成動畫，讓它搖晃一下或移動，這樣人們的目光就會被它吸引。

通過移動主要元素或淡化背景元素，可以將任何想讓人們注意的東西 “擺上舞台” 。

原則四：連續動作和姿態對應

可以通過兩種方式設計動畫：

姿態對應：這種方法是指畫出動畫的關鍵幀，而中間幀由互聯網瀏覽器本身或助手來填充。

連續動作：這種方法是指繪製動畫的每一幀，直到得到動畫物件的完整流程。

原則五：跟隨動作和重疊動作

這種技術，就像 “擠壓和拉伸 “一樣，可以用來給網站上的元素增加真實感。它決定了不是所有的物件都在同一個地方開始和停止。

例如，假設網站上有一個評論框。可以將它做成動畫，讓新的評論從上面滑落，下拉並在停止之前反彈。

或者假設網站上有一個列表，每隔一段時間就會有新資訊出現。可以對列表進行動畫處理，這樣新專案進來時會從左邊滑入，向右移動一點，然後又彈回原位。

這就為網站上的元素增加了一種真實的運動感。

原則六：緩入緩出

現實生活中，事物並不是以統一的速度開始 (和停止) 運動。它們通常先獲得速度，移動，然後在完全停止之前放慢速度。

可以對網站上的元素進行動畫處理，以達到類似的效果。

例如，假設網站有一個載入欄。可以讓它以均勻的速度流動。或者，如果想讓它看起來以及表現的更逼真，可以讓它的速度慢慢增加，當它接近停止時，讓它的速度變慢。

這種型別的動畫被稱為 “緩入緩出” 。

原則七：弧線運動

當某個元素 (如評論或彈出窗) 出現在網站上時，它不一定非要直接出現。可以讓它在穩定下來之前反彈到檢視中。

或者假設有一個從頂部不斷更新的內容提要。它不一定只是呆在那裏，還可以彈跳到檢視中。

這個原理中的動畫看起來就像球在平面上的彈跳一樣。

原則八：次要動作

次要動作是指可以用來補充主要動畫的動畫。例如，假設將一個專案拖入列表中。為了騰出空間，上面和下面的列表項就會移開。這種動畫稱為次要動作。

原則九：時機

時機是任何動畫的重要組成部分。它是指動畫需要多長時間才能完全播放出來。動畫速度越快，物體的感覺就越輕。動畫越慢，就會感覺越重。

原則十：誇張性

誇張是一種很好的動畫技術，可以用來增加某些元素的權重。這是強調網站上某個元素的好方式。

例如，假設想突出人們點選的選單項。為了誇大這一點，可以在使用者點選它時讓它變大。

同樣，假設想突出顯示使用者當前所在表單中的欄位。可以將其動畫化放大，以獲得想要的效果。

原則十一：立體造型

如果真的想讓網站上的元素活起來，可以為它們建立三維版本——並在使用者與其互動時對其進行動畫處理。

例如，假設有人懸停在網站的一張圖片上。可以將其製作成動畫，使其翻轉，以便人們可以看到另一邊的內容。這種動畫被稱為立體造型。

原則十二：吸引力

最後一個原則，叫做 “吸引力”，指的是整個網站在所有動畫組合下的使用感受。

它們是否按照 WordPress 網頁設計師的意圖來呈現資訊? 使用者是否得到了動畫所要講述的 “故事 “或
“方向”? 它們是否都能結合在一起，並增加瀏覽網站的體驗? 結合起來，所有這些構成了網站的吸引力。

在網站上新增動畫時不能做什麼?

到現在為止，已經瞭解了可以在網站上做什麼，不能做什麼。是時候學習一些關於在網站上新增動畫時不能做什麼的技巧了。

不要讓動畫太快 (或太慢)：如果網站動畫太快或太慢，可能會讓訪問者感到困惑或沮喪。要優化動畫，使它們以一種對使用者來説完美的速度流動。當使用者期待動作時使用快速動畫：網站訪問者點選連結或按鈕，或做任何動作後，他們希望網站做出響應——在響應中使用快速動畫。但如果希望出現一些意想不到的東西，就使用慢速動畫，讓使用者有時間去處理那個意想不到的元素或內容。不要新增不必要的華麗動畫：奇形怪狀、色彩鮮豔的爆款動畫，在網站上會顯得很幼稚，也不合適。如果動畫不能組織資訊流或感覺過度，就不要使用它們。不要新增佔用資源的動畫：動畫需要額外的內存和處理能力——如果不加以處理，可能會導致網站載入緩慢。對於漸變和陰影較重的動畫尤其如此。想知道怎麼改變網站速度的方法可以瞭解 提升網站頁面速度的方法有哪些

不要新增任何對網站沒有幫助的動畫。如果只是因為希望它們存在而存在，那麼它們有可能會對使用網站的體驗產生不良的影響。更多的相關內容可以閲讀 網站怎麼設計頁面才更受使用者喜歡？