你的輪播圖還在用小圓點?

輪播圖大家都不陌生,每位設計師都應該做過不少輪播圖的設計,細想一下你做的輪播圖的切換元素是什麼,小圓點、小方塊、123……還是什麼?

輪播圖的存在是為了滿足網站的運營/功能需求,在相對的區域內展示更多的內容,避免把較多的內容同時推給用戶,造成閱讀的困難。

1、自動播放:3~5秒自動切換一張圖,滿足用戶閱讀;

2、用戶手動切換:通過圓點切換,或者通過左右箭頭切換;

我們以電商網站為例,看看大家的輪播圖切換體驗如何。

天貓

切換圖形:尺寸20*20px,點擊難易度中等;

左右切換箭頭:無

內容預覽:不可預覽

京東

切換圖形:尺寸18*18px,顯示有1、2、3、4……數字,點擊難易度中等;

左右切換箭頭:有,但輪播圖設計未考慮箭頭疊加,造成識別箭頭功能困難;

內容預覽:不可預覽

亞馬遜中國

切換圖形:尺寸125*50px+,點擊非常容易;

左右切換箭頭:有,箭頭相對比較明顯,點擊容易;

內容預覽:可以明確預覽非當前輪播圖的內容,優惠力度更能吸引用戶點擊;

蘇寧

切換圖形:尺寸70*40px,點擊非常容易;

左右切換箭頭:有,箭頭相對比較明顯,點擊容易;

內容預覽:可以預覽非當前輪播圖的營銷類別及內容;

可擴展性:強,能夠容納30+的輪播圖;

韓國SSG

PS:蘇寧你是抄襲我的么?老實交代!


推薦閱讀:

首發 | 這 5 個關於用戶體驗設計的觀念,都不是正確的 #037
讀書篇(3)「術」:用戶體驗要素

TAG:用戶體驗設計 |