如何戰略性地向您的網站添加動畫

在網頁設計中使用動畫並不是什麼新鮮事。

還記得早已逝去的旋轉 3D gif 時代嗎？

Flash的生死存亡如何？

在 Apple 禁止在所有基於移動的設備上使用 Flash 之後，設計師們很快想出了一種方法讓遊戲中的動畫重新出現。 由於網絡開發人員和設計師的創造力，我們現在擁有 CSS3 過渡、SVG 動畫、高質量 GIF 的魔力，當然還有使用 After Effects 和 Blender 等程序創建的動畫視頻。

最近幾年，趨勢是設計平面網站。 值得慶幸的是，動畫已經大舉回歸，現在已成為 2018 年及以後的最大趨勢之一。

動畫現在已經成為一種期望。

動畫對 UX 和 UI 設計的積極影響不足為奇，因為人類是視覺動物，總是會被運動所吸引。 動畫可以使任何過程栩栩如生，將其變成一種體驗。 移動讓用戶知道正在發生某些事情。

例如，表單單元格內的動畫可以通知用戶他們犯了錯誤或缺少信息。 或者當輸入密碼錯誤時，星號會變成紅色，跳動一下，然後消失。

或者這個有趣的登錄動畫怎麼樣？ 動畫在網頁設計中的可能性每天都在增長。 為什麼不在您的網站上也添加一些戰略動畫呢？

動畫你的網站

關於如何向您的網站添加動畫的選項非常廣泛，但這並不意味著它應該充滿跳躍圖標和旋轉按鈕。 您需要平衡設計中包含的動畫數量。 更多地沿著“柔和運動”的思路思考，而不是移動太多以至於您不知道該往哪裡看的頁面。 過度使用動畫與過度極簡主義一樣痛苦！

使用像 Adob​​e XD 這樣的程序可以幫助嘗試不同的動畫以有策略地放置在您的網站上。 如果您喜歡直接在 WordPress 中構建，那麼 Divi Builder 是一個不錯的選擇，它在每個模塊中都有很多動畫可能性。

在文章的結尾，我提供了一些鏈接，這些鏈接指向一些很棒的資源，這些資源將有助於將動畫添加到您的站點。

讓我們來看看可以改善您網站的用戶體驗和整體視覺構圖的不同類型的動畫。

功能性或美學

動畫在網頁設計中有兩種用途； 功能和美學。

功能動畫

動畫可以幫助訪問者在您的網站上完成他們的用戶旅程。 它們會引起人們對號召性用語或您不想讓它們錯過的重要部分的關注。 它們使過程更容易，並且在視覺上令人愉悅。

加載動畫

加載動畫是最常見的功能動畫，也是網站設計中最早出現的動畫之一。 這些過去主要在網站首次打開時發現，但現在網站會立即加載，它用於加載視頻、下載進度以及您的網站可能具有的其他過程。

為了使您的加載動畫有效，它需要與您的品牌相匹配。 如果您的網站既有趣又豐富多彩，那麼您的加載動畫可以是從彈跳球到彩色循環的任何東西。 另一方面，如果您的網站是嚴肅和正式的，那麼加載動畫應該遵循這種風格。

懸停

您應該考慮的其他常見功能動畫是懸停。 我們已經很習慣看到懸停動畫，大多數人都會期待它們。 當鼠標懸停在按鈕上時，讓按鈕改變顏色是您絕對應該考慮使用的基本動畫，無論是在菜單上還是在號召性用語上。

其他使用懸停的方法適用於看起來不像按鈕的按鈕，或者如果您希望在單擊懸停之前顯示信息。

滾動

具有滾動效果的網站不再是一種獨特的現象。 視差滾動已經變得非常流行（並且說實話變得有點累）。 因此，如果您想使用動畫滾動，請跳出框框思考。 包括從一個部分移動到另一個部分的元素，以及隨著滾動逐漸出現的元素。 考慮功能和美學。

美學動畫

美學或裝飾性動畫是那些使網站在視覺上更具吸引力但不一定有助於功能的動畫。 從第一部華特迪士尼動畫片時代就有一個古老的比喻，動畫是一種“生活的幻覺”。 動畫對靜態圖像的作用是讓它栩栩如生，讓它呼吸。

通過適量的美學動畫，您的網站將令人難以忘懷。

就像功能性動畫一樣，裝飾性動畫也需要平衡。 問問自己動畫背景是否真的有必要，或者它是否與您的品牌相匹配。 是每張照片都需要在屏幕上顯示動畫還是需要那麼多彈出窗口？ 確保您添加的動畫足以讓您的網站好看但不會讓人不知所措。

動畫背景

現在最流行的動畫背景是粒子背景，從簡單的移動點到復雜的光效運動。 這些可以作為整個頁面或部分的背景添加。 它們可以使您網站的區域更具個性。 請記住趨勢會發生變化，因此如果您確實使用粒子背景，請確保它真的適合您的網站。

無限創意

最後但同樣重要的是，動畫可以為您的網站做的是提供無限的創造力。 由於您幾乎可以為任何東西製作動畫，因此創意的可能性是無窮無盡的。 從動畫背景到屏幕上移動的事物，甚至是角色閃爍等微妙的動畫。

一個網站可以非常依賴動畫，以至於瀏覽頁面是一種真實的體驗。 以保時捷的新網站為例，它展示了這家汽車製造商多年來的歷史。

或者將等距插圖和動畫滾動放在一起，你會得到一個像 RollPark 這樣的驚人網站。

始終針對移動設備進行優化！

如果我不提醒您應該始終在移動設備上檢查您的動畫，那將是不公平的。 確保它們按應有的方式工作，如果不正常則進行調整。 如果您使用 SVG 動畫，那麼您應該不會有太大問題，因為 .svg 圖形可以無限縮放。

無論哪種方式，始終檢查移動設備並針對所有格式優化動畫將使您的網站變得更好！

幫助您使網站動起來的工具

以下是您可以在您的網站上使用的不同類型動畫的實用文章鏈接列表。

• 免費動畫庫合集
• DIVI Builder 動畫功能
• 粒子背景創建者
• 使用CSS創建簡單粒子背景的兩種方法
• 使用 SVG 動畫

綜上所述

使您的動畫在功能和美學方面保持平衡。 它們是讓您的網站栩栩如生的工具，而不是讓它不知所措。 記住要有創意，跳出框框思考。

在構建您的下一個網站（或更新現有網站）時，您會在設計中添加一些動畫嗎？ 請記住：最好先在暫存站點或本地站點上進行試驗，然後再將任何新代碼永久添加到實時站點！

接下來您將嘗試哪種類型的網站動畫？