戴尔主页上基本看不到下一项/上一项横幅按钮。导航选择以非常小的框出现在横幅下方。
不推荐示范
苹果主页提供了可视化高并且便于识别的下一项/上一项按钮。
推荐示范
链接和按钮的辨识度要高,并且足够大,以方便辨识和点击。如果按钮(下一项/上一项以及滚动图片选择器)小而紧凑,亦或在杂乱背景的表面,则其辨识度不高,也不方便点击。
在天梭主页,横幅左右两端的箭头在浅色背景图映衬下辨识度很高,也方便点击,但在图示暗色背景图上,箭头辨识度就非常低。
不推荐示范
手机设备支持滑动手势。这不是否定传统的横幅操控方式(比如下一项/上一项按钮),而是在支持滑动手势的基础上添加这些操控方式。
推荐示范。手机设备支持滑动手势。图片来源:Dribbble
自动滚动(或自动轮换)小技巧
横幅中不同图片的自动滚动可以让访客浏览相关信息。但要使得自动滚动运行流畅,还需注意以下四点细节:
1.手机设备不要加载自动滚动功能。用户在点击屏幕时,可能会因为横幅图片自动滚动不小心点到不想点开的图片。
2.确保自动滚动切换速度不要太快。有时横幅滚动切换过快,用户无法读取信息,这会让他们失望。当然,自动滚动切换过慢也有相应的问题——用户会厌烦这些滚动图片。
建议测试最佳停留时间,或至少预估普通用户平均花多长时间去浏览和消化相关文字内容和图像信息。
如果理解不同滚动图片的信息需要不同的时间量,则还要考虑针对单个滚动图片需要单设的停留时间。如果你没法准确把握停留时间,则不建议使用横幅。
3.让用户保持可控状态(控制给人信任)。鼠标放置在横幅上方暂停自动滚动,可以避免自动切换到用户即将看到或点击的滚动图片。在任一主动的用户交互(比如点击横幅按钮)完成后,终止自动滚动功能,因为一次点击即代表一次主动的用户请求,这说明用户对此很有兴趣和意向。
4.滚动到最后一张图片后不要停止。继续循环播放所有图片,显示用户正浏览的滚动图片。
除横幅之外的最佳选择
主页横幅最常见的问题在于缺乏背景铺垫:通常,用户对下一张滚动图片的内容只能略知一二,也基本没有说服他们关注下一张图片的理由。所以,他们不太愿意去查看这些内容。要解决这个问题,除了横幅外,你也可以考虑主图(大的促销图片)。
相比横幅,主图有以下优点:
用户可以专注于这一张图,而不再将其注意力分散到其他的滚动图片。相比滚动,静态主图能更少地分散用户的注意力。
若设计师明白其只能选择仅此一张图片,图片还要表达其感情,他们更可能会选择呈现更能代表相关服务或产品的内容。
你可以有效地确定内容的优先次序,放弃横幅,使用有用又有效的主图,再加入横幅中行为号召相关的元素。
比如下方亚马逊主页截图,设计师通过主图设计突出其畅销产品——Kindle Paperwhite。这幅主图既非常引人注目,又做到了传情达意。
亚马逊的主图字体和色彩与主菜单栏字体和色彩相匹配,这幅主图看起来就是整个网站的一部分,而不是强加的广告。
再举个例子——New Balance发布其新品鞋,通过一条留下快速闪过痕迹的路径吸引访客眼球,使访客各得所需。
新百伦同时呈现畅销目录和畅销产品
结束语
如果用户无法与你设计的横幅产生互动,可能不是横幅模式的问题。正如版面其他内容,横幅也需要引人入胜才能称作有效。不要仅仅为了增加屏幕的内容而添加横幅。要记住横幅永远都不能胜过其内容——如果内容不相关,用户体验将会特别糟糕。
然而,若横幅内容符合质量标准,则横幅可以得体的方式将网站热门与特色的内容突出呈现给用户。因此,对于「我该不该使用横幅?」这一问题,正确的答案应该是:对目标用户的体验有帮助的话,那就用吧。
本文来源:不详 作者:佚名