循環(huán)是HTML5中布爾屬性的視頻標(biāo)簽，像IE 9這樣最新版本的瀏覽器才支持。將一系列的簡短視頻循環(huán)播放是它的主要特征，此功能使網(wǎng)站看起來更加動感，因而受到各網(wǎng)絡(luò)開發(fā)社區(qū)的熱烈追捧，我們在很多網(wǎng)站上都能看到它。

 

這種重復(fù)播放的短視頻適用于各類網(wǎng)站，從在線檔案整合網(wǎng)站到移動應(yīng)用程序網(wǎng)站。網(wǎng)絡(luò)開發(fā)者偏好5到10秒的短視頻，并力求在短時間內(nèi)將主題及目標(biāo)表述清楚，例如，通過不斷變化的報告類視頻來展示機構(gòu)的潛力。網(wǎng)站的循環(huán)視頻有助于引發(fā)人們更多的關(guān)注，激發(fā)興趣，完善用戶體驗，讓更多人產(chǎn)生共鳴并逐漸建立信任。

 

讓我們以一些優(yōu)秀的網(wǎng)站為例，學(xué)習(xí)他們?nèi)绾慰朔姸嘣O(shè)計障礙，用超贊的循環(huán)視頻使網(wǎng)站更加豐富。

【請自備翻墻軟件，隨時準(zhǔn)備翻~翻~翻~】
 

 

循環(huán)視頻網(wǎng)站案例

Primal

 

Primal包含了一組5秒左右的視頻伴著一聲尖叫作為奇特的開場。其首頁是一個雙關(guān)的循環(huán)視頻。

 

 

Webgriffe

 

Webgriffe是一個極具個性的品牌，網(wǎng)站用一系列循環(huán)的短視頻很好地展現(xiàn)了“歡迎”的概念，大氣簡潔的視覺設(shè)計令人難忘。接下來的視頻也以同樣的方式引導(dǎo)觀者了解品牌的每一個工作流程。

Spacejunk

 

Spacejunk，從第一秒，就留給用戶深刻的印象，感覺圖像更加精致。一系列令人興奮的專業(yè)視頻像是在這里無限重復(fù)執(zhí)行一項重要的任務(wù)。

 

 

Haigh and Hastings

 

 

Haigh and Hastings作為一系列循環(huán)視頻的優(yōu)秀代表,采用復(fù)雜的導(dǎo)航菜單,并利用高質(zhì)量的圖像來做為背景。
 

 

 

Eva

該頁面巧妙地把信息分為三個部分，你的眼睛會下意識的被興趣點吸引，層次感讓信息更加明確，你可以快速過濾到不重要的信息。

Newrow
 

 

這個視頻循環(huán)的主要目標(biāo)是鼓勵那些想要充分享受生活的人，以及那些接受新式教育的人。這個主頁將標(biāo)語奇妙的進行了處理，分裂成“創(chuàng)造性地”和“有效地”兩個部分。

Gracepoint

 

 

Gracepoint是個“單頁”網(wǎng)站，它引導(dǎo)在線參觀者們關(guān)注福克斯電視臺的犯罪題材的影視劇。盡管它只有三個子頁面，但是創(chuàng)作團隊設(shè)法在僅有的畫面中通過陰郁的動態(tài)攝影風(fēng)格傳達(dá)一種兇險的氣氛。
 

Pastamancini

 

 

Pastamancini讓人感到純潔和自然，同樣得益于一系列的短視頻功能，圍繞自然風(fēng)光、鄉(xiāng)村美景進行了選景拍攝，完美的解決了靜態(tài)網(wǎng)站帶來的視覺疲勞。
 

Dalbello

 

在這里，你可以看到風(fēng)景如畫的雪山場景視頻，勇往直前、帶著激情挑戰(zhàn)極限運動，通過一輪又一輪的重復(fù)動作來強化訓(xùn)練。這些情緒、氛圍被完美地融入了整個網(wǎng)站設(shè)計，并借助光影來完善整個主題。
 

Distill

 

Distill 關(guān)注原創(chuàng)，主要為那些需要免費高清視頻的個人或商業(yè)項目提供資源。歡迎界面是一幅流水潺潺的郊區(qū)美景視頻，它是闡述網(wǎng)站理念的一個極具代表性的作品，不需要你有多專業(yè)，我們關(guān)注的是原創(chuàng)，是你發(fā)現(xiàn)的美景。

 

 

Drygital

 

Drygital 呈現(xiàn)的是精彩有趣的動態(tài)短視頻，它們都被蒙上了一層微妙的陰影色調(diào)，目的就是為了有效的凸顯logo標(biāo)識、標(biāo)語以及響應(yīng)背景上的按鈕。

Trif

Trif看起來非常深邃，給人帶來一種復(fù)雜的感覺，創(chuàng)作團隊選擇了一系列迷幻、模糊但耐人尋味的視頻，相信一定會吸引到你。

Mr. Stefan Braun’s

Mr. Stefan Braun的官網(wǎng)洋溢著積極樂觀的情緒、令人激動的氛圍和無限的樂趣，派對主題視頻記錄著他們的日常，使網(wǎng)站設(shè)計的風(fēng)格更具個性化。如果你是夜店小達(dá)人，這個網(wǎng)站一定有你喜歡的東西。

Z+

 

使用神奇的gif動畫短片來預(yù)示未來APP工作流程對于移動開發(fā)者是一個多么重要的設(shè)計趨勢。 Z +的官方網(wǎng)站上包含的幾個視頻就給這個小而美的游戲做了一些微妙的預(yù)演。

Boo Cat Club

作為網(wǎng)站建立的初衷，不僅用瑯瑯上口的標(biāo)語“喚醒與活力”來為boo cat 俱樂部定義，同時還配上了幾個短視頻來傳達(dá)愉悅心情。這種設(shè)計更加有效的鼓勵在線用戶對網(wǎng)站進行繼續(xù)訪問。

Triptych

 

Triptych的首頁由三幅完美連接的靜態(tài)照片組成，配以極好的微妙動效構(gòu)成其非凡生動的視覺感受，猶如“三聯(lián)畫”。

I am Baaz

 

設(shè)計團隊為網(wǎng)站加入了些許創(chuàng)意，在制作網(wǎng)站的同時，用五個專業(yè)錄像機負(fù)責(zé)視頻的拍攝，并結(jié)合了一些裝飾性印刷效果。

Vesper Hotel

 

首頁視頻借助晚霞美景使在線訪客相信黃昏旅館能提供給他們一個難忘的、沒有瑕疵的暢快享受。

Tours Altitude

Tours Altitude打破了傳統(tǒng)的以其視頻為中心的主頁設(shè)計模式。首頁涵蓋了一些動感十足的視頻，也許可以激發(fā)潛在的游客。此外，首頁下方被劃分出7個小區(qū)域，當(dāng)鼠標(biāo)放在任意一個區(qū)域中，區(qū)域中就會快速閃現(xiàn)相關(guān)圖像。

Umbrella Here

網(wǎng)站通過視覺效果，來傳達(dá)公司的總體印象。通過一些精彩的循環(huán)視頻配上優(yōu)秀的背景圖像可以很好的宣傳即將推出的產(chǎn)品。
 

 

結(jié)束語

 

Vine短視頻，成為業(yè)余電影制作的一大趨勢，已經(jīng)影響了很多網(wǎng)站的設(shè)計。一系列循環(huán)短視頻霸占了網(wǎng)頁頭版，讓網(wǎng)站更加引人入勝，并能在一定程度上取悅用戶。