• 
• 
• 
• 
• 
• 
• 

知識普及 ? 網(wǎng)頁設(shè)計中的圖片運用與重要性

網(wǎng)頁設(shè)計中的圖片運用與重要性

奈薇網(wǎng)站建設(shè) 于2019-06-30 13:00發(fā)表 閱讀次數(shù) 2571次

青島網(wǎng)站建設(shè)中的網(wǎng)頁圖片運行并非那么隨意，準(zhǔn)確而合理的運用好圖片，能夠快速的傳遞信息給瀏覽者，引導(dǎo)瀏覽者的視覺路線，為延長訪客停留時間以及促進(jìn)銷售至關(guān)重要。所以說，青島網(wǎng)站設(shè)計中的圖片并非隨意使用的，那些和內(nèi)容無關(guān)，注重修飾的網(wǎng)頁圖片有可能還起到反作用，影響瀏覽者視覺引導(dǎo)，以及閱讀效率。 　　盡管這對于一款設(shè)計來說，并不是多大的影響，但是這些圖片可能會減少你銷售產(chǎn)品的機會，除非你有一個很好的誘導(dǎo)用戶的頁面或者創(chuàng)造了很好的閱讀流條件。圖片是細(xì)節(jié)勝于原則的問題，處理圖片應(yīng)該是設(shè)計師們更加需要理解和掌握的能力。 　　俗話說，一圖勝千言。無論這是真是假，圖片都是網(wǎng)頁中重要的組成部分。自從嵌入圖片步驟變得簡單，我們可以看到很多網(wǎng)站都內(nèi)嵌了許多圖片，其中一些網(wǎng)站從不同角度展示了正確利用圖片的好處，然而，大部分網(wǎng)站則不是如此。 　　網(wǎng)頁設(shè)計可用性指導(dǎo)-處理圖像 　　實際上，用戶更想看到與他們想找的信息相關(guān)的圖片，因此他們更青睞一個沒有圖片的頁面而不喜歡那種充斥著無關(guān)圖片，顯得臃腫的頁面。根據(jù)研究，在網(wǎng)頁中使用圖片的關(guān)鍵，是基于以下幾則基本的思路： 　　圖片基本因素：尺寸，組成元素，質(zhì)量，曝光率是衡量一張好圖片的四大因素。用戶關(guān)注圖片的質(zhì)量，甚至連對比度都能產(chǎn)生很大的影響。 　　效率：如果一張圖片令人興奮或者讓人產(chǎn)生興趣，那么它就成功了。一張高效的圖片包含幾個特點： 　　情感：圖片中，你的產(chǎn)品能讓激發(fā)用戶使用的欲望？ 　　合理：圖片展示了產(chǎn)品的優(yōu)點？ 　　品牌：圖片符合你的品牌風(fēng)格？ 　　傳遞信息：圖片能傳遞正確的信息給網(wǎng)站的讀者。 　　刺激用戶的反應(yīng)：實際上這有點難，但是基本的想法就是圖片能幫助用戶做決定，以及產(chǎn)生對產(chǎn)品的購買欲望。我們在后文會提及到。 　　單純的裝飾性圖片會潛意識地被我們大腦忽略。就像雷達(dá)一樣，如果圖片就像雷達(dá)上的濾波，那么大腦就會忽略他們。研究表明，使用了真人或者真實產(chǎn)品的圖片會自動被大腦標(biāo)志為重要并能被進(jìn)一步地關(guān)注。如果你有一個個人博客，大家更希望看到的是你真人頭像而不是一張繪畫像。人們想看到正在與他們交流的人的樣貌，因為這對信任的建立尤其重要。 　　如果你擁有一家公司，使用圖片去描述公司員工是一個非常棒的想法。它給外界提供了一個很親切的途徑去了解這家公司的員工及生活。如果你能支付得起，花點錢請一個好的攝影師，這會為你公司的網(wǎng)站增色不少。（切記不要走藝術(shù)照風(fēng)格，尤其是那種和你的想表達(dá)內(nèi)容無關(guān)的藝術(shù)照） 　　此外，一些眼動研究還表明，如果產(chǎn)品圖片中含有更多的細(xì)節(jié)，它能帶來的效果就越好。是的，比如說平板電視的廣告圖，雖然它能起到一定作用，但是這真的夠好嗎？用戶希望看到更多的細(xì)節(jié)，所以，請展示給他們。 　　引導(dǎo)用戶 　　并不是所有設(shè)計師都有心理學(xué)碩士學(xué)位，所以很少人能知道人類的大腦是如何運作的。同樣的眼動研究表明我們的焦點也能很容易地被圖片影響和改變。當(dāng)然，我們指的是高質(zhì)量，以及相關(guān)的圖片。在一個名為“YOULOOKWHERETHEYLOOK”的研究中，JamesBreeze展示了圖片如何能成為閱讀流的一部分。 　　他們以嬰兒尿布零售商網(wǎng)站作為例子在106位研究對象上做了一項眼動研究。接下來你可以看到2張圖片。當(dāng)圖中嬰兒的臉是面對訪客時，大部分的人會把焦點放在他的臉上，留下諸如可愛，甜美等印象。 　　嬰兒尿布零售商網(wǎng)站圖票效果研究 　　然而，同樣的一則廣告，相同的文案，同一個嬰兒，但是在不同的方位，結(jié)果卻產(chǎn)生了明顯改善效果。大家不僅更關(guān)注文案，而且我們還能看到，品牌以及一些更小的字（一些退款的協(xié)議。退款協(xié)議在一項買賣中相當(dāng)重要，可能是其中一個賣點）都能被更多地關(guān)注。 　　這張圖展示了圖片能造成多大的效果影響 　　JCDecaux和THiNK研究數(shù)年，在一項研究中得出結(jié)論,更加證實了上面的結(jié)果：在一則廣告中，用戶的眼球?qū)嶋H上可以被引導(dǎo)到廣告的關(guān)鍵信息處。 　　因為很多廣告都擁有美麗的模特，所以一般模特比廣告產(chǎn)品更能贏得用戶的焦點，用戶并沒有把焦點放在廣告產(chǎn)品上，而都聚焦在模特身上，下面的研究顯示這個問題可以被解決。 　　Sunsilk產(chǎn)品廣告眼動研究 　　這個研究的結(jié)果非常清晰，最初的廣告（左邊），只有很少的焦點集中到產(chǎn)品的品牌和產(chǎn)品上，實際上少得只有6%。然后在廣告被修改和重新測試后（右圖），盡管商品LOGO放在底部，但是還有84%以上的人更關(guān)注產(chǎn)品以及產(chǎn)品的品牌。這是一個14倍提升，在我看在，是非常大的區(qū)別。 　　質(zhì)量和相關(guān)性： 　　下面我會給你展示幾個不同研究的結(jié)果。你會看到一些網(wǎng)站標(biāo)志了熱區(qū)，紅色的區(qū)域表示受到用戶關(guān)注的，而藍(lán)色的區(qū)域表示被用戶忽略的。 　　在ADELPHIAS網(wǎng)站做的眼動儀研究 　　除了看到這是一個難以置信的過時設(shè)計以外，你可以清晰看到所有圖片都沒有熱區(qū)分布。這是因為這些圖片純粹是作為填充作用。假如這些圖片是和頁面信息相關(guān)的，那么熱區(qū)可能會有一定的變化。這個例子足以展示了他們是多么地浪費圖片空間。 　　另外一個例子來自紐約雜志網(wǎng)站的餐廳頁面的眼動研究。我們可以看到，盡管圖片人物是世界出名的廚師，圖片的質(zhì)量也很重要。盡管圖片和網(wǎng)頁中的內(nèi)容是一定程度上的相關(guān)，但是低對比度和小尺寸的圖片卻容易被忽視。所以這里需要一個平衡，圖片質(zhì)量和相關(guān)性是兩個重要的指引原則。 　　紐約雜志網(wǎng)站上做的眼動研究 　　上圖摘自JakobNielsen和KaraPernice在幾年前寫過一篇名為《ImagesasObstacles》的文章，感謝你們偉大的工作。 　　圖片需要帶有目的 　　圖片不僅僅可以引導(dǎo)用戶的關(guān)注點，還能超越文字在僅僅幾秒內(nèi)描述產(chǎn)品的很多信息。一個極其著名的例子就是Square，一個支持手機或平板刷卡的智能手機小外設(shè)。 　　通過上圖，用戶能在幾秒內(nèi)了解到這款產(chǎn)品的許多特性。他們已經(jīng)知道設(shè)備之間的連接方法、產(chǎn)品的大小、產(chǎn)品和哪些設(shè)備兼容、刷卡后會有怎樣的交互界面等。原本長而無聊的產(chǎn)品介紹讓一張圖片解釋清楚了。這是一個經(jīng)典的，好極的例子。 　　還有，蘋果公司關(guān)于MACBOOKAIR的廣告是另外一個很好的例子。眾所周知MACAIR很小，很輕而且做工精美。但是假如你不知道這些特性，你也可以瞬間在下圖中獲悉這些信息。 　　MacbookAir簡短高效的廣告圖 　　信任是關(guān)鍵 　　如果你開了一家網(wǎng)上商城，時刻記住，信任是非常重要的。沒有人會在他們不信任的商家那里購物，這也是所以amazon和ebay這么受歡迎的原因，因為他們是全球知名的品牌并且提供了不同的退款保證，此外，他們還擁有與眾不同的安全特性。買家信任他們，因為他們很清楚如果賣家不遵守規(guī)矩，就會受到懲罰。如果你有一家網(wǎng)上商城，確保能贏得買家的信任。 　　這和圖片有什么關(guān)系？根據(jù)ParasChopra關(guān)于落地頁轉(zhuǎn)化率的研究，信任是可以通過圖片建立的。 　　一個網(wǎng)上商城銷售巴西和加勒比繪畫作品，是一件難以置信的事情。在這個網(wǎng)站中，一個細(xì)小的變化讓轉(zhuǎn)化率從原來的8.8%提高到17.2%，95%的提升。這是如何在做到的？原來商家并沒有使用畫作的縮略圖而使用了作品對應(yīng)的畫家作為商品圖片。他們相信商店的原因是因為他們認(rèn)為這些畫家的作品質(zhì)量無需質(zhì)疑。通過簡單的展示畫家的頭像，顧客們認(rèn)識到他們正在從像他們自己一樣的真人手上購買（畫作） 　　Chopra還提及了另外一個有在線案例集網(wǎng)站的用戶。通過將他網(wǎng)站中的聯(lián)系圖標(biāo)替換成他本人圖像，轉(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ù)JAKOBNIELSEN的研究，一秒的響應(yīng)時間是用戶認(rèn)為希望接受的時間極限。 　　2013年2月15數(shù)據(jù):網(wǎng)頁平均大小 　　在我們上傳圖片到1stwebdesigner前，我們總會通過PHOTOSHOP保存成網(wǎng)頁格式，這樣可以減少圖片的文件大小也能保持圖片的一定質(zhì)量。同樣的功能，你也可是使用SMUSH.IT。它是一個免費的在線工具，他也提供了一個WORDPESS插件。在你上傳圖片之前執(zhí)行前面任一操作，你網(wǎng)站的總尺寸就會減少，這意味著網(wǎng)頁能更快地被加載，從而減少用戶加載網(wǎng)頁帶來的郁悶感。 　　寬高 　　我想說的最后一個技術(shù)方面就是在圖片標(biāo)簽中指定寬高，原因很簡單。一個頁面永遠(yuǎn)先加載文字，然后加載圖片。因此，沒有指定寬高的圖片在被完全加載之前，會被一張小縮略圖標(biāo)志。當(dāng)圖片加載時，這張縮略圖就會伸展到他原有的尺寸從而打斷用戶可能正在閱讀的文字。同時，圖片在伸展過程中也會導(dǎo)致用戶可能正在聚焦的位置移位，這會讓非常多的訪客感覺無耐。 　　通過指定圖片標(biāo)簽中的寬高，你就能確保這張縮略圖在圖片加載完成之前就能伸展到他的完全尺寸，和出現(xiàn)在他該有的位置。這是一個很小的細(xì)節(jié)，但是確實一個很好的體驗。 　　然而，有人認(rèn)為這是舊的技術(shù)并在在如今移動瀏覽器高速發(fā)展時代，這并不高效。我贊成這一點，因此你可以只在響應(yīng)式頁面中不指定寬高，但是不要忘記在不同的分辨率下改變圖片的尺寸，你也不想一張700像素寬的圖片出現(xiàn)在640像素寬的設(shè)備上。 　　總結(jié)： 　　與內(nèi)容無關(guān)的青島網(wǎng)站建設(shè)修飾圖片會被瀏覽者忽視，而將相關(guān)性和高質(zhì)量的圖片放到正確的位置，能夠給你帶來驚喜的效果，最終將這樣的效果會轉(zhuǎn)化為效益。

網(wǎng)頁設(shè)計中的圖片運用與重要性相關(guān)標(biāo)簽：企業(yè)網(wǎng)站建設(shè)，網(wǎng)站搭建，網(wǎng)頁設(shè)計，網(wǎng)站規(guī)劃

相關(guān)熱點推薦

Tab(選項卡)的產(chǎn)品 從精簡導(dǎo)航談小型網(wǎng)站的 如今虛擬外鏈對我們的作 網(wǎng)頁設(shè)計中的版式原理- 使用框架和滑動門技術(shù)進(jìn) 清新的網(wǎng)站設(shè)計風(fēng)格 網(wǎng)頁設(shè)計之視覺信息傳達(dá) 用戶體驗與網(wǎng)頁界面設(shè)計 沒有交互意識的設(shè)計師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機交互界面設(shè)計的三個 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗中溝通的技巧 迭代的設(shè)計 網(wǎng)站中視覺元素的設(shè)計 網(wǎng)站設(shè)計的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對 手機建站時容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁不到首頁 青島網(wǎng)站設(shè)計中關(guān)于al 好設(shè)計應(yīng)該是平凡的設(shè)計 網(wǎng)站LOGO簡論 網(wǎng)頁布局設(shè)計基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點 新站快速推廣經(jīng)驗，百度 為中文而設(shè)計的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁改版 web設(shè)計師可以走得更 專業(yè)設(shè)計網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計的幾點知識 青島網(wǎng)站制作哪家強

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶