俗語說，一圖勝千行。不管那是實是假，圖片皆是網頁中主要的構成部門。自從嵌進圖片步調變得簡略，我們能夠看到許多網站皆內嵌瞭很多圖片，個中一些網站從分歧角度展現瞭準確應用圖片的利益，但是，年夜部門網站則沒有是如斯。隻管那對付一款計劃來講，其實不是多年夜的影響，然則那些圖片大概會削減您發賣產物的機遇，除非您有一個很好的引誘用戶的頁裡大概發明瞭很好的瀏覽流前提。圖片是細節勝於本則的題目，處置圖片應當是計劃師們加倍須要懂得戰控制的才能。
網頁可用性專傢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像素寬的裝備上。
結語：
假如您念有一個勝利的網站，特別是您的網站能給您帶去好處轉化的，準確應用圖片長短常主要的。正在上裡的例子中您已看到，好的圖片會被用戶疏忽，然則假如您能找到適合的圖片並把他們放正在瞭適合的地位，那末他們就可以給您帶去驚人的後果。
本文起源：1stwebdesigner
本文題目：How to Use Images Successfully – Web Design Usability Guide
本文地點：/design/images-on-web-design-usability-guide/
本譯文僅用於進修戰交換目標。非貿易轉載請說明譯者、出處，並保存文章正在譯行的完全鏈接。如翻譯欠妥，迎接提出您的看法。