99国产精品99久久久久久,国产肥白大熟妇BBBB视频,国产一区二区三区四区精华液毛,国产乡下妇女做爰

400-611-9921

當(dāng)前位置:首頁(yè) > 新聞資訊 > 建站知識(shí)
如何設(shè)計(jì)用戶友好度高的輪播圖

2016-09-09

2599

輪播圖,圖片旋轉(zhuǎn)器,滑片,無(wú)論你怎么叫這玩意,它在網(wǎng)絡(luò)上無(wú)處不在。輪播圖在電商網(wǎng)站主頁(yè)上廣泛應(yīng)用,大多數(shù)電商網(wǎng)站的主頁(yè)上都有它:

但輪播圖對(duì)用戶真的有意義嗎?或者它只是設(shè)計(jì)者用來(lái)偷懶,將內(nèi)容一股腦塞進(jìn)去的工具呢?

不論將這個(gè)問(wèn)題拋向誰(shuí),他們都會(huì)告訴你,“輪播圖就是個(gè)反面模式?!陛啿D的壞名聲來(lái)自多方面。Erik Runyon 主持的一項(xiàng)研究表明,只有1%的瀏覽者點(diǎn)擊了輪播圖——而且其中84%用戶都只會(huì)點(diǎn)擊第一張圖。在 Jared Smith 的網(wǎng)站“我應(yīng)該使用輪播圖嗎?(Should I use a carousel?)”中,Jared Smith說(shuō),如果可以的話,你不該使用輪播圖。也許,Jared網(wǎng)站上最佳評(píng)論來(lái)自Lee Duddell,他總結(jié)了輪播圖最普遍的問(wèn)題:

輪播圖是市場(chǎng)營(yíng)銷(xiāo)經(jīng)理最后的救命稻草,如果主頁(yè)上有什么一定會(huì)被用戶忽略的東西,可以將他們放在輪播圖上,不過(guò)如果要我說(shuō)的話,不使用輪播圖是最好的。

事實(shí)上,若是注意一定的細(xì)節(jié),首頁(yè)上的輪播圖是可以發(fā)揮很好的作用的。本文將分析這些執(zhí)行上的細(xì)節(jié),并概述如何設(shè)計(jì)一個(gè)好的輪播圖。

輪播圖是什么

輪播圖是在首頁(yè)上展示信息的一種方式。為了讓用戶不用滾動(dòng)屏幕就能看到更多內(nèi)容,設(shè)計(jì)師們利用輪播圖來(lái)最大化信息密度。輪播圖有多種形狀和大小,但本文中談及的輪播圖具有以下特性:

-它顯示在首頁(yè)的頂部,并占據(jù)不用滾動(dòng)即可顯示的頁(yè)面上相當(dāng)可觀的面積。

-同一個(gè)地方會(huì)展示多頁(yè)內(nèi)容,雖然一次只展現(xiàn)一個(gè)頁(yè)面;每頁(yè)中包含圖片以及小段文字。

-會(huì)有指示器表明,這個(gè)輪播圖中不止一張圖片。

輪播圖的優(yōu)點(diǎn)

-輪播圖使得主屏上最重要的位置可以展示多頁(yè)內(nèi)容。

-頁(yè)面頂部顯示了更多的信息,用戶有更大的可能性看到它們。

輪播圖的缺點(diǎn)

-用戶經(jīng)常性地忽視輪播圖,連帶著里面所有的內(nèi)容(就算自動(dòng)滾動(dòng)也無(wú)濟(jì)于事噢~)——用戶壓根就不會(huì)長(zhǎng)時(shí)間注意頁(yè)面的頂部。所以,你不能指望他們能看完輪播圖里所有內(nèi)容。

-設(shè)計(jì)師常常認(rèn)為輪播圖是一組圖片,但用戶卻只會(huì)在意他們看到的那一張圖片。輪播圖中的一組圖片,也許能夠精準(zhǔn)地展現(xiàn)你的產(chǎn)品和服務(wù),但如果用戶只看到一組圖片中的一張,他也許就會(huì)誤解你的產(chǎn)品。

設(shè)計(jì)好輪播圖的方法

內(nèi)容為王

“內(nèi)容為王”這句話大家都很熟悉。輪播圖里的內(nèi)容,決定了輪播圖質(zhì)量的上限。無(wú)論交互多么簡(jiǎn)單,不相關(guān)的內(nèi)容都會(huì)帶來(lái)糟糕的用戶體驗(yàn)。這里需要提到幾條重要的準(zhǔn)則:

-當(dāng)內(nèi)容很無(wú)聊或者對(duì)用戶一點(diǎn)幫助都沒(méi)有,就別用輪播圖了(例如,他們不關(guān)心的促銷(xiāo)信息)。這樣的輪播圖只會(huì)使用戶分心,卻不能讓他們點(diǎn)擊購(gòu)買(mǎi)。

-輪播圖中的內(nèi)容千萬(wàn)不要看起來(lái)像廣告。由于廣告條盲點(diǎn)現(xiàn)象,大多數(shù)用戶會(huì)直接忽略像廣告的輪播圖。如果輪播圖選擇了和網(wǎng)頁(yè)其它部分相匹配的字體和圖片,那么它看起來(lái)就像網(wǎng)站的一部分,而不是惹人煩的廣告。

不要這樣做。在輪播圖中使用了廣告外觀的內(nèi)容

-輪播圖要仔細(xì)排序。記住,最初那頁(yè)內(nèi)容比之后的內(nèi)容吸引了多得多的關(guān)注。因此,第一頁(yè)的內(nèi)容不僅要選擇最重要的,而且要能夠推銷(xiāo)后幾頁(yè)的內(nèi)容。之后的頁(yè)面也應(yīng)該按照重要性來(lái)排序。

-輪播圖永遠(yuǎn)不應(yīng)該作為用戶進(jìn)入某項(xiàng)功能和內(nèi)容的唯一途徑。將重要的信息同時(shí)放在輪播圖和頁(yè)面其他位置是個(gè)好主意,這樣用戶就有更大可能性去看到它。

-當(dāng)需要用戶看到所有內(nèi)容時(shí),不要使用輪播圖。就算你的輪播圖做得非常好,也要記住,大部分用戶是不會(huì)看完每一頁(yè)內(nèi)容的。

限制輪播圖的頁(yè)數(shù)

輪播圖中的滑頁(yè)要少于五頁(yè),因?yàn)橛脩舨粫?huì)去讀更多的內(nèi)容。對(duì)于數(shù)量的限制也有助于用戶探索內(nèi)容。

提供進(jìn)度指示器

標(biāo)示輪播圖中的頁(yè)數(shù),并指明用戶目前在哪一頁(yè)。這能讓用戶感覺(jué)一切盡在掌控。

類(lèi)似于點(diǎn)的圖標(biāo)表明了一共有多少滑頁(yè),而用戶目前又在哪一頁(yè)

確保內(nèi)容在手機(jī)上也清晰

隨著移動(dòng)領(lǐng)域的需求開(kāi)始變得不容忽視,為移動(dòng)端優(yōu)化輪播的內(nèi)容成為了最為緊要的任務(wù)。文字和圖片越清晰,用戶就越能理解你的宣傳內(nèi)容。這就是當(dāng)內(nèi)容縮小到只有手機(jī)屏幕那么小之后,也要確保輪播圖中的每個(gè)字都清晰的原因。而且當(dāng)你將網(wǎng)頁(yè)上的內(nèi)容移植到手機(jī)上時(shí),也一定要確保文字的清晰度。

不要這樣做。手機(jī)上都看不清輪播圖上的文字了。

設(shè)計(jì)合適的導(dǎo)航控件

-確保導(dǎo)航控件顯示在輪播圖之內(nèi),而不是在它下面或是折疊起來(lái)。這樣不論是大屏幕還是小屏幕都不會(huì)出問(wèn)題。下面是兩個(gè)網(wǎng)頁(yè)的例子:

不要這樣做。dell主頁(yè)上的輪播圖中根本沒(méi)有向前/向后的輪播圖控件。導(dǎo)航控件僅僅是輪播圖下面幾個(gè)不起眼的小點(diǎn)。

這樣做。apple主頁(yè)上提供了顯著且易于辨認(rèn)的前后翻頁(yè)控件。

-讓鏈接,按鈕與其它元素顯著區(qū)分,并且尺寸易于識(shí)別與點(diǎn)擊。尺寸太小,靠得太緊,或者放在復(fù)雜背景上的按鈕(前頁(yè)/后頁(yè)以及頁(yè)面選擇按鈕)即不容易看見(jiàn),也不容易點(diǎn)擊。

不要這樣做。天梭的網(wǎng)頁(yè)上,向前翻頁(yè)和向后翻頁(yè)的按鈕在淺色背景下是很容易看見(jiàn)和點(diǎn)擊的,但是在暗色背景下幾乎看不到了(譯者眼都要瞎了才看到orz)。
-在手機(jī)設(shè)備上,請(qǐng)支持滑動(dòng)手勢(shì)。這不是說(shuō),像向前/向后翻頁(yè)的輪播控件就不可以使用了,但他們應(yīng)該作為滑動(dòng)翻頁(yè)手勢(shì)的補(bǔ)充。

這樣做。在手機(jī)設(shè)備上支持滑動(dòng)手勢(shì)。

使用自動(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)頁(yè)上永遠(yuǎn)不要使用自動(dòng)滾動(dòng)。因?yàn)樽詣?dòng)滾動(dòng)也許會(huì)讓用戶點(diǎn)擊到錯(cuò)誤的滑頁(yè)上。

-確保滾動(dòng)速度不要太快。輪播圖有時(shí)滾動(dòng)得太快,用戶都看不清上面的信息了,這讓他們十分沮喪。當(dāng)然,太慢的速度也會(huì)讓用戶感到厭倦。你要測(cè)試出一個(gè)合適的時(shí)間間隔,或者至少要估計(jì)一下,一般用戶讀完圖片上的文字需要多久。你甚至可以考慮每頁(yè)圖片都根據(jù)信息量,設(shè)置不同的滾動(dòng)時(shí)間。如果不能確定你使用了合適的滾動(dòng)時(shí)間——那就不要使用自動(dòng)滾動(dòng)了。


-讓用戶來(lái)主導(dǎo)(控制感能產(chǎn)生信任感)。當(dāng)鼠標(biāo)在移動(dòng)到輪播圖上時(shí),請(qǐng)暫停自動(dòng)滾動(dòng)。以免將用戶想要閱讀,或是點(diǎn)擊的那頁(yè)跳轉(zhuǎn)過(guò)去了。當(dāng)用戶有任何主動(dòng)交互行為時(shí)(如,點(diǎn)擊輪播控件),就徹底暫停自動(dòng)滾動(dòng),因?yàn)辄c(diǎn)擊這個(gè)行為有很強(qiáng)的主動(dòng)性,你要將決定權(quán)交給用戶。

-不要停在輪播圖的最后一頁(yè)。要反復(fù)地播放輪播圖中所有的分頁(yè)。

輪播圖的最佳替代者

主頁(yè)輪播圖最常見(jiàn)的毛病是內(nèi)容的缺乏:用戶并不知道下一張分頁(yè)會(huì)顯示啥,也不知道他們?yōu)槭裁葱枰P(guān)心。因此,他們可能不會(huì)看完所有輪播圖。為了解決這個(gè)問(wèn)題,你也許可以考慮使用主頁(yè)橫幅(Hero image)來(lái)替代輪播圖。和輪播圖相比,主頁(yè)橫幅有以下優(yōu)勢(shì):

-用戶能夠?qū)W⒂谝粡垐D片而不是分散注意力到多張圖片上。而且一張靜止的主頁(yè)橫幅,比不停滾動(dòng)的輪播圖安靜優(yōu)雅多了。

-當(dāng)設(shè)計(jì)師知道他們只能選一張圖片時(shí),也許會(huì)比選一組圖片時(shí)更謹(jǐn)慎。

結(jié)論

如果用戶對(duì)你的輪播圖不感興趣,這也許并不是輪播圖的錯(cuò)。就像其他的內(nèi)容,輪播圖也需要有吸引力才能起到效果。如果只是為了在屏幕上增加內(nèi)容的話,那么就不要使用輪播圖。還記得嗎?輪播圖的質(zhì)量由內(nèi)容決定。如果內(nèi)容不夠精彩,就別強(qiáng)扭瓜啦。然而,如果內(nèi)容足夠好,輪播圖將是吸引用戶注意力的一種優(yōu)雅的方式。因此,到底要不要用輪播圖呢?


本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:縱天,高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),廣州響應(yīng)式網(wǎng)站

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問(wèn)通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問(wèn)

信息保護(hù)中,請(qǐng)放心填寫(xiě)
關(guān)閉
免費(fèi)獲取方案
申扎县| 岳阳县| 五原县| 那坡县| 富阳市| 彝良县| 漯河市| 清水县| 乌兰浩特市| 东台市| 齐齐哈尔市| 弥勒县| 江北区| 博兴县| 嘉禾县| 富蕴县| 个旧市| 临桂县| 会同县| 芜湖市| 商南县| 云安县| 桃江县| 新民市| 景宁| 淮阳县| 鄂伦春自治旗| 星座| 本溪| 东方市| 葫芦岛市| 平利县| 武川县| 大石桥市| 启东市| 松阳县| 如皋市| 晋州市| 三都| 谷城县| 漠河县|