頁(yè)面規(guī)劃中最搶手的竅門(mén)之一，海淘科技表示即是高清布景圖，這得益于高清顯示屏的遍及。
本文中，咱們來(lái)展望一下頁(yè)面規(guī)劃的將來(lái)。高清頁(yè)面規(guī)劃是不是能主導(dǎo)網(wǎng)絡(luò)，這現(xiàn)已不是問(wèn)題了，關(guān)鍵是高分辨率顯示屏何時(shí)能夠遍及，這是提高視覺(jué)規(guī)劃的必備條件。
下面開(kāi)始，咱們即將探究怎么運(yùn)用圖像、視頻、或是動(dòng)畫(huà)來(lái)創(chuàng)立高清布景，而且把一切內(nèi)容有層次地組合。
圖像
以上幾個(gè)詞，最適合用來(lái)描繪現(xiàn)代頁(yè)面規(guī)劃的布景圖像。規(guī)劃師們對(duì)高清規(guī)劃不只停留在思考層面，他們將其發(fā)揮到極致，用布景圖占有了整個(gè)畫(huà)面。
這種規(guī)劃竅門(mén)很有用，由于用戶(hù)天然生成即是視覺(jué)動(dòng)物。
究竟咱們理解周?chē)澜鐣r(shí)，視覺(jué)在主導(dǎo)潛意識(shí)。而且，令人愉悅的圖像在必定程度上能發(fā)明非常好的用戶(hù)體會(huì)，由于咱們天經(jīng)地義認(rèn)為有吸引力的東西非常好。這看似極點(diǎn)淺薄，但在規(guī)劃中，感知即是真相。
高屏幕分辨率發(fā)明了絕佳的機(jī)會(huì)，讓用戶(hù)能看到早年無(wú)法發(fā)覺(jué)的細(xì)節(jié)。圖像中的小細(xì)節(jié)——例如Junction Moama所用的Macquarie公園的多色彩紋理(上圖的兩種)——提高了界面的精密程度，對(duì)至關(guān)主要的第一印象大有協(xié)助。
使主畫(huà)面變成視覺(jué)焦點(diǎn)——雖然圖像是作為布景，不代表它就能占有舞臺(tái)中心。優(yōu)異的相片能與用戶(hù)建立情感銜接，學(xué)習(xí)圖像的精妙之處，看它怎么影響規(guī)劃的視覺(jué)層次。
思考運(yùn)用多圖——運(yùn)用咱們?cè)陧?yè)面UI形式中說(shuō)到的幻燈片或卡片個(gè)性的構(gòu)造，來(lái)應(yīng)對(duì)內(nèi)容豐富或相片集類(lèi)型的規(guī)劃。
在圖像上添加作用——模糊或色彩疊加，能夠添加或是改動(dòng)一張圖像的調(diào)性(例如全用紅色彩會(huì)愈加活躍)。這在高清圖像上很管用，由于基層的圖像畫(huà)質(zhì)夠高，細(xì)節(jié)仍明晰可辨。
思考圖像在紛歧樣屏幕尺度下的作用——組織各種尺度下的布景圖，使之能習(xí)慣任何斷點(diǎn)，不會(huì)顯露純色塊(那其實(shí)是真實(shí)的布景)。
打破限制——相片布景不必定要遵從標(biāo)準(zhǔn)的1:1.5相機(jī)比例，也能夠運(yùn)用從各自布景中裁剪出來(lái)的圖像。
布景相片能發(fā)明簡(jiǎn)略的視覺(jué)吸引。選用優(yōu)異的相片強(qiáng)化品牌、產(chǎn)品或信息時(shí)，作用最好。記住，有時(shí)會(huì)用多張布景相片，要確保這種規(guī)劃構(gòu)造和周遭元素能與每張圖調(diào)配良好。
高清視頻布景可能是今年最盛行的竅門(mén)之一——尤其是有著張狂感的很多快鏡頭動(dòng)作。從AirBnB這么的偉人，到簡(jiǎn)直一切類(lèi)型的小網(wǎng)站，視頻敏捷變成了頁(yè)面規(guī)劃中主要的一道風(fēng)景線。
開(kāi)始一批運(yùn)用布景視頻的網(wǎng)站，恰是影片網(wǎng)站。例如《少年派的奇幻漂流》官網(wǎng)，用了一段影片預(yù)告作為布景(而且仍是可下載的格局)。
視頻作為一種規(guī)劃竅門(mén)的出現(xiàn)，與它自身的新奇性毫無(wú)聯(lián)系。在HTML5(還有能播映高清視頻的智能手機(jī))推出以前，很多閱讀器與網(wǎng)絡(luò)銜接環(huán)境底子無(wú)法處理全屏視頻布景。
任何關(guān)于高清視頻的評(píng)論，都應(yīng)當(dāng)圍繞最終制品。無(wú)論是像Dunckelfeld’s這么的超實(shí)際主義是非辦法，仍是像AirBnB這種愈加實(shí)際的蒙太奇短片，你都需求來(lái)回調(diào)整它的飽和度和幀速率，讓視頻更吸引人，而不會(huì)使人分神。
光有一段視頻可不行。一切拍照優(yōu)異影片的竅門(mén)——取景、變焦、平移——在頁(yè)面視頻中相同主要，即便是用作布景。
Brindisa Tapas Kitchens做得非常棒，它編排了很多短片來(lái)展示它的食物與環(huán)境。視頻從多個(gè)視點(diǎn)拍照，有些片段用了縮時(shí)攝影的個(gè)性加速，另一些則刻意調(diào)慢來(lái)營(yíng)建適宜的空氣。
相同，在規(guī)劃中運(yùn)用高清視頻也有5條主張：
留意視頻長(zhǎng)度——布景視頻應(yīng)當(dāng)在幾秒鐘內(nèi)出現(xiàn)一段視覺(jué)故事，讓用戶(hù)感受到空氣。最好循環(huán)距離是10到30秒。
關(guān)閉聲響——關(guān)于大都用戶(hù)而言，聲響仍是一種很極點(diǎn)的自動(dòng)播映元素。假如想要運(yùn)用聲響，也要默許設(shè)成靜音。
重視加載時(shí)刻——雖然高清視頻很有意思，但不能因此拖慢網(wǎng)站加載速度。假如用戶(hù)在加載進(jìn)程中就退出了，視頻再精彩都沒(méi)有用。
思考備選計(jì)劃——有些設(shè)備無(wú)法渲染高清視頻。在Goolge計(jì)算中檢查訪客最常用的設(shè)備，依據(jù)狀況進(jìn)行規(guī)劃。一般，你會(huì)選擇一張靜態(tài)圖像作為備選計(jì)劃。
堅(jiān)持高質(zhì)量的視頻——不管是不是自個(gè)拍照，為了明晰出眾的畫(huà)質(zhì)，最好雇人來(lái)做這個(gè)工作，或許運(yùn)用版權(quán)視頻。不只僅由于它要用在高清的環(huán)境中，也由于需求相當(dāng)好的畫(huà)質(zhì)。就像相片相同，假如超越原片分辨率運(yùn)用，視頻就毀了。
頁(yè)面規(guī)劃，尤其是運(yùn)用布景視頻的頁(yè)面，都在營(yíng)建一種影片般的體會(huì)。網(wǎng)站中的高清視頻，發(fā)明了一種完好的多媒體體會(huì)，在運(yùn)動(dòng)的布景之上層層傳遞信息。
高清布景動(dòng)畫(huà)存在于固定圖像的規(guī)劃中，由于這些動(dòng)畫(huà)通常同時(shí)包括固定與運(yùn)動(dòng)元素。
它與加載動(dòng)畫(huà)相同盛行，數(shù)十年來(lái)規(guī)劃準(zhǔn)則簡(jiǎn)直沒(méi)有改動(dòng)。唯一改動(dòng)的是高清顯示屏能出現(xiàn)的畫(huà)質(zhì)水平。
成功的高清動(dòng)畫(huà)，關(guān)鍵在于時(shí)刻操控。動(dòng)畫(huà)應(yīng)當(dāng)有著流通無(wú)痕的作用。一切的循環(huán)動(dòng)畫(huà)都要首尾相接。
堅(jiān)持簡(jiǎn)略的動(dòng)畫(huà)——太雜亂的故事與動(dòng)作可能會(huì)加重認(rèn)知擔(dān)負(fù)，假如能實(shí)現(xiàn)完美的根本動(dòng)畫(huà)，就不要制造雜亂的作用。
運(yùn)用亮色彩來(lái)有關(guān)界面——例如，能夠從簡(jiǎn)略的鼠標(biāo)懸停作用下手，改動(dòng)連接色彩。思考選用配色中最亮的色彩作為鼠標(biāo)懸停色，讓人留意到這個(gè)動(dòng)畫(huà)作用。懸停時(shí)擴(kuò)大文字也是一種視覺(jué)線索，能夠起到額定的著重作用。這些簡(jiǎn)略的手法有助于突顯特定的用戶(hù)操作。
利用高清屏幕的特性——為了最好的視覺(jué)作用，運(yùn)用可縮放的圖像格局，例如矢量圖。
用視頻的辦法制造動(dòng)畫(huà)——相同的精妙之處也適用于動(dòng)畫(huà)。應(yīng)當(dāng)防止不和諧的運(yùn)動(dòng)和物體，例如聲響，那會(huì)令用戶(hù)感到厭煩。
為適宜的觀眾制造動(dòng)畫(huà)——雖然很多規(guī)劃師常把動(dòng)畫(huà)和插畫(huà)合為一體，但這未必適用于每個(gè)網(wǎng)站。
相同，要留意細(xì)節(jié)。依據(jù)網(wǎng)站與用戶(hù)的紛歧樣，動(dòng)畫(huà)可所以卡通式、視頻個(gè)性，或許僅僅是插畫(huà)環(huán)境中的一系列運(yùn)動(dòng)感。動(dòng)畫(huà)能夠經(jīng)過(guò)用戶(hù)操作觸發(fā)——點(diǎn)按、翻滾或是鼠標(biāo)點(diǎn)擊——或許就簡(jiǎn)略地自動(dòng)播映。
層層構(gòu)筑：融合一切內(nèi)容
高清布景只要作為某一層信息時(shí)才有用果。精彩的圖像、視頻或動(dòng)畫(huà)力不從心——你得思考它與屏幕上別的內(nèi)容的聯(lián)系。
以下是3個(gè)簡(jiǎn)略的事例研究，這幾個(gè)網(wǎng)站都將它們?nèi)诤系梅浅：谩?
Adidas規(guī)劃工作室用了各種竅門(mén)處理鮮明的大尺度圖像，號(hào)召大家參加。
全屏布景實(shí)際上連接到一段視頻，翻滾操作還有視覺(jué)差作用，引導(dǎo)用戶(hù)閱讀整個(gè)產(chǎn)品線和有關(guān)信息。明晰的圖像調(diào)配相同明晰的文字。經(jīng)過(guò)一種溫文的方法，用色彩構(gòu)建了視覺(jué)的層次。
Flipboard嫻熟運(yùn)用固定布景圖的技藝，這高度依靠傳統(tǒng)的攝影藝術(shù)。
高清圖像包括很多細(xì)節(jié)，卻不會(huì)盛氣凌人。圖像還延伸到了屏幕以外，讓人幻想餐桌還會(huì)向各個(gè)方向延伸，在紛歧樣的屏幕分辨率下也的確如此。整個(gè)色彩將這張圖像塑造成布景元素，使留意力堅(jiān)持在其上更亮堂的舉動(dòng)號(hào)召信息上。
5 Eme Gauche的特色是具有多層元素的大布景圖，包括底部導(dǎo)航、交際媒體圖標(biāo)，還有屏幕中心的品牌logo和主頁(yè)連接。
每層內(nèi)容都與布景有互動(dòng)，而且有所區(qū)分，讓你一眼就能看出屏幕上的分層聯(lián)系。這個(gè)網(wǎng)站的內(nèi)部層級(jí)很明晰，由于一切頁(yè)面都采用相同的分層格局和翻滾動(dòng)畫(huà)。
雖然高清布景這些年正逐漸盛行，但不能僅把它當(dāng)作一種潮流。它們的產(chǎn)生，是可用性總算跟上科技開(kāi)展的成果。
這意味著大家不會(huì)有一天厭惡網(wǎng)頁(yè)設(shè)計(jì)的高清規(guī)劃，轉(zhuǎn)而尋覓下一股潮流。作為日漸生長(zhǎng)的視覺(jué)職業(yè)，這種創(chuàng)作竅門(mén)肯定值得一學(xué)。
