轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它:
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢?
不论将这个问题抛向谁,他们都会告诉你,“轮播图就是个反面模式(anti-pattern)。”轮播图的坏名声来自多方面。Erik Runyon 主持的一项研究表明,只有1%的浏览者点击了轮播图——而且其中84%用户都只会点击第一张图。在 Jared Smith 的网站“我应该使用轮播图吗?(Should I use a carousel?)”中,Jared Smith说,如果可以的话,你不该使用轮播图。也许,Jared网站上最佳评论来自Lee Duddell,他总结了轮播图最普遍的问题:
轮播图是市场营销经理最后的救命稻草,如果主页上有什么一定会被用户忽略的东西,可以将他们放在轮播图上,不过如果要我说的话,不使用轮播图是最好的。
事实上,若是注意一定的细节,首页上的轮播图是可以发挥很好的作用的。本文将分析这些执行上的细节,并概述如何设计一个好的轮播图。
轮播图是什么
轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容,设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小,但本文中谈及的轮播图具有以下特性:
轮播图的优点
轮播图的缺点
设计好轮播图的方法
内容为王
“内容为王”这句话大家都很熟悉。轮播图里的内容,决定了轮播图质量的上限。无论交互多么简单,不相关的内容都会带来糟糕的用户体验。这里需要提到几条重要的准则:
限制轮播图的页数
轮播图中的滑页要少于五页,因为用户不会去读更多的内容。对于数量的限制也有助于用户探索内容。
提供进度指示器
标示轮播图中的页数,并指明用户目前在哪一页。这能让用户感觉一切尽在掌控。
确保内容在手机上也清晰
随着移动领域的需求开始变得不容忽视,为移动端优化轮播的内容成为了最为紧要的任务。文字和图片越清晰,用户就越能理解你的宣传内容。这就是当内容缩小到只有手机屏幕那么小之后,也要确保轮播图中的每个字都清晰的原因。而且当你将网页上的内容移植到手机上时,也一定要确保文字的清晰度。
设计合适的导航控件
不要这样做。dell主页上的轮播图中根本没有向前/向后的轮播图控件。导航控件仅仅是轮播图下面几个不起眼的小点。
这样做。apple主页上提供了显著且易于辨认的前后翻页控件。
不要这样做。天梭的网页上,向前翻页和向后翻页的按钮在浅色背景下是很容易看见和点击的,但是在暗色背景下几乎看不到了(译者眼都要瞎了才看到orz)。
这样做。在手机设备上支持滑动手势。
使用自动滚动时的要点
自动滚动的轮播图引导用户看完所有的内容。如果想自动滚动发挥最大效果的话,还需要注意这四个细节:
轮播图的最佳替代者
主页轮播图广受诟病的一点是内容的缺乏:用户并不知道下一张分页会显示啥,也不知道他们为什么需要关心。因此,他们可能不会看完所有轮播图。为了解决这个问题,你也许可以考虑使用主页横幅(Hero image)来替代轮播图。和轮播图相比,主页横幅有以下优势:
在原本放置轮播图的位置放上首页横幅,能够优化你的内容。举个例子,下面这张截图来自 Amazon 的首页,设计师选择了一张首页横幅来强调主打产品——Kindle Paperwhite。这张图在提供信息的同时,很好地吸引了注意力。
Amazon 选择了与网页全局导航栏像匹配的颜色和字体,所以这个首页横幅与主页很好的融合,并不像讨人嫌的广告。
另一个例子——New Balance 在主页上推广了他们最新款跑鞋,并突出地展示了用户能找到这个产品的按钮。
结论
如果用户对你的轮播图不感兴趣,这也许并不是轮播图的错。就像其他的内容,轮播图也需要有吸引力才能起到效果。如果只是为了在屏幕上增加内容的话,那么就不要使用轮播图。还记得吗?轮播图的质量由内容决定。如果内容不够精彩,就别强扭瓜啦。然而,如果内容足够好,轮播图将是吸引用户注意力的一种优雅的方式。因此,到底要不要用轮播图呢?
如果能给用户展示合适的内容,就该用。
本文分享自 交互设计前端开发与后端程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!