循環(huán)是HTML5中布爾屬性的視頻標(biāo)簽,像IE 9這樣最新版本的瀏覽器才支持。將一系列的簡(jiǎn)短視頻循環(huán)播放是它的主要特征,此功能使網(wǎng)站看起來(lái)更加動(dòng)感,因而受到各網(wǎng)絡(luò)開發(fā)社區(qū)的熱烈追捧,我們?cè)诤芏嗑W(wǎng)站上都能看到它。
這種重復(fù)播放的短視頻適用于各類網(wǎng)站,從在線檔案整合網(wǎng)站到移動(dòng)應(yīng)用程序網(wǎng)站。網(wǎng)絡(luò)開發(fā)者偏好5到10秒的短視頻,并力求在短時(shí)間內(nèi)將主題及目標(biāo)表述清楚,例如,通過不斷變化的報(bào)告類視頻來(lái)展示機(jī)構(gòu)的潛力。網(wǎng)站的循環(huán)視頻有助于引發(fā)人們更多的關(guān)注,激發(fā)興趣,完善用戶體驗(yàn),讓更多人產(chǎn)生共鳴并逐漸建立信任。
讓我們以一些優(yōu)秀的網(wǎng)站為例,學(xué)習(xí)他們?nèi)绾慰朔姸嘣O(shè)計(jì)障礙,用超贊的循環(huán)視頻使網(wǎng)站更加豐富。
【請(qǐng)自備翻墻軟件,隨時(shí)準(zhǔn)備翻~翻~翻~】
循環(huán)視頻網(wǎng)站案例
Primal
Primal包含了一組5秒左右的視頻伴著一聲尖叫作為奇特的開場(chǎng)。其首頁(yè)是一個(gè)雙關(guān)的循環(huán)視頻。
Webgriffe
Webgriffe是一個(gè)極具個(gè)性的品牌,網(wǎng)站用一系列循環(huán)的短視頻很好地展現(xiàn)了“歡迎”的概念,大氣簡(jiǎn)潔的視覺設(shè)計(jì)令人難忘。接下來(lái)的視頻也以同樣的方式引導(dǎo)觀者了解品牌的每一個(gè)工作流程。
Spacejunk
Spacejunk,從第一秒,就留給用戶深刻的印象,感覺圖像更加精致。一系列令人興奮的專業(yè)視頻像是在這里無(wú)限重復(fù)執(zhí)行一項(xiàng)重要的任務(wù)。
Haigh and Hastings
Haigh and Hastings作為一系列循環(huán)視頻的優(yōu)秀代表,采用復(fù)雜的導(dǎo)航菜單,并利用高質(zhì)量的圖像來(lái)做為背景。
Eva
該頁(yè)面巧妙地把信息分為三個(gè)部分,你的眼睛會(huì)下意識(shí)的被興趣點(diǎn)吸引,層次感讓信息更加明確,你可以快速過濾到不重要的信息。
Newrow
這個(gè)視頻循環(huán)的主要目標(biāo)是鼓勵(lì)那些想要充分享受生活的人,以及那些接受新式教育的人。這個(gè)主頁(yè)將標(biāo)語(yǔ)奇妙的進(jìn)行了處理,分裂成“創(chuàng)造性地”和“有效地”兩個(gè)部分。
Gracepoint
Gracepoint是個(gè)“單頁(yè)”網(wǎng)站,它引導(dǎo)在線參觀者們關(guān)注??怂闺娨暸_(tái)的犯罪題材的影視劇。盡管它只有三個(gè)子頁(yè)面,但是創(chuàng)作團(tuán)隊(duì)設(shè)法在僅有的畫面中通過陰郁的動(dòng)態(tài)攝影風(fēng)格傳達(dá)一種兇險(xiǎn)的氣氛。
Pastamancini
Pastamancini讓人感到純潔和自然,同樣得益于一系列的短視頻功能,圍繞自然風(fēng)光、鄉(xiāng)村美景進(jìn)行了選景拍攝,完美的解決了靜態(tài)網(wǎng)站帶來(lái)的視覺疲勞。
Dalbello
在這里,你可以看到風(fēng)景如畫的雪山場(chǎng)景視頻,勇往直前、帶著激情挑戰(zhàn)極限運(yùn)動(dòng),通過一輪又一輪的重復(fù)動(dòng)作來(lái)強(qiáng)化訓(xùn)練。這些情緒、氛圍被完美地融入了整個(gè)網(wǎng)站設(shè)計(jì),并借助光影來(lái)完善整個(gè)主題。
Distill
Distill 關(guān)注原創(chuàng),主要為那些需要免費(fèi)高清視頻的個(gè)人或商業(yè)項(xiàng)目提供資源。歡迎界面是一幅流水潺潺的郊區(qū)美景視頻,它是闡述網(wǎng)站理念的一個(gè)極具代表性的作品,不需要你有多專業(yè),我們關(guān)注的是原創(chuàng),是你發(fā)現(xiàn)的美景。
Drygital
Drygital 呈現(xiàn)的是精彩有趣的動(dòng)態(tài)短視頻,它們都被蒙上了一層微妙的陰影色調(diào),目的就是為了有效的凸顯logo標(biāo)識(shí)、標(biāo)語(yǔ)以及響應(yīng)背景上的按鈕。
Trif
Trif看起來(lái)非常深邃,給人帶來(lái)一種復(fù)雜的感覺,創(chuàng)作團(tuán)隊(duì)選擇了一系列迷幻、模糊但耐人尋味的視頻,相信一定會(huì)吸引到你。
Mr. Stefan Braun’s
Mr. Stefan Braun的官網(wǎng)洋溢著積極樂觀的情緒、令人激動(dòng)的氛圍和無(wú)限的樂趣,派對(duì)主題視頻記錄著他們的日常,使網(wǎng)站設(shè)計(jì)的風(fēng)格更具個(gè)性化。如果你是夜店小達(dá)人,這個(gè)網(wǎng)站一定有你喜歡的東西。
Z+
使用神奇的gif動(dòng)畫短片來(lái)預(yù)示未來(lái)APP工作流程對(duì)于移動(dòng)開發(fā)者是一個(gè)多么重要的設(shè)計(jì)趨勢(shì)。 Z +的官方網(wǎng)站上包含的幾個(gè)視頻就給這個(gè)小而美的游戲做了一些微妙的預(yù)演。
Boo Cat Club
作為網(wǎng)站建立的初衷,不僅用瑯瑯上口的標(biāo)語(yǔ)“喚醒與活力”來(lái)為boo cat 俱樂部定義,同時(shí)還配上了幾個(gè)短視頻來(lái)傳達(dá)愉悅心情。這種設(shè)計(jì)更加有效的鼓勵(lì)在線用戶對(duì)網(wǎng)站進(jìn)行繼續(xù)訪問。
Triptych
Triptych的首頁(yè)由三幅完美連接的靜態(tài)照片組成,配以極好的微妙動(dòng)效構(gòu)成其非凡生動(dòng)的視覺感受,猶如“三聯(lián)畫”。
I am Baaz
設(shè)計(jì)團(tuán)隊(duì)為網(wǎng)站加入了些許創(chuàng)意,在制作網(wǎng)站的同時(shí),用五個(gè)專業(yè)錄像機(jī)負(fù)責(zé)視頻的拍攝,并結(jié)合了一些裝飾性印刷效果。
Vesper Hotel
首頁(yè)視頻借助晚霞美景使在線訪客相信黃昏旅館能提供給他們一個(gè)難忘的、沒有瑕疵的暢快享受。
Tours Altitude
Tours Altitude打破了傳統(tǒng)的以其視頻為中心的主頁(yè)設(shè)計(jì)模式。首頁(yè)涵蓋了一些動(dòng)感十足的視頻,也許可以激發(fā)潛在的游客。此外,首頁(yè)下方被劃分出7個(gè)小區(qū)域,當(dāng)鼠標(biāo)放在任意一個(gè)區(qū)域中,區(qū)域中就會(huì)快速閃現(xiàn)相關(guān)圖像。
Umbrella Here
網(wǎng)站通過視覺效果,來(lái)傳達(dá)公司的總體印象。通過一些精彩的循環(huán)視頻配上優(yōu)秀的背景圖像可以很好的宣傳即將推出的產(chǎn)品。
結(jié)束語(yǔ)
Vine短視頻,成為業(yè)余電影制作的一大趨勢(shì),已經(jīng)影響了很多網(wǎng)站的設(shè)計(jì)。一系列循環(huán)短視頻霸占了網(wǎng)頁(yè)頭版,讓網(wǎng)站更加引人入勝,并能在一定程度上取悅用戶。