眾所周知，設計精美的輪播圖，不僅可以降低網站跳出率，還可以給用戶留下一個好印象，對網站和品牌都產生積極效果。然而，縱觀目前大部分電商網站針對輪播圖設計，普遍存在以下問題：

❶ 輪播圖內容與網站主題無關，並且沒有經過精心設計和使用高質量圖片，大大降低網站用戶體驗。

❷ 輪播圖內容看起來太像廣告，讓用戶很容易會忽視它的存在。

Inspirroutlet表示，輪播圖是否設計合理將會影響用戶在網站停留時間長短。那麼，在實際操作中，我們該如何做好輪播圖的設計呢?

網頁設計原則：如何設計精美輪播圖，輕鬆降低網站跳出率

原則一：把輪播圖當成展示網站重要信息的補充手段，而非唯一手段

大部分用戶都不會看完所有輪播圖的內容，要麼他們在自動輪播圖完成一個輪迴前，早就跳到其他頁面或向下滑動;要麼在手動輪播圖中往往只停留在第一幀。換句話說，除非用戶主動去觀看，不然他們不會注意到輪播圖上那些有用的信息。

因此，我們不僅要完善輪播圖的細節設計，更將輪播圖當成網站重要信息的補充手段，而不是成為用戶獲取網站信息的唯一方式。

原則二：掌握自動輪播邏輯

像動態圖片一樣，自動輪播圖很容易把用戶的注意力從頁面的其他靜態圖片上吸引過來，因此自動輪播圖的點擊率(8%-10%)也會比手動輪播圖的點擊率高(1%-2%)。

因此為了確保自動輪播圖的每一幀都有一定曝光量，輪播圖的內容和設計質量都需要維持很高的要求，才能保證用戶產生有效閱讀：

① 自動輪播速度不要太快

自動輪播速度太快，用戶不僅沒有足夠時間去發掘他們感興趣的輪播圖內容，還有可能因為看到太多不感興趣的輪播內容而感到被騷擾。

一般來說，輪播圖的展示時間應根據輪播圖的文案內容來決定。而按照尼爾森諾曼集團的推薦，自動輪播圖的單幀市場按照1秒展示3個文案來播放，這意味着每個輪播圖的展示時長應該是獨立的。

② 用戶有任何主動交互行為時應該暫停自動輪播

一般來說，當用戶主動與輪播圖進行交互時，如光標懸停在某一幀輪播圖或主動點擊輪播圖按鈕等，均說明他們對輪播圖的某幀內容感興趣。

因此，在設計自動輪播圖時，應該保證用戶與輪播圖有任何交互行為時自動輪播是暫停跳轉的，以便用戶想觀看某一幀輪播圖內容時因為自動跳轉到其他無關頁面而感到氣憤和失落。

原則三：移動端沒有Hover狀態應盡量避免自動輪播

Hover狀態時用戶對某一幀內容感興趣並有可能在閱讀完文案後產生點擊的一種信號。

如果系統沒有Hover狀態來激活自動輪播暫停，那麼自動輪播在移動端UI設計上的應用就不那麼合適了，這是因為自動輪播會使圖片在用戶點擊輪播圖前就突然切換，從而導致用戶跳轉到錯誤頁面，影響網站的用戶體驗。

原則四：移動端輪播圖需要特別優化

很多設計師都會將在PC端上使用的輪播圖設計直接搬到移動端上重複使用，結果導致輪播圖文案在移動端屏幕上的易讀性大大降低。

此外，大部分移動端用戶對加載較慢的輪播圖都是沒有太多的耐心的，因為用戶在PC端網站中可以邊等待輪播圖邊閱讀網站其他信息，但是移動端設備的熒幕大小有限，用戶只能看到輪播圖。因此在設計移動端輪播圖時，不僅要保證圖片的清晰度和貼合度，更要設置合適的圖片跳轉時間。

【總結】

針對移動端輪播圖設計，使用靜態內容來替代輪播圖其實是一種不錯的方式，一來它的高度符合移動端用戶與首頁的交互方式，70%移動端用戶都會下意識拖動並瀏覽首頁內容，以便獲知他們來到了什麼類型的網站;二來相比起要遵守輪播圖的各項UI設計原則，使用靜態內容使用起來會更加便捷。

不過，無論是PC端網站設計還是移動端網站設計，具體選用哪種展示方式，還是需要從網站主題、類型及目的等各方面去考慮。