9 個動畫網站激勵我們成為網絡創作者

網絡創建者永無止境地尋求用最前沿、最時尚的設計效果來更新他們的網站，以代表他們的產品或服務的真正價值。 但是在調色板、排版、響應能力、內容策略等等之間，高級設計技術的想法可能有點令人生畏。 實現其設計值得他們鹽分的網站的最佳方法之一是向您的同行尋求靈感。 問問自己你喜歡他們的設計什麼，它如何與你的設計相關，以及你想如何根據你的需要修改它實際上非常簡單。

讓我們看看這九個創意網站動畫示例，並開始向專業人士學習。

Handwrytten 在主頁的英雄部分使用的動畫技術是他們產品本身的一種尖銳表現：結合鋼筆和墨水。 這種設計（其中之一）的一個關鍵價值是網站訪問者立即了解該產品提供的好處，以及他將通過使用該產品獲得什麼。

一張手寫卡片與卡通插圖並列的照片真的說明了一切。 至於頁面上的其他設計元素，乾淨的白色和黑色配色方案帶有一絲日落橙色，在精緻和藝術氣息之間取得了平衡。 瀏覽本網站後，我們當然有動力進一步環顧四周並了解有關 Handwrytten 產品的更多信息。

Crisp 為他們的矢量插圖添加了輕微的動畫效果，儘管插圖尺寸很小，但傳達了引起共鳴的品牌信息。 每個矢量圖的低調動畫確實為脆皮的品牌形象增添了人情味。 我們特別喜歡討論客戶支持的部分中的動畫篝火。 它為整個主頁優雅使用的簡約扁平設計增添了活力。 這是使用這些流行的平面設計技術的完美方式，同時仍然添加令人興奮的用戶體驗所需的生活樂趣。

Corebook 以完全黑暗的模式歡迎訪問者訪問他們的網站，當您向下滾動網站時，會有微妙而流暢的動畫。 Corebook 以自己獨特的方式找到了一種設計易於清晰可見的英雄動畫的方法，儘管其黑色背景上的深灰色之間缺乏對比。

動畫內容的選擇極簡但內容豐富。 只需幾個正方形和顏色即可實現這一點，動畫展示了客戶在加入 Corebook 後將擁有的成品類型（品牌手冊）：他們自己的品牌手冊，達到行業標準並看起來很現代，時尚，精緻。

Best Day Ever 使用循環動畫技術，因此他們的動物插圖不依賴觸發器來保持移動。 只要可以在屏幕上看到，網站訪問者可以看到的任何插圖都會不斷移動。

整個頁面都採用內容優先的方法，因為單詞和句子都很簡短，而且不會超過它們需要的長度。 正是這種方法與友好的動畫完美結合，將最少的文字與樂觀、多彩的設計相結合。 動物的動作不僅為它們配對的文本帶來了生命，而且它們為每個用戶實現了對話體驗。

Best Day Ever 的網站就是一個很好的例子，它展示瞭如何採用一個想法和設計原則（在這種情況下，主題是將充滿活力的新鮮感與微妙相結合）並通過配色方案、內容策略和高級設計效果始終如一地表現出來。

誰不喜歡經典的球坑？ 谷歌在白色背景上使用其經典的品牌顏色，再次獲得金牌。

通過一個鼠標跟踪效果，谷歌設法實現了一種用戶體驗，讓網站訪問者感覺他實際上是在一個球坑里！ 當您向下滾動頁面時，所發生的只是球變大。 球下面沒有任何內容，這正是實物中的樣子。

谷歌設法讓我們對這個產品的用途有一個直接的、聳人聽聞的理解，他們通過一個簡單的英雄文本標題描述和 CTA 按鈕來做到這一點。

我們知道 Google 即將幫助我們規劃下一次不會讓我們失望的冒險。 當您將鼠標懸停在按鈕上時，您是否看到了變色效果？ 這是我們第一次看到一個按鈕的懸停效果變為四種不同的顏色，而不是從一種顏色變為另一種顏色。

這就像我們以前從未見過的一樣。 在我們眼前，我們看到動畫的抽象形狀四處移動並形成動物的插圖。 它激發了我們的好奇心，欣賞美麗的動物並想知道它們還使用了哪些其他動物？

這正是您希望網站訪問者擁有的思考過程。 你在給他講一個視覺故事，你想讓他翻到那個故事的下一頁。

如果你仔細想想，講故事和瀕危物種的原因有很多共同點：它們都是為了吸引聽眾的注意力並說服他（雖然巧妙地）你的主題是最重要的，也就是值得一聽。

大麻產業仍然非常新穎和新鮮，因此對於將其作為產品進行銷售的網站來說，它需要一種感覺相同的外觀和氛圍是有道理的。

讓我們停下來欣賞一下僅在主頁上就發生了多少設計技術：動畫圖像集合背後的幻燈片背景、3D 效果、旋轉文字……一切看起來都很漂亮。

怎麼會有人看到這個主頁而不想進一步瀏覽該網站？ 只有這樣做了，當您向下滾動時，您才能看到令人瞠目結舌的動畫變得更加精彩。

我們喜歡當你從頁面下降時，罐子旋轉下來，當背景變成白色時，彩色背景上的物體滑動到頁面的邊緣。 很有創意。 越往下走，越漂亮的 3D 對象保持向上垂直滾動效果。

所有這些技術結合起來創造了一種感覺，就像你只想繼續閱讀更多的網站，甚至只是想看看有趣的視覺效果和設計師接下來想出的東西。

如果您導航到其他頁面，您會看到主頁英雄內容中的 3D 對像已成為背景的永久部分，同時仍在浮動和移動。 這種連續性的選擇允許整體講故事，這使重點更接近家庭：我們是一個很棒的產品。

當我們向下滾動主頁時，是配色方案、3D 設計、低調的圖像運動還是信用卡插圖以雜技般的運動下降？

這是所有的一點點。

這裡的配色方案有很長的路要走。 被大量空白包圍的橙色陰影和簡單的圓形無襯線字體都如此整體地協同工作。 但真正重要的是用於信用卡插圖的動畫技術。

RappiPay 獲得了我們對原創性和卓越參與度的投票。 網站內容會引導訪問者向下瀏覽頁面，直到到達最低點，因為當信用卡在頁面上如此平滑地滑動時，它會觸發其他圖像和插圖的出現。 在信用卡與其他元素的交互（例如顯示現金賬單或在球體周圍繪製虛線）之間，卡片會一直展示雜技翻轉。

正如信用卡把故事講得很好，充滿了動作和活力，它也以高收場。 最後的圓形切口顯示了持卡人的購買情況，告訴我們這張卡有多少特性和功能，以及持卡人如何真正地隨處攜帶它。

極簡、前衛這兩個詞，我們在這裡都能想到。 如果一張圖片有 1000 字，我們會說動畫圖片有 5,000 字甚至更多。

好，現在輪到你了。 我們在此處列出的動畫技術只是網絡創建者向其網站添加動畫功能時所能實現的一小部分。 每天都有越來越多的靈感可供使用，有很多東西要看和學習。 作為設計師，我們的座右銘是從基礎開始，當您擁有簡單的動畫實踐時，您的網站可以向世界展示成為推動者和推動者意味著什麼。