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

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

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

Flash的生死存亡如何？

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

最近幾年的趨勢是設計扁平化網站。 值得慶幸的是，動畫已經大行其道，現在已成為 2018 年及以後的最大趨勢之一。

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

動畫對 UX 和 UI 設計的積極影響並不令人驚訝，因為人類是視覺動物，並且總是會被運動和運動所吸引。 動畫可以將任何過程變為現實，將其變成一種體驗。 動作讓用戶知道正在發生一些事情。

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

來自 Kinetic UI 的動畫

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

Darin 在 Dribbble 上製作的動畫

為您的網站製作動畫

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

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

在文章的最後，我提供了一些鏈接，這些鏈接指向一些有助於將動畫添加到您的站點的重要資源。

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

功能或美學

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

功能動畫

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

加載動畫

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

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

Sharon Yar 和 Dilys Lim 在 Behance 上製作的動畫

來自 Tom Cole Architecture 網站的 UXPin 的動畫

懸停

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

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

來自 Design Shack 的動畫

滾動

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

Youandigraphics的動畫

審美動畫

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

使用適量的美學動畫，您的網站可以令人難忘。

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

動畫背景

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

蛇蠍美人的動畫

無限創意

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

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

或者將等距插圖和動畫滾動結合在一起，你會得到一個很棒的網站，比如 RollPark。

來自 Rollpark 的動畫

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

我不提醒您應該始終在移動設備上查看動畫對我來說是不公平的。 確保它們按應有的方式工作，如果沒有，請進行調整。 如果您使用 SVG 動畫，那麼您應該不會有太大問題，因為 .svg 圖形可以無限擴展。

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

幫助您為網站製作動畫的工具

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

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

綜上所述

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

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

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

使用這些教程創建您自己的動畫！

• 如何使用 CSS 創建 SVG 動畫
• 如何使用 CSS3 過渡和變換來創建動畫