動效設計案例！學學這些愛不釋手的加載動效設計

我們現在越來越注重細節，小到加載動畫，大到界面配色。這些都會成為用戶吐槽的地方，一個不小心，你設計的東西讓用戶反感了，他們說不定就要和你的產品說拜拜了。所以今天我們要重點說說那些你以前覺得“不那么重要”的加載設計。

等待和加載動效幾乎是無處不在了。設計師和設計機構都很清楚，加載動效幾乎是目前網站和APP設計中無法繞過且必須的組成部分，它們不僅是大勢所趨而且是打造優秀用戶體驗的必須組件。

雖然目前很多產品將加載/等待動效作為強化用戶第一印象的組件，但是它的實際使用范疇遠不止于這一部分，在許多設計項目中，加載動效幾乎做到了無處不在。內頁切換的時候可以用，組件加載的時候可以用，甚至幻燈片切換的時候也同樣可以用上。不僅如此，它還可以用承載數據加載的過程，呈現狀態改變的過程，填補崩潰或者出錯的頁面，它們承前啟后，將錯誤和等待轉化為令用戶愉悅的細節。

等待和加載動效中，最常見的表現形式是進度條，但是許多設計師采用了更加有趣的表現手法，接下來我們一起來看看這些案例。

? ? ? ?4:20 Dead Obies

加載動效并不一定非要用進度條，設計師在這個頁面中將LOADING這個詞的每個字母拆開，不斷復制來呈現加載過程，靜態的文字和動態的效果交錯，讓人在新鮮有趣的動畫中度過略顯漫長的加載過程。

? ? ? ?NewsTech

充滿科技感的頁面設計為整個網站定下了基調，這種面向未來的設計手法在這個頁面中體現到極致，加載動效采用了各種數據加載的樣式，將等待過程變成了一個巨大的“WOW”。

? ? ? ?Ferias Beach Park

這個Ferias海灘公園的頁面借由有趣的配色和動效傳達出歡快的情緒，加載動效中童趣盎然的設計也令人難忘。

? ? ? ?Mad Max Fury Road

年度神作《Mad Max 4》本就是以突出的視覺設計而令人記住，所以它的官網在設計美學上也保持了一致性。加載動效中那個粗糙但古樸的LOGO也與整個電影風格相呼應，營造出躁動而個性十足的氛圍。

? ? ? ?Panda Raid

網站的加載動效還是保持了進度條的基本設計，但是展現方式上借用了汽車的形象，加載速度不同的時候輪胎滾動的速率也不同，有趣、擬真也和網站主題貼合。

? ? ? ?Wiser Digital

在加載過程中，設計師用最經典的游戲乒乓球來幫你填補等待的時間，雖然你無法參與到游戲當中，但是這種情懷滿滿的加載動效給人印象非常深刻。

? ? ? ?Tenfold Creative

為了填補等待的時間，設計師將朗朗上口的文字做成動效，在加載的時候用它們來與你進行互動。雖然許多文字是一閃而過，但是你可以在閱讀中度過這段時間。

? ? ? ?Tham Nguyen

Tham Nguyen 是一位著名的法國女設計師，她的個人網站中糅合了自然的情懷和女性的細膩，加載動畫采用了走路的小女孩兒，俏皮而有趣。

? ? ? ?50m.space

和前面許多案例一樣，設計師采用了扁平風的動態插畫來填補等待時間，強化整體風格。

? ? ? ?Madagence

其實這個加載動效看起來并不夠細膩，但是它充分運用了幾何圖形，四個簡單有趣的方格輪流變幻，值得學習。

? ? ? ?Kajikenseiji

設計師在這個網頁中，使用的是吐著氣泡的魚來作為過度，古樸的文字強化了網站的品牌形象，簡單的色調和魚的形象也充滿了日系網站的獨特氣質。

? ? ? ?One Kichjoji

和之前的網站一樣，加載動效采用了單色的燈塔形象，簡單有趣但是也優雅地呈現了品牌形象。

(編輯：小酷)