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

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

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

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

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

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

大圖為何有效？

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

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

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

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

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

選擇完美的圖片

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

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

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

它是否實用?

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

•對我們理解事物有所幫助,

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

•能明白地展示事情是如何運作的。

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

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

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

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

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

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

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

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

Tsptr

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

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

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

它是否動人?

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

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

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

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

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

表情的力量

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

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

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

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

在前面的案例中我們已經(jīng)看到了一些人像素材，這里我們再深入探討一下。

在Build Fire網(wǎng)站的圖片中，盡管畫面中的女士沒有對產(chǎn)品發(fā)表任何評論，她卻賦予產(chǎn)品某種特性，并有效地吸引了用戶的注意力。如果圖中出現(xiàn)的不是一個美麗女士而只是一部手機的話，整幅圖片就不會取得這樣的效果。
 
 

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

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

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

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

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

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

這樣用圖片，你就錯了

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

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

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

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

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

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

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

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

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

小結(jié)

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

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

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