轮播图，图片旋转器，滑片，无论你怎么叫这玩意，它在网络上无处不在。轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它：

wallmart主页上的轮播图

但轮播图对用户真的有意义吗？或者它只是设计者用来偷懒，将内容一股脑塞进去的工具呢？

不论将这个问题抛向谁，他们都会告诉你，“轮播图就是个反面模式（anti-pattern）。”轮播图的坏名声来自多方面。Erik Runyon 主持的一项研究表明，只有1%的浏览者点击了轮播图——而且其中84%用户都只会点击第一张图。在 Jared Smith 的网站“我应该使用轮播图吗？（Should I use a carousel?）”中，Jared Smith说，如果可以的话，你不该使用轮播图。也许，Jared网站上最佳评论来自Lee Duddell，他总结了轮播图最普遍的问题：

轮播图是市场营销经理最后的救命稻草，如果网站制作设计主页上有什么一定会被用户忽略的东西，可以将他们放在轮播图上，不过如果要我说的话，不使用轮播图是最好的。
事实上，若是注意一定的细节，首页上的轮播图是可以发挥很好的作用的。本文将分析这些执行上的细节，并概述如何设计一个好的轮播图。


轮播图是什么

轮播图是在网站制作设计首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播图具有以下特性：

－它显示在首页的顶部，并占据不用滚动即可显示的页面上相当可观的面积。
－同一个地方会展示多页内容，虽然一次只展现一个页面；每页中包含图片以及小段文字。
－会有指示器表明，这个轮播图中不止一张图片。


轮播图的优点

－轮播图使得主屏上最重要的位置可以展示多页内容。
－页面顶部显示了更多的信息，用户有更大的可能性看到它们。


轮播图的缺点

－用户经常性地忽视轮播图，连带着里面所有的内容（就算自动滚动也无济于事噢～）——用户压根就不会长时间注意页面的顶部。所以，你不能指望他们能看完轮播图里所有内容。
－设计师常常认为轮播图是一组图片，但用户却只会在意他们看到的那一张图片。轮播图中的一组图片，也许能够精准地展现你的产品和服务，但如果用户只看到一组图片中的一张，他也许就会误解你的产品。


设计好轮播图的方法

内容为王

“内容为王”这句话大家都很熟悉。轮播图里的内容，决定了轮播图质量的上限。无论交互多么简单，不相关的内容都会带来糟糕的用户体验。这里需要提到几条重要的准则：
－当内容很无聊或者对用户一点帮助都没有，就别用轮播图了（例如，他们不关心的促销信息）。这样的轮播图只会使用户分心，却不能让他们点击购买;
－轮播图中的内容千万不要看起来像广告。由于广告条盲点现象（Banner Blindness），大多数用户会直接忽略像广告的轮播图。如果轮播图选择了和网站制作设计网页其它部分相匹配的字体和图片，那么它看起来就像网站的一部分，而不是惹人烦的广告。


不要这样做。Drugstore.com在轮播图中使用了广告外观的内容
－轮播图要仔细排序。记住，最初那页内容比之后的内容吸引了多得多的关注。因此，第一页的内容不仅要选择最重要的，而且要能够推销后几页的内容。之后的页面也应该按照重要性来排序。
－轮播图永远不应该作为用户进入某项功能和内容的唯一途径。将重要的信息同时放在轮播图和页面其他位置是个好主意，这样用户就有更大可能性去看到它。
－当需要用户看到所有内容时，不要使用轮播图。就算你的轮播图做得非常好，也要记住，大部分用户是不会看完每一页内容的。


限制轮播图的页数

轮播图中的滑页要少于五页，因为用户不会去读更多的内容。对于数量的限制也有助于用户探索内容。


提供进度指示器

标示轮播图中的页数，并指明用户目前在哪一页。这能让用户感觉一切尽在掌控。
类似于点的图标表明了一共有多少滑页，而用户目前又在哪一页
确保内容在手机上也清晰

随着移动领域的需求开始变得不容忽视，为移动端优化轮播的内容成为了最为紧要的任务。文字和图片越清晰，用户就越能理解你的宣传内容。这就是当内容缩小到只有手机屏幕那么小之后，也要确保轮播图中的每个字都清晰的原因。而且当你将网页上的内容移植到手机上时，也一定要确保文字的清晰度。

不要这样做。手机上都看不清轮播图上的文字了。

设计合适的导航控件

－确保导航控件显示在轮播图之内，而不是在它下面或是折叠起来。这样不论是大屏幕还是小屏幕都不会出问题。下面是两个网页的例子：

不要这样做。dell主页上的轮播图中根本没有向前/向后的轮播图控件。导航控件仅仅是轮播图下面几个不起眼的小点。

这样做。apple主页上提供了显著且易于辨认的前后翻页控件。
－让链接，按钮与其它元素显著区分，并且尺寸易于识别与点击。尺寸太小，靠得太紧，或者放在复杂背景上的按钮（前页／后页以及页面选择按钮）即不容易看见，也不容易点击。

不要这样做。天梭的网页上，向前翻页和向后翻页的按钮在浅色背景下是很容易看见和点击的，但是在暗色背景下几乎看不到了（译者眼都要瞎了才看到orz）。
－在手机设备上，请支持滑动手势。这不是说，像向前／向后翻页的轮播控件就不可以使用了，但他们应该作为滑动翻页手势的补充。

这样做。在手机设备上支持滑动手势。
使用自动滚动时的要点

自动滚动的轮播图引导用户看完所有的内容。如果想自动滚动发挥最大效果的话，还需要注意这四个细节：

－手机网页上永远不要使用自动滚动。因为自动滚动也许会让用户点击到错误的滑页上。

－确保滚动速度不要太快。轮播图有时滚动得太快，用户都看不清上面的信息了，这让他们十分沮丧。当然，太慢的速度也会让用户感到厌倦。你要测试出一个合适的时间间隔，或者至少要估计一下，一般用户读完图片上的文字需要多久。你甚至可以考虑每页图片都根据信息量，设置不同的滚动时间。如果不能确定你使用了合适的滚动时间——那就不要使用自动滚动了。

－让用户来主导（控制感能产生信任感）。当鼠标在移动到轮播图上时，请暂停自动滚动。以免将用户想要阅读，或是点击的那页跳转过去了。当用户有任何主动交互行为时（如，点击轮播控件），就彻底暂停自动滚动，因为点击这个行为有很强的主动性，你要将决定权交给用户。

－不要停在轮播图的最后一页。要反复地播放轮播图中所有的分页。

轮播图的最佳替代者

主页轮播图最常见的毛病是内容的缺乏：用户并不知道下一张分页会显示啥，也不知道他们为什么需要关心。因此，他们可能不会看完所有轮播图。为了解决这个问题，你也许可以考虑使用主页横幅（Hero image）来替代轮播图。和轮播图相比，主页横幅有以下优势：
－用户能够专注于一张图片而不是分散注意力到多张图片上。而且一张静止的主页横幅，比不停滚动的轮播图安静优雅多了。
－当设计师知道他们只能选一张图片时，也许会比选一组图片时更谨慎。

在原本放置轮播图的位置放上首页横幅，能够优化你的内容。举个例子，下面这张截图来自 Amazon 的首页，设计师选择了一张首页横幅来强调主打产品——Kindle Paperwhite。这张图在提供信息的同时，很好地吸引了注意力。

Amazon 选择了与网页全局导航栏像匹配的颜色和字体，所以这个首页横幅与主页很好的融合，并 不像讨人嫌的广告。
另一个例子——New Balance 在主页上推广了他们最新款跑鞋，并突出地展示了用户能找到这个产品的按钮。

结论

如果用户对你的轮播图不感兴趣，这也许并不是轮播图的错。就像其他的内容，轮播图也需要有吸引力才能起到效果。如果只是为了在屏幕上增加内容的话，那么就不要使用轮播图。还记得吗？轮播图的质量由内容决定。如果内容不够精彩，就别强扭瓜啦。然而，如果内容足够好，轮播图将是吸引用户注意力的一种优雅的方式。因此，到底要不要用轮播图呢？

如果能给用户展示合适的内容，就该用。

本文来自广州品牌网站建设网站设计制作公司-纵天科技
标签：广州网站建设公司,广州网页设计公司,广州网站设计公司，网站建设 广州，广州 网站建设，广州企业网站建设，营销型网站建设，网站建设设计，广州网站开发，网站制作设计