亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 行業(yè)動(dòng)態(tài)
網(wǎng)頁設(shè)計(jì)未來趨勢(shì):高清設(shè)計(jì)

2015-12-14

4788

網(wǎng)頁設(shè)計(jì)中最熱門的技巧之一,就是高清背景圖,這得益于高清顯示屏的普及。但面對(duì)復(fù)雜的商標(biāo)時(shí),就不好處理了。


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

下面開始,我們將要探索如何運(yùn)用圖片、視頻、或是動(dòng)畫來創(chuàng)建高清背景,并且把所有內(nèi)容有層次地組合。

圖片

超大圖、焦點(diǎn)圖、全屏圖。

以上幾個(gè)詞,最適合用來描述現(xiàn)代網(wǎng)頁設(shè)計(jì)的背景圖片。設(shè)計(jì)師們對(duì)高清設(shè)計(jì)不僅停留在思考層面,他們將其發(fā)揮到極致,用背景圖占據(jù)了整個(gè)畫面。


這種設(shè)計(jì)技巧很有效,因?yàn)橛脩籼焐褪且曈X動(dòng)物。

正如《2015與2016的網(wǎng)頁設(shè)計(jì)趨勢(shì)》所描述的,畢竟我們理解周圍世界時(shí),視覺在主導(dǎo)潛意識(shí)。而且,令人愉悅的圖片在一定程度上能創(chuàng)造更好的用戶體驗(yàn),因?yàn)槲覀兝硭?dāng)然認(rèn)為有吸引力的東西更好。這看似極其膚淺,但在設(shè)計(jì)中,感知就是真相。


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


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

  1. 使主畫面成為視覺焦點(diǎn)——雖然圖片是作為背景,不代表它就能占據(jù)舞臺(tái)中央。優(yōu)秀的照片能與用戶建立情感連接,學(xué)習(xí)圖片的精妙之處,看它如何影響設(shè)計(jì)的視覺層次。

  2. 考慮使用多圖——使用我們?cè)诰W(wǎng)頁UI模式中提到的幻燈片或卡片風(fēng)格的結(jié)構(gòu),來應(yīng)對(duì)內(nèi)容豐富或相片集類型的設(shè)計(jì)。

  3. 在圖片上添加效果——模糊或色彩疊加,能夠增加或是改變一張圖片的調(diào)性(例如全用紅色調(diào)會(huì)更加積極)。這在高清圖片上很管用,因?yàn)橄聦拥膱D片畫質(zhì)夠高,細(xì)節(jié)仍清晰可辨。

  4. 考慮圖片在不同屏幕尺寸下的效果——安排各種尺寸下的背景圖,使之能適應(yīng)任何斷點(diǎn),不會(huì)露出純色塊(那其實(shí)是真正的背景)。

  5. 打破局限——照片背景不一定要遵循標(biāo)準(zhǔn)的1:1.5相機(jī)比例,也可以使用從各自背景中裁剪出來的圖片。

背景照片能創(chuàng)造簡單的視覺吸引。選用優(yōu)秀的照片強(qiáng)化品牌、產(chǎn)品或信息時(shí),效果最佳。記住,有時(shí)會(huì)用多張背景照片,要確保這種設(shè)計(jì)結(jié)構(gòu)和周遭元素能與每張圖搭配良好。

視頻

高清視頻背景可能是今年最盛行的技巧之一——尤其是有著瘋狂感的大量快鏡頭動(dòng)作。從AirBnB這樣的巨人,到幾乎所有類型的小網(wǎng)站,視頻迅速成為了網(wǎng)頁設(shè)計(jì)中重要的一道風(fēng)景線。


最初一批運(yùn)用背景視頻的網(wǎng)站,正是電影網(wǎng)站。例如《少年派的奇幻漂流》官網(wǎng),用了一段電影預(yù)告作為背景(而且還是可下載的格式)。


視頻作為一種設(shè)計(jì)技巧的出現(xiàn),與它本身的新奇性毫無關(guān)系。在HTML5(還有能播放高清視頻的智能手機(jī))推出以前,許多瀏覽器與網(wǎng)絡(luò)連接環(huán)境根本無法處理全屏視頻背景。

任何關(guān)于高清視頻的討論,都應(yīng)當(dāng)圍繞最終成品。無論是像Dunckelfeld’s這樣的超現(xiàn)實(shí)主義黑白手法,還是像AirBnB這種更加現(xiàn)實(shí)的蒙太奇短片,你都需要來回調(diào)整它的飽和度和幀速率,讓視頻更吸引人,而不會(huì)使人分心。

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


Brindisa Tapas Kitchens做得非常棒,它剪輯了大量短片來展現(xiàn)它的食物與環(huán)境。視頻從多個(gè)角度拍攝,有些片段用了縮時(shí)攝影的風(fēng)格加速,另一些則刻意調(diào)慢來營造合適的氛圍。

同樣,在設(shè)計(jì)中運(yùn)用高清視頻也有5條建議:

  1. 注意視頻長度——背景視頻應(yīng)當(dāng)在幾秒鐘內(nèi)呈現(xiàn)一段視覺故事,讓用戶感受到氛圍。最佳循環(huán)間隔是10到30秒。

  2. 關(guān)閉聲音——對(duì)于多數(shù)用戶而言,聲音仍是一種很極端的自動(dòng)播放元素。如果想要使用聲音,也要默認(rèn)設(shè)成靜音。

  3. 關(guān)注加載時(shí)間——雖然高清視頻很有意思,但不能因此拖慢網(wǎng)站加載速度。如果用戶在加載過程中就退出了,視頻再精彩都沒有用。

  4. 考慮備選方案——有些設(shè)備無法渲染高清視頻。在Goolge統(tǒng)計(jì)中查看訪客最常用的設(shè)備,根據(jù)情況進(jìn)行設(shè)計(jì)。通常,你會(huì)選取一張靜態(tài)圖片作為備選方案。

  5. 堅(jiān)持高質(zhì)量的視頻——不論是否自己拍攝,為了清晰出眾的畫質(zhì),最好雇人來做這個(gè)事情,或者使用版權(quán)視頻。不僅僅因?yàn)樗迷诟咔宓沫h(huán)境中,也因?yàn)樾枰喈?dāng)好的畫質(zhì)。就像照片一樣,如果超過原片分辨率使用,視頻就毀了。

網(wǎng)頁設(shè)計(jì),尤其是使用背景視頻的網(wǎng)頁,都在營造一種電影般的體驗(yàn)。網(wǎng)站中的高清視頻,創(chuàng)造了一種完整的多媒體體驗(yàn),在運(yùn)動(dòng)的背景之上層層傳遞信息。

動(dòng)畫

高清背景動(dòng)畫存在于固定圖片的設(shè)計(jì)中,因?yàn)檫@些動(dòng)畫往往同時(shí)包含固定與運(yùn)動(dòng)元素。

它與加載動(dòng)畫同樣盛行,數(shù)十年來設(shè)計(jì)原則幾乎沒有改變。唯一改變的是高清顯示屏能呈現(xiàn)的畫質(zhì)水平。


成功的高清動(dòng)畫,關(guān)鍵在于時(shí)間控制。動(dòng)畫應(yīng)當(dāng)有著流暢無痕的效果。所有的循環(huán)動(dòng)畫都要首尾相接。


《2015與2016的網(wǎng)頁設(shè)計(jì)趨勢(shì)》中描述過,我們建議牢記以下5條原則:

  1. 堅(jiān)持簡單的動(dòng)畫——太復(fù)雜的故事與動(dòng)作可能會(huì)加重認(rèn)知負(fù)擔(dān),如果能實(shí)現(xiàn)完美的基本動(dòng)畫,就不要制作復(fù)雜的效果。

  2. 使用亮色調(diào)來關(guān)聯(lián)界面——例如,可以從簡單的鼠標(biāo)懸停效果入手,改變鏈接顏色。考慮選用配色中最亮的顏色作為鼠標(biāo)懸停色,讓人注意到這個(gè)動(dòng)畫效果。懸停時(shí)放大文字也是一種視覺線索,能夠起到額外的強(qiáng)調(diào)作用。這些簡單的手段有助于突顯特定的用戶操作。

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

  4. 用視頻的方法制作動(dòng)畫——同樣的精妙之處也適用于動(dòng)畫。應(yīng)當(dāng)避免不和諧的運(yùn)動(dòng)和物體,例如聲音,那會(huì)令用戶感到厭煩。

  5. 為合適的觀眾制作動(dòng)畫——雖然許多設(shè)計(jì)師常把動(dòng)畫和插畫合為一體,但這未必適用于每個(gè)網(wǎng)站。

同樣,要注意細(xì)節(jié)。根據(jù)網(wǎng)站與用戶的不同,動(dòng)畫可以是卡通式、視頻風(fēng)格,或者僅僅是插畫環(huán)境中的一系列運(yùn)動(dòng)感。動(dòng)畫可以通過用戶操作觸發(fā)——點(diǎn)按、滾動(dòng)或是鼠標(biāo)點(diǎn)擊——或者就簡單地自動(dòng)播放。

層層構(gòu)筑:融合所有內(nèi)容

高清背景只有作為某一層信息時(shí)才有效果。精彩的圖片、視頻或動(dòng)畫獨(dú)木難支——你得考慮它與屏幕上其他內(nèi)容的關(guān)系。

以下是3個(gè)簡單的案例研究,這幾個(gè)網(wǎng)站都將它們?nèi)诤系梅浅:谩?/p>

Adidas設(shè)計(jì)工作室

Adidas設(shè)計(jì)工作室用了各種技巧處理鮮明的大尺寸圖片,號(hào)召人們加入。


全屏背景實(shí)際上鏈接到一段視頻,滾動(dòng)操作還有視覺差效果,引導(dǎo)用戶瀏覽整個(gè)產(chǎn)品線和相關(guān)信息。清晰的圖片搭配同樣清晰的文字。通過一種溫和的方式,用顏色構(gòu)建了視覺的層次。

Flipboard

Flipboard熟練運(yùn)用固定背景圖的技藝,這高度依賴傳統(tǒng)的攝影藝術(shù)。


高清圖片包含許多細(xì)節(jié),卻不會(huì)咄咄逼人。圖片還延伸到了屏幕之外,讓人想象餐桌還會(huì)向各個(gè)方向延伸,在不同的屏幕分辨率下也確實(shí)如此。整個(gè)色調(diào)將這張圖片塑造成背景元素,使注意力保持在其上更明亮的行動(dòng)號(hào)召信息上。

5 Eme Gauche

5 Eme Gauche的特色是具有多層元素的大背景圖,包含底部導(dǎo)航、社交媒體圖標(biāo),還有屏幕中央的品牌logo和主頁鏈接。

每層內(nèi)容都與背景有互動(dòng),并且有所區(qū)分,讓你一眼就能看出屏幕上的分層關(guān)系。這個(gè)網(wǎng)站的內(nèi)部層級(jí)很清晰,因?yàn)樗许撁娑疾捎猛瑯拥姆謱痈袷胶蜐L動(dòng)動(dòng)畫。

結(jié)論

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

這意味著人們不會(huì)有一天厭倦高清設(shè)計(jì),轉(zhuǎn)而尋找下一股潮流。作為日漸成長的視覺行業(yè),這種創(chuàng)作技巧絕對(duì)值得一學(xué)。


關(guān)注我們:在查找公眾號(hào)中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號(hào)
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天
關(guān)鍵詞:廣州網(wǎng)頁設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,移動(dòng)網(wǎng)站建設(shè)

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護(hù)中,請(qǐng)放心填寫
關(guān)閉
免費(fèi)獲取方案