用戶(hù)體驗之優(yōu)化網(wǎng)站輪播圖的技巧發(fā)布者：本站     時(shí)間：2020-05-17 13:05:23

利用前端技術(shù)javascript制作輪播圖并不難，首先要實(shí)現3個(gè)基本功能：

1、圖片按照一定時(shí)間間隔循環(huán)播放;

2、數字導航隨圖片一起循環(huán);

3、數字導航控制圖片展示;

大家可以點(diǎn)擊這里體驗實(shí)現基本功能的輪播圖。

體驗后是不是覺(jué)得不爽，比如鼠標移進(jìn)圖片剛想看清楚細節時(shí)卻跳到下張，是的，這非常傷害用戶(hù)感情。如何解決，原理很簡(jiǎn)單，鼠標移進(jìn)圖片暫停輪播，鼠標移出恢復輪播。

雖然很多網(wǎng)站早已實(shí)現該功能，但是無(wú)一例外存在一個(gè)問(wèn)題——鼠標移出圖片時(shí)，仍然需要等待幾秒鐘才會(huì )跳到下一張，這種體驗合理嗎?從用戶(hù)角度，當用戶(hù)看完后，鼠標移出圖片，合理的邏輯應該是立即跳到下張;從產(chǎn)品或者運營(yíng)角度，他們也希望用戶(hù)能夠看到更多的廣告圖。

有些網(wǎng)站的輪播圖尺寸往往比較大，特別是電商網(wǎng)站，為了吸引用戶(hù)眼球，制造歡樂(lè )氣氛，這些都是合理的。但是輪播圖變大，其占據首屏的空間就會(huì )變大，當用戶(hù)在頁(yè)面進(jìn)行操作時(shí)，可能會(huì )不小心滑過(guò)圖片，然后又滑出圖片，這個(gè)過(guò)程極為短暫，如果這時(shí)立即響應對應方法導致頁(yè)面發(fā)生或者不發(fā)生變化，會(huì )給用戶(hù)帶來(lái)困惑甚至不便。比如用戶(hù)在一段時(shí)間內誤滑進(jìn)滑出輪播圖多次，導致輪播圖響應暫停，一直停留在固定圖片上，這會(huì )讓用戶(hù)感覺(jué)輪播失效。

所以需要對這種情況給出容錯機制，也就是延遲響應，如果發(fā)現用戶(hù)只是瞬間移過(guò)，則不響應，就像鼠標從來(lái)沒(méi)有經(jīng)過(guò)圖片;當鼠標在圖片停留到一定時(shí)間，則認為用戶(hù)的確是要看圖片，對應方法才會(huì )響應，這個(gè)延遲時(shí)間一般認為不要低于200ms。

綜上所訴，要實(shí)現的增強體驗功能有兩點(diǎn)：

4、鼠標移上圖片暫停，移出圖片后立即跳到下張圖片并繼續輪播;

5、鼠標經(jīng)過(guò)延遲響應;