就是這么驚艷!炫酷生動的循環視頻背景網頁設計實戰 - 優設網 - UISDC

就是這么驚艷!炫酷生動的循環視頻背景網頁設計實戰

2015/11/21 16706評論區

looped-videos-website-design-1

循環(Loop)是現代瀏覽器中HTML5視頻標簽下的布爾屬性,包括IE9在內的主流瀏覽器都支持這一屬性。它能讓一個或者一系列視頻短片循環播放。開發者社區中,網頁設計師非常青睞這一功能,并且截至目前影響了許多項目,讓網站看起來更加絢麗和精彩。

從作品展示類的網站到移動端的專題頁,循環視頻背景的運用范疇非常廣泛。網頁開發者們將5~10的視頻作為背景循環播放,而視頻內容通常會展現出某個主題,或者有目的性地展現達成某個目標的過程,呈現企業或者團隊的潛在實力。這種展現方式比起傳統的網頁設計手法,更能挑起用戶的興趣,引人注意,豐富的信息量和多變的內容會讓整體的用戶體驗再上一級臺階。雖然這些視頻拍攝起來非常的費神費力,也許你需要趴在地上拍攝一些場景,但是當網站出來之后,你會發現這些努力都是值得的。

如果你還是下不了決心,那么一起來看看下面這些優秀的網頁設計作品吧。克服重重障礙制作出的循環動態背景是如何震撼人心的。

Haigh and Hastings

擁有介紹功能的循環視頻和看起來優雅簡約的導航結合到一起,其他產品則使用了高清圖片作為背景,同樣起到了卓有成效的導航作用。

Webgriffe

Webgriffe 使用循環視頻來支撐他們的品牌形象,一系列精心拍攝的短視頻被剪輯成短短的十幾秒,不僅介紹了品牌的特色,還用到位的拍攝手法營造出令人難忘的場景,循環播放給用戶強化品牌印象。視頻當中還通過一組工作流程的展示來呈現了他們的專業性。

Spacejunk

從視頻的第一秒開始,Spacejunk 就將這個品牌獨特的印記印在用戶心頭,獨一無二的視覺設計和精致入微的視頻圖像令人流連忘返。專業的設計和強大的執行性配合著循環播放,循環視頻的作用機會被他們運用到了極致。

Eva

毫無疑問這個充滿吸引力著陸頁是通過循環視頻來營造出充滿吸引力的界面的。設計師明智地將界面劃分為三個部分,在視覺上營造出趣味性和娛樂性,最后又落腳在工作流上。

Newrow

這里的循環視頻被用作鼓勵那些熱愛生活的人,循環播放的視頻內容被劃分為兩個部分,創造性地展示了兩種生活方式的差異。

Gracepoint

Gsacepoint 是一個典型的單頁網站,它主要的功能是引導用戶關注Fox電視臺的罪案劇。設計巧妙地通過三個子頁面和風格陰郁的循環視頻背景來營造出陰謀的氛圍。

Pastamancini

多虧了這組壯觀的風景視頻和田園風光的特寫,Pastamancini 網站充滿了活力和自然的氛圍,頁面中其他的元素也很好地呼應了這部分內容。

Dalbello

充滿了活力的雪山場景和運動的氛圍被幾個短視頻完全展現了出來,為了烘托出視頻內容,網頁在配色和視覺元素的選取上也獨具匠心,烘托出了雪山和運動的主題。

Distill

Distill 項目是一個為創意工作者而準備的項目,提供個人和商用的創意短視頻。歡迎頁面中漂亮的視頻景觀不僅有歡迎之用,而且也是體現整個項目價值的重要組成部分。

Drygital

打開 Drygital 的頁面,映入眼簾的短視頻充滿了動態和炫目的效果,褪色特效讓視頻同浮動于視頻之上的LOGO看起來對比明顯。巧妙地視頻色調調整讓整個網站的視覺元素相輔相成。

Trif

Trif 的設計看起來頗為先鋒,給人感覺非常的復雜。這種神秘而曖昧的視頻內容選取,很容易喚醒用戶對于網站內容的興趣。

Mr. Stefan Braun’s

如何借助短視頻展現出積極向上地情緒,營造出有趣而好玩的氛圍?看看這個網站你就會知道這樣的循環視頻背景要怎么拍,如何剪輯才行。

Z+

借助循環視頻來展現團隊工作流程,可以說是這類視頻設計的一個重要分支。Z+ 的官網也是這么玩兒的,不過它們還在視頻中植入了好幾個微妙的暗示作為彩蛋。

Boo Cat Club

Boo Cat 俱樂部首頁所使用的視頻傳達出的愉悅氛圍同網站的口號“鮮活&生動”相互呼應,這種設計讓用戶和網站在情緒上更容易相互呼應。

Triptych

網站首頁參考了三聯畫的結構來營造布局,靜態的畫面之下隱藏了精彩而細膩的循環視頻。它們呼應了三聯畫的藝術主題,還借助技術讓這種藝術形式擁有了更強的生命力。

Primal

整個首頁是基于一個包含了若干不同含義短視頻的循環視頻組,其中每個視頻長度為5秒,充滿張力,各不相同,略顯古怪,但是令人印象深刻。

I am Baaz

為了讓整個網站看起來創意十足,整個循環視頻背景是由5個專業的小視頻組成的,手繪字體和視頻背景相得益彰,排版設計也是精心制作而成。你可以在這個網站感受到專業的電影人的專業和熱忱。

Vesper Hotel

通過美妙如畫的視頻,Vesper酒店力圖為每個訪客呈現出它獨特的美和獨一無二的體驗,讓你感受到它所提供的令人難忘的時光。

Tours Altitude

Tours Altitude 打破了首頁以單個循環視頻為核心的設計手法,不同主題的視頻同底部不同導航區塊聯系到了一起,光標移動到不同區塊的時候會展現出不同的內容。

Umbrella Here

通過優質而細膩的循環視頻來展現產品的不同側面,從而讓用戶對產品有清晰而完整的認知,這也是循環視頻的重要功能之一。

【那些充滿異域風情的網頁設計】

《兼容并蓄!20個來自澳大利亞最優秀的網頁設計》
《狂拽酷炫!20個來自美國最優秀的網頁設計》
《KEEP CALM & DESIGN!26個來自英國最優秀的網頁設計》
《嚴謹而浪漫!20個來自德國最優秀的網頁設計》
《情迷西班牙!20個來自西班牙最優秀的網頁設計》
《時尚雅致!25個來自法國最優秀的網頁設計》
《請多關照!20個來自日本最優秀的網頁設計》

原文地址:designmodo
優設譯者:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量105萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/looped-videos-website-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特