隨著用戶體驗(yàn)的優(yōu)秀與否逐漸成為設(shè)計(jì)的頭號(hào)要?jiǎng)?wù)，細(xì)微之處的用戶體驗(yàn)也開始在其中發(fā)揮重要影響，而我們今天要說的就是預(yù)加載動(dòng)畫的設(shè)計(jì)。長久以來，一直鮮有人關(guān)注這一領(lǐng)域，但如今時(shí)代變了，現(xiàn)在幾乎所有網(wǎng)站都自詡擁有多少多少華麗的效果能夠讓來訪網(wǎng)友大覺驚艷。
細(xì)微之處的用戶體驗(yàn)通常蘊(yùn)藏于各種微小但又經(jīng)過審慎設(shè)計(jì)的內(nèi)容元素之間，這些元素能夠?qū)⒂脩襞c內(nèi)容有效地相互聯(lián)系，讓他們在網(wǎng)站上的旅程更加有趣、難忘。這一領(lǐng)域囊括了各種各樣的用戶友好效果，而今天我們要講的，則是加載指示圖標(biāo)。
盡管加載指示圖標(biāo)（在大多數(shù)情況下）可能僅僅持續(xù)顯示幾秒鐘時(shí)間，但卻值得我們的特別關(guān)注一下。我們一般習(xí)慣性的認(rèn)為首頁是決定第一印象好壞的關(guān)鍵，但是，假如你自己有一個(gè)非靜態(tài)網(wǎng)站，就會(huì)發(fā)現(xiàn)最首先顯示的頁面其實(shí)是加載頁面，而你則需要解決所有有關(guān)預(yù)加載過程的問題。一個(gè)美觀、養(yǎng)眼又富有娛樂性的動(dòng)態(tài)計(jì)數(shù)圖標(biāo)是必不可少的，因?yàn)樗鼈兡芙o用戶帶來快樂，同時(shí)以不甚突兀的方式迫使用戶多停留一會(huì)——這不正是你的目的所在嗎？
今天的計(jì)數(shù)圖標(biāo)就和主界面設(shè)計(jì)一樣呼喚原創(chuàng)和獨(dú)到，很多設(shè)計(jì)師在這方面的作品讓人覺得既有趣又驚嘆，下面我們就一起來看看幾個(gè)有趣的預(yù)加載動(dòng)畫。
Little Big Room
這是一家在線旅游公司的神奇作品，其采用了生動(dòng)形象的卡通風(fēng)格加載條，不僅能夠讓訪客在等待的同時(shí)玩趣一把，同時(shí)還奠定了接下來待顯示內(nèi)容的基調(diào)和風(fēng)格。
Subskill Digital
這家公司的團(tuán)隊(duì)使用經(jīng)過精心設(shè)計(jì)的公司銘牌妝點(diǎn)預(yù)加載頁面，別具匠心地把品牌認(rèn)知融入到了網(wǎng)站的設(shè)計(jì)中。其效果具有美艷的數(shù)碼特色，與整體主題相得益彰。
The Erasable Wall
盡管這個(gè)網(wǎng)站訴求的主題比較嚴(yán)肅，但設(shè)計(jì)上卻采用了草繪圖形、鉛筆畫和動(dòng)畫元素呈現(xiàn)出了略顯俏皮的外觀。預(yù)加載頁面也巧妙地采用了相同的風(fēng)格以求完美融入主題。
Dunckelfeld
這個(gè)加載動(dòng)畫的外觀精致巧妙，與整體網(wǎng)站的外觀保持完全風(fēng)格一致。設(shè)計(jì)團(tuán)隊(duì)巧妙地把公司logo進(jìn)行了動(dòng)態(tài)化。
Alstercloud
這個(gè)充滿想象力的加載頁面讓人躍然期待一次有趣、難忘、原創(chuàng)并充滿動(dòng)感矢量繪畫的用戶體驗(yàn)。其預(yù)加載頁面具有濃烈的藝術(shù)氣息，與整體網(wǎng)站的感覺相呼應(yīng)。
Though Brancott Estate
盡管Brancott Estate使用了普通的加載旋轉(zhuǎn)圖標(biāo)這一比較簡單的方法，但與之相結(jié)合的材質(zhì)化背景、粉筆風(fēng)格字體和朗朗上口的宣傳語卻讓人甘心多等一會(huì)。
SIXZERO
有的時(shí)候想讓頁面吸引人并不意味著一定要大搞創(chuàng)新，在這一點(diǎn)上，SIXZERO向我們展示了如何利用平淡的單色背景給加載頁面帶來一連串純色景觀，達(dá)到吸引人眼球的功效。
Tu Corte
Tu Corte專營肉食品，因此他們的加載圖標(biāo)理所當(dāng)然的使用了生動(dòng)的牛、豬和禽肉寫實(shí)風(fēng)格圖形。
New Jumo Concept
這個(gè)預(yù)加載屏幕動(dòng)畫在結(jié)束時(shí)完整呈現(xiàn)出公司logo，進(jìn)而以漂亮、吸引人的方式打開首頁。
Letters, Inc
與公司網(wǎng)站設(shè)計(jì)類似，加載頁面也采用了精巧、高端的線條風(fēng)格外觀。其通過動(dòng)畫勾勒出了首頁中央的圖形，緩慢展現(xiàn)出全部內(nèi)容。
At Work
該網(wǎng)站沒有特別的加載頁面，所有內(nèi)容都在首頁呈現(xiàn)，其中采用了一個(gè)逐漸加速的神秘漩渦式動(dòng)畫以諱莫如深的方式逐漸吸引你的注意力。
Relio
Relio是一個(gè)大小能放入口袋的方形專業(yè)設(shè)備，其可用于提供照明。公司網(wǎng)站的加載頁采用了簡潔的輪廓線風(fēng)格圖形展示其產(chǎn)品。設(shè)計(jì)團(tuán)隊(duì)還對(duì)圖形進(jìn)行了動(dòng)畫制作以求給頁面帶來輕微的動(dòng)態(tài)感。
Fulvio Luparia
這個(gè)頁面沒有采用任何特殊效果，只有一個(gè)帶有計(jì)數(shù)器的標(biāo)準(zhǔn)圓形圖標(biāo)。但是，其設(shè)計(jì)師巧妙的將對(duì)比強(qiáng)烈的圖形和色彩以及簡約的背景、隱約可見的標(biāo)題相互融合，完美詮釋了簡約的概念。
Scotch and Soda
這個(gè)界面以手繪的風(fēng)格呈現(xiàn)出了一個(gè)經(jīng)過精心修飾的基本加載進(jìn)度條。其與登錄頁上分散各處的草繪元素形成了自然的互動(dòng)。
Engage
Engage的網(wǎng)站設(shè)計(jì)在各個(gè)角落都充滿了草繪的藝術(shù)氣息，即便是用于指示加載狀態(tài)的普通進(jìn)度條都采用了可愛的手繪風(fēng)格，并完美地搭配了品牌的配色。
All About Medical Training
這家公司的設(shè)計(jì)團(tuán)隊(duì)充分展現(xiàn)了如何從無到有呈現(xiàn)一切。其加載頁面使用直觀的醫(yī)療風(fēng)格圖標(biāo)以圖形方式顯而易見地揭示了網(wǎng)站的主題。動(dòng)畫風(fēng)格的陰影則起到了狀態(tài)指示的作用。
Mikado
Mikado在其logo上采用了簡約的扁平化旋轉(zhuǎn)指針，讓用戶在剛剛打開網(wǎng)站的頭幾秒內(nèi)即可對(duì)其公司品牌有所認(rèn)知。
Designova
與前面的例子相似，Designova也對(duì)其logo進(jìn)行了動(dòng)畫制作，在加載頁上僅采用了圓形且會(huì)跳動(dòng)的公司徽標(biāo)進(jìn)行裝飾。盡管這一方案非常高端而且制作簡單，但時(shí)間長了就會(huì)逐漸失去吸引力。
Zipper Galeria
這個(gè)網(wǎng)站的設(shè)計(jì)團(tuán)隊(duì)將公司銘牌改造成了文字型的加載進(jìn)度條，隨著加載進(jìn)度提高，品牌名會(huì)逐漸上色。
Kommigraphics
Kommigraphics采用了經(jīng)典的圓形加載圖標(biāo)。其使用扁平化風(fēng)格以及輕柔的雙色配色方案以求與網(wǎng)站設(shè)計(jì)主題完美呼應(yīng)。
結(jié)束語
盡管網(wǎng)站使用加載圖標(biāo)不是什么新鮮事物，但別忘了基于flash的網(wǎng)站曾經(jīng)一度遍布這些充滿時(shí)尚氣息的小計(jì)數(shù)圖標(biāo)?，F(xiàn)在，這些小玩意已經(jīng)更新?lián)Q代，變得更加完善、更加時(shí)尚并且更加成熟。設(shè)計(jì)師已經(jīng)開始把它們視作網(wǎng)站上不可或缺的組成部分并傾盡全力使其日臻完美，其既要符合網(wǎng)站的整體風(fēng)格又要有自己的特色，所以說，我希望在不遠(yuǎn)的未來，所有動(dòng)態(tài)網(wǎng)站都能夠開始使用原創(chuàng)而富有娛樂氣息的加載圖標(biāo)。
翻譯：蔣燦
原文地址：designmodo.com
