用好这4个设计建议，让你的轮播图点击率更高！ 交互设计

由于不同网站的历史背景、用户习惯、关注点和设计方案有所差异，得到的数据可能千差万别。我们需要知道的是，是否使用轮播图本身并非是影响点击转化率的决定性因素，是否有结合实际场景设计合适的方案，才是关键。在适宜的场景下，体验好的轮播图也可以带来令人惊喜的效果。

如果你确实需要使用轮播图并希望获取更高的点击率，以下是一些设计建议：

1、让轮播图看起来像是站点的一部分

将品牌元素贯穿设计始终，使用一致的字体及排版方式，让轮播图成为站点中统一的门面，而不是容易被直接忽略的花哨无序的贴片广告。提供清晰，区分标题、正文和转化入口的层次，提高可读性，如下图：

（以上图片截自Heroku）

2、慎用自动切换

“固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户，投放100%符合他们预期的内容几乎是不可能的，这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。” —— 电商专家 Depesh Mandalia

Web易用性大师Jakob Nielsen也曾专门针对会自动切换的轮播图做了可用性研究，结论表明自动切换的轮播图会惹恼用户并更容易被他们忽略。

（以上图片截自淘宝网）

这种设计似乎非常普遍：在一个固定的区域中，每5秒自动切换展示一张图片。这看起来似乎很方便，提高了更多内容的曝光率。然而实际并没有多少用户会盯着图片为了未知的内容耐心等待5秒，这样做太低效了，他们的视线早就转移到了其他地方。除此之外，当用户对当前的图片内容感兴趣进入阅读状态时，突然的自动切换会打断用户的阅读进程，让用户丧失可控感，感到沮丧和恼怒。最关键的是，自动切换的图片会比默认静止的图片看起来更像广告而非原生站点的一部分。

还有一些网站用了比较折中的方式，当鼠标 hover 至 banner 上时停止自动切换，或者在 banner 上提供了暂停的按钮，这样做比原始的不分场合的自动切换要高级一些，但却无法解决移动端的一致性适配问题。因为在移动场景下，并不存在 “ hover ” 这一状态，暂停小按钮的可用性也非常差。同时由于移动端的一屏内容有限，用户不会做过多的停留就会往下翻看其他内容，“自动切换”这样的交互方式不仅起不到曝光更多内容的作用，反而影响了体验。好的做法是，让你的页面保持稳定的状态，通过进度指示点或者隐藏部分内容的方式，提示用户可以左右滑动查看更多。

在下面的豆瓣app的这个例子中，推荐的第二个小组还有一部分没有显示出来，让用户明显能够感知到后面还有更多类似的推荐，可以左右滑动进行查看：

（以上图片截自豆瓣app）

Instagram在推荐用户时也用了类似的做法，除此之外，还给出了展示全部的操作入口。不仅对用户的打扰最小，操作效率也更高。

（以上图片截自Instagram app）

所以，让你的图片默认静止在最新或者最重要的内容上，给出可以切换的操作预期，由用户自主触发切换操作时才进行切换，是更好的选择。

3、给予清晰的操作反馈和内容预期

展示信息的信息应该面向大部分的访问用户，属于同一类别或有所关联（如都是某个酒店的图片，都是旅游城市的地标图，都是当季发布的新品图等等），引起访问者的兴趣并诱发进一步切换探索，而不是随机地将一些无明显关联的图片放在同样的位置。

让用户能够快速识别点击区域，减少出错的可能。提供更大的点击区域和hover反馈，让用户能够清晰的感知到哪些区域是可点的。

同时，对于面积较小的点击区域（如定位指示点），给予适当的容错区间。

提示用户所在的位置，提示用户操作后可见的内容。当用户对切换后的内容有所预期时，他能够更容易地找到自己感兴趣的内容，点击率也更高。下图的例子将步骤与定位指示点相结合，图片按顺序展示了当前步骤的指示。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!