nornor

圖片一直都是網(wǎng)頁中重要的組成部分。自從嵌入圖片步驟變得簡單，我們可以看到很多網(wǎng)站都內(nèi)嵌了許多圖片，其中一些網(wǎng)站從不同角度展示了正確利用圖片的好處，然而，大部分網(wǎng)站則不是如此。盡管對于一款設(shè)計來說，圖片角度展示并沒有多大的影響，但是這些圖片可能會減少你銷售產(chǎn)品的機會，除非你有一個很好的誘導用戶的頁面或者創(chuàng)造了很好的閱讀流條件。圖片是細節(jié)勝于原則的問題，處理圖片應該是設(shè)計師們更加需要理解和掌握的能力。網(wǎng)頁可用性專家雅各布·聶森（Jakob Niesen）和他的公司NN/g做了一項眼動研究，總結(jié)出了一篇名為《Photos as Web Content》的文章。他們的結(jié)論震驚了設(shè)計行業(yè)，也解答了許多之前研究都無法解答的問題。

處理圖像的可用性指導

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

1.尺寸，組成元素，質(zhì)量，曝光率是衡量一張好圖片的四大因素。用戶關(guān)注圖片的質(zhì)量，甚至連對比度都能產(chǎn)生很大的影響。

2.如果一張圖片令人興奮或者讓人產(chǎn)生興趣，那么它就成功了。一張高效的圖片包含情感、合理、品牌這三個特點，比如說在圖片中，你的產(chǎn)品能否激發(fā)用戶使用的欲望？圖片展示了產(chǎn)品的哪些優(yōu)點？是否圖片符合你的品牌風格？

3.傳遞信息，圖片能傳遞正確的信息給網(wǎng)站的讀者。

4.刺激用戶的反應。實際上這有點難，但是基本的想法就是圖片能幫助用戶做決定，以及產(chǎn)生對產(chǎn)品的購買欲望。我們在后文會提及到。

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

圖片對網(wǎng)站設(shè)計的重要性

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

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

網(wǎng)站上有很多的圖片就意味著能夠更吸引人？錯，有的網(wǎng)站圖片雖然很多，但是缺少重要信息，圖和內(nèi)容沒有關(guān)聯(lián)性，這樣用戶反而會忽略甚至厭煩網(wǎng)站上的圖片，這樣白白浪費了網(wǎng)站的空間，反而帶來了反面影響。

比如火車站售票的官方網(wǎng)站，進入首頁你可以看到，除了感覺這是一個難以置信的過時設(shè)計以外，你還可以清晰看到所有圖片都沒有吸引力，這是因為這些圖片純粹是作為填充作用。假如這些圖片是和頁面信息相關(guān)的，那么可能會有對用戶有吸引作用。

另外一個例子來自天貓網(wǎng)的網(wǎng)站首頁，我們可以看到，盡管內(nèi)容較多，但是圖片在網(wǎng)站上起到了很好的分類效果，而且與內(nèi)容相關(guān)，最重要的是圖片的質(zhì)量也很好，顏色分布也很協(xié)調(diào)，很有整體感。這里需要補充一點，盡管圖片和網(wǎng)頁中的內(nèi)容是一定程度上的相關(guān)，但是低對比度和小尺寸的圖片卻容易被忽視。所以這里需要一個平衡，圖片質(zhì)量和相關(guān)性是兩個重要的指引原則。

如何引導用戶

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

他們以嬰兒尿布零售商網(wǎng)站作為例子在106位研究對象上做了一項眼動研究。在兩則嬰兒所對位置不同的廣告圖中當圖中嬰兒的臉是面對訪客時，大部分的人會把焦點放在他的臉上，留下諸如可愛，甜美等印象。

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

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

因為很多廣告都擁有美麗的模特，所以一般模特比廣告產(chǎn)品更能贏得用戶的焦點，用戶并沒有把焦點放在廣告產(chǎn)品上，而都聚焦在模特身上，下面的研究顯示這個問題可以被解決。

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

圖片需要帶有目的性

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

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

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

信任是關(guān)鍵

如果你開了一家網(wǎng)上商城，時刻記住，信任是非常重要的。沒有人會在他們不信任的商家那里購物，這也是所以Amazon和ebay這么受歡迎的原因， 因為他們是全球知名的品牌并且提供了不同的退款保證。此外，他們還擁有與眾不同的安全特性。買家信任他們，因為他們很清楚如果賣家不遵守規(guī)矩，就會受到懲罰。如果你有一家網(wǎng)上商城，確保能贏得買家的信任。

這和圖片有什么關(guān)系？根據(jù)派勒士·喬布拉（Paras Chopra）關(guān)于落地頁轉(zhuǎn)化率的研究，信任是可以通過圖片建立的。

一個網(wǎng)上商城銷售巴西和加勒比繪畫作品，是一件難以置信的事情。在這個網(wǎng)站中，一個細小的變化讓轉(zhuǎn)化率從原來的8.8%提高到17.2%，95%的提升。這是如何在做到的？原來商家并沒有使用畫作的縮略圖而使用了作品對應的畫家作為商品圖片。他們相信商店的原因是因為他們認為這些畫家的作品質(zhì)量無需質(zhì)疑。通過簡單的展示畫家的頭像，顧客們認識到他們正在從像他們自己一樣的真人手上購買（畫作）。

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

優(yōu)化是重中之重

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

根據(jù)今年2月的數(shù)據(jù)顯示，圖片比例占了一個網(wǎng)頁中的61.9%，平均一個頁面的尺寸是1.29兆。圖片大就需要花費很長的時間去下載，對頁面的加載造成了影響。根據(jù)雅各布·聶森的研究，一秒的響應時間是用戶認為希望接受的時間極限。

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

最后一個技術(shù)方面就是在圖片標簽中指定寬高，原因很簡單。一個頁面永遠先加載文字，然后加載圖片。因此，沒有指定寬高的圖片在被完全加載之 前，會被一張小縮略圖標志。當圖片加載時，這張縮略圖就會伸展到他原有的尺寸從而打斷用戶可能正在閱讀的文字。同時，圖片在伸展過程中也會導致用戶可能正 在聚焦的位置移位，這會讓非常多的訪客感覺無耐。

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

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

結(jié)語

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

（編輯：楊磊）