在網頁中，我們經常會看在網站最醒目的位置看到各種輪播圖的效果，這些圖往往是網站的靈魂，是客戶進入網站后第一眼看到的內容，因此輪播圖的設計由為重要。

這篇文章的重點旨在講如何通過設計和交互細節，使首頁輪播圖更易用，而不是關注于輪播圖本身應該放那些內容。此時，我們輪播圖的內容應該注意以下幾點：

1、如果輪播圖的內容與網站本身不相關，且沒有經過精心設計和使用高質量的圖片，那么用戶體驗會很糟糕 —— 輪播內容應與網站主題相關

2、如果輪播圖的內容看起來太像廣告，那么用戶會直接忽視它，即使輪播圖的內容與用戶所需相關 —— 輪播圖內容不能過于商業化

3輪播圖的一個主要優勢就是可以放專門設計過的圖片，那些經過設計的圖片會降低首頁的退出率并且會對網站和品牌產生積極效果，因為那些經過設計的高清大圖能在首頁給用戶留下一個好印象，在用戶快速決定停留或者離開之前增加用戶在首頁的駐足時間 —— 輪播圖片要精心設計.

除以上3點外，輪播圖還應注意以下9個原則：

1： 輪播圖的展示順序特別是第一幀非常重要；

2：把輪播圖當成展示網站重要信息和特點的一種補充手段而非唯一方式。

3、自動輪播不要太快，如果輪播得太快那么用戶就沒有足夠的時間看完感興趣的輪播圖內容；如果輪播太快那么用戶就會因為不感興趣的輪播內容而被騷擾。

4、用戶有任何主動交互行為時應該停止自動輪播：當用戶鼠標懸停在某一幀輪播圖時說明他們對它的內容感興趣；當用戶懸停時輪播圖暫停的第二個理由是防止用戶在點擊想看的那一幀輪播圖時自動輪播到下一幀 ；如果用戶意識到他們點擊后跳轉到一個無關的頁面那么用戶會感覺很氣惱和失落，并且會不得不重新回到主頁，然后再次點擊原來想要的那一部幀輪播圖。

5、播圖控件提示當前圖片所在幀數位置，提示用戶有更多幀數的圖片，讓用戶有更多探索的可能；提示用戶輪播圖到底有多少幀圖片；當輪播圖自動播放到最后一幀時提示用戶將循環到第一幀。

6、輪播圖控件允許用戶進行前后幀內容的切換。

7、 移動端沒有 hover 狀態因此盡量避免自動輪播\

8、移動端支持滑動操作，用戶在觸屏設備上的操作預期就是滑動來進行導航切換傳統的輪播圖操作控件同樣重要（如進行前后切換的箭頭和讓用戶感知位置的小點），移動端屏幕的圖片需要特別優化。

9、許多在 PC 端上使用的輪播圖設計稿是直接縮放后在移動端上重復使用，這造成在移動端屏幕上許多文案的閱讀性較差；
移動端用戶對加載較慢的輪播圖更沒有耐心，用戶在 PC 端可以邊花費 1 到 5 秒鐘來等待輪播圖刷新邊瀏覽網頁的導航欄和其他信息，而在移動端有限的屏幕大小下用戶只能看到輪播圖.

最后，我們來總結一下。