武林網(www.49028c.com)文章簡介：利用前端技術驅動用戶體驗的文章較少，希望通過這篇文章給大家帶來新的視角與思考，最終目的是希望用戶能有更好的體驗。

Hua：最近對網站輪播圖做了一些優化，雖然它看似簡單，但從用戶角度去思考，卻能得到有趣的體驗。
輪播圖對于很多網站必不可少，它在有限空間展示更多內容，并且可以利用炫目的切換效果吸引用戶，以下是一些知名網站截圖：

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

1、圖片按照一定時間間隔循環播放；
2、數字導航隨圖片一起循環；
3、數字導航控制圖片展示；

體驗后是不是覺得不爽，比如鼠標移進圖片剛想看清楚細節時卻跳到下張，是的，這非常傷害用戶感情。如何解決，原理很簡單，鼠標移進圖片暫停輪播，鼠標移出恢復輪播。
雖然很多網站早已實現該功能，但是無一例外存在一個問題——鼠標移出圖片時，仍然需要等待幾秒鐘才會跳到下一張，這種體驗合理嗎？從用戶角度，當用戶看完后，鼠標移出圖片，合理的邏輯應該是立即跳到下張；從產品或者運營角度，他們也希望用戶能夠看到更多的廣告圖。

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

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

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

4、鼠標移上圖片暫停，移出圖片后立即跳到下張圖片并繼續輪播；
5、鼠標經過延遲響應；

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

雖然代碼不多，但還是有一些基本技巧，比如紅框處布爾值控制是延時功能關鍵。
寫到這里，用戶體驗貌似還算可以，那還有沒有優化空間呢？！
中國的網速在世界上排名較后，甚至很多地方網速還在1M左右，提高低網速用戶體驗同樣重要。按需加載輪播圖便是方法之一，當跳到對應圖片，才下載所需圖片，這是加快圖片顯示和節省流量的不二法則。但是任何事物都有兩面性，有利便有弊，看圖：

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

預加載可以使圖片一次性完整展示，而不會暴露加載過程，從而給用戶合理預期。
最后實現的兩個增強體驗如下：

6、圖片按需加載；
7、圖片預加載并且在加載過程給出等待圖標提示。
同學可以點擊這里體驗增強版輪播圖效果。

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