循環(huán)(Loop)是現(xiàn)代瀏覽器中HTML5視頻標(biāo)簽下的布爾屬性,包括IE9在內(nèi)的主流瀏覽器都支持這一屬性。它能讓一個(gè)或者一系列視頻短片循環(huán)播放。開發(fā)者社區(qū)中,網(wǎng)頁(yè)設(shè)計(jì)師非常青睞這一功能,并且截至目前影響了許多項(xiàng)目,讓網(wǎng)站看起來(lái)更加絢麗和精彩。
從作品展示類的網(wǎng)站到移動(dòng)端的專題頁(yè),循環(huán)視頻背景的運(yùn)用范疇非常廣泛。網(wǎng)頁(yè)開發(fā)者們將5~10的視頻作為背景循環(huán)播放,而視頻內(nèi)容通常會(huì)展現(xiàn)出某個(gè)主題,或者有目的性地展現(xiàn)達(dá)成某個(gè)目標(biāo)的過(guò)程,呈現(xiàn)企業(yè)或者團(tuán)隊(duì)的潛在實(shí)力。這種展現(xiàn)方式比起傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)手法,更能挑起用戶的興趣,引人注意,豐富的信息量和多變的內(nèi)容會(huì)讓整體的用戶體驗(yàn)再上一級(jí)臺(tái)階。雖然這些視頻拍攝起來(lái)非常的費(fèi)神費(fèi)力,也許你需要趴在地上拍攝一些場(chǎng)景,但是當(dāng)網(wǎng)站出來(lái)之后,你會(huì)發(fā)現(xiàn)這些努力都是值得的。
如果你還是下不了決心,那么一起來(lái)看看下面這些優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品吧??朔刂卣系K制作出的循環(huán)動(dòng)態(tài)背景是如何震撼人心的。
Haigh and Hastings
擁有介紹功能的循環(huán)視頻和看起來(lái)優(yōu)雅簡(jiǎn)約的導(dǎo)航結(jié)合到一起,其他產(chǎn)品則使用了高清圖片作為背景,同樣起到了卓有成效的導(dǎo)航作用。
Webgriffe
Webgriffe 使用循環(huán)視頻來(lái)支撐他們的品牌形象,一系列精心拍攝的短視頻被剪輯成短短的十幾秒,不僅介紹了品牌的特色,還用到位的拍攝手法營(yíng)造出令人難忘的場(chǎng)景,循環(huán)播放給用戶強(qiáng)化品牌印象。視頻當(dāng)中還通過(guò)一組工作流程的展示來(lái)呈現(xiàn)了他們的專業(yè)性。
Spacejunk
從視頻的第一秒開始,Spacejunk 就將這個(gè)品牌獨(dú)特的印記印在用戶心頭,獨(dú)一無(wú)二的視覺(jué)設(shè)計(jì)和精致入微的視頻圖像令人流連忘返。專業(yè)的設(shè)計(jì)和強(qiáng)大的執(zhí)行性配合著循環(huán)播放,循環(huán)視頻的作用機(jī)會(huì)被他們運(yùn)用到了極致。
Eva
毫無(wú)疑問(wèn)這個(gè)充滿吸引力著陸頁(yè)是通過(guò)循環(huán)視頻來(lái)營(yíng)造出充滿吸引力的界面的。設(shè)計(jì)師明智地將界面劃分為三個(gè)部分,在視覺(jué)上營(yíng)造出趣味性和娛樂(lè)性,最后又落腳在工作流上。
Newrow
這里的循環(huán)視頻被用作鼓勵(lì)那些熱愛(ài)生活的人,循環(huán)播放的視頻內(nèi)容被劃分為兩個(gè)部分,創(chuàng)造性地展示了兩種生活方式的差異。
Gracepoint
Gsacepoint 是一個(gè)典型的單頁(yè)網(wǎng)站,它主要的功能是引導(dǎo)用戶關(guān)注Fox電視臺(tái)的罪案劇。設(shè)計(jì)巧妙地通過(guò)三個(gè)子頁(yè)面和風(fēng)格陰郁的循環(huán)視頻背景來(lái)營(yíng)造出陰謀的氛圍。
Pastamancini
多虧了這組壯觀的風(fēng)景視頻和田園風(fēng)光的特寫,Pastamancini 網(wǎng)站充滿了活力和自然的氛圍,頁(yè)面中其他的元素也很好地呼應(yīng)了這部分內(nèi)容。
Dalbello
充滿了活力的雪山場(chǎng)景和運(yùn)動(dòng)的氛圍被幾個(gè)短視頻完全展現(xiàn)了出來(lái),為了烘托出視頻內(nèi)容,網(wǎng)頁(yè)在配色和視覺(jué)元素的選取上也獨(dú)具匠心,烘托出了雪山和運(yùn)動(dòng)的主題。