網(wǎng)站中那些令人愛不釋手的加載動(dòng)效設(shè)計(jì)

等待和加載動(dòng)效幾乎是無處不在了。設(shè)計(jì)師和設(shè)計(jì)機(jī)構(gòu)都很清楚，加載動(dòng)效幾乎是目前網(wǎng)站和APP設(shè)計(jì)中無法繞過且必須的組成部分，它們不僅是大勢(shì)所趨而且是打造優(yōu)秀用戶體驗(yàn) 的必須組件。

雖然目前很多產(chǎn)品將加載/等待動(dòng)效作為強(qiáng)化用戶第一印象的組件，但是它的實(shí)際使用范疇遠(yuǎn)不止于這一部分，在許多設(shè)計(jì)項(xiàng)目中，加載動(dòng)效幾乎做到了無處不在。內(nèi)頁切換的時(shí)候可以用，組件加載的時(shí)候可以用，甚至幻燈片切換的時(shí)候也同樣可以用上。不僅如此，它還可以用承載數(shù)據(jù)加載的過程，呈現(xiàn)狀態(tài)改變的過程，填補(bǔ)崩潰或者出錯(cuò)的頁面，它們承前啟后，將錯(cuò)誤和等待轉(zhuǎn)化為令用戶愉悅的細(xì)節(jié)。

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

4:20 Dead Obies

加載動(dòng)效并不一定非要用進(jìn)度條，設(shè)計(jì)師在這個(gè)頁面中將LOADING這個(gè)詞的每個(gè)字母拆開，不斷復(fù)制來呈現(xiàn)加載過程，靜態(tài)的文字和動(dòng)態(tài)的效果交錯(cuò)，讓人在新鮮有趣的動(dòng)畫中度過略顯漫長(zhǎng)的加載過程。

NewsTech

充滿科技感的頁面設(shè)計(jì)為整個(gè)網(wǎng)站定下了基調(diào)，這種面向未來的設(shè)計(jì)手法在這個(gè)頁面中體現(xiàn)到極致，加載動(dòng)效采用了各種數(shù)據(jù)加載的樣式，將等待過程變成了一個(gè)巨大的“WOW”。

Ferias Beach Park

這個(gè)Ferias海灘公園的頁面借由有趣的配色和動(dòng)效傳達(dá)出歡快的情緒，加載動(dòng)效中童趣盎然的設(shè)計(jì)也令人難忘。

Mad Max Fury Road

年度神作《Mad Max 4》本就是以突出的視覺設(shè)計(jì)而令人記住，所以它的官網(wǎng)在設(shè)計(jì)美學(xué)上也保持了一致性。加載動(dòng)效中那個(gè)粗糙但古樸的LOGO也與整個(gè)電影風(fēng)格相呼應(yīng)，營(yíng)造出躁動(dòng)而個(gè)性十足的氛圍。

Panda Raid

網(wǎng)站的加載動(dòng)效還是保持了進(jìn)度條的基本設(shè)計(jì)，但是展現(xiàn)方式上借用了汽車的形象，加載速度不同的時(shí)候輪胎滾動(dòng)的速率也不同，有趣、擬真也和網(wǎng)站主題貼合。

Wiser Digital

在加載過程中，設(shè)計(jì)師用最經(jīng)典的游戲乒乓球來幫你填補(bǔ)等待的時(shí)間，雖然你無法參與到游戲當(dāng)中，但是這種情懷滿滿的加載動(dòng)效給人印象非常深刻。

Tenfold Creative

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

Tham Nguyen

Tham Nguyen 是一位著名的法國(guó)女設(shè)計(jì)師，她的個(gè)人網(wǎng)站中糅合了自然的情懷和女性的細(xì)膩，加載動(dòng)畫采用了走路的小女孩兒，俏皮而有趣。

50m.space

和前面許多案例一樣，設(shè)計(jì)師采用了扁平風(fēng)的動(dòng)態(tài)插畫來填補(bǔ)等待時(shí)間，強(qiáng)化整體風(fēng)格。

Madagence

其實(shí)這個(gè)加載動(dòng)效看起來并不夠細(xì)膩，但是它充分運(yùn)用了幾何圖形，四個(gè)簡(jiǎn)單有趣的方格輪流變幻，值得學(xué)習(xí)。

Kajikenseiji

設(shè)計(jì)師在這個(gè)網(wǎng)頁中，使用的是吐著氣泡的魚來作為過度，古樸的文字強(qiáng)化了網(wǎng)站的品牌形象，簡(jiǎn)單的色調(diào)和魚的形象也充滿了日系網(wǎng)站的獨(dú)特氣質(zhì)。

One Kichjoji

和之前的網(wǎng)站一樣，加載動(dòng)效采用了單色的燈塔形象，簡(jiǎn)單有趣但是也優(yōu)雅地呈現(xiàn)了品牌形象。

Interatction with Artificial Physics

這是一個(gè)精心設(shè)計(jì)的網(wǎng)站，強(qiáng)調(diào)人造和物理的屬性，這種兼顧自然和人工設(shè)計(jì)的特征也體現(xiàn)在加載動(dòng)效上，四個(gè)相互運(yùn)動(dòng)的氣泡時(shí)大時(shí)小，看起來自然而混亂，但是仔細(xì)看你又仿佛能找到某種規(guī)律，這個(gè)有趣的過程中你會(huì)忘記時(shí)間的流動(dòng)，直到網(wǎng)站加載完成。

Catch the Dragon

水波紋擴(kuò)散一般的加載動(dòng)效，在黑白色調(diào)之下，兼顧了自然的特征和科技的感覺，微妙的互補(bǔ)效應(yīng)和震動(dòng)的效果令整個(gè)動(dòng)效簡(jiǎn)單而賞心悅目。

SLMF

大膽的排版和明顯的對(duì)比讓整個(gè)頁面給人沉穩(wěn)而舒服的感覺，用數(shù)字來呈現(xiàn)加載過程，字體隨著加載不透明度會(huì)逐步提升，讓人感受到過程的變化，簡(jiǎn)單但是非常值得學(xué)習(xí)。

Zodiac

這個(gè)頁面的加載動(dòng)效堪稱是夢(mèng)幻級(jí)的，它不僅充滿藝術(shù)感，而且設(shè)計(jì)得整齊劃一，加上戲劇感十足的背景，兼顧美觀和技術(shù)的動(dòng)效變化簡(jiǎn)直是教科書一般的設(shè)計(jì)。

MTV Bump

打開頁面之后，鼠標(biāo)光標(biāo)變成了復(fù)古的沙漏造型，更讓人驚喜的是加載動(dòng)畫是一個(gè)不停吞吐著彩虹色帶的MTV Logo，復(fù)古而有趣。

Y7K

Y7K的加載動(dòng)效其實(shí)蠻討巧的，巨大的LOGO上疊加一個(gè)色彩豐富的視頻，漂亮而簡(jiǎn)單。

The Happy Forecast

這個(gè)網(wǎng)站的動(dòng)效設(shè)計(jì)手法并不鮮見，但是設(shè)計(jì)是不僅僅是添加了進(jìn)度條那么簡(jiǎn)單，他還用漸變的動(dòng)態(tài)文字告訴用戶正在加載網(wǎng)站的哪個(gè)部分。時(shí)間很長(zhǎng)，但并不無趣。

結(jié)語

動(dòng)效設(shè)計(jì)是小伎倆，但是它在用戶體驗(yàn)設(shè)計(jì)中的作用是不可估量的，它讓折磨人的等待變成了愉悅的消遣。動(dòng)效設(shè)計(jì)是大勢(shì)所趨，加載/等待動(dòng)效也是其中的重要組成部分，如果你熱衷于動(dòng)效設(shè)計(jì)，不妨關(guān)注一下這個(gè)領(lǐng)域。