網(wǎng)站中那些令人愛不釋手的加載動(dòng)效設(shè)計(jì)
等待和加載動(dòng)效幾乎是無(wú)處不在了。設(shè)計(jì)師和設(shè)計(jì)機(jī)構(gòu)都很清楚,加載動(dòng)效幾乎是目前網(wǎng)站和APP設(shè)計(jì)中無(wú)法繞過且必須的組成部分,它們不僅是大勢(shì)所趨而且是打造優(yōu)秀用戶體驗(yàn) 的必須組件。
雖然目前很多產(chǎn)品將加載/等待動(dòng)效作為強(qiáng)化用戶第一印象的組件,但是它的實(shí)際使用范疇遠(yuǎn)不止于這一部分,在許多設(shè)計(jì)項(xiàng)目中,加載動(dòng)效幾乎做到了無(wú)處不在。內(nèi)頁(yè)切換的時(shí)候可以用,組件加載的時(shí)候可以用,甚至幻燈片切換的時(shí)候也同樣可以用上。不僅如此,它還可以用承載數(shù)據(jù)加載的過程,呈現(xiàn)狀態(tài)改變的過程,填補(bǔ)崩潰或者出錯(cuò)的頁(yè)面,它們承前啟后,將錯(cuò)誤和等待轉(zhuǎn)化為令用戶愉悅的細(xì)節(jié)。
等待和加載動(dòng)效中,最常見的表現(xiàn)形式是進(jìn)度條,但是許多設(shè)計(jì)師采用了更加有趣的表現(xiàn)手法,接下來(lái)我們一起來(lái)看看這些案例。
加載動(dòng)效并不一定非要用進(jìn)度條,設(shè)計(jì)師在這個(gè)頁(yè)面中將LOADING這個(gè)詞的每個(gè)字母拆開,不斷復(fù)制來(lái)呈現(xiàn)加載過程,靜態(tài)的文字和動(dòng)態(tài)的效果交錯(cuò),讓人在新鮮有趣的動(dòng)畫中度過略顯漫長(zhǎng)的加載過程。
充滿科技感的頁(yè)面設(shè)計(jì)為整個(gè)網(wǎng)站定下了基調(diào),這種面向未來(lái)的設(shè)計(jì)手法在這個(gè)頁(yè)面中體現(xiàn)到極致,加載動(dòng)效采用了各種數(shù)據(jù)加載的樣式,將等待過程變成了一個(gè)巨大的“WOW”。
這個(gè)Ferias海灘公園的頁(yè)面借由有趣的配色和動(dòng)效傳達(dá)出歡快的情緒,加載動(dòng)效中童趣盎然的設(shè)計(jì)也令人難忘。
年度神作《Mad Max 4》本就是以突出的視覺設(shè)計(jì)而令人記住,所以它的官網(wǎng)在設(shè)計(jì)美學(xué)上也保持了一致性。加載動(dòng)效中那個(gè)粗糙但古樸的LOGO也與整個(gè)電影風(fēng)格相呼應(yīng),營(yíng)造出躁動(dòng)而個(gè)性十足的氛圍。
網(wǎng)站的加載動(dòng)效還是保持了進(jìn)度條的基本設(shè)計(jì),但是展現(xiàn)方式上借用了汽車的形象,加載速度不同的時(shí)候輪胎滾動(dòng)的速率也不同,有趣、擬真也和網(wǎng)站主題貼合。
在加載過程中,設(shè)計(jì)師用最經(jīng)典的游戲乒乓球來(lái)幫你填補(bǔ)等待的時(shí)間,雖然你無(wú)法參與到游戲當(dāng)中,但是這種情懷滿滿的加載動(dòng)效給人印象非常深刻。
為了填補(bǔ)等待的時(shí)間,設(shè)計(jì)師將朗朗上口的文字做成動(dòng)效,在加載的時(shí)候用它們來(lái)與你進(jìn)行互動(dòng)。雖然許多文字是一閃而過,但是你可以在閱讀中度過這段時(shí)間。
Tham Nguyen 是一位著名的法國(guó)女設(shè)計(jì)師,她的個(gè)人網(wǎng)站中糅合了自然的情懷和女性的細(xì)膩,加載動(dòng)畫采用了走路的小女孩兒,俏皮而有趣。
和前面許多案例一樣,設(shè)計(jì)師采用了扁平風(fēng)的動(dòng)態(tài)插畫來(lái)填補(bǔ)等待時(shí)間,強(qiáng)化整體風(fēng)格。
其實(shí)這個(gè)加載動(dòng)效看起來(lái)并不夠細(xì)膩,但是它充分運(yùn)用了幾何圖形,四個(gè)簡(jiǎn)單有趣的方格輪流變幻,值得學(xué)習(xí)。
設(shè)計(jì)師在這個(gè)網(wǎng)頁(yè)中,使用的是吐著氣泡的魚來(lái)作為過度,古樸的文字強(qiáng)化了網(wǎng)站的品牌形象,簡(jiǎn)單的色調(diào)和魚的形象也充滿了日系網(wǎng)站的獨(dú)特氣質(zhì)。
和之前的網(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í)小,看起來(lái)自然而混亂,但是仔細(xì)看你又仿佛能找到某種規(guī)律,這個(gè)有趣的過程中你會(huì)忘記時(shí)間的流動(dòng),直到網(wǎng)站加載完成。
水波紋擴(kuò)散一般的加載動(dòng)效,在黑白色調(diào)之下,兼顧了自然的特征和科技的感覺,微妙的互補(bǔ)效應(yīng)和震動(dòng)的效果令整個(gè)動(dòng)效簡(jiǎn)單而賞心悅目。
大膽的排版和明顯的對(duì)比讓整個(gè)頁(yè)面給人沉穩(wěn)而舒服的感覺,用數(shù)字來(lái)呈現(xiàn)加載過程,字體隨著加載不透明度會(huì)逐步提升,讓人感受到過程的變化,簡(jiǎn)單但是非常值得學(xué)習(xí)。
這個(gè)頁(yè)面的加載動(dòng)效堪稱是夢(mèng)幻級(jí)的,它不僅充滿藝術(shù)感,而且設(shè)計(jì)得整齊劃一,加上戲劇感十足的背景,兼顧美觀和技術(shù)的動(dòng)效變化簡(jiǎn)直是教科書一般的設(shè)計(jì)。
打開頁(yè)面之后,鼠標(biāo)光標(biāo)變成了復(fù)古的沙漏造型,更讓人驚喜的是加載動(dòng)畫是一個(gè)不停吞吐著彩虹色帶的MTV Logo,復(fù)古而有趣。
Y7K的加載動(dòng)效其實(shí)蠻討巧的,巨大的LOGO上疊加一個(gè)色彩豐富的視頻,漂亮而簡(jiǎn)單。
這個(gè)網(wǎng)站的動(dòng)效設(shè)計(jì)手法并不鮮見,但是設(shè)計(jì)是不僅僅是添加了進(jìn)度條那么簡(jiǎn)單,他還用漸變的動(dòng)態(tài)文字告訴用戶正在加載網(wǎng)站的哪個(gè)部分。時(shí)間很長(zhǎng),但并不無(wú)趣。
結(jié)語(yǔ)
動(dòng)效設(shè)計(jì)是小伎倆,但是它在用戶體驗(yàn)設(shè)計(jì)中的作用是不可估量的,它讓折磨人的等待變成了愉悅的消遣。動(dòng)效設(shè)計(jì)是大勢(shì)所趨,加載/等待動(dòng)效也是其中的重要組成部分,如果你熱衷于動(dòng)效設(shè)計(jì),不妨關(guān)注一下這個(gè)領(lǐng)域。
本文地址:http://irelandcustomcontracting.com/tutorial/di2939.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏