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

 

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

 

讓我們以一些優秀的網站為例，學習他們如何克服眾多設計障礙，用超贊的循環視頻使網站更加豐富。

【請自備翻墻軟件，隨時準備翻~翻~翻~】
 

 

循環視頻網站案例

Primal

 

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

 

 

Webgriffe

 

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

Spacejunk

 

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

 

 

Haigh and Hastings

 

 

Haigh and Hastings作為一系列循環視頻的優秀代表,采用復雜的導航菜單,并利用高質量的圖像來做為背景。
 

 

 

Eva

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

Newrow
 

 

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

Gracepoint

 

 

Gracepoint是個“單頁”網站，它引導在線參觀者們關注?？怂闺娨暸_的犯罪題材的影視劇。盡管它只有三個子頁面，但是創作團隊設法在僅有的畫面中通過陰郁的動態攝影風格傳達一種兇險的氣氛。
 

Pastamancini

 

 

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

Dalbello

 

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

Distill

 

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

 

 

Drygital

 

Drygital 呈現的是精彩有趣的動態短視頻，它們都被蒙上了一層微妙的陰影色調，目的就是為了有效的凸顯logo標識、標語以及響應背景上的按鈕。

Trif

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

Mr. Stefan Braun’s

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

Z+

 

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

Boo Cat Club

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

Triptych

 

Triptych的首頁由三幅完美連接的靜態照片組成，配以極好的微妙動效構成其非凡生動的視覺感受，猶如“三聯畫”。

I am Baaz

 

設計團隊為網站加入了些許創意，在制作網站的同時，用五個專業錄像機負責視頻的拍攝，并結合了一些裝飾性印刷效果。

Vesper Hotel

 

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

Tours Altitude

Tours Altitude打破了傳統的以其視頻為中心的主頁設計模式。首頁涵蓋了一些動感十足的視頻，也許可以激發潛在的游客。此外，首頁下方被劃分出7個小區域，當鼠標放在任意一個區域中，區域中就會快速閃現相關圖像。

Umbrella Here

網站通過視覺效果，來傳達公司的總體印象。通過一些精彩的循環視頻配上優秀的背景圖像可以很好的宣傳即將推出的產品。
 

 

結束語

 

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