隨著高分辨率屏幕和網速的大幅普及，明年的網頁設計領域肯定會進階出新的玩法，比如今天說的這三員大將：高清圖、視頻、動畫，現在有很多網站已經用上了，具體怎么用，有哪些技巧，優秀范例等等，來看看小編今天帶來的這篇干貨。
網頁設計中最熱門的技巧之一，就是高清背景圖，這得益于高清顯示屏的普及。但面對復雜的商標時，就不好處理了。
本文中，我們來展望一下網頁設計的未來。高清網頁設計是否能主導網絡，這已經不是問題了，關鍵是高分辨率顯示屏何時能夠普及，這是提升視覺設計的必備條件。
下面開始，我們將要探索如何運用圖片、視頻、或是動畫來創建高清背景，并且把所有內容有層次地組合。
圖片
超大圖、焦點圖、全屏圖。
以上幾個詞，最適合用來描述現代網頁設計的背景圖片。設計師們對高清設計不僅停留在思考層面，他們將其發揮到極致，用背景圖占據了整個畫面。
Macquarie-park
這種設計技巧很有效，因為用戶天生就是視覺動物。畢竟我們理解周圍世界時，視覺在主導潛意識。而且，令人愉悅的圖片在一定程度上能創造更好的用戶體驗，因為我們理所當然認為有吸引力的東西更好。這看似極其膚淺，但在設計中，感知就是真相。
Junctionmoama
高屏幕分辨率創造了絕佳的機遇，讓用戶能看到從前無法察覺的細節。圖片中的小細節——例如Junction Moama所用的Macquarie公園的多色調紋理（下圖的兩種）——提升了界面的精細程度，對至關重要的第一印象大有幫助。
使用高清圖片的5條建議：
1、使主畫面成為視覺焦點——雖然圖片是作為背景，不代表它就能占據舞臺中央。優秀的照片能與用戶建立情感連接，學習圖片的精妙之處，看它如何影響設計的視覺層次。
2、考慮使用多圖——使用我們在 網頁UI模式 中提到的幻燈片或卡片風格的結構，來應對內容豐富或相片集類型的設計。
3、在圖片上添加效果——模糊或色彩疊加，能夠增加或是改變一張圖片的調性（例如全用紅色調會更加積極）。這在高清圖片上很管用，因為下層的圖片畫質夠高，細節仍清晰可辨。
4、考慮圖片在不同屏幕尺寸下的效果——安排各種尺寸下的背景圖，使之能適應任何斷點，不會露出純色塊（那其實是真正的背景）。
5、打破局限——照片背景不一定要遵循標準的1:1.5相機比例，也可以使用從各自背景中裁剪出來的圖片。
背景照片能創造簡單的視覺吸引。選用優秀的照片強化品牌、產品或信息時，效果最佳。記住，有時會用多張背景照片，要確保這種設計結構和周遭元素能與每張圖搭配良好。
視頻
高清視頻背景可能是今年最盛行的技巧之一——尤其是有著瘋狂感的大量快鏡頭動作。從AirBnB這樣的巨人，到幾乎所有類型的小網站，視頻迅速成為了網頁設計中重要的一道風景線 。
Life of pi Movie
最初一批運用背景視頻的網站，正是電影網站。例如《少年派的奇幻漂流》官網，用了一段電影預告作為背景（而且還是可下載的格式）。
Rileyscycles
視頻作為一種設計技巧的出現，與它本身的新奇性毫無關系。在HTML5（還有能播放高清視頻的智能手機）推出以前，許多瀏覽器與網絡連接環境根本無法處理全屏視頻背景。
任何關于高清視頻的討論，都應當圍繞最終成品。無論是像Dunckelfeld's這樣的超現實主義黑白手法，還是像AirBnB這種更加現實的蒙太奇短片，你都需要來回調整它的飽和度和幀速率，讓視頻更吸引人，而不會使人分心。
光有一段視頻可不夠。所有拍攝優秀電影的技巧——取景、變焦、平移——在網頁視頻中同樣重要，即便是用作背景。
同樣，在設計中運用高清視頻也有5條建議：
1、注意視頻長度——背景視頻應當在幾秒鐘內呈現一段視覺故事，讓用戶感受到氛圍。最佳循環間隔是10到30秒。
2、關閉聲音——對于多數用戶而言，聲音仍是一種很極端的自動播放元素。如果想要使用聲音，也要默認設成靜音。
3、關注加載時間——雖然高清視頻很有意思，但不能因此拖慢網站加載速度。如果用戶在加載過程中就退出了，視頻再精彩都沒有用。
4、考慮備選方案——有些設備無法渲染高清視頻。在Goolge統計中查看訪客最常用的設備，根據情況進行設計。通常，你會選取一張靜態圖片作為備選方案。
5、堅持高質量的視頻——不論是否自己拍攝，為了清晰出眾的畫質，最好雇人來做這個事情，或者使用版權視頻。不僅僅因為它要用在高清的環境中，也因為需要相當好的畫質。就像照片一樣，如果超過原片分辨率使用，視頻就毀了。
網頁設計，尤其是使用背景視頻的網頁，都在營造一種電影般的體驗。網站中的高清視頻，創造了一種完整的多媒體體驗，在運動的背景之上層層傳遞信息。