如何在互联网产品设计中有效定义界面友好的图片轮播图？

2017-01-19 10:07:00

轮播图是网站中最常见的组件之一。在电商网站中的首页经常可以看到。

但是首页轮播图真的对用户有帮助吗？它真的适合于呈现内容吗？

一些人对这两个问题的回答是“不”。他们认为轮播图不是一个好的设计。Erik Runyon通过研究发现：只有1%的用户会点击轮播图，这其中84%的人仅仅会点击轮播图的第一页。Jared Smith在他的一篇个人博客中质疑：“我真的该用轮播图吗？”。这篇博客的一则评论很好地说明了轮播图的问题：

轮播图更加适合于从事市场营销工作或管理工作的人。将主要内容以轮播图的形式呈现在首页上可以便于他们快速了解内容。而对于普通人来说首页轮播图并没有那么吸引人，他们很可能会忽视部分内容。因此，能不用轮播图就不要用轮播图。

事实上，首页轮播图是可以很好地服务于普通用户的，前提是要遵循一些设计规则。本文中我们将说明这些设计规则都是什么、分析为什么要遵循他们并讨论如何才能更好地使用轮播图。

什么是轮播图?

轮播图是在首页展示产品或服务内容的一种手段。设计师用轮播图的形式来压缩信息密度，便于用户在不需要翻好几页的情况下也能获取大量的信息。轮播图的大小和形状各异，但是通常情况下一个轮播图会具备以下特征：

1、它在首页的顶部，位于页面上半部分的一个固定位置。

2、在同一个位置会展示多个内容，每个内容占一页，每一页包含一张图片和一段简短的文字。

3、它会以某种方式暗示用户轮播图中包含多页内容。

轮播图的优点：

1、它可以在首页的醒目位置展示多页内容。

2、将多页内容放在该位置可以增加用户看到这些内容的可能性。

轮播图的不足：

1、人们通常不会看完轮播图的所有内容，即便它是自动翻页的。用户通常不会在页面顶部停留太长的时间。因此你不能指望人们会看完轮播图的所有信息。

2、设计师认为轮播图是多张图片的集合，因此可以从不同方面介绍自己的产品或服务，每张图片介绍一个方面。而用户不一定会完整地看完轮播图，因此他们可能不会对你的产品或服务产生全面的认识，甚至会产生误解。

轮播图设计的原则

内容优先

“内容为王”这句话相信大家已经耳熟能详了。轮播图的内容决定了轮播图的质量。如果轮播图的内容之间关联度不大的话用户体验就会非常差。下面几点必须要注意：

1、如果轮播图的内容对用户来说没用或者太无聊的话就不要用轮播图。这样的内容制作出的轮播图只会给用户留下不好的印象。

2、轮播图不要设计得像广告一样。如果你的轮播图长得太像广告的话，用户会习惯性地无视这些内容。因此轮播图的字体和图片的风格要和网页的其他部分一致，否则会被用户当成是推送广告。下面这个网站的轮播图就设计得太像广告了，和周围其他内容完全是两个风格。

3、轮播图中内容的顺序要合理安排。第一页内容被看到的几率要明显高于其他页。因此，第一页的内容必须是最重要的，同时还要让用户产生继续看后面几页的兴趣。后面几页的顺序也要按照重要程度从高到低安排。

4、不要将轮播图作为唯一的呈现手段。相同的内容在网页的其他地方也允许用户访问，这样可以提高内容被访问的几率。

5、如果你特别需要用户看完所有内容的话，那就不要用轮播图。用户很少会看完所有轮播图。

限制轮播图的页数

5页是轮播图页数的极限了，再多的话用户很难会看到后几页的内容。减少页数也利于内容的循环展示。

提供一个进度提示

提示用户轮播图一共几页，当前显示的是第几页。这会使用户意识到轮播图的播放是可控的，便于他们阅读。

确保内容在移动设备也是清晰可见的

移动设备的普及使得我们在设计网页时必须考虑到移动设备的用户体验。内容越清晰，用户就越容易接受。因此最好保证轮播图支持响应式，在屏幕很小的移动设备上也清晰可见。如果移动设备和桌面设备的页面是分开设计的话，那么久要分别进行针对性的优化。

导航按钮的使用要点

导航按钮便于用户切换轮播图展示的内容，同时还能帮助他们多次浏览相同内容。在导航按钮的设计上要注意以下几点：

1、导航按钮一定要包含在轮播图里面，而不是在轮播图下方或者其他地方出现。下图中戴尔官网的导航按钮在轮播图外面，而苹果官网的导航按钮在轮播图里面，同时还设计了醒目的翻页按钮。

2、导航按钮一定要清晰且易于辨认，同时要足够大，便于用户点击。下面这个例子是天梭的官网，导航按钮和图片混在一起很难辨别。

3、支持移动设备的“轻扫”手势。添加对轻扫的支持不代表弃用传统的翻页按钮，而是为了针对移动设备优化体验。

自动播放的设计原则

自动播放可以引领用户浏览轮播图的内容，但是要实现好的效果的话需要遵循下面这几个原则：

1、在移动设备上禁用自动播放。用户在刚要点击屏幕时，可能因为自动播放的页面切换而误点错误的链接。

2、自动播放的切换速度不要太快。如果太快的话用户可能还没看完当前页的内容就翻页了，这样用户体验会非常差。当然太慢的话也不好，用户会感到厌倦。在设计的时候最好预估一下阅读完一页的内容大约需要多长时间。如果你不确定时间到底有多长的话就不要使用自动播放。

3、让用户控制播放。当用户把鼠标放到轮播图上时暂停自动播放，因为用户很可能对当前页的内容感兴趣或是想点击链接详细了解。当用户点击导航按钮之后停止自动播放，因为导航按钮的点击是一个明确的用户请求，暗示了用户的兴趣所在。

4、不要在最后一页上停止播放。循环播放内容直到用户触发了hover事件或操作了导航按钮。

轮播图的替代品

轮播图最严重的问题便是内容的匮乏。这会导致用户不知道下一页会呈现什么以及看下一页是否有必要。他们很可能不会再看下去。解决这个问题的最好方法便是放弃使用轮播图，而是使用首页横幅作为替代。首页横幅相比轮播图有以下优点：

1、用户的注意力会集中在一张图片上而不是分散到多张图片。这利于吸引用户的注意力。

2、如果设计师只有一张图片可选的话，他们很可能会更加谨慎地考虑图片呈现的内容。

如果你发现你的轮播图的内容较为分散，那么不妨重新设计一下将他们精炼为一张图片，还是放在原本轮播图的位置。例如下图亚马逊的首页就只有一张首页横幅图，重点展示了Kindle Paperwhite这款产品，同时选用了和网页其他内容风格一致的字体，使其看着不像是推送广告。

另一个例子是New Balance的首页。New Balance将最新款的鞋展示在了首页横幅图中，并提供了用户所需的购买链接。

结语

如果用户没有点击你的轮播图，那可能并不是轮播图的错。轮播图的内容需要根据重要性调整顺序来达到最好的呈现效果。不要为了用轮播图而用轮播图，也不要仅仅为了添加些额外的内容而用轮播图。轮播图永远不及轮播图的内容重要。如果内容没有关联且排序不当，用户体验自然会差。相反，遵循上述的一些设计规则来设计轮播图的话，它会带给用户很好的体验，同时给你的网站增光添彩。

你需要思考的不是“我真的该用轮播图吗？”，而是“这个轮播图能给用户带来更好的体验吗？“