如何在網(wǎng)站建設(shè)中提高輪播圖用戶體驗(yàn)

網(wǎng)站建設(shè)圖片旋轉(zhuǎn)器，滑片，無論你怎么叫這玩意，它在網(wǎng)絡(luò)上無處不在。輪播圖在電商網(wǎng)站主頁上廣泛應(yīng)用，大多數(shù)電商網(wǎng)站的主頁上都有它：
wallmart主頁上的輪播圖
但輪播圖對用戶真的有意義嗎？或者它只是設(shè)計(jì)者用來偷懶，將內(nèi)容一股腦塞進(jìn)去的工具呢？
不論將這個(gè)問題拋向誰，他們都會告訴你，“輪播圖就是個(gè)反面模式（anti-pattern）。”輪播圖的壞名聲來自多方面。Erik Runyon 主持的一項(xiàng)研究表明，只有1%的瀏覽者點(diǎn)擊了輪播圖——而且其中84%用戶都只會點(diǎn)擊第一張圖。在 Jared Smith 的網(wǎng)站“我應(yīng)該使用輪播圖嗎？（Should I use a carousel?）”中，Jared Smith說，如果可以的話，你不該使用輪播圖。也許，Jared網(wǎng)站上評論來自Lee Duddell，他總結(jié)了輪播圖最普遍的問題：
輪播圖是市場營銷經(jīng)理最后的救命稻草，如果網(wǎng)站制作設(shè)計(jì)主頁上有什么一定會被用戶忽略的東西，可以將他們放在輪播圖上，不過如果要我說的話，不使用輪播圖是最好的。
事實(shí)上，若是注意一定的細(xì)節(jié)，首頁上的輪播圖是可以發(fā)揮很好的作用的。本文將分析這些執(zhí)行上的細(xì)節(jié)，并概述如何設(shè)計(jì)一個(gè)好的輪播圖。
輪播圖是什么
輪播圖是在網(wǎng)站制作設(shè)計(jì)首頁上展示信息的一種方式。為了讓用戶不用滾動(dòng)屏幕就能看到更多內(nèi)容，設(shè)計(jì)師們利用輪播圖來大化信息密度。輪播圖有多種形狀和大小，但本文中談及的輪播圖具有以下特性：
－它顯示在首頁的頂部，并占據(jù)不用滾動(dòng)即可顯示的頁面上相當(dāng)可觀的面積。
－同一個(gè)地方會展示多頁內(nèi)容，雖然一次只展現(xiàn)一個(gè)頁面；每頁中包含圖片以及小段文字。
－會有指示器表明，這個(gè)輪播圖中不止一張圖片。
輪播圖的優(yōu)點(diǎn)
－輪播圖使得主屏上最重要的位置可以展示多頁內(nèi)容。
－頁面頂部顯示了更多的信息，用戶有更大的可能性看到它們。
輪播圖的缺點(diǎn)
－用戶經(jīng)常性地忽視輪播圖，連帶著里面所有的內(nèi)容（就算自動(dòng)滾動(dòng)也無濟(jì)于事噢～）——用戶壓根就不會長時(shí)間注意頁面的頂部。所以，你不能指望他們能看完輪播圖里所有內(nèi)容。
－設(shè)計(jì)師常常認(rèn)為輪播圖是一組圖片，但用戶卻只會在意他們看到的那一張圖片。輪播圖中的一組圖片，也許能夠精準(zhǔn)地展現(xiàn)你的產(chǎn)品和服務(wù)，但如果用戶只看到一組圖片中的一張，他也許就會誤解你的產(chǎn)品。
設(shè)計(jì)好輪播圖的方法
內(nèi)容為王
“內(nèi)容為王”這句話大家都很熟悉。輪播圖里的內(nèi)容，決定了輪播圖質(zhì)量的上限。無論交互多么簡單，不相關(guān)的內(nèi)容都會帶來糟糕的用戶體驗(yàn)。這里需要提到幾條重要的準(zhǔn)則：
－當(dāng)內(nèi)容很無聊或者對用戶一點(diǎn)幫助都沒有，就別用輪播圖了（例如，他們不關(guān)心的促銷信息）。這樣的輪播圖只會使用戶分心，卻不能讓他們點(diǎn)擊購買;
－輪播圖中的內(nèi)容千萬不要看起來像廣告。由于廣告條盲點(diǎn)現(xiàn)象（Banner Blindness），大多數(shù)用戶會直接忽略像廣告的輪播圖。如果輪播圖選擇了和網(wǎng)站制作設(shè)計(jì)網(wǎng)頁其它部分相匹配的字體和圖片，那么它看起來就像網(wǎng)站的一部分，而不是惹人煩的廣告。
不要這樣做。Drugstore.com在輪播圖中使用了廣告外觀的內(nèi)容
－輪播圖要仔細(xì)排序。記住，最初那頁內(nèi)容比之后的內(nèi)容吸引了多得多的關(guān)注。因此，第一頁的內(nèi)容不僅要選擇最重要的，而且要能夠推銷后幾頁的內(nèi)容。之后的頁面也應(yīng)該按照重要性來排序。
－輪播圖永遠(yuǎn)不應(yīng)該作為用戶進(jìn)入某項(xiàng)功能和內(nèi)容的唯一途徑。將重要的信息同時(shí)放在輪播圖和頁面其他位置是個(gè)好主意，這樣用戶就有更大可能性去看到它。
－當(dāng)需要用戶看到所有內(nèi)容時(shí)，不要使用輪播圖。就算你的輪播圖做得非常好，也要記住，大部分用戶是不會看完每一頁內(nèi)容的。
限制輪播圖的頁數(shù)
輪播圖中的滑頁要少于五頁，因?yàn)橛脩舨粫プx更多的內(nèi)容。對于數(shù)量的限制也有助于用戶探索內(nèi)容。
提供進(jìn)度指示器
標(biāo)示輪播圖中的頁數(shù)，并指明用戶目前在哪一頁。這能讓用戶感覺一切盡在掌控。
類似于點(diǎn)的圖標(biāo)表明了一共有多少滑頁，而用戶目前又在哪一頁
確保內(nèi)容在手機(jī)上也清晰
隨著移動(dòng)領(lǐng)域的需求開始變得不容忽視，為移動(dòng)端優(yōu)化輪播的內(nèi)容成為了最為緊要的任務(wù)。文字和圖片越清晰，用戶就越能理解你的宣傳內(nèi)容。這就是當(dāng)內(nèi)容縮小到只有手機(jī)屏幕那么小之后，也要確保輪播圖中的每個(gè)字都清晰的原因。而且當(dāng)你將網(wǎng)頁上的內(nèi)容移植到手機(jī)上時(shí)，也一定要確保文字的清晰度。
不要這樣做。手機(jī)上都看不清輪播圖上的文字了。
設(shè)計(jì)合適的導(dǎo)航控件
－確保導(dǎo)航控件顯示在輪播圖之內(nèi)，而不是在它下面或是折疊起來。這樣不論是大屏幕還是小屏幕都不會出問題。下面是兩個(gè)網(wǎng)頁的例子：
不要這樣做。dell主頁上的輪播圖中根本沒有向前/向后的輪播圖控件。導(dǎo)航控件僅僅是輪播圖下面幾個(gè)不起眼的小點(diǎn)。
這樣做。apple主頁上提供了顯著且易于辨認(rèn)的前后翻頁控件。
－讓鏈接，按鈕與其它元素顯著區(qū)分，并且尺寸易于識別與點(diǎn)擊。尺寸太小，靠得太緊，或者放在復(fù)雜背景上的按鈕（前頁／后頁以及頁面選擇按鈕）即不容易看見，也不容易點(diǎn)擊。
不要這樣做。天梭的網(wǎng)頁上，向前翻頁和向后翻頁的按鈕在淺色背景下是很容易看見和點(diǎn)擊的，但是在暗色背景下幾乎看不到了（譯者眼都要瞎了才看到orz）。
－在手機(jī)設(shè)備上，請支持滑動(dòng)手勢。這不是說，像向前／向后翻頁的輪播控件就不可以使用了，但他們應(yīng)該作為滑動(dòng)翻頁手勢的補(bǔ)充。
這樣做。在手機(jī)設(shè)備上支持滑動(dòng)手勢。
使用自動(dòng)滾動(dòng)時(shí)的要點(diǎn)
自動(dòng)滾動(dòng)的輪播圖引導(dǎo)用戶看完所有的內(nèi)容。如果想自動(dòng)滾動(dòng)發(fā)揮大效果的話，還需要注意這四個(gè)細(xì)節(jié)：
－手機(jī)網(wǎng)頁上永遠(yuǎn)不要使用自動(dòng)滾動(dòng)。因?yàn)樽詣?dòng)滾動(dòng)也許會讓用戶點(diǎn)擊到錯(cuò)誤的滑頁上。
－確保滾動(dòng)速度不要太快。輪播圖有時(shí)滾動(dòng)得太快，用戶都看不清上面的信息了，這讓他們十分沮喪。當(dāng)然，太慢的速度也會讓用戶感到厭倦。你要測試出一個(gè)合適的時(shí)間間隔，或者至少要估計(jì)一下，一般用戶讀完圖片上的文字需要多久。你甚至可以考慮每頁圖片都根據(jù)信息量，設(shè)置不同的滾動(dòng)時(shí)間。如果不能確定你使用了合適的滾動(dòng)時(shí)間——那就不要使用自動(dòng)滾動(dòng)了。
－讓用戶來主導(dǎo)（控制感能產(chǎn)生信任感）。當(dāng)鼠標(biāo)在移動(dòng)到輪播圖上時(shí)，請暫停自動(dòng)滾動(dòng)。以免將用戶想要閱讀，或是點(diǎn)擊的那頁跳轉(zhuǎn)過去了。當(dāng)用戶有任何主動(dòng)交互行為時(shí)（如，點(diǎn)擊輪播控件），就徹底暫停自動(dòng)滾動(dòng)，因?yàn)辄c(diǎn)擊這個(gè)行為有很強(qiáng)的主動(dòng)性，你要將決定權(quán)交給用戶。
－不要停在輪播圖的最后一頁。要反復(fù)地播放輪播圖中所有的分頁。
輪播圖的替代者
主頁輪播圖最常見的毛病是內(nèi)容的缺乏：用戶并不知道下一張分頁會顯示啥，也不知道他們?yōu)槭裁葱枰P(guān)心。因此，他們可能不會看完所有輪播圖。為了解決這個(gè)問題，你也許可以考慮使用主頁橫幅（Hero image）來替代輪播圖。和輪播圖相比，主頁橫幅有以下優(yōu)勢：
－用戶能夠?qū)Ｗ⒂谝粡垐D片而不是分散注意力到多張圖片上。而且一張靜止的主頁橫幅，比不停滾動(dòng)的輪播圖安靜優(yōu)雅多了。
－當(dāng)設(shè)計(jì)師知道他們只能選一張圖片時(shí)，也許會比選一組圖片時(shí)更謹(jǐn)慎。
在原本放置輪播圖的位置放上首頁橫幅，能夠優(yōu)化你的內(nèi)容。舉個(gè)例子，下面這張截圖來自 Amazon 的首頁，設(shè)計(jì)師選擇了一張首頁橫幅來強(qiáng)調(diào)主打產(chǎn)品——Kindle Paperwhite。這張圖在提供信息的同時(shí)，很好地吸引了注意力。
Amazon 選擇了與網(wǎng)頁全局導(dǎo)航欄像匹配的顏色和字體，所以這個(gè)首頁橫幅與主頁很好的融合，并 不像討人嫌的廣告。
另一個(gè)例子——New Balance 在主頁上推廣了他們最新款跑鞋，并突出地展示了用戶能找到這個(gè)產(chǎn)品的按鈕。
結(jié)論
如果用戶對你的輪播圖不感興趣，這也許并不是輪播圖的錯(cuò)。就像其他的內(nèi)容，輪播圖也需要有吸引力才能起到效果。如果只是為了在屏幕上增加內(nèi)容的話，那么就不要使用輪播圖。還記得嗎？輪播圖的質(zhì)量由內(nèi)容決定。如果內(nèi)容不夠精彩，就別強(qiáng)扭瓜啦。然而，如果內(nèi)容足夠好，輪播圖將是吸引用戶注意力的一種優(yōu)雅的方式。因此，到底要不要用輪播圖呢？

如果能給用戶展示合適的內(nèi)容，就該用。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司，網(wǎng)站建設(shè) 成都，成都 網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè)，營銷型網(wǎng)站建設(shè)，網(wǎng)站建設(shè)設(shè)計(jì)，網(wǎng)站開發(fā)，網(wǎng)站制作設(shè)計(jì)

分享文章：如何在網(wǎng)站建設(shè)中提高輪播圖用戶體驗(yàn)
轉(zhuǎn)載源于：http://www.bm7419.com/news/169544.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)、用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)