優(yōu)秀的設(shè)計(jì)師是能將每一個(gè)痛苦的地方都變得有趣的人，特別是對(duì)于網(wǎng)速慢的同學(xué)，今天這組網(wǎng)站簡(jiǎn)直可以讓人樂(lè)瘋了，連加載界面都如此有趣，這才是真正的微體驗(yàn)感受一下。

創(chuàng)造良好的用戶體驗(yàn)已成為先決條件，微體驗(yàn)更是位列前茅——本文探討的是預(yù)加載動(dòng)畫(huà)。長(zhǎng)久以來(lái)，只有少數(shù)人重視這部分，如今一切都不同了，幾乎每個(gè)網(wǎng)站都能以一兩個(gè)賞心悅目、給用戶留下深刻印象的效果自居。

微體驗(yàn)通常與經(jīng)過(guò)深思熟慮的小組件有關(guān)，它們能架起用戶與內(nèi)容之間的橋梁，把訪問(wèn)網(wǎng)站變?yōu)橐欢斡淇祀y忘的旅程。這個(gè)領(lǐng)域包含了各種友好的效果，今天我們要談的就是加載狀態(tài)的指示計(jì)。

雖然只會(huì)維持幾秒鐘(多數(shù)情況)，它們應(yīng)當(dāng)?shù)玫教貏e的重視。我們習(xí)慣于相信，首頁(yè)肩負(fù)著創(chuàng)造顯著第一印象的責(zé)任，無(wú)論如何，假如你是一個(gè)非靜態(tài)網(wǎng)站的站長(zhǎng)，第一個(gè)頁(yè)面就是加載頁(yè)，你得考慮加載的過(guò)程。討人喜歡、吸引眼球、令人愉快的動(dòng)態(tài)計(jì)數(shù)器是無(wú)可替代的;它們會(huì)愉悅用戶，悄悄地迫使用戶停留一小會(huì)兒——這正是你希望的。

時(shí)髦的計(jì)數(shù)器，與主體的設(shè)計(jì)有著同等的獨(dú)創(chuàng)性，欣賞設(shè)計(jì)師們想出的那些方案非常有趣，振奮人心。那么，我們來(lái)探尋一些有趣的預(yù)加載動(dòng)畫(huà)吧。

Little Big Room

探秘這家機(jī)構(gòu)的作品集，從這個(gè)卡通畫(huà)風(fēng)格的加載條開(kāi)始。它不僅是為了娛樂(lè)那些正在等待的網(wǎng)站訪客，也奠定了基調(diào)，為接下來(lái)將要發(fā)生的事情做了一點(diǎn)點(diǎn)提示。

Subskill Digital

這個(gè)團(tuán)隊(duì)通過(guò)漂亮的動(dòng)態(tài)logo，來(lái)給預(yù)加載頁(yè)面增添活力，巧妙地將品牌標(biāo)識(shí)應(yīng)用到網(wǎng)站設(shè)計(jì)中。這效果有種討人喜歡的數(shù)碼氛圍，與整個(gè)主題完美搭配。

The Erasable Wall

盡管這個(gè)網(wǎng)站旨在強(qiáng)調(diào)非常嚴(yán)肅的話題，由于手繪風(fēng)的圖片、鉛筆畫(huà)和動(dòng)畫(huà)元素，它的設(shè)計(jì)卻稍顯俏皮。這個(gè)預(yù)加載頁(yè)面聰明地表現(xiàn)出同樣的風(fēng)格，與整個(gè)項(xiàng)目融合得非常理想。

Dunckelfeld

這個(gè)加載動(dòng)畫(huà)有著優(yōu)雅精致的外觀，與在線作品集的整體外觀完全統(tǒng)一。這個(gè)團(tuán)隊(duì)巧妙地利用了logo，驚人地將動(dòng)畫(huà)運(yùn)用其中。

Alstercloud

這個(gè)加載頁(yè)面如此富有想象力，這個(gè)充斥著生動(dòng)的矢量畫(huà)獨(dú)創(chuàng)設(shè)計(jì)，清晰無(wú)疑地反映了一點(diǎn)，你將獲得相當(dāng)有趣難忘的用戶體驗(yàn)。加載頁(yè)面有著強(qiáng)烈的藝術(shù)氛圍，與整體設(shè)計(jì)感覺(jué)接近。

Though Brancott Estate

盡管Brancott Estate用了一種相當(dāng)簡(jiǎn)單的解決之道——基本的旋轉(zhuǎn)圖標(biāo)，但與背景紋理、粉筆風(fēng)格的字體和引人注目的措辭聰明地結(jié)合起來(lái)，就足夠迫使你停留一會(huì)兒。

SIXZERO

有時(shí)要使你的頁(yè)面迷人，不需要重新造輪子，SIXZERO詮釋了如何利用樸素的單色背景，來(lái)為加載頁(yè)面打造一系列連續(xù)的純色布景。

Tu Corte

Tu Corte專門(mén)從事肉類領(lǐng)域，所以毫無(wú)疑問(wèn)，加載指示計(jì)展示了牛肉、豬肉、禽類的具象圖形。

New Jumo Concept

這個(gè)預(yù)加載頁(yè)面以一個(gè)帶有l(wèi)ogo形狀的小動(dòng)畫(huà)結(jié)束。通過(guò)一種愉快迷人的方式開(kāi)啟了首頁(yè)。

Letters, Inc

和網(wǎng)站的設(shè)計(jì)非常像，加載頁(yè)面也有著精妙優(yōu)雅的輪廓式外觀。動(dòng)畫(huà)效果勾勒出首頁(yè)的中心，緩緩揭開(kāi)整個(gè)構(gòu)圖。

At Work

沒(méi)有專門(mén)的加載頁(yè)面，一切都在首頁(yè)上發(fā)生。它包含一個(gè)神秘的漩渦狀動(dòng)畫(huà)，以一種匯聚能量的隱喻吸引你進(jìn)入。

Relio

Relio是個(gè)口袋大小的方形專業(yè)設(shè)備，能夠?yàn)槟闾峁┱彰鳌＜虞d頁(yè)面包含一個(gè)簡(jiǎn)潔的輪廓式圖形，正是代表了這個(gè)小玩意。這個(gè)團(tuán)隊(duì)還讓它運(yùn)動(dòng)起來(lái)，給這個(gè)頁(yè)面增加了一點(diǎn)動(dòng)態(tài)的感覺(jué)。

Fulvio Luparia

此處沒(méi)有什么超自然的東西，帶有計(jì)數(shù)器的標(biāo)準(zhǔn)圓形指示計(jì)，構(gòu)成了這個(gè)頁(yè)面。但是，設(shè)計(jì)師將簡(jiǎn)潔化為了優(yōu)勢(shì)，在鋒利的圖形、鮮明的顏色反差和帶有淡淡標(biāo)語(yǔ)的干凈背景之間，呈現(xiàn)出杰出的融合。

Scotch and Soda

(自備梯子)

此處你會(huì)看到一個(gè)有裝飾性的基本加載條，用一種原始的手繪方式來(lái)表現(xiàn)。它與首頁(yè)中四處散布的手繪元素自然地呼應(yīng)。

Engage

Engage以藝術(shù)化的手繪風(fēng)網(wǎng)站設(shè)計(jì)著稱，從頭到尾每個(gè)細(xì)節(jié)都是這么規(guī)劃的。甚至指示上傳狀態(tài)的一個(gè)常規(guī)加載條，也有著討人喜愛(ài)的手繪風(fēng)感染力，它還運(yùn)用了品牌的配色。

All About Medical Training

這個(gè)團(tuán)隊(duì)詮釋了如何最大限度利用空白。加載頁(yè)面的特色是一個(gè)直觀的醫(yī)學(xué)圖標(biāo)，立刻反映出并生動(dòng)地支撐著設(shè)計(jì)背后的想法。動(dòng)態(tài)的陰影扮演著狀態(tài)指示計(jì)的角色。

Mikado

Mikado把基于logo的圖形作為了簡(jiǎn)潔扁平風(fēng)格的旋轉(zhuǎn)圖標(biāo)。訪問(wèn)網(wǎng)站的頭幾秒鐘，就烙上了品牌身份的標(biāo)記。

Designova

和上一個(gè)例子很像，Designova也將它的logo動(dòng)畫(huà)化，僅靠跳動(dòng)的圓形標(biāo)志裝點(diǎn)加載頁(yè)面。盡管這種解決方案相當(dāng)優(yōu)雅，而且易于實(shí)施，不過(guò)久而久之，它會(huì)失去魅力。

Zipper Galeria

這個(gè)團(tuán)隊(duì)將它的logo轉(zhuǎn)化成基于文字的加載條，逐漸填入品牌色。

Kommigraphics

Kommigraphics用了經(jīng)典的圓形加載指示計(jì)。它呈現(xiàn)一種扁平樣式，柔和的雙色調(diào)配色，與網(wǎng)站的設(shè)計(jì)主題完美吻合。

結(jié)論

盡管將加載指示計(jì)融入網(wǎng)站中絕非新鮮之舉，記得那些基于flash的網(wǎng)站吧，它們普遍運(yùn)用了這些時(shí)尚的小指示計(jì)。如今它們有著更新、更先進(jìn)、更時(shí)尚且更精美的詮釋。設(shè)計(jì)師開(kāi)始像對(duì)待其他必備元素一樣對(duì)待它，力求完美無(wú)瑕，吻合整體主題并且同時(shí)保有自己的風(fēng)格，那么，我希望在不久的將來(lái)，每個(gè)動(dòng)態(tài)的設(shè)計(jì)都具備獨(dú)創(chuàng)且有趣的加載指示計(jì)。