武林網(www.vevb.com)文章簡介：利用前端技術驅動用戶體驗的文章較少，希望通過這篇文章給大家帶來新的視角與思考，最終目的是希望用戶能有更好的體驗。
Hua：最近對網站輪播圖做了一些優化，雖然它看似簡單，但從用戶角度去思考，卻能得到有趣的體驗。
輪播圖對於很多網站必不可少，它在有限空間展示更多內容，並且可以利用炫目的切換效果吸引用戶，以下是一些知名網站截圖：
利用前端技術javascript製作輪播圖並不難，首先要實現3個基本功能：
1、圖片按照一定時間間隔循環播放；
2、數字導航隨圖片一起循環；
3、數字導航控製圖片展示；
體驗後是不是覺得不爽，比如鼠標移進圖片剛想看清楚細節時卻跳到下張，是的，這非常傷害用戶感情。如何解決，原理很簡單，鼠標移進圖片暫停輪播，鼠標移出恢復輪播。
雖然很多網站早已實現該功能，但是無一例外存在一個問題-鼠標移出圖片時，仍然需要等待幾秒鐘才會跳到下一張，這種體驗合理嗎？從用戶角度，當用戶看完後，鼠標移出圖片，合理的邏輯應該是立即跳到下張；從產品或者運營角度，他們也希望用戶能夠看到更多的廣告圖。
有些網站的輪播圖尺寸往往比較大，特別是電商網站，為了吸引用戶眼球，製造歡樂氣氛，這些都是合理的。但是輪播圖變大，其占據首屏的空間就會變大，當用戶在頁面進行操作時，可能會不小心滑過圖片，然後又滑出圖片，這個過程極為短暫，如果這時立即響應對應方法導致頁面發生或者不發生變化，會給用戶帶來困惑甚至不便。比如用戶在一段時間內誤滑進滑出輪播圖多次，導致輪播圖響應暫停，一直停留在固定圖片上，這會讓用戶感覺輪播失效。
所以需要對這種情況給出容錯機制，也就是延遲響應，如果發現用戶只是瞬間移過，則不響應，就像鼠標從來沒有經過圖片；當鼠標在圖片停留到一定時間，則認為用戶的確是要看圖片，對應方法才會響應，這個延遲時間一般認為不要低於200ms。
綜上所訴，要實現的增強體驗功能有兩點：
4、鼠標移上圖片暫停，移出圖片後立即跳到下張圖片並繼續輪播；
5、鼠標經過延遲響應；
吐槽了那麼多，來看看代碼，非前端同學可能會以為實現上述兩個功能要許多代碼，實際只有短短幾行：
雖然代碼不多，但還是有一些基本技巧，比如紅框處布爾值控制是延時功能關鍵。
寫到這裡，用戶體驗貌似還算可以，那還有沒有優化空間呢？ ！
中國的網速在世界上排名較後，甚至很多地方網速還在1M左右，提高低網速用戶體驗同樣重要。按需加載輪播圖便是方法之一，當跳到對應圖片，才下載所需圖片，這是加快圖片顯示和節省流量的不二法則。但是任何事物都有兩面性，有利便有弊，看圖：
這應該是經常看到的畫面，圖片加載過程暴露在用戶面前，這在低網速下尤為明顯。彌補這一缺陷的方法也很簡單-圖片預加載並且在加載時給出等待圖標提示，繼續看圖：
預加載可以使圖片一次性完整展示，而不會暴露加載過程，從而給用戶合理預期。
最後實現的兩個增強體驗如下：
6、圖片按需加載；
7、圖片預加載並且在加載過程給出等待圖標提示。
同學可以點擊這裡體驗增強版輪播圖效果。
利用前端技術驅動用戶體驗的文章較少，希望通過這篇文章給大家帶來新的視角與思考，最終目的是希望用戶能有更好的體驗。