俗話說(shuō)，一圖勝千言。無(wú)論這是真是假，圖片都是網(wǎng)頁(yè)中重要的組成部分。自從嵌入圖片步驟變得簡(jiǎn)單，我們可以看到很多網(wǎng)站都內(nèi)嵌了許多圖片，其中一些網(wǎng)站從不同角度展示了正確利用圖片的好處，然而，大部分網(wǎng)站則不是如此。盡管這對(duì)于一款設(shè)計(jì)來(lái)說(shuō)，并不是多大的影響，但是這些圖片可能會(huì)減少你銷(xiāo)售產(chǎn)品的機(jī)會(huì)，除非你有一個(gè)很好的誘導(dǎo)用戶(hù)的頁(yè)面或者創(chuàng)造了很好的閱讀流條件。圖片是細(xì)節(jié)勝于原則的問(wèn)題，處理圖片應(yīng)該是設(shè)計(jì)師們更加需要理解和掌握的能力。

網(wǎng)頁(yè)可用性專(zhuān)家Jakob Niesen和他的公司NN/g做了一項(xiàng)眼動(dòng)研究，總結(jié)出了一篇名為《Photos as Web Content》的文章。他們的結(jié)論震驚了設(shè)計(jì)行業(yè)，也解答了許多之前研究都無(wú)法解答的問(wèn)題。

網(wǎng)頁(yè)設(shè)計(jì)可用性指導(dǎo)-處理圖像

實(shí)際上，用戶(hù)更想看到與他們想找的信息相關(guān)的圖片，因此他們更青睞一個(gè)沒(méi)有圖片的頁(yè)面而不喜歡那種充斥著無(wú)關(guān)圖片，顯得臃腫的頁(yè)面。根據(jù)研究，在網(wǎng)頁(yè)中使用圖片的關(guān)鍵，是基于以下幾則基本的思路：

• 圖片基本因素：尺寸，組成元素，質(zhì)量，曝光率是衡量一張好圖片的四大因素。用戶(hù)關(guān)注圖片的質(zhì)量，甚至連對(duì)比度都能產(chǎn)生很大的影響。
• 效率：如果一張圖片令人興奮或者讓人產(chǎn)生興趣，那么它就成功了。一張高效的圖片包含幾個(gè)特點(diǎn)：
  1. 情感：圖片中，你的產(chǎn)品能讓激發(fā)用戶(hù)使用的欲望？
  2. 合理：圖片展示了產(chǎn)品的優(yōu)點(diǎn)？
  3. 品牌：圖片符合你的品牌風(fēng)格？
• 傳遞信息： 圖片能傳遞正確的信息給網(wǎng)站的讀者。
• 刺激用戶(hù)的反應(yīng)：實(shí)際上這有點(diǎn)難，但是基本的想法就是圖片能幫助用戶(hù)做決定，以及產(chǎn)生對(duì)產(chǎn)品的購(gòu)買(mǎi)欲望。我們?cè)诤笪臅?huì)提及到。

單純的裝飾性圖片會(huì)潛意識(shí)地被我們大腦忽略。就像雷達(dá)一樣，如果圖片就像雷達(dá)上的濾波，那么大腦就會(huì)忽略他們。研究表明，使用了真人或者真實(shí)產(chǎn)品的圖片會(huì)自動(dòng)被大腦標(biāo)志為重要并能被進(jìn)一步地關(guān)注。如果你有一個(gè)個(gè)人博客，大家更希望看到的是你真人頭像而不是一張繪畫(huà)像。人們想看到正在與他們交流的人的樣貌，因?yàn)檫@對(duì)信任的建立尤其重要。

如果你擁有一家公司，使用圖片去描述公司員工是一個(gè)非常棒的想法。它給外界提供了一個(gè)很親切的途徑去了解這家公司的員工及生活。如果你能支付得起，花點(diǎn)錢(qián)請(qǐng)一個(gè)好的攝影師，這會(huì)為你公司的網(wǎng)站增色不少。（切記不要走藝術(shù)照風(fēng)格，尤其是那種和你的想表達(dá)內(nèi)容無(wú)關(guān)的藝術(shù)照）

此外，一些眼動(dòng)研究還表明，如果產(chǎn)品圖片中含有更多的細(xì)節(jié)，它能帶來(lái)的效果就越好。是的，比如說(shuō)平板電視的廣告圖，雖然它能起到一定作用，但是這真的夠好嗎？用戶(hù)希望看到更多的細(xì)節(jié)，所以，請(qǐng)展示給他們。

質(zhì)量和相關(guān)性：

下面我會(huì)給你展示幾個(gè)不同研究的結(jié)果。你會(huì)看到一些網(wǎng)站標(biāo)志了熱區(qū)，紅色的區(qū)域表示受到用戶(hù)關(guān)注的，而藍(lán)色的區(qū)域表示被用戶(hù)忽略的。

在ADELPHIAS網(wǎng)站做的眼動(dòng)儀研究

除了看到這是一個(gè)難以置信的過(guò)時(shí)設(shè)計(jì)以外，你可以清晰看到所有圖片都沒(méi)有熱區(qū)分布。這是因?yàn)檫@些圖片純粹是作為填充作用。假如這些圖片是和頁(yè)面信息相關(guān)的，那么熱區(qū)可能會(huì)有一定的變化。這個(gè)例子足以展示了他們是多么地浪費(fèi)圖片空間。

另外一個(gè)例子來(lái)自紐約雜志網(wǎng)站的餐廳頁(yè)面的眼動(dòng)研究。我們可以看到，盡管圖片人物是世界出名的廚師，圖片的質(zhì)量也很重要。盡管圖片和網(wǎng)頁(yè)中的內(nèi)容是一定程度上的相關(guān)，但是低對(duì)比度和小尺寸的圖片卻容易被忽視。所以這里需要一個(gè)平衡，圖片質(zhì)量和相關(guān)性是兩個(gè)重要的指引原則。

紐約雜志網(wǎng)站上做的眼動(dòng)研究

上圖摘自Jakob Nielsen 和 Kara Pernice在幾年前寫(xiě)過(guò)一篇名為《Images as Obstacles》的文章，感謝你們偉大的工作。

引導(dǎo)用戶(hù)

并不是所有設(shè)計(jì)師都有心理學(xué)碩士學(xué)位，所以很少人能知道人類(lèi)的大腦是如何運(yùn)作的。同樣的眼動(dòng)研究表明我們的焦點(diǎn)也能很容易地被圖片影響和改變。當(dāng)然，我們指的是高質(zhì)量，以及相關(guān)的圖片。在一個(gè)名為“YOU LOOK WHERE THEY LOOK”的研究中，James Breeze展示了圖片如何能成為閱讀流的一部分。

他們以嬰兒尿布零售商網(wǎng)站作為例子在106位研究對(duì)象上做了一項(xiàng)眼動(dòng)研究。接下來(lái)你可以看到2張圖片。當(dāng)圖中嬰兒的臉是面對(duì)訪客時(shí)，大部分的人會(huì)把焦點(diǎn)放在他的臉上，留下諸如可愛(ài)，甜美等印象。

嬰兒尿布零售商網(wǎng)站圖票效果研究

然而，同樣的一則廣告，相同的文案，同一個(gè)嬰兒，但是在不同的方位，結(jié)果卻產(chǎn)生了明顯改善效果。大家不僅更關(guān)注文案，而且我們還能看到，品牌以及一些更小的字（一些退款的協(xié)議。退款協(xié)議在一項(xiàng)買(mǎi)賣(mài)中相當(dāng)重要，可能是其中一個(gè)賣(mài)點(diǎn)）都能被更多地關(guān)注。

這張圖展示了圖片能造成多大的效果影響

JCDecaux和THiNK研究數(shù)年，在一項(xiàng)研究中得出結(jié)論,更加證實(shí)了上面的結(jié)果：在一則廣告中，用戶(hù)的眼球?qū)嶋H上可以被引導(dǎo)到廣告的關(guān)鍵信息處。

因?yàn)楹芏鄰V告都擁有美麗的模特，所以一般模特比廣告產(chǎn)品更能贏得用戶(hù)的焦點(diǎn)，用戶(hù)并沒(méi)有把焦點(diǎn)放在廣告產(chǎn)品上，而都聚焦在模特身上，下面的研究顯示這個(gè)問(wèn)題可以被解決。

Sunsilk產(chǎn)品廣告眼動(dòng)研究

這個(gè)研究的結(jié)果非常清晰，最初的廣告（左邊），只有很少的焦點(diǎn)集中到產(chǎn)品的品牌和產(chǎn)品上，實(shí)際上少得只有6%。然后在廣告被修改和重新測(cè)試后（右圖），盡管商品LOGO放在底部，但是還有84%以上的人更關(guān)注產(chǎn)品以及產(chǎn)品的品牌。這是一個(gè)14倍提升，在我看在，是非常大的區(qū)別。

圖片需要帶有目的

圖片不僅僅可以引導(dǎo)用戶(hù)的關(guān)注點(diǎn)，還能超越文字在僅僅幾秒內(nèi)描述產(chǎn)品的很多信息。一個(gè)極其著名的例子就是Square，一個(gè)支持手機(jī)或平板刷卡的智能手機(jī)小外設(shè)。

通過(guò)上圖，用戶(hù)能在幾秒內(nèi)了解到這款產(chǎn)品的許多特性。他們已經(jīng)知道設(shè)備之間的連接方法、產(chǎn)品的大小、產(chǎn)品和哪些設(shè)備兼容、刷卡后會(huì)有怎樣的交互界面等。原本長(zhǎng)而無(wú)聊的產(chǎn)品介紹讓一張圖片解釋清楚了。這是一個(gè)經(jīng)典的，好極的例子。

還有，蘋(píng)果公司關(guān)于MACBOOK AIR的廣告是另外一個(gè)很好的例子。眾所周知MAC AIR很小，很輕而且做工精美。但是假如你不知道這些特性，你也可以瞬間在下圖中獲悉這些信息。

Macbook Air簡(jiǎn)短高效的廣告圖

信任是關(guān)鍵

如果你開(kāi)了一家網(wǎng)上商城，時(shí)刻記住，信任是非常重要的。沒(méi)有人會(huì)在他們不信任的商家那里購(gòu)物，這也是所以amazon和ebay這么受歡迎的原因，因?yàn)樗麄兪侨蛑钠放撇⑶姨峁┝瞬煌耐丝畋ＷC，此外，他們還擁有與眾不同的安全特性。買(mǎi)家信任他們，因?yàn)樗麄兒芮宄绻u(mài)家不遵守規(guī)矩，就會(huì)受到懲罰。如果你有一家網(wǎng)上商城，確保能贏得買(mǎi)家的信任。

這和圖片有什么關(guān)系？根據(jù)Paras Chopra關(guān)于落地頁(yè)轉(zhuǎn)化率的研究，信任是可以通過(guò)圖片建立的。

一個(gè)網(wǎng)上商城銷(xiāo)售巴西和加勒比繪畫(huà)作品，是一件難以置信的事情。在這個(gè)網(wǎng)站中，一個(gè)細(xì)小的變化讓轉(zhuǎn)化率從原來(lái)的8.8%提高到17.2%，95%的提升。這是如何在做到的？原來(lái)商家并沒(méi)有使用畫(huà)作的縮略圖而使用了作品對(duì)應(yīng)的畫(huà)家作為商品圖片。他們相信商店的原因是因?yàn)樗麄冋J(rèn)為這些畫(huà)家的作品質(zhì)量無(wú)需質(zhì)疑。通過(guò)簡(jiǎn)單的展示畫(huà)家的頭像，顧客們認(rèn)識(shí)到他們正在從像他們自己一樣的真人手上購(gòu)買(mǎi)（畫(huà)作）

Chopra還提及了另外一個(gè)有在線案例集網(wǎng)站的用戶(hù)。通過(guò)將他網(wǎng)站中的聯(lián)系圖標(biāo)替換成他本人圖像，轉(zhuǎn)化率從3.7提升到5.5，產(chǎn)生了45%的提升。他總結(jié)道，訪客可以在第一時(shí)間察覺(jué)到哪些圖片是普通圖片，而降低對(duì)網(wǎng)站的可信度，可見(jiàn)互聯(lián)網(wǎng)中真實(shí)的人像給人們建立了一個(gè)情感的樞紐。

優(yōu)化

在結(jié)束這篇文章之前,我還想簡(jiǎn)單提及一下網(wǎng)站圖片中一些技術(shù)問(wèn)題。首先我想強(qiáng)調(diào)的是，優(yōu)化，真的非常重要。

根據(jù)今年2月的數(shù)據(jù)顯示，圖片比例占了一個(gè)網(wǎng)頁(yè)中的61.9%，平均一個(gè)頁(yè)面的尺寸是1.29兆。圖片大就需要花費(fèi)很長(zhǎng)的時(shí)間去下載，對(duì)頁(yè)面的加載造成了影響。根據(jù)JAKOB NIELSEN的研究，一秒的響應(yīng)時(shí)間是用戶(hù)認(rèn)為希望接受的時(shí)間極限。

2013年2月15數(shù)據(jù):網(wǎng)頁(yè)平均大小

在我們上傳圖片到1stwebdesigner前，我們總會(huì)通過(guò)PHOTOSHOP保存成網(wǎng)頁(yè)格式，這樣可以減少圖片的文件大小也能保持圖片的一定質(zhì)量。同樣的功能，你也可是使用SMUSH.IT。它是一個(gè) 免費(fèi)的在線工具，他也提供了一個(gè)WORDPESS插件。在你上傳圖片之前執(zhí)行前面任一操作，你網(wǎng)站的總尺寸就會(huì)減少，這意味著網(wǎng)頁(yè)能更快地被加載，從而減少用戶(hù)加載網(wǎng)頁(yè)帶來(lái)的郁悶感。

寬高

我想說(shuō)的最后一個(gè)技術(shù)方面就是在圖片標(biāo)簽中指定寬高，原因很簡(jiǎn)單。一個(gè)頁(yè)面永遠(yuǎn)先加載文字，然后加載圖片。因此，沒(méi)有指定寬高的圖片在被完全加載之前，會(huì)被一張小縮略圖標(biāo)志。當(dāng)圖片加載時(shí)，這張縮略圖就會(huì)伸展到他原有的尺寸從而打斷用戶(hù)可能正在閱讀的文字。同時(shí)，圖片在伸展過(guò)程中也會(huì)導(dǎo)致用戶(hù)可能正在聚焦的位置移位，這會(huì)讓非常多的訪客感覺(jué)無(wú)耐。

通過(guò)指定圖片標(biāo)簽中的寬高，你就能確保這張縮略圖在圖片加載完成之前就能伸展到他的完全尺寸，和出現(xiàn)在他該有的位置。這是一個(gè)很小的細(xì)節(jié)，但是確實(shí)一個(gè)很好的體驗(yàn)。

然而，有人認(rèn)為這是舊的技術(shù)并在在如今移動(dòng)瀏覽器高速發(fā)展時(shí)代，這并不高效。我贊成這一點(diǎn)，因此你可以只在響應(yīng)式頁(yè)面中不指定寬高，但是不要忘記在不同的分辨率下改變圖片的尺寸，你也不想一張700像素寬的圖片出現(xiàn)在640像素寬的設(shè)備上。

結(jié)語(yǔ)：

如果你想有一個(gè)成功的網(wǎng)站，尤其是你的網(wǎng)站能給你帶來(lái)利益轉(zhuǎn)化的，正確使用圖片是非常重要的。在上面的例子中你已經(jīng)看到，差的圖片會(huì)被用戶(hù)無(wú)視，但是如果你能找到合適的圖片并把他們放在了合適的位置，那么他們就能給你帶來(lái)驚人的效果。

• 原文來(lái)源：1stwebdesigner
• 原文標(biāo)題：How to Use Images Successfully – Web Design Usability Guide
• 原文地址：http://www.1stwebdesigner.com/design/images-on-web-design-usability-guide/
• 本譯文僅用于學(xué)習(xí)和交流目的。非商業(yè)轉(zhuǎn)載請(qǐng)注明譯者、出處，并保留文章在譯言的完整鏈接。如翻譯不當(dāng)，歡迎提出您的意見(jiàn)。