等待和加載動效幾乎是無處不在了。設(shè)計師和設(shè)計機(jī)構(gòu)都很清楚,加載動效幾乎是目前網(wǎng)站和APP設(shè)計中無法繞過且必須的組成部分,它們不僅是大勢所趨而且是打造優(yōu)秀用戶體驗的必須組件。
雖然目前很多產(chǎn)品將加載/等待動效作為強(qiáng)化用戶第一印象的組件,但是它的實際使用范疇遠(yuǎn)不止于這一部分,在許多設(shè)計項目中,加載動效幾乎做到了無處不在。內(nèi)頁切換的時候可以用,組件加載的時候可以用,甚至幻燈片切換的時候也同樣可以用上。不僅如此,它還可以用承載數(shù)據(jù)加載的過程,呈現(xiàn)狀態(tài)改變的過程,填補(bǔ)崩潰或者出錯的頁面,它們承前啟后,將錯誤和等待轉(zhuǎn)化為令用戶愉悅的細(xì)節(jié)。
等待和加載動效中,最常見的表現(xiàn)形式是進(jìn)度條,但是許多設(shè)計師采用了更加有趣的表現(xiàn)手法,接下來我們一起來看看這些案例。
4:20 Dead Obies
加載動效并不一定非要用進(jìn)度條,設(shè)計師在這個頁面中將LOADING這個詞的每個字母拆開,不斷復(fù)制來呈現(xiàn)加載過程,靜態(tài)的文字和動態(tài)的效果交錯,讓人在新鮮有趣的動畫中度過略顯漫長的加載過程。
NewsTech
充滿科技感的頁面設(shè)計為整個網(wǎng)站定下了基調(diào),這種面向未來的設(shè)計手法在這個頁面中體現(xiàn)到極致,加載動效采用了各種數(shù)據(jù)加載的樣式,將等待過程變成了一個巨大的“WOW”。
Ferias Beach Park
這個Ferias海灘公園的頁面借由有趣的配色和動效傳達(dá)出歡快的情緒,加載動效中童趣盎然的設(shè)計也令人難忘。
Mad Max Fury Road
年度神作《Mad Max 4》本就是以突出的視覺設(shè)計而令人記住,所以它的官網(wǎng)在設(shè)計美學(xué)上也保持了一致性。加載動效中那個粗糙但古樸的LOGO也與整個電影風(fēng)格相呼應(yīng),營造出躁動而個性十足的氛圍。
Panda Raid
網(wǎng)站的加載動效還是保持了進(jìn)度條的基本設(shè)計,但是展現(xiàn)方式上借用了汽車的形象,加載速度不同的時候輪胎滾動的速率也不同,有趣、擬真也和網(wǎng)站主題貼合。
Wiser Digital
在加載過程中,設(shè)計師用最經(jīng)典的游戲乒乓球來幫你填補(bǔ)等待的時間,雖然你無法參與到游戲當(dāng)中,但是這種情懷滿滿的加載動效給人印象非常深刻。