首頁(yè)?>?知識(shí)?資訊?>?攝影圖片是網(wǎng)站設(shè)計(jì)師最天然的工具?>?正文

攝影圖片是網(wǎng)站設(shè)計(jì)師最天然的工具

2016/3/14 0:00:00 · 稿源:傳誠(chéng)信

提到網(wǎng)站設(shè)計(jì),運(yùn)用攝影圖是其中一項(xiàng)基本手段,每件設(shè)計(jì)都或多或少都會(huì)用到。本文要剖析的并非攝影圖本身,而是網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用和掌控?cái)z影圖的流行趨勢(shì)。

其中有些顯而易見(jiàn)、廣為人知,其他則頻頻使用,卻鮮有提及。當(dāng)我們將同類趨勢(shì)收集整理成套,對(duì)此概念的認(rèn)識(shí)則會(huì)超乎我們想象。而且,像這樣把各種趨勢(shì)對(duì)比著看,我們似乎會(huì)發(fā)現(xiàn)當(dāng)下采用的方法并非最佳,可以找到更好的替代方案。

1. 巨幅背景圖

首先考慮一項(xiàng)最盛行的趨勢(shì)。以下是一系列運(yùn)用巨大照片作為背景圖的網(wǎng)站。毫不夸張地說(shuō),這是一種快被消滅掉的方式。但這并不是說(shuō)就該禁止使用。每種趨勢(shì)都有它的意義。撰寫這個(gè)章節(jié)時(shí),我的任務(wù)就是尋找那些沒(méi)有把這種風(fēng)格作為權(quán)宜之計(jì)的網(wǎng)站。相反,我找的網(wǎng)站都帶著目的運(yùn)用它,背景攝影圖在傳達(dá)網(wǎng)站信息方面,扮演著重要角色。瀏覽以下案例時(shí)請(qǐng)牢記這一點(diǎn)。

巨幅背景圖

網(wǎng)站設(shè)計(jì)-巨幅背景圖

網(wǎng)站設(shè)計(jì)-巨幅背景圖

網(wǎng)站設(shè)計(jì)-巨幅背景圖4.jpg

網(wǎng)站設(shè)計(jì)-巨幅背景圖7.jpg

網(wǎng)站設(shè)計(jì)-巨幅背景圖11.jpg

網(wǎng)站設(shè)計(jì)-巨幅背景圖222.jpg

2. 背景搭配前景內(nèi)容

有的網(wǎng)站設(shè)計(jì)師聰明地將攝影圖同時(shí)作為背景和前景元素,對(duì)巨幅背景圖做的這種變通深得我心。在這些設(shè)計(jì)中,照片以裝飾性的形式填滿整個(gè)背景。同時(shí)突顯了照片中的某些元素。這通常是通過(guò)縱深來(lái)實(shí)現(xiàn)的,產(chǎn)品或前景元素被置于焦點(diǎn)區(qū)域。這種視覺(jué)區(qū)域的混合,使照片具備一種格調(diào),同時(shí)內(nèi)容也意圖鮮明。這種頗具挑戰(zhàn)的方式,需要對(duì)照片有所規(guī)劃和協(xié)調(diào),以下是我最喜歡的一些案例。

網(wǎng)站設(shè)計(jì)-巨幅背景圖8.jpg

3. 單色照片

對(duì)網(wǎng)站設(shè)計(jì)師而言,把照片“PS”一下來(lái)適應(yīng)設(shè)計(jì)并不新奇。這個(gè)系列采用同一種特定方式,將這個(gè)概念發(fā)揮到極致。設(shè)計(jì)師將照片轉(zhuǎn)為單色,尤其是非黑白的方式。盡管多數(shù)時(shí)候,這或許是風(fēng)格上的決策,但我認(rèn)為不止于此。顏色可以確定基調(diào),傳達(dá)出微妙的信息。通過(guò)在照片中運(yùn)用單色調(diào),設(shè)計(jì)師能反映出單一的情感。藍(lán)色使人感到安全、穩(wěn)固和協(xié)同。紅色使人感覺(jué)興奮、鮮活、充滿能量,諸如此類。通過(guò)將照片轉(zhuǎn)為單色風(fēng)格,它呈現(xiàn)出一種新的傳達(dá)方式。

網(wǎng)站設(shè)計(jì)-巨幅背景圖22.jpg

網(wǎng)站設(shè)計(jì)-巨幅背景圖9.jpg

4. 柔和色照片

這個(gè)系列的案例風(fēng)格可能極度盛行,但老實(shí)說(shuō),它確實(shí)很時(shí)尚,而且有點(diǎn)使用過(guò)度。但是當(dāng)我挖掘這類風(fēng)格的案例時(shí),我發(fā)現(xiàn)它并沒(méi)有我們想象中那么流行。這些網(wǎng)站基于色調(diào)柔和的照片。更明確地說(shuō),這些照片都有一種褪色、近乎復(fù)古的風(fēng)格。最常見(jiàn)的是搭配白色文字,置于照片上方(下面5個(gè)案例中都有)。這種方式與潮流風(fēng)有密切關(guān)聯(lián),去年非常流行。最后,我很驚奇地發(fā)現(xiàn),在我找到的這些案例中,幾乎每個(gè)都利用了裝飾性字體,置于照片之上。

網(wǎng)站設(shè)計(jì)-巨幅背景圖444.jpg

5. 營(yíng)造基調(diào)和氛圍的照片

作為老師,我發(fā)現(xiàn)有些事總要我一遍遍地指導(dǎo)學(xué)生。其中之一就有關(guān)照片的選用。通常設(shè)計(jì)師會(huì)使用裝飾性照片,不會(huì)直接傳達(dá)出任何網(wǎng)站相關(guān)信息。比如,第一個(gè)案例是一組太空攝影集。它表面上并沒(méi)有表達(dá)出任何品牌相關(guān)內(nèi)容。在從前,我的觀念中對(duì)這類裝飾性照片的選用相當(dāng)嚴(yán)格。隨著對(duì)于照片運(yùn)用的深入探索,這個(gè)觀念逐漸趨于緩和。這就是我喜愛(ài)剖析趨勢(shì)的原因,這樣我們可以打破主觀臆斷,為我們的設(shè)計(jì)發(fā)現(xiàn)嶄新的途徑。這些案例證明,營(yíng)造基調(diào)和氛圍的裝飾性照片,對(duì)設(shè)計(jì)的成功非常有意義。鉆研這些案例,看看你是否同意。

網(wǎng)站設(shè)計(jì)-巨幅背景圖4444.jpg

6. 整理術(shù)

最后,來(lái)看一組在照片中運(yùn)用了整理術(shù)的網(wǎng)站。整理術(shù)是將物體平行或者90度排列,來(lái)創(chuàng)造一種條理。這種方式非常小眾和獨(dú)特,設(shè)計(jì)師們很少使用這種風(fēng)格。同樣的,這種風(fēng)格通常和潮流風(fēng)設(shè)計(jì)有關(guān),但不止于此。這些照片反映出內(nèi)容之外、照片本身的含義(這當(dāng)然是有意義的)。它們暗示著照片背后的品質(zhì),透露出一絲秩序、方法和條理。這些是好的品質(zhì),尤其是用來(lái)指代設(shè)計(jì)師和機(jī)構(gòu)。

網(wǎng)站設(shè)計(jì)-巨幅背景圖888.jpg

結(jié)論

攝影圖片是網(wǎng)站設(shè)計(jì)師最天然的工具。通過(guò)研究這些使用方式和多種多樣的風(fēng)格,希望你能發(fā)現(xiàn)新鮮的靈感??偠灾蚁M@個(gè)簡(jiǎn)陋的案例集能幫你發(fā)現(xiàn)新鮮創(chuàng)意,為你的工作帶來(lái)啟迪和挑戰(zhàn)。

網(wǎng)站設(shè)計(jì)

2015.12.17響應(yīng)式導(dǎo)航插件下載

為了適應(yīng)手機(jī)版的網(wǎng)站,網(wǎng)站導(dǎo)航都需要逐一優(yōu)化,今天分享最新的響應(yīng)式網(wǎng)站設(shè)計(jì)導(dǎo)航菜單插件,幫你節(jié)省大量時(shí)間 Mmenu這個(gè)mmenu插件除了能......

詳細(xì)信息



2015.12.17響應(yīng)式網(wǎng)站設(shè)計(jì)排版參考!

下面對(duì)響應(yīng)式網(wǎng)站設(shè)計(jì)排版展示響應(yīng)式排版簡(jiǎn)單做一個(gè)說(shuō)明,希望對(duì)你們有幫助。排版不是件小事排版是設(shè)計(jì)中非常基礎(chǔ)但又無(wú)比重要的一環(huán),這點(diǎn)我想大家都......

詳細(xì)信息



2015.12.14響應(yīng)式網(wǎng)頁(yè)的好處有哪些?

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web?。模澹螅椋纾睿┚褪强梢宰詣?dòng)識(shí)別屏幕寬度、并根據(jù)硬件的屏幕分辨率而做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。目......

詳細(xì)信息



2015.12.14企業(yè)要開(kāi)發(fā)個(gè)手機(jī)網(wǎng)站,為什么?

開(kāi)發(fā)移動(dòng)端網(wǎng)站已經(jīng)成為諸多企業(yè)的共識(shí)。不過(guò),因?yàn)槊總€(gè)企業(yè)的規(guī)模不同,相關(guān)崗位人員的配置也有差別,這就致使一些企業(yè)擔(dān)心沒(méi)有專業(yè)的移動(dòng)端網(wǎng)站維護(hù)......

詳細(xì)信息



2015.12.07利用JS判斷移動(dòng)設(shè)備最佳方法

我在開(kāi)發(fā)的Magento或Wdpress主題時(shí),通過(guò)都會(huì)制作手機(jī)版本,為了實(shí)現(xiàn)某個(gè)片段在手機(jī)端和桌面端不同功能,又或者如果是手機(jī)設(shè)備,就跳轉(zhuǎn)......

詳細(xì)信息



2015.08.31那些使用圓形導(dǎo)航菜單的漂亮網(wǎng)頁(yè)設(shè)計(jì)

不同類型的網(wǎng)站設(shè)計(jì)重點(diǎn)都不一樣,比如信息、新聞?lì)惥W(wǎng)站,內(nèi)容比設(shè)計(jì)更重要,而且品牌、企業(yè)網(wǎng)站則更注重形象,為了更吸引用戶,企業(yè)站可以設(shè)計(jì)有特色......

詳細(xì)信息



2015.05.22新鮮及充滿創(chuàng)意404網(wǎng)頁(yè)設(shè)計(jì)。

404頁(yè)面是客戶端在瀏覽網(wǎng)頁(yè)時(shí),服務(wù)器無(wú)法正常提供信息,或是服務(wù)器無(wú)法回應(yīng),且不知道原因所返回的頁(yè)面。 從這一點(diǎn)來(lái)說(shuō)獨(dú)有自己設(shè)計(jì)的頁(yè)的增強(qiáng)有......

詳細(xì)信息




  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354