用戶體驗之優化網站輪播圖的技巧

 

　　Hua：最近對網站輪播圖做了一些優化，雖然它看似簡單，但從用戶角度去思考，卻能得到有趣的體驗。

　　輪播圖對於很多網站必不可少，它在有限空間展示更多內容，並且可以利用炫目的切換效果吸引用戶，以下是一些知名網站截圖：

　　利用前端技術javascript制作輪播圖並不難，首先要實現3個基本功能：

　　1、圖片按照一定時間間隔循環播放;

　　2、數字導航隨圖片一起循環;

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

　　大家可以點擊這裡體驗實現基本功能的輪播圖。

　　體驗後是不是覺得不爽，比如鼠標移進圖片剛想看清楚細節時卻跳到下張，是的，這非常傷害用戶感情。如何解決，原理很簡單，鼠標移進圖片暫停輪播，鼠標移出恢復輪播。

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

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

　　所以需要對這種情況給出容錯機制，也就是延遲響應，如果發現用戶只是瞬間移過，則不響應，就像鼠標從來沒有經過圖片;當鼠標在圖片停留到一定時間，則認為用戶的確是要看圖片，對應方法才會響應，這個延遲時間一般認為不要低於200ms。

　　綜上所訴，要實現的增強體驗功能有兩點：

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

　　5、鼠標經過延遲響應;

　　吐槽了那麼多，來看看代碼，非前端同學可能會以為實現上述兩個功能要許多代碼，實際只有短短幾行：

　　雖然代碼不多，但還是有一些基本技巧，比如紅框處布爾值控制是延時功能關鍵。

　　寫到這裡，用戶體驗貌似還算可以，那還有沒有優化空間呢?!

　　中國的網速在世界上排名較後，甚至很多地方網速還在1M左右，提高低網速用戶體驗同樣重要。按需加載輪播圖便是方法之一，當跳到對應圖片，才下載所需圖片，這是加快圖片顯示和節省流量的不二法則。但是任何事物都有兩面性，有利便有弊，看圖：

　　這應該是經常看到的畫面，圖片加載過程暴露在用戶面前，這在低網速下尤為明顯。彌補這一缺陷的方法也很簡單——圖片預加載並且在加載時給出等待圖標提示，繼續看圖：

　　預加載可以使圖片一次性完整展示，而不會暴露加載過程，從而給用戶合理預期。

　　最後實現的兩個增強體驗如下：

　　6、圖片按需加載;

　　7、圖片預加載並且在加載過程給出等待圖標提示。

　　同學可以點擊這裡體驗增強版輪播圖效果。

　　利用前端技術驅動用戶體驗的文章較少，希望通過這篇文章給大家帶來新的視角與思考，最終目的是希望用戶能有更好的體驗。