網頁設計技巧:正確處理網頁圖片

來源:互聯網
上載者:User

  譯者:nornor 俗話說,一圖勝千言。無論這是真是假,圖片都是網頁中重要的組成部分。自從內嵌圖片步驟變得簡單,我們可以看到很多網站都內嵌了許多圖片,其中一些 網站從不同角度展示了正確利用圖片的好處,然而,大部分網站則不是如此。儘管這對於一款設計來說,並不是多大的影響,但是這些圖片可能會減少你銷售產品的 機會,除非你有一個很好的誘導使用者的頁面或者創造了很好的閱讀流條件。圖片是細節勝於原則的問題,處理圖片應該是設計師們更加需要理解和掌握的能力。

  網頁可用性專家Jakob Niesen和他的公司NN/g做了一項眼動研究,總結出了一篇名為《Photos as Web Content》的文章。他們的結論震驚了設計行業,也解答了許多之前研究都無法解答的問題。

網頁設計可用性指導-處理映像

  實際上,使用者更想看到與他們想找的資訊相關的圖片,因此他們更青睞一個沒有圖片的頁面而不喜歡那種充斥著無關圖片,顯得臃腫的頁面。根據研究,在網頁中使用圖片的關鍵,是基於以下幾則基本的思路:

  圖片基本因素:尺寸,組成元素,品質,曝光率是衡量一張好圖片的四大因素。使用者關注圖片的品質,甚至連對比都能產生很大的影響。
  效率:如果一張圖片令人興奮或者讓人產生興趣,那麼它就成功了。一張高效的圖片包含幾個特點:
       情感:圖片中,你的產品能讓激發使用者使用的慾望?
       合理:圖片展示了產品的優點?
       品牌:圖片符合你的品牌風格?
  傳遞資訊: 圖片能傳遞正確的資訊給網站的讀者。
  刺激使用者的反應:實際上這有點難,但是基本的想法就是圖片能協助使用者做決定,以及產生對產品的購買慾望。我們在後文會提及到。

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

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

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

品質和相關性:

下面我會給你展示幾個不同研究的結果。你會看到一些網站標誌了熱區,紅色的地區表示受到使用者關注的,而藍色的地區表示被使用者忽略的。


在ADELPHIAS網站做的眼動儀研究

  除了看到這是一個難以置信的過時設計以外,你可以清晰看到所有圖片都沒有熱區分布。這是因為這些圖片純粹是作為填充作用。假如這些圖片是和頁面資訊相關的,那麼熱區可能會有一定的變化。這個例子足以展示了他們是多麼地浪費圖片空間。

  另外一個例子來自紐約雜誌網站的餐廳頁面的眼動研究。我們可以看到,儘管圖片人物是世界出名的廚師,圖片的品質也很重要。儘管圖片和網頁中的內容是一定程度上的相關,但是低對比和小尺寸的圖片卻容易被忽視。所以這裡需要一個平衡,圖片品質和相關性是兩個重要的指引原則。


紐約雜誌網站上做的眼動研究

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

引導使用者

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

  他們以嬰兒尿布零售商網站作為例子在106位研究對象上做了一項眼動研究。接下來你可以看到2張圖片。當圖中嬰兒的臉是面對訪客時,大部分的人會把焦點放在他的臉上,留下諸如可愛,甜美等印象。


嬰兒尿布零售商網站圖票效果研究

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


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

  JCDecaux和THiNK研究數年,在一項研究中得出結論,更加證實了上面的結果:在一則廣告中,使用者的眼球實際上可以被引導到廣告的關鍵資訊處。

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


Sunsilk產品廣告眼動研究

  這個研究的結果非常清晰,最初的廣告(左邊),只有很少的焦點集中到產品的品牌和產品上,實際上少得只有6%。然後在廣告被修改和重新測試後(右 圖),儘管商品LOGO放在底部,但是還有84%以上的人更關注產品以及產品的品牌。這是一個14倍提升,在我看在,是非常大的區別。


圖片需要帶有目的

  圖片不僅僅可以引導使用者的關注點,還能超越文字在僅僅幾秒內描述產品的很多資訊。一個極其著名的例子就是Square,一個支援手機或平板刷卡的智能手機小外設。

  通過上圖,使用者能在幾秒內瞭解到這款產品的許多特性。他們已經知道裝置之間的串連方法、產品的大小、產品和哪些裝置相容、刷卡後會有怎樣的互動介面等。原本長而無聊的產品介紹讓一張圖片解釋清楚了。這是一個經典的,好極的例子。

  還有,蘋果公司關於MACBOOK AIR的廣告是另外一個很好的例子。眾所周知MAC AIR很小,很輕而且做工精美。但是假如你不知道這些特性,你也可以瞬間在下圖中獲悉這些資訊。


Macbook Air簡短高效的廣告圖

信任是關鍵

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

  這和圖片有什麼關係?根據Paras Chopra關於落地頁轉化率的研究,信任是可以通過圖片建立的。

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

  Chopra還提及了另外一個有線上案例集網站的使用者。通過將他網站中的聯絡表徵圖替換成他本人映像,轉化率從3.7提升到5.5,產生了45%的提 升。他總結道,訪客可以在第一時間察覺到哪些圖片是普通圖片,而降低對網站的可信度,可見互連網中真實的人像給人們建立了一個情感的樞紐。

最佳化

  在結束這篇文章之前,我還想簡單提及一下網站圖片中一些技術問題。首先我想強調的是,最佳化,真的非常重要。

  根據今年2月的資料顯示,圖片比例佔了一個網頁中的61.9%,平均一個頁面的尺寸是1.29兆。圖片大就需要花費很長的時間去下載,對頁面的載入造成了影響。根據JAKOB NIELSEN的研究,一秒的回應時間是使用者認為希望接受的時間極限。


2013年2月15資料:網頁平均大小

  在我們上傳圖片到1stwebdesigner前,我們總會通過PHOTOSHOP儲存成網頁格式,這樣可以減少圖片的檔案大小也能保持圖片的一定品質。同樣的功能,你也可是使用SMUSH.IT。它是一個 免費的線上工具,他也提供了一個WORDPESS外掛程式。在你上傳圖片之前執行前面任一操作,你網站的總尺寸就會減少,這意味著網頁能更快地被載入,從而減少使用者載入網頁帶來的鬱悶感。

寬高

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

  通過指定圖片標籤中的寬高,你就能確保這張縮圖在圖片載入完成之前就能伸展到他的完全尺寸,和出現在他該有的位置。這是一個很小的細節,但是確實一個很好的體驗。

  然而,有人認為這是舊的技術並在在如今行動瀏覽器高速發展時代,這並不高效。我贊成這一點,因此你可以只在響應式頁面中不指定寬高,但是不要忘記在不同的解析度下改變圖片的尺寸,你也不想一張700像素寬的圖片出現在640像素寬的裝置上。

結語:

  如果你想有一個成功的網站,尤其是你的網站能給你帶來利益轉化的,正確使用圖片是非常重要的。在上面的例子中你已經看到,差的圖片會被使用者無視,但是如果你能找到合適的圖片並把他們放在了合適的位置,那麼他們就能給你帶來驚人的效果。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。