成功吸引你注意的网站横幅，究竟做对了什么？

3. 让用户保持可控状态(控制给人信任)。鼠标放置在横幅上方暂停自动滚动，可以避免自动切换到用户即将看到或点击的滚动图片。在任一主动的用户交互(比如点击横幅按钮)完成后，终止自动滚动功能，因为一次点击即代表一次主动的用户请求，这说明用户对此很有兴趣和意向。

4. 滚动到最后一张图片后不要停止。继续循环播放所有图片，显示用户正浏览的滚动图片。

除横幅之外的最佳选择

主页横幅最常见的问题在于缺乏背景铺垫：通常，用户对下一张滚动图片的内容只能略知一二，也基本没有说服他们关注下一张图片的理由。所以，他们不太愿意去查看这些内容。要解决这个问题，除了横幅外，你也可以考虑主图(大的促销图片)。

相比横幅，主图有以下优点：

• 用户可以专注于这一张图，而不再将其注意力分散到其他的滚动图片。相比滚动，静态主图能更少地分散用户的注意力。

• 若设计师明白其只能选择仅此一张图片，图片还要表达其感情，他们更可能会选择呈现更能代表相关服务或产品的内容。

你可以有效地确定内容的优先次序，放弃横幅，使用有用又有效的主图，再加入横幅中行为号召相关的元素。

比如下方亚马逊主页截图，设计师通过主图设计突出其畅销产品—— Kindle Paperwhite。这幅主图既非常引人注目，又做到了传情达意。

亚马逊的主图字体和色彩与主菜单栏字体和色彩相匹配，这幅主图看起来就是整个网站的一部分，而不是强加的广告。

再举个例子——New Balance 发布其新品鞋，通过一条留下快速闪过痕迹的路径吸引访客眼球，使访客各得所需。

新百伦同时呈现畅销目录和畅销产品

结束语

如果用户无法与你设计的横幅产生互动，可能不是横幅模式的问题。正如版面其他内容，横幅也需要引人入胜才能称作有效。不要仅仅为了增加屏幕的内容而添加横幅。要记住横幅永远都不能胜过其内容——如果内容不相关，用户体验将会特别糟糕。

然而，若横幅内容符合质量标准，则横幅可以得体的方式将网站热门与特色的内容突出呈现给用户。因此，对于「我该不该使用横幅?」这一问题，正确的答案应该是：对目标用户的体验有帮助的话，那就用吧。

作者 | Nick Babich软件工程师，关注UI和UX。译者 | Jorri

文章已获原作者授权翻译，原文链接：Designing a User-Friendly Homepage Carousel。

本文由爱范儿旗下的 AppSo 翻译出品，微信号 appsolution。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：我爱故事小小网_铜陵站长网）

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