随著(zhe)高分辨率屏幕和網速的大幅普及，明年的網頁設計領域肯定會進(jìn)階出新的玩法，比如今天說的這(zhè)三員大將(jiāng)：高清圖、視頻、動畫，現在有很多網站已經(jīng)用上了，具體怎麼(me)用，有哪些技巧，優秀範例等等，來看@十萬個為什麽 帶來的這(zhè)篇幹貨。

網頁設計中最熱門的技巧之一，就是高清背景圖，這(zhè)得益于高清顯示屏的普及。但面(miàn)對(duì)複雜的商标時，就不好(hǎo)處理了。

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

本文中，我們來展望一下網頁設計的未來。高清網頁設計是否能(néng)主導網絡，這(zhè)已經(jīng)不是問題了，關鍵是高分辨率顯示屏何時能(néng)夠普及，這(zhè)是提升視覺設計的必備條件。

下面(miàn)開(kāi)始，我們將(jiāng)要探索如何運用圖片、視頻、或是動畫來創建高清背景，并且把所有内容有層次地組合。

超大圖、焦點圖、全屏圖。

以上幾個詞，最适合用來描述現代網頁設計的背景圖片。設計師們對(duì)高清設計不僅停留在思考層面(miàn)，他們將(jiāng)其發(fā)揮到極緻，用背景圖占據了整個畫面(miàn)。

這(zhè)種(zhǒng)設計技巧很有效，因爲用戶天生就是視覺動物。畢竟我們理解周圍世界時，視覺在主導潛意識。而且，令人愉悅的圖片在一定程度上能(néng)創造更好(hǎo)的用戶體驗，因爲我們理所當然認爲有吸引力的東西更好(hǎo)。這(zhè)看似極其膚淺，但在設計中，感知就是真相。

高屏幕分辨率創造了絕佳的機遇，讓用戶能(néng)看到從前無法察覺的細節。圖片中的小細節——例如Junction Moama所用的Macquarie公園的多色調紋理（上圖的兩(liǎng)種(zhǒng)）——提升了界面(miàn)的精細程度，對(duì)至關重要的第一印象大有幫助。

使用高清圖片的5條建議：

使主畫面(miàn)成(chéng)爲視覺焦點——雖然圖片是作爲背景，不代表它就能(néng)占據舞台中央。優秀的照片能(néng)與用戶建立情感連接，學(xué)習圖片的精妙之處，看它如何 影響設計的視覺層次。

考慮使用多圖——使用我們在 網頁UI模式 中提到的幻燈片或卡片風格的結構，來應對(duì)内容豐富或相片集類型的設計。

在圖片上添加效果——模糊或色彩疊加，能(néng)夠增加或是改變一張圖片的調性（例如全用紅色調會更加積極）。這(zhè)在高清圖片上很管用，因爲下層的圖片畫質夠高，細節仍清晰可辨。

考慮圖片在不同屏幕尺寸下的效果——安排各種(zhǒng)尺寸下的背景圖，使之能(néng)适應任何斷點，不會露出純色塊（那其實是真正的背景）。

打破局限——照片背景不一定要遵循标準的1:1.5相機比例，也可以使用從各自背景中裁剪出來的圖片。

背景照片能(néng)創造簡單的視覺吸引。選用優秀的照片強化品牌、産品或信息時，效果最佳。記住，有時會用多張背景照片，要确保這(zhè)種(zhǒng)設計結構和周遭元素能(néng)與每張圖搭配良好(hǎo)。

視頻

高清視頻背景可能(néng)是今年最盛行的技巧之一——尤其是有著(zhe)瘋狂感的大量快鏡頭動作。從AirBnB這(zhè)樣(yàng)的巨人，到幾乎所有類型的小網站，視頻迅速成(chéng)爲了網頁設計中重要的一道(dào)風景線。

最初一批運用背景視頻的網站，正是電影網站。例如《少年派的奇幻漂流》官網，用了一段電影預告作爲背景（而且還(hái)是可下載的格式）。

視頻作爲一種(zhǒng)設計技巧的出現，與它本身的新奇性毫無關系。在HTML5（還(hái)有能(néng)播放高清視頻的智能(néng)手機）推出以前，許多浏覽器與網絡連接環境根本無法處理全屏視頻背景。

任何關于高清視頻的讨論，都(dōu)應當圍繞最終成(chéng)品。無論是像Dunckelfeld’s這(zhè)樣(yàng)的超現實主義黑白手法，還(hái)是像AirBnB這(zhè)種(zhǒng)更加現實的蒙太奇短片，你都(dōu)需要來回調整它的飽和度和幀速率，讓視頻更吸引人，而不會使人分心。

光有一段視頻可不夠。所有拍攝優秀電影的技巧——取景、變焦、平移——在網頁視頻中同樣(yàng)重要，即便是用作背景。

Brindisa Tapas Kitchens做得非常棒，它剪輯了大量短片來展現它的食物與環境。視頻從多個角度拍攝，有些片段用了縮時攝影的風格加速，另一些則刻意調慢來營造合适的氛圍。

同樣(yàng)，在設計中運用高清視頻也有5條建議：

注意視頻長(cháng)度——背景視頻應當在幾秒鍾内呈現一段視覺故事(shì)，讓用戶感受到氛圍。最佳循環間隔是10到30秒。

關閉聲音——對(duì)于多數用戶而言，聲音仍是一種(zhǒng)很極端的自動播放元素。如果想要使用聲音，也要默認設成(chéng)靜音。

關注加載時間——雖然高清視頻很有意思，但不能(néng)因此拖慢網站加載速度。如果用戶在加載過(guò)程中就退出了，視頻再精彩都(dōu)沒(méi)有用。

考慮備選方案——有些設備無法渲染高清視頻。在Goolge統計中查看訪客最常用的設備，根據情況進(jìn)行設計。通常，你會選取一張靜态圖片作爲備選方案。

堅持高質量的視頻——不論是否自己拍攝，爲了清晰出衆的畫質，最好(hǎo)雇人來做這(zhè)個事(shì)情，或者使用版權視頻。不僅僅因爲它要用在高清的環境中，也因爲需要相當好(hǎo)的畫質。就像照片一樣(yàng)，如果超過(guò)原片分辨率使用，視頻就毀了。

網頁設計，尤其是使用背景視頻的網頁，都(dōu)在營造一種(zhǒng)電影般的體驗。網站中的高清視頻，創造了一種(zhǒng)完整的多媒體體驗，在運動的背景之上層層傳遞信息。

動畫

高清背景動畫存在于固定圖片的設計中，因爲這(zhè)些動畫往往同時包含固定與運動元素。

它與加載動畫同樣(yàng)盛行，數十年來設計原則幾乎沒(méi)有改變。唯一改變的是高清顯示屏能(néng)呈現的畫質水平。

成(chéng)功的高清動畫，關鍵在于時間控制。動畫應當有著(zhe)流暢無痕的效果。所有的循環動畫都(dōu)要首尾相接。

《2015與2016的網頁設計趨勢》 中描述過(guò)，我們建議牢記以下5條原則：

堅持簡單的動畫——太複雜的故事(shì)與動作可能(néng)會加重認知負擔，如果能(néng)實現完美的基本動畫，就不要制作複雜的效果。

使用亮色調來關聯界面(miàn)——例如，可以從簡單的鼠标懸停效果入手，改變鏈接顔色。考慮選用配色中最亮的顔色作爲鼠标懸停色，讓人注意到這(zhè)個動畫效果。懸停時放大文字也是一種(zhǒng)視覺線索，能(néng)夠起(qǐ)到額外的強調作用。這(zhè)些簡單的手段有助于突顯特定的用戶操作。

利用高清屏幕的特性——爲了最佳的視覺效果，使用可縮放的圖片格式，例如矢量圖。

用視頻的方法制作動畫——同樣(yàng)的精妙之處也适用于動畫。應當避免不和諧的運動和物體，例如聲音，那會令用戶感到厭煩。

爲合适的觀衆制作動畫——雖然許多設計師常把動畫和插畫合爲一體，但這(zhè)未必适用于每個網站。

同樣(yàng)，要注意細節。根據網站與用戶的不同，動畫可以是卡通式、視頻風格，或者僅僅是插畫環境中的一系列運動感。動畫可以通過(guò)用戶操作觸發(fā)——點按、滾動或是鼠标點擊——或者就簡單地自動播放。

層層構築：融合所有内容

高清背景隻有作爲某一層信息時才有效果。精彩的圖片、視頻或動畫獨木難支——你得考慮它與屏幕上其他内容的關系。

以下是3個簡單的案例研究，這(zhè)幾個網站都(dōu)將(jiāng)它們融合得非常好(hǎo)。

Adidas設計工作室

Adidas設計工作室用了各種(zhǒng)技巧處理鮮明的大尺寸圖片，号召人們加入。

全屏背景實際上鏈接到一段視頻，滾動操作還(hái)有視覺差效果，引導用戶浏覽整個産品線和相關信息。清晰的圖片搭配同樣(yàng)清晰的文字。通過(guò)一種(zhǒng)溫和的方式，用顔色構建了視覺的層次。

Flipboard熟練運用固定背景圖的技藝，這(zhè)高度依賴傳統的攝影藝術。

高清圖片包含許多細節，卻不會咄咄逼人。圖片還(hái)延伸到了屏幕之外，讓人想象餐桌還(hái)會向(xiàng)各個方向(xiàng)延伸，在不同的屏幕分辨率下也确實如此。整個色調將(jiāng)這(zhè)張圖片塑造成(chéng)背景元素，使注意力保持在其上更明亮的行動号召信息上。

5 Eme Gauche的特色是具有多層元素的大背景圖，包含底部導航、社交媒體圖标，還(hái)有屏幕中央的品牌logo和主頁鏈接。

每層内容都(dōu)與背景有互動，并且有所區分，讓你一眼就能(néng)看出屏幕上的分層關系。這(zhè)個網站的内部層級很清晰，因爲所有頁面(miàn)都(dōu)采用同樣(yàng)的分層格式和滾動動畫。

結論

盡管高清背景近年來正逐漸盛行，但不能(néng)僅把它當作一種(zhǒng)潮流。它們的産生，是可用性終于跟上科技發(fā)展的結果。

這(zhè)意味著(zhe)人們不會有一天厭倦高清設計，轉而尋找下一股潮流。作爲日漸成(chéng)長(cháng)的視覺行業，這(zhè)種(zhǒng)創作技巧絕對(duì)值得一學(xué)。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。