從零開始！教你輕松找到過(guò)稿網(wǎng)頁(yè)背景大圖

大圖找得好，甲方改稿少——這句話包含兩層意思：1，你得知道在哪里能找到高清大圖。2，你得知道用哪張，怎么用，關(guān)于前者，優(yōu)設(shè)有很多資源，可直接看文末。后者是今天這篇好文的重頭戲，抓案例，聊設(shè)計(jì)，一一說(shuō)來(lái)，直到幫你找到甲方魂?duì)繅?mèng)縈的那張圖。
這里我們先回顧下
《21例運(yùn)用大圖的網(wǎng)頁(yè)設(shè)計(jì)案例賞析》
http://m.likemindfilms.com/Tutorial/de1638.html

　　當(dāng)一張好看的圖片出現(xiàn)在我們眼前時(shí)，它可以瞬間抓住我們的注意力，引起我們的共鳴。因此，創(chuàng)建一個(gè)有吸引力的網(wǎng)站，圖片是網(wǎng)站中的一個(gè)重要組成部分。圖片會(huì)影響到我們對(duì)網(wǎng)頁(yè)的第一印象，作用至關(guān)重要，而且它們也可以告訴我們的這個(gè)網(wǎng)站是做什么的，還可以幫我們贏得更多用戶的信任。

　　如果使用得當(dāng)，圖片起到的效果就會(huì)非常好，它可以快速的將目的信息傳達(dá)給用戶。但是，使用了錯(cuò)誤的照片就會(huì)誤導(dǎo)用戶，降低用戶的體驗(yàn)。那我們?cè)撊绾芜x擇恰當(dāng)?shù)膱D片呢?

　　網(wǎng)頁(yè)設(shè)計(jì)中使用圖片

　　在網(wǎng)站設(shè)計(jì)中，我們會(huì)注意到它的各個(gè)方面：內(nèi)容，顏色，版式，層次結(jié)構(gòu)，信息體系結(jié)構(gòu)等細(xì)節(jié)，圖片也應(yīng)該得到盡可能多的關(guān)注，特別在可用性和全體用戶對(duì)你的網(wǎng)站體驗(yàn)方面。

　　在網(wǎng)站上對(duì)照片的處理依賴于設(shè)計(jì)者理解和運(yùn)用，因此本文將給您指出一個(gè)正確的方向，并告訴你在你的下一個(gè)Web項(xiàng)目中使用圖片之前要好好挑選你的圖片。

　　采用大圖片時(shí)需注意

　　人們會(huì)根據(jù)以往的經(jīng)驗(yàn)和預(yù)期瀏覽屏幕。用戶眼睛最常見的是先從左上角看起，當(dāng)然這也取決于個(gè)人培養(yǎng)的閱讀模式。這時(shí)如果你在頁(yè)面上使用了大圖片就會(huì)立即抓住他們的注意力，并把他們拉離其一貫的閱讀方式。

　　圖片也是內(nèi)容

　　我敢肯定，當(dāng)我跟你說(shuō)，圖片也算是網(wǎng)頁(yè)的內(nèi)容時(shí)，你不會(huì)和我辯論，但你自己做網(wǎng)頁(yè)的時(shí)候，真的也是這么做的嗎?你有沒(méi)有只是把它當(dāng)做一個(gè)附加部分或者好的填充內(nèi)容?你有沒(méi)有考慮到這個(gè)圖片內(nèi)容的各個(gè)方面?在你使用圖片之前你有沒(méi)有正確的評(píng)價(jià)這個(gè)圖片?你有沒(méi)有考慮用戶的心理模型和他們看到圖片時(shí)的反應(yīng)?這個(gè)圖片給用戶提供有價(jià)值的信息了嗎?對(duì)用戶當(dāng)前的任務(wù)起到幫助了嗎?這些就是你在網(wǎng)頁(yè)上準(zhǔn)備使用圖片之前，需要考慮的問(wèn)題。

　　圖片不只是用來(lái)「裝飾」網(wǎng)頁(yè)的。我見過(guò)很多設(shè)計(jì)師只是放一個(gè)漂亮的全屏的圖片在網(wǎng)頁(yè)上，然后喊一些口號(hào)或大聲呼吁，這就宣布它完成了。在很多情況下，照片尚未評(píng)估，設(shè)計(jì)師這樣做僅僅只是隨大流。讓我們來(lái)看看如何對(duì)你的照片評(píng)估，在你在網(wǎng)站上使用它之前。

　　選擇完美的照片

　　當(dāng)你決定在你的設(shè)計(jì)中使用圖片時(shí)，你有幾件事情需要考慮。我假設(shè)你已經(jīng)知道如何評(píng)估圖片的一些基礎(chǔ)知識(shí)，它們是：質(zhì)量，尺寸，組成和曝光。在分辨率要求的質(zhì)量上，選擇合適的位置裁剪圖片，有效裁剪過(guò)的圖片更能吸引用戶的注意力，圖片要隱含網(wǎng)頁(yè)主題。

　　剪裁圖片也是一件技術(shù)活，想提高剪裁技術(shù)的同學(xué)可以右戳學(xué)習(xí)：《裁圖有學(xué)問(wèn)!如何通過(guò)裁圖獲得嶄新的視覺(jué)效果》

　　做完這些以后，圖片已經(jīng)通過(guò)了基本的測(cè)試，我們繼續(xù)探討你使用這個(gè)圖片的目的。

　　邁克 – 帕金森曾經(jīng)說(shuō)過(guò)：我們的大腦對(duì)視覺(jué)影像的處理速度比文字快60000倍。

　　它是有用的嗎？

　　所有照片必須是有用的。盡管用照片作為占位符、給一個(gè)網(wǎng)頁(yè)添加了色彩或填充了一些空間，或者是做了網(wǎng)頁(yè)背景。但是什么是有用的，有益的，發(fā)人深省的圖片才是需要我們特別關(guān)注的。有用的照片應(yīng)該

　　有助于我們更好地理解一些東西

　　教我們?nèi)绾问褂靡恍〇|西

　　告訴我們這些東西是如何完成的

　　關(guān)于在網(wǎng)頁(yè)設(shè)計(jì)中怎么選擇一個(gè)有用的圖片，這里有一個(gè)漂亮的例子：Square 網(wǎng)站

　　可以看出，這個(gè)圖片的形象是經(jīng)過(guò)專業(yè)拍攝的(看手和指甲)。最重要的是它直接展示了這個(gè)產(chǎn)品是多么好用。它是一個(gè)非常有用，有教育性的圖片。

　　類似的還有下面這個(gè)Pencil網(wǎng)站。跟上面的例子一樣，這個(gè)圖片展示了它是什么產(chǎn)品(筆)，在哪里以及如何使用(iPad應(yīng)用)。

　　Woodster網(wǎng)站也是充分利用了照片來(lái)解釋產(chǎn)品。很顯然，他們的產(chǎn)品是用來(lái)提升你的Mac的性能，圖片同時(shí)展示了那個(gè)方便的USB接口。

　　Grovemade在一個(gè)全屏的背景圖片上展示他們的產(chǎn)品集合。很明顯可以看出，他們生產(chǎn)的產(chǎn)品是高端木制辦公用品。圖片很有用，也特別吸引人。通過(guò)圖片我們很快就被它們的氛圍所感染。

　　通過(guò)上述例子，你會(huì)發(fā)現(xiàn)，所有照片的表達(dá)意圖很明顯，是不言自明的，他們傳達(dá)目的消息也非常好。你不需要去看那些長(zhǎng)長(zhǎng)的產(chǎn)品/服務(wù)/網(wǎng)站的內(nèi)容介紹。這是一個(gè)有用的照片在網(wǎng)頁(yè)設(shè)計(jì)中所具有的特性。

　　它是有效的嗎？

　　一個(gè)有效的照片就是它能向用戶傳遞目的信息，刺激用戶產(chǎn)生某種行為。一個(gè)良好的，有效的產(chǎn)品照片能夠鼓勵(lì)用戶去購(gòu)買這些產(chǎn)品。我們剛才的例子中的圖片都是有效的，因?yàn)榭吹剿麄兊膱D片我門會(huì)有想購(gòu)買他家產(chǎn)品的沖動(dòng)。當(dāng)我們看到圖片時(shí)，它能觸發(fā)我們的這種行為，就可以說(shuō)它是有效的圖片。

　　下面的圖是Mobility的網(wǎng)站，櫻桃紅的耳機(jī)是不是特別有吸引力，趕快買下它吧!

　　iPhone公司是以它的創(chuàng)新主義著稱，還要求他們所做的一切都要達(dá)到完美。從iPhone登陸頁(yè)面里這張產(chǎn)品照我們可以看出，外觀精美，桌面簡(jiǎn)潔精致，給用戶一種你值得擁有它的感覺(jué)。

　　我們要舉出的另外一個(gè)例子是tsptr網(wǎng)站。請(qǐng)注意該照片中的男子眼睛向下看，下面有東西需要你去探索嗎?答案是Yes!頁(yè)面往下拉有驚喜。(官網(wǎng)已變，不過(guò)仍舊可以看看)

　　Tsptr

　　在Mapquest服務(wù)網(wǎng)站不僅用圖片傳達(dá)了情感，而且還非常巧妙通過(guò)圖中人物的視線方向來(lái)引導(dǎo)用戶去看到頁(yè)面的重點(diǎn)——左側(cè)的下載鏈接。

　　POCO People這個(gè)網(wǎng)站設(shè)計(jì)的很有趣，它充分利用了色彩，燈光還有整個(gè)頁(yè)面中所陳列的物品，當(dāng)你鼠標(biāo)點(diǎn)到每一個(gè)文字區(qū)域時(shí)，圖中相應(yīng)的物品都會(huì)發(fā)光，這些有趣的設(shè)計(jì)能夠激發(fā)用戶去思考去看這個(gè)網(wǎng)站到底是做什么的。

　　Pocopeople

　　Colossal網(wǎng)站在網(wǎng)頁(yè)上采用了一個(gè)大照片用來(lái)展示他們的工作內(nèi)容(看他手上的油漆和墻壁上的壁畫)，以及他們?nèi)绾巫鲞@些事情(細(xì)看該男子右側(cè))。照片中最有趣的是左邊路過(guò)的行人。他們看起來(lái)很興奮，他們作為觀眾正在見證這個(gè)美麗的壁畫的完成過(guò)程，這使整個(gè)照片變的很吸引人而且更能有效向用戶傳達(dá)信息。

　　它是有感情的嗎？

　　一個(gè)有感情色彩的照片應(yīng)該能帶動(dòng)用戶的情緒。它或美觀，或平靜，或令人不安，或搞笑，娛樂(lè)，或有吸引力等等。無(wú)論是哪一種方式，只要能通過(guò)某種方式和我們的情感訴求達(dá)到共鳴，它就會(huì)帶給我們無(wú)比大的震撼力。

　　Frogdesign網(wǎng)站的特點(diǎn)是，網(wǎng)站是針對(duì)聯(lián)邦緊急事務(wù)管理局和救災(zāi)管理的案例研究。有主圖，再加上一個(gè)有號(hào)召力的口號(hào)，能非常有效地傳達(dá)出飽含豐富的情感。它講了一個(gè)故事，我們雖然不在那里，卻能感受到危險(xiǎn)，仿佛身臨其境。

　　Breath網(wǎng)站的主圖是非常寧?kù)o。它的標(biāo)語(yǔ)寫的很好，圖中那個(gè)女子閉著雙眼，很享受的輕輕的呼吸，注意：下面有按鈕，“吸氣”。這樣的網(wǎng)站是不是很能帶動(dòng)用戶的情緒?

　　Shaun Groves這個(gè)網(wǎng)站的主圖主要講述了一個(gè)偉大的故事，主角是肖恩·格羅夫斯。它傳達(dá)的幸福，信任，希望，友誼和期待，無(wú)論是誰(shuí)看到這個(gè)圖，都會(huì)對(duì)它有所觸動(dòng)吧。

　　Relay Foods這個(gè)網(wǎng)站注重實(shí)用性，從左邊和右邊的女子臉上喜悅的表情可以看出，她們熱愛自己的工作，而且所有的食物都是純天然的，女子的表情都是自然流露，和食品是純天然的即是自然的相一致。

　　表情的力量

　　有七個(gè)(或8)基本情緒：

　　歡樂(lè)   悲傷   蔑視   恐懼   厭惡   驚喜   憤怒

　　這些表情是很常見的，大都是通過(guò)面部表情和身體姿勢(shì)來(lái)表達(dá)。如果想使用圖片和用戶進(jìn)行交流以便傳達(dá)目的信息，那么你就要注意觀察這七種表情所傳達(dá)的信息，然后再?zèng)Q定你到底要用哪種表情來(lái)打動(dòng)你的目標(biāo)用戶。

　　特寫鏡頭能夠立刻抓住用戶的注意力，有助于觸發(fā)用戶的情緒，這也促使他們成為一個(gè)強(qiáng)大的設(shè)計(jì)元素。

　　剛才我們已經(jīng)舉了很多例子，但是我們需要進(jìn)一步探索它們。

　　Build Fire網(wǎng)站中用到一個(gè)女子的照片，但是這個(gè)照片卻沒(méi)有向我們展示任何有關(guān)他們產(chǎn)品的內(nèi)容，它的作用就是迅速吸引用戶眼球。如果只有下面那張手機(jī)圖片，沒(méi)有這個(gè)女子，肯定無(wú)法達(dá)到現(xiàn)在這樣的效果。

　　如果您決定在您的個(gè)人網(wǎng)站上使用了一張大的人物肖像，我會(huì)給你點(diǎn)個(gè)贊。但是你要小心!一個(gè)微小的面部表情可以讓你在信息溝通中產(chǎn)生巨大的差異。Daniel Eckler網(wǎng)站就做的很好，將自己完美的展現(xiàn)在用戶面前，他的面部表情中表現(xiàn)出的是信心，冷靜和信任。

　　每個(gè)人都知道在WTC發(fā)生了什么事。9/11 Tribute Center這個(gè)網(wǎng)站是專門記錄曾經(jīng)在那里發(fā)生過(guò)的故事。照片上的人注視著我們，邀請(qǐng)我們一起加入到這個(gè)社會(huì)性話題當(dāng)中。

　　Conservation網(wǎng)站中將在文字覆蓋在的特寫人物的臉上，效果不錯(cuò)，很有特點(diǎn)。圖中Kayapo男子照片表達(dá)出權(quán)威，勇氣和贊賞的信息。

　　正如蘇珊說(shuō)，慈善機(jī)構(gòu)的網(wǎng)站上放一個(gè)近景拍攝的照片是最有說(shuō)服力，這是事實(shí)。Save the Children這個(gè)網(wǎng)站就是這樣做的，一個(gè)孩子對(duì)的特寫照片，一個(gè)完全對(duì)齊與該網(wǎng)站的標(biāo)語(yǔ)和主題，還看到了什么?對(duì)，小孩子的視線：捐款按鈕。點(diǎn)一下吧，他們需要你。

　　如何在網(wǎng)頁(yè)設(shè)計(jì)“不”使用照片

　　盡管我們已經(jīng)看到了在網(wǎng)站設(shè)計(jì)中使用照片的好例子，但是圖片很容易被濫用。因此，我將告訴你如何不使用照片和怎樣避免濫用的情況。

　　無(wú)關(guān)的照片 ——一個(gè)做網(wǎng)頁(yè)設(shè)計(jì)工作室，先要表達(dá)自己能夠提供專業(yè)的設(shè)計(jì)，所以用了Tailored-made(量體裁衣)的引申義，知道用比喻很好。但是卻錯(cuò)用了彩色線軸的圖片，第一眼還會(huì)以為這是一家裁縫鋪，有木有?這表達(dá)方式也太晦澀了。

　　對(duì)于這個(gè)圖我們有一個(gè)解決方案，在這里使用純色或者是團(tuán)隊(duì)的合影。此外，數(shù)碼產(chǎn)品不能進(jìn)行定制的。

　　一個(gè)提供團(tuán)隊(duì)協(xié)作的軟件，卻用了一個(gè)工作中流露出擔(dān)憂這種表情的女人的圖片。這會(huì)給人一種這樣的印象：這個(gè)女人在擔(dān)心。這樣會(huì)影響軟件在網(wǎng)絡(luò)中的推廣。我們可以這么解決，使用真正的產(chǎn)品的截圖或者是放一張正在使用他們的產(chǎn)品，而且面露幸福表情的女人的圖片。

　　下圖也是一個(gè)關(guān)于和內(nèi)容無(wú)關(guān)的圖片的例子。盡管“手工制作”的字樣和“作坊”可以聯(lián)想到圖片本身，但它不表達(dá)出該網(wǎng)站的真正意義。Brand Bat是關(guān)于創(chuàng)造品牌戰(zhàn)略，用這些木材的圖片，不能很好的傳達(dá)他們多想要表達(dá)的訊息。

　　模糊的背景圖片

　　這圖是是用來(lái)裝飾的占位圖。沒(méi)有任何關(guān)于該網(wǎng)站的信息，用戶無(wú)法了解這個(gè)網(wǎng)站。我的建議是盡可能避免使用模糊的背景圖片，除非你可以做的很好。

　　錯(cuò)誤的選擇照片

　　當(dāng)你看到這張照片時(shí)，你的第一印象是什么?兩個(gè)幸福的人站在一家咖啡店，他們將幫助你的在線業(yè)務(wù)取得成功，對(duì)不對(duì)?不，一個(gè)全方位服務(wù)的網(wǎng)頁(yè)設(shè)計(jì)公司還應(yīng)該在圖片中放上他們幸福又成功的客戶。這樣的錯(cuò)誤也是我們應(yīng)該避免的。

　　全景照片

　　他們幾乎從來(lái)沒(méi)有傳達(dá)任何有用的訊息。為什么有一個(gè)小男孩戴著眼鏡，還手豎大拇指?他是一名提供的PHP編碼服務(wù)開發(fā)人員?顯然不是。

　　一個(gè)全國(guó)性的網(wǎng)站實(shí)在不應(yīng)該用這張照片來(lái)傳達(dá)訊息。首先，這個(gè)圖片和話題無(wú)關(guān)的，女人似乎咬她的指甲(我們都知道這是一種心理障礙)，而且她的平板電腦屏幕是模糊。這張照片所顯示的是焦慮，緊張和壓力的情緒，我真的認(rèn)為這樣的圖片不應(yīng)放到全國(guó)性的網(wǎng)站上。

　　最后的思考

　　文章中的例子大都在網(wǎng)站中使用了大圖，但圖片還有很多種使用方式，只要使用得當(dāng)，就能夠吸引用戶。在你設(shè)計(jì)程序之前要好好考慮一下你要使用的圖片。如果你做了正確的選擇，恭喜你你已經(jīng)有足夠的洞察力。

　　要對(duì)好的圖片拍攝投資：一個(gè)偉大的攝影師可以極大的提升到你的網(wǎng)站的商業(yè)價(jià)值。 不管你怎么設(shè)計(jì)，你的用戶都可以從你的設(shè)計(jì)中受益。了解人們的行為確實(shí)是做出有效的設(shè)計(jì)的唯一途徑，這對(duì)網(wǎng)站設(shè)計(jì)選擇最佳照片也是實(shí)用的。期待你做出的網(wǎng)頁(yè)哦!!