識(shí)圖有道！網(wǎng)頁設(shè)計(jì)師選圖指南

生動(dòng)的圖象常常能在瞬間就吸引我們的注意并觸發(fā)我們的感情。因此,無論在哪種類型的網(wǎng)站中，圖象都是一個(gè)十分重要的組成部分。好的圖片不僅能給用戶留下良好的第一印象，還能使用戶在第一時(shí)間了解網(wǎng)站的類型和特點(diǎn)，從而在贏得用戶信任的過程中發(fā)揮巨大作用。

如果運(yùn)用恰當(dāng)?shù)脑?，圖片無疑是向網(wǎng)站用戶傳遞信息的最佳手段之一。但是,使用錯(cuò)誤的照片卻會(huì)大大降低用戶體驗(yàn)。那么網(wǎng)頁設(shè)計(jì)師應(yīng)該如何去選擇正確的圖片呢?

網(wǎng)頁設(shè)計(jì)中的圖片選擇

網(wǎng)頁設(shè)計(jì)涉及到許多方面：內(nèi)容，色彩，字體，布局及其他細(xì)節(jié)，其中圖片的優(yōu)劣直接影響到整個(gè)網(wǎng)站的易用性和用戶體驗(yàn)，應(yīng)給予足夠重視。

作為一個(gè)網(wǎng)站設(shè)計(jì)人員，深刻理解和熟練運(yùn)用圖片的能力應(yīng)該是設(shè)計(jì)能力中的重要一環(huán)，這篇文章旨在提供一些有效的建議，以幫助設(shè)計(jì)師在面對(duì)大量可供選擇的圖片時(shí)迅速做出正確的決定。

大圖為何有效？

用戶瀏覽網(wǎng)站的心理基礎(chǔ)是經(jīng)驗(yàn)與期待。用戶開始瀏覽一個(gè)網(wǎng)頁時(shí)，視線的起點(diǎn)一般是屏幕左上角。當(dāng)然，不同的文化中的用戶也可能會(huì)有不同的瀏覽習(xí)慣。然而，如果網(wǎng)頁中有一張很大的圖片時(shí)，用戶的注意力會(huì)立即被圖片吸引，他們會(huì)被“拖離”慣常的閱讀傾向。

作為網(wǎng)頁內(nèi)容的圖片

如果我說圖片也算是網(wǎng)站的內(nèi)容之一，你大概不會(huì)否認(rèn)，但具體到真實(shí)的設(shè)計(jì)中，你真的把它當(dāng)成一個(gè)重要的設(shè)計(jì)元素了嗎?你是否只是把圖片作為輔助/裝飾性項(xiàng)目?你認(rèn)真地從不同角度考慮過一張圖片的適用性嗎？在使用圖片之前，你對(duì)它們是否做過一番分析?你是否考慮過用戶對(duì)圖片的認(rèn)知模式和圖片可能給用戶帶來的反應(yīng)?你是否考慮過，你選擇的圖片傳遞了什么有效信息，又對(duì)用戶的使用體驗(yàn)有何幫助?在處理網(wǎng)頁設(shè)計(jì)中的圖片時(shí)，這些只是你需要考慮的問題中的一小部分。

記住，圖片絕不應(yīng)該僅僅用于“扮靚”網(wǎng)頁。

我見過很多設(shè)計(jì)師，他們使用圖片的方式就是在網(wǎng)頁中放一張漂亮照片，然后添加一些標(biāo)簽或“立即行動(dòng)”之類的口號(hào)即算大功告成。在很多設(shè)計(jì)案例中，設(shè)計(jì)師都沒有對(duì)選取的照片評(píng)估，而是跟著流行趨勢(shì)走，什么流行就用什么?，F(xiàn)在我們就來討論一下在使用圖片之前如何評(píng)估它。

選擇完美的圖片

在選擇一張照片之前得先考察幾個(gè)關(guān)鍵因素。想必你之前也曾聽說過如下這些與圖片有關(guān)的核心概念：質(zhì)量，大小，構(gòu)圖及畫面。質(zhì)量主要指的是圖片的解析度，大小指圖片是否合乎設(shè)計(jì)所要求的尺寸，構(gòu)圖是圖片是否吸引人的關(guān)鍵因素，畫面則決定著圖片內(nèi)容是否合適。

如果你選擇的圖片在這個(gè)幾個(gè)核心標(biāo)準(zhǔn)上都沒問題，你才可以進(jìn)一步考察其它的方面。

我們的大腦處理圖像信息的速度比處理文本信息要快60，000倍。（邁克•帕金森）

它是否實(shí)用?

挑選一張圖片首先要考慮它是否有可用性。拿一張圖片來填充網(wǎng)頁中的空白或讓網(wǎng)頁看起來漂亮些并沒有錯(cuò)，但至少你應(yīng)該考慮一下你選擇的圖片與網(wǎng)頁的整體風(fēng)格是否匹配。那些有用的，有益的，能激發(fā)情感的圖片是你應(yīng)該特別注意的對(duì)象。實(shí)用的圖片應(yīng)該能

•對(duì)我們理解事物有所幫助,

•能教我們?nèi)绾问褂靡粯訓(xùn)|西

•能明白地展示事情是如何運(yùn)作的。

下面這張Square網(wǎng)站使用的圖片就是一個(gè)很好的例子

一望即知這張照片拍的非常專業(yè)（注意照片中的手和指甲）。更重要的是它十分直觀地傳達(dá)了產(chǎn)品的用途及便捷性?？傊?，這是一張實(shí)用性，教育性與指導(dǎo)性兼具的好圖片。
另一個(gè)例子是Pencil網(wǎng)站。與上一張圖片一樣，這張圖片同樣精準(zhǔn)地描述了產(chǎn)品的用途（電子繪圖筆）以及它的使用方法（結(jié)合iPad應(yīng)用）。

Woodster網(wǎng)站的圖片同樣很好地呈現(xiàn)了產(chǎn)品的功能。顯然，這款產(chǎn)品是用于提升Mac電腦的性能的，它同時(shí)也有便捷的USB插口可供利用。想象一下,如果圖片中沒有體現(xiàn)出產(chǎn)品用途（ iMac）,效果會(huì)有何不同。這樣一來，它的實(shí)用性還會(huì)與網(wǎng)站采用的那張圖片一樣好嗎？

Grovemade則出色地在一張背景圖片里便展示了自己的全套產(chǎn)品。觀看者立刻就能明白他們是一家致力于木制辦公設(shè)備生產(chǎn)的供應(yīng)商。這張圖片不僅很實(shí)用，而且情緒感染力也非常強(qiáng)。我們稍后會(huì)詳細(xì)談?wù)剤D片的效果和傳情達(dá)意的問題。

如果仔細(xì)考察一下我所列舉的例子，你會(huì)發(fā)現(xiàn)所有的圖片都非常直觀且目的明晰，它們非常成功地傳達(dá)了要傳遞的信息。你不用花什么心思便能清楚地了解圖片中產(chǎn)品/服務(wù)/網(wǎng)站的功能。這也正是一切實(shí)用性很強(qiáng)的圖片的精華所在。
它是否高效?
一張高效的圖片能鼓動(dòng)人們開始行動(dòng)，它可以將信息清晰無誤地傳遞出去，從而對(duì)觀看者的行為方式施加影響。明確一點(diǎn)說，優(yōu)秀的，高效的產(chǎn)品圖片應(yīng)該能激發(fā)起觀看者的購買欲。在上面所列舉的一些示例圖片中，畫面中的產(chǎn)品看起來非常值得購買，因此這些圖片無疑是非常高效的。當(dāng)一張圖片能促使我們的行為發(fā)生改變時(shí)，你便可以認(rèn)定它是一張高效圖片。

請(qǐng)看Mobility網(wǎng)站圖片中展示的這些炫酷惹眼的橙紅色耳機(jī)，難道你不想立刻將它們據(jù)為己有嗎 ？
 

蘋果公司一向以將完美主義貫徹到底而著稱。蘋果公司的iPhone官網(wǎng)界面全是玲瓏秀美的產(chǎn)品大圖，令訪客忍不住怦然心動(dòng)，紛紛解囊。

另一個(gè)采用高效圖片的例子來自tsptr網(wǎng)站。圖片中的男士目光向下，好像那里有什么東西等待著他。答案是Yes！。

Tsptr

而Mapquest網(wǎng)站的這幅圖片不僅極富感情色彩，而且巧妙地操縱了觀看者的視線，把他們的目光引向圖片左側(cè)的移動(dòng)應(yīng)用下載鏈接。

POCO網(wǎng)站的主頁大圖充滿溫馨氣氛而又引人遐思。觀看者會(huì)有一種印象，就是圖片看起來有些不合常理。這一點(diǎn)，加上色彩，光影和構(gòu)圖的綜合運(yùn)用，觀看者的好奇心很容易被勾起來，他們會(huì)忍不住看一下這個(gè)網(wǎng)站究竟是做什么的。
Pocopeople

Colossal官網(wǎng)的大圖則告訴人們他們的服務(wù)內(nèi)容（提供巨幅手繪墻體廣告和壁畫）和服務(wù)方式(留意畫面右側(cè)工作中的那個(gè)男人)。這張圖片的有趣之處在于畫面左側(cè)那些過往的行人。他們所看到的場(chǎng)景似乎讓他們非常激動(dòng)，這在無形之中也讓瀏覽頁面的觀眾也成了其中一員，因此這張圖片整體效果也更為強(qiáng)烈。

它是否動(dòng)人?

一張動(dòng)人的圖片能夠自然地觸發(fā)觀看者的情感反應(yīng)。無論圖片只是漂亮，迷人，還是它用特別的手法鼓動(dòng)我們的情緒，無論它是有趣，搞笑，還是精美復(fù)雜，一張圖片不管采用什么方式，只要它能調(diào)動(dòng)起我們的情緒，它便遠(yuǎn)遠(yuǎn)勝過那些不能打動(dòng)我們的所謂大作。

frogdesign網(wǎng)站展示的這張圖片主題是FEMA(聯(lián)邦應(yīng)急管理署)與災(zāi)害應(yīng)對(duì)管理。網(wǎng)站大圖配合以精簡的宣傳語，令整幅圖片不僅高效，而且扣人心弦。它的敘事性非常強(qiáng)，生動(dòng)地展現(xiàn)出了災(zāi)難的可怖，觀眾很容易被打動(dòng)，因?yàn)楫嬅嬷械膱?chǎng)景令他們想到自身的安危。 

Breath網(wǎng)站的大圖則給人以沉靜之感。配合以得體的宣傳語和精心安排的構(gòu)圖，觀看者似乎也能感覺到畫面中那位女士自然愜意的呼吸。你是否留意到畫面下面的標(biāo)簽inhale(吸氣)? 

Shaun Groves網(wǎng)站的主圖讓人更加了解Shaun Groves本人的動(dòng)人故事。它傳遞出幸福，信任，希望和友誼，觀看者會(huì)被畫面吸引，進(jìn)而想去了解他的事業(yè)。

除了兼具實(shí)用性和高效性的特點(diǎn)之外，Relay Foods網(wǎng)站同樣在他們的服務(wù)宣傳圖片之中注入了感情。主圖左側(cè)和右側(cè)的女士顯然從她們的工作中獲得了極大的樂趣，Relay Foods是一家致力于有機(jī)食品生產(chǎn)的機(jī)構(gòu)，圖中女孩的面部表情與它的品牌內(nèi)涵也非常協(xié)調(diào)。

表情的力量

一般認(rèn)為人類有七種（或八種）基本情緒: 
1. 歡樂、2. 悲哀、3. 蔑視、4. 恐懼、5. 厭惡、6. 驚訝、7. 憤怒

這些基本情緒是超越文化的，并且可以通過面部表情或身體動(dòng)作被傳達(dá)出來。如果你要在網(wǎng)頁中使用人像圖片，你可以根據(jù)自己想要喚起的觀眾的情感反應(yīng)來決定使用這些情緒中的哪一種。

近距離的面部特寫可以迅速引起觀看者的注意并觸發(fā)他們的情緒反應(yīng)，因此面部特寫圖片可以說一種十分有用的設(shè)計(jì)手段。 

當(dāng)我們看到一張面孔時(shí)，我們會(huì)本能地感受到某種情緒或與之產(chǎn)生情緒上的共鳴。

在前面的案例中我們已經(jīng)看到了一些人像素材，這里我們?cè)偕钊胩接懸幌隆?br />
在Build Fire網(wǎng)站的圖片中，盡管畫面中的女士沒有對(duì)產(chǎn)品發(fā)表任何評(píng)論，她卻賦予產(chǎn)品某種特性，并有效地吸引了用戶的注意力。如果圖中出現(xiàn)的不是一個(gè)美麗女士而只是一部手機(jī)的話，整幅圖片就不會(huì)取得這樣的效果。
 
 

如果你想在網(wǎng)頁中使用豎向的人像照片，我向你致敬！因?yàn)槲乙苍谧约旱木W(wǎng)站中嘗試過這種方式。但是請(qǐng)小心!因?yàn)楸砬樯霞?xì)小的改變也可能導(dǎo)致你傳達(dá)的信息產(chǎn)生很大的誤差。在這一點(diǎn)上，丹尼爾在展示自己時(shí)便做的非常好。他的面部表情給人以自信，冷靜和踏實(shí)的感覺。 

一個(gè)微笑是發(fā)自內(nèi)心還是裝模作樣，人們輕易就能辨別出來。

每個(gè)人都知道當(dāng)年紐約世貿(mào)中心發(fā)生的悲慘事故。9/11 Tribute Center這個(gè)網(wǎng)站就是為那些曾親歷此次災(zāi)難的人而設(shè)立的。照片中的這位男子直視觀看者的視線，他在提示著那場(chǎng)驚心動(dòng)魄的事件，在邀請(qǐng)?jiān)L客參與到他的故事之中。

注意：這張圖片中并沒有出現(xiàn)任何挑釁或?qū)剐缘脑兀@示出設(shè)計(jì)者細(xì)膩的心思。

另一個(gè)憑借面部特寫傳達(dá)信息的極好范例來自Conservation網(wǎng)站。畫面中的卡約伯部族勇士傳遞出權(quán)威，勇氣與尊嚴(yán)的印象。

正如Susan Weinschenk所說,對(duì)于慈善募捐網(wǎng)站來說，沒有什么比一張面部特寫照片更能打動(dòng)人的了。拯救兒童網(wǎng)站選擇的這張?zhí)貙懻掌?，近乎完美地傳達(dá)出了該組織的主旨與精神。你注意到畫面中那個(gè)兒童的視線與捐款按鈕之間的聯(lián)系了嗎?

這樣用圖片，你就錯(cuò)了

盡管我們已經(jīng)舉了這么多圖片選取和使用的優(yōu)秀例子，其實(shí)它們很容易被誤用和濫用。因此我要再列舉一些例子來說明如何避免使用這些錯(cuò)誤的方式來安排圖片。

無關(guān)的圖片：下面這張圖來自一家提供“私人訂制”服裝的公司，但他們使用的卻是一張無關(guān)圖片（彩色的絲線），這樣的一張圖片不能傳達(dá)給訪客正確的信息，相反，還會(huì)給他們?cè)斐慑e(cuò)誤的第一印象。不能說這張圖片毫無意義，但它表達(dá)的方式過于隱晦了。

好一點(diǎn)的解決方案是使用一種純色或一張團(tuán)體照做背景。此外,網(wǎng)站宣傳語中的“數(shù)字產(chǎn)品”事實(shí)上是無法在該公司定制的。
 

再看這一張，一個(gè)提供團(tuán)隊(duì)協(xié)作軟件的開發(fā)商使用了一張愁容滿面的女士的照片做網(wǎng)站大圖。這可能會(huì)造成這樣的印象,即她在擔(dān)心自己網(wǎng)站所宣傳的這款軟件的質(zhì)量。一個(gè)更好的解決方案是顯示產(chǎn)品截圖或顯示一個(gè)樂觀的女人正在使用他們的產(chǎn)品。

模糊效果的照片充當(dāng)背景：在這里這張圖片僅僅是用作裝飾，沒有傳達(dá)關(guān)于此網(wǎng)站的任何信息，因此也就沒有任何真正的效果。我建議你盡量避免使用模糊效果的照片做背景，如果你想傳遞更多信息的話。

下圖又是一個(gè)使用無關(guān)圖片的例子。盡管宣傳語中的“手工制作”和“工作坊”能與照片扯上那么一點(diǎn)關(guān)系，但該網(wǎng)站的真正功能卻完全被忽視了。事實(shí)上這個(gè)名為Brand Bat的網(wǎng)站致力于為客戶提供品牌創(chuàng)意方案，而一張與這個(gè)目的毫無關(guān)系的木工工具的照片則有可能讓他們失去很多寶貴機(jī)會(huì)。

圖片選擇失誤：當(dāng)你看到這張照片，你首先想到的是什么？兩個(gè)能幫助你的線上業(yè)務(wù)大獲成功的咖啡館侍應(yīng)生，對(duì)嗎？真實(shí)情況是他們來自一家專業(yè)網(wǎng)站設(shè)計(jì)機(jī)構(gòu)！我想他們網(wǎng)站的圖片中至少應(yīng)該讓某個(gè)對(duì)他們的產(chǎn)品感到滿意的客戶露個(gè)面吧！另外，這張圖片很可能是一張你應(yīng)該避免使用的“素材類圖片”。

素材類圖片——他們幾乎從來沒有傳達(dá)正確的信息?？聪聢D，這個(gè)戴眼鏡,豎起大拇指的可愛小孩是誰呢？他是一個(gè)PHP編程開發(fā)者嗎？我不太相信。 

再看接下來的這張圖，Nationwide網(wǎng)站使用這張圖可以說完全是個(gè)錯(cuò)誤。首先，這張圖片與網(wǎng)站內(nèi)容幾乎沒有關(guān)聯(lián)，圖片中的這位女子似乎是在咬手指（我們都知道這可能是心理障礙的一個(gè)征兆），她手中所持的平板看起來也模糊不清。這張照片給人以焦慮，緊張和壓力過大的印象，我不認(rèn)為Nationwide網(wǎng)站真的想把這樣的信息帶給自己的網(wǎng)站用戶。

小結(jié)

本文講的是如何在網(wǎng)頁中使用大圖的策略，但除此之外，在網(wǎng)頁中使用圖片還有很多種手段和方法。請(qǐng)盡量在設(shè)計(jì)開始之前就給予圖片足夠的重視。

別吝惜花在圖片上的錢：一個(gè)專業(yè)而優(yōu)秀的攝影師能為你的網(wǎng)站帶來無限商機(jī)

無論你擅長的是哪種類型的設(shè)計(jì)，你都應(yīng)該時(shí)刻想著將來能從你的設(shè)計(jì)中受益的那些人。而且說到底,讓設(shè)計(jì)獲得成功的唯一方法是對(duì)人類的行為和心態(tài)有透徹的了解，這一點(diǎn)自然也適用于圖片的選擇。