在网页中，我们经常会看在网站最醒目的位置看到各种轮播图的效果，这些图往往是网站的灵魂，是客户进入网站后第一眼看到的内容，因此轮播图的设计由为重要。

这篇文章的重点旨在讲如何通过设计和交互细节，使首页轮播图更易用，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：

1、如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 —— 轮播内容应与网站主题相关

2、如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化

3轮播图的一个主要优势就是可以放专门设计过的图片，那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象，在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计.

除以上3点外，轮播图还应注意以下9个原则：

1： 轮播图的展示顺序特别是第一帧非常重要；

2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。

3、自动轮播不要太快，如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。

4、用户有任何主动交互行为时应该停止自动轮播：当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣；当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ；如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。

5、播图控件提示当前图片所在帧数位置，提示用户有更多帧数的图片，让用户有更多探索的可能；提示用户轮播图到底有多少帧图片；当轮播图自动播放到最后一帧时提示用户将循环到第一帧。

6、轮播图控件允许用户进行前后帧内容的切换。

7、 移动端没有 hover 状态因此尽量避免自动轮播\

8、移动端支持滑动操作，用户在触屏设备上的操作预期就是滑动来进行导航切换传统的轮播图操作控件同样重要（如进行前后切换的箭头和让用户感知位置的小点），移动端屏幕的图片需要特别优化。

9、许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差；
移动端用户对加载较慢的轮播图更没有耐心，用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图.

最后，我们来总结一下。