小編推薦：隨著用戶體驗的優(yōu)秀與否逐漸成為設(shè)計的頭號要務(wù)，細(xì)微之處的用戶體驗也開始在其中發(fā)揮重要影響，而我們今天要說的就是預(yù)加載動畫的設(shè)計。長久以來，一直鮮有人關(guān)注這一領(lǐng)域，但如今時代變了，現(xiàn)在幾乎所有網(wǎng)站都自詡擁有多少多少華麗的效果能夠讓來訪網(wǎng)友大覺驚艷。

細(xì)微之處的用戶體驗通常蘊(yùn)藏于各種微小但又經(jīng)過審慎設(shè)計的內(nèi)容元素之間，這些元素能夠?qū)⒂脩襞c內(nèi)容有效地相互聯(lián)系，讓他們在網(wǎng)站上的旅程更加有趣、難忘。這一領(lǐng)域囊括了各種各樣的用戶友好效果，而今天我們要講的，則是加載指示圖標(biāo)。

盡管加載指示圖標(biāo)（在大多數(shù)情況下）可能僅僅持續(xù)顯示幾秒鐘時間，但卻值得我們的特別關(guān)注一下。我們一般習(xí)慣性的認(rèn)為首頁是決定第一印象好壞的關(guān)鍵，但是，假如你自己有一個非靜態(tài)網(wǎng)站，就會發(fā)現(xiàn)最首先顯示的頁面其實是加載頁面，而你則需要解決所有有關(guān)預(yù)加載過程的問題。一個美觀、養(yǎng)眼又富有娛樂性的動態(tài)計數(shù)圖標(biāo)是必不可少的，因為它們能給用戶帶來快樂，同時以不甚突兀的方式迫使用戶多停留一會——這不正是你的目的所在嗎？

今天的計數(shù)圖標(biāo)就和主界面設(shè)計一樣呼喚原創(chuàng)和獨到，很多設(shè)計師在這方面的作品讓人覺得既有趣又驚嘆，下面我們就一起來看看幾個有趣的預(yù)加載動畫。

Little Big Room

這是一家在線旅游公司的神奇作品，其采用了生動形象的卡通風(fēng)格加載條，不僅能夠讓訪客在等待的同時玩趣一把，同時還奠定了接下來待顯示內(nèi)容的基調(diào)和風(fēng)格。

Subskill Digital

這家公司的團(tuán)隊使用經(jīng)過精心設(shè)計的公司銘牌妝點預(yù)加載頁面，別具匠心地把品牌認(rèn)知融入到了網(wǎng)站的設(shè)計中。其效果具有美艷的數(shù)碼特色，與整體主題相得益彰。

The Erasable Wall

盡管這個網(wǎng)站訴求的主題比較嚴(yán)肅，但設(shè)計上卻采用了草繪圖形、鉛筆畫和動畫元素呈現(xiàn)出了略顯俏皮的外觀。預(yù)加載頁面也巧妙地采用了相同的風(fēng)格以求完美融入主題。

Dunckelfeld

這個加載動畫的外觀精致巧妙，與整體網(wǎng)站的外觀保持完全風(fēng)格一致。設(shè)計團(tuán)隊巧妙地把公司logo進(jìn)行了動態(tài)化。

Alstercloud

這個充滿想象力的加載頁面讓人躍然期待一次有趣、難忘、原創(chuàng)并充滿動感矢量繪畫的用戶體驗。其預(yù)加載頁面具有濃烈的藝術(shù)氣息，與整體網(wǎng)站的感覺相呼應(yīng)。

Though Brancott Estate

盡管Brancott Estate使用了普通的加載旋轉(zhuǎn)圖標(biāo)這一比較簡單的方法，但與之相結(jié)合的材質(zhì)化背景、粉筆風(fēng)格字體和朗朗上口的宣傳語卻讓人甘心多等一會。

SIXZERO

有的時候想讓頁面吸引人并不意味著一定要大搞創(chuàng)新，在這一點上，SIXZERO向我們展示了如何利用平淡的單色背景給加載頁面帶來一連串純色景觀，達(dá)到吸引人眼球的功效。

Tu Corte

Tu Corte專營肉食品，因此他們的加載圖標(biāo)理所當(dāng)然的使用了生動的牛、豬和禽肉寫實風(fēng)格圖形。

New Jumo Concept

這個預(yù)加載屏幕動畫在結(jié)束時完整呈現(xiàn)出公司logo，進(jìn)而以漂亮、吸引人的方式打開首頁。

Letters, Inc

與公司網(wǎng)站設(shè)計類似，加載頁面也采用了精巧、高端的線條風(fēng)格外觀。其通過動畫勾勒出了首頁中央的圖形，緩慢展現(xiàn)出全部內(nèi)容。

At Work

該網(wǎng)站沒有特別的加載頁面，所有內(nèi)容都在首頁呈現(xiàn)，其中采用了一個逐漸加速的神秘漩渦式動畫以諱莫如深的方式逐漸吸引你的注意力。

Relio

Relio是一個大小能放入口袋的方形專業(yè)設(shè)備，其可用于提供照明。公司網(wǎng)站的加載頁采用了簡潔的輪廓線風(fēng)格圖形展示其產(chǎn)品。設(shè)計團(tuán)隊還對圖形進(jìn)行了動畫制作以求給頁面帶來輕微的動態(tài)感。

Fulvio Luparia

這個頁面沒有采用任何特殊效果，只有一個帶有計數(shù)器的標(biāo)準(zhǔn)圓形圖標(biāo)。但是，其設(shè)計師巧妙的將對比強(qiáng)烈的圖形和色彩以及簡約的背景、隱約可見的標(biāo)題相互融合，完美詮釋了簡約的概念。

Scotch and Soda

這個界面以手繪的風(fēng)格呈現(xiàn)出了一個經(jīng)過精心修飾的基本加載進(jìn)度條。其與登錄頁上分散各處的草繪元素形成了自然的互動。

Engage

Engage的網(wǎng)站設(shè)計在各個角落都充滿了草繪的藝術(shù)氣息，即便是用于指示加載狀態(tài)的普通進(jìn)度條都采用了可愛的手繪風(fēng)格，并完美地搭配了品牌的配色。

All About Medical Training

這家公司的設(shè)計團(tuán)隊充分展現(xiàn)了如何從無到有呈現(xiàn)一切。其加載頁面使用直觀的醫(yī)療風(fēng)格圖標(biāo)以圖形方式顯而易見地揭示了網(wǎng)站的主題。動畫風(fēng)格的陰影則起到了狀態(tài)指示的作用。

Mikado

Mikado在其logo上采用了簡約的扁平化旋轉(zhuǎn)指針，讓用戶在剛剛打開網(wǎng)站的頭幾秒內(nèi)即可對其公司品牌有所認(rèn)知。

Designova

與前面的例子相似，Designova也對其logo進(jìn)行了動畫制作，在加載頁上僅采用了圓形且會跳動的公司徽標(biāo)進(jìn)行裝飾。盡管這一方案非常高端而且制作簡單，但時間長了就會逐漸失去吸引力。

Zipper Galeria

這個網(wǎng)站的設(shè)計團(tuán)隊將公司銘牌改造成了文字型的加載進(jìn)度條，隨著加載進(jìn)度提高，品牌名會逐漸上色。

Kommigraphics

Kommigraphics采用了經(jīng)典的圓形加載圖標(biāo)。其使用扁平化風(fēng)格以及輕柔的雙色配色方案以求與網(wǎng)站設(shè)計主題完美呼應(yīng)。

結(jié)束語

盡管網(wǎng)站使用加載圖標(biāo)不是什么新鮮事物，但別忘了基于flash的網(wǎng)站曾經(jīng)一度遍布這些充滿時尚氣息的小計數(shù)圖標(biāo)?，F(xiàn)在，這些小玩意已經(jīng)更新?lián)Q代，變得更加完善、更加時尚并且更加成熟。設(shè)計師已經(jīng)開始把它們視作網(wǎng)站上不可或缺的組成部分并傾盡全力使其日臻完美，其既要符合網(wǎng)站的整體風(fēng)格又要有自己的特色，所以說，我希望在不遠(yuǎn)的未來，所有動態(tài)網(wǎng)站都能夠開始使用原創(chuàng)而富有娛樂氣息的加載圖標(biāo)。

翻譯：蔣燦

來源：ui中國