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

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

前言:双11和双12终于落下帷幕。每次这种电商节，大家在手机上的网页和app首页都会变得比平时越来越夸张。但是浮夸不一定是好事。什么样的首页图片可以算科研？今天看AppSo(微信号appsolution)分享的这篇文章，你会找到答案。

横幅、图片翻转、指南滑块、特色内容控制模块，或者其他你能想到的类似名称——它们经常出现在网页上。电子商务网站经常使用横幅，尤其是其主页。大多数电子商务网站的桌面上都有横幅。

沃尔玛首页横幅

但是主页横幅对用户有什么用呢？也就是说，它们可以被视为一种简单的内容呈现方式吗？

随便问一个人这个问题，他们都会告诉你banner是一个在实证研究中不太有效的反模式。埃里克·鲁尼恩(ErikRunyon)的一项科学研究显示，只有1%的网站浏览量点击并访问了横幅的相关内容——其中84%的人只是点击了第一张滚动图片。

贾里德·史密斯专门创建了一个名为“我应该应用横幅吗？”就说“即使有，也不要用横幅”。但也许，最好在贾里德的网站上展示一下李·杜德尔说过的话:

横幅的有效性取决于你可以用它来告知网络营销行业或管理人员“每个人的新想法都已经在首页展示了”。不要用横幅把用户忽略的内容放在你的首页，或者如果你想要，也不要一直用横幅。

事实上，如果我们能够遵守一些关键的实际执行计划，主页横幅可以达到非常好的宣传和规划效果，并将继续对用户非常有帮助。本文将讨论实际的实施方案，并简要详细介绍如何设计一个好的横幅。

什么叫横幅

Banner是在首页展示信息网络营销信息的一种营销推广方式。横幅上说，室内设计师可以在不让用户翻动和访问剩余页面的情况下，最大化信息相对密度(指一条信息所能展现的信息相对索引值)的利润。横幅有多种方式和大小，但一般来说，横幅(如上所述)具有以下特征:

它出现在首页的上半部分，占据了“伸缩上半部分”(突出部分)的大部分区域。

在同一位置显示多个营销推广，即使实际上一次只显示一个营销推广；每个营销推广都包括图像和少量文本。

在同一个banner中，可以看到不止一个主题样式内容。

“展开的顶部”是网页的顶部，也就是用户点击网址后会立即看到的网页。图片来自:userex.co

横幅的优势

根据横幅，几条信息可以显示在主页的同一个黄金区域。

越靠近网页顶端，越有可能获得大量关注。

横幅的缺点

人们往往会忽略横幅，他们忽略的也包括横幅中的全部或部分内容(即使横幅可以自动翻转)——大部分页面浏览量不容易在网页顶部停留太久。所以，没必要寄希望于所有人都消化吸收横幅的所有信息。

室内设计师一般把横幅看成是一系列图片的组合，但很多用户只看过其中一张。看横幅中的一系列图片可以给人一个准确的印象，从而掌握相关的服务或商品。但是，如果一个人只看到里面的一张图，他很可能搞不清楚你想要传达的业务流程信息。

优质横幅设计方案手册 1。内容第一 有一句话大家都听过很多遍了:内容为王。banner风格的精致程度不如其内容与用户的相关系数那么关键。

如果横幅的内容无关紧要，无论横幅和用户的交互有多简单，用户的体验还是会很差。这里必须提到一些关键标准:

如果内容对不足的浏览量有诱惑性或无帮助性，比如人们不想关心的营销信息，那么你就不能使用横幅。大多数情况下，这种横幅总是会分散用户的注意力，而无法引导用户对个人行为进行简洁明了的号召。

Banner内容不能像广告(或者广告文档格式的内容)。如果内容看起来像广告，大多数用户会选择立即忽略它。原因取决于旗帜盲区(网页应用中的一种情况，指网站访问者主动或不自觉地忽略类似旗帜的信息，也可称为广告的片面性)。因此，选择合适的字体样式和图像使横幅符合网页的其他内容显得非常重要。在这种情况下，横幅就像整个网站的一部分，而不是强加在网页上的广告。

不强烈建议演示。Drugstore.com的横幅类似于广告。

滚动图片的顺序必须仔细权衡。记住，图越高，得到的机会就越多。所以第一张图永远是最重要的，也能吸引浏览量去看下一张图。事后应该根据需要安排图片。

使用横幅图片作为掌握URL的功能和内容的唯一方法肯定是不可能的。建议将出现在横幅中的关键信息放在网页的另一部分，以便更容易被URL页面查看者看到。

如果你想让页面浏览量看到所有的内容，你不需要应用横幅。即使横幅是合理的，请记住，对于大多数页面视图来说，访问每个横幅图像并不容易。

2。限制滚动图片的总数 在横幅数量中最多放置五张图片。如果多了，用户大概就不太好读了。限制滚动图片总数的另一个好处是，它可以帮助页面浏览量更好地把握网站的内容，当他们转身时，可以在横幅中再次找到相关内容。

3.出示进展提示

让用户知道有多少张滚动图片，同时也要看到当前的“进度”是第一张。这样可以让大家觉得一切尽在掌握。

小圆圈或类似的符号可以显示滚动图片的数量，让用户知道自己现阶段在看哪张图片

4.保证滚动图片的内容在手机上清楚最易读

因为手机越来越注重专注，所以完善banner内容方便app客户端查询才是最重要的。并且文字和图片展示的信息越清晰，用户越有可能对掌握相关内容感兴趣。

因此，保证滚动画面的文字在各种显示器上清晰易读是非常重要的，即使显示器的内容缩小到很小的一页，信息也要清晰地显示在显示器上。另外，如果反复把桌面上的网站图文并茂的图片套用到手机界面上，一定要检查文字是否清晰，可读性是否最强。

不强烈建议演示。手机上滚动图片的字体风格和画质都不高。图片来自:Baymard

5.设计方案适当的导航栏按键

导航条按钮应该帮助用户识别各种选择，以便用户在按键滚动图片中看到相关内容时，能够回忆起这个选择。

确保导航栏按钮存储并显示在横幅中，而不是直接位于横幅下方或其他区域。这可以防止不良信息显示的问题。以下面三个桌面网站为例:

下一个/上一个横幅按钮在戴尔主页上不可见。导航栏在横幅正下方的一个非常小的框中被选中。

不建议进行演示

苹果首页显示下一个/上一个键，数据可视化程度高，易于识别。

强烈推荐演示

并且连接键的标识应该足够高和大，以便于识别和点击。如果按键(下一项/上一项及其滚动图片选择器)小而紧凑，或者在混乱局面的表面，其识别度不高，不方便点击。

在天梭首页，横幅左右两端的箭头符号在浅色背景的映衬下辨识度很高，点击起来也很方便。但在图例的深色背景上，箭头符号的辨识度极低。

不建议进行演示

手机设备适合拖手。这并不是否定传统的banner *** 纵方式(比如下一个/上一个按钮)，而是基本上把这种 *** 纵方式加到了拖手型上。

强烈建议演示。手机设备适合拖手。图片来自:Dribbble

全自动翻转(或全自动交替)小窍门

横幅中不同图片的全自动翻转使页面浏览量能够访问相关信息。但是，为了促进自动翻车的平稳运行，应特别注意以下四个关键点:

1.手机上的机器和设备不一定要加载全自动翻盖功能。当用户点击显示屏时，很可能横幅图像会自动翻转，不小心点击了不想打开的图像。

2.保证全自动翻转转换率不用太快。有时候横幅翻转转换太快，用户加载不了信息，感觉很冷。自动滚屏转换太慢自然是一个相对的问题――用户会对这种滚屏的图片感到厌倦。

建议测试最佳等待时间，或者至少预测普通用户访问和消化文本内容和图像的信息需要多长时间。

如果知道不同滚动图片的信息需要不同的时间量，那么还要考虑单独滚动图片必须单独设置的等待时间。如果不能准确把握等待时间，不建议应用横幅。

3.让用户保持可控性( *** 控给人信任)。鼠标放在横幅上停止全自动翻转，可以防止全自动转换为用户会看到或点击的滚动图片。在任何积极的用户交互(例如，点击横幅按钮)之后，停止全自动翻转功能。由于一次点击意味着积极的用户请求，说明用户对这件事非常感兴趣，也非常愿意。

4.翻到最后一张图就不用终止了。再次循环播放所有图片，并显示信息用户正在访问的滚动图片。

除横幅以外的最好的选择

首页最常见的问题在于信息不足:一般用户对下一张滚动图片的内容只是略知一二，基本不会说服他们为什么关注下一张图片。所以，他们不想去打听这类内容。处理这个问题，除了横幅，还可以考虑淘宝主图(营销大图)。

与横幅相比，淘宝主图有以下优势:

用户可以全身心投入到这张图片中，但并没有分散对其他滚动图片的注意力。相比之下，静态的数据淘宝主图越来越不能分散用户的注意力。

如果室内设计师知道他们只能选择这一张图片，并且图片也要表达他们的感受，他们更有可能选择显示更多相关服务或商品的内容。

你可以合理定义内容的优先顺序，抛弃banner，应用一个有效合理的淘宝主图，然后在banner中加入与个人行为诉求相关的元素。

比如，在正下方的亚马逊首页截图中，室内设计师根据主设计突出了其热销商品——Kindlepaperwhite。这个淘宝主图不仅很吸引人，而且保证传达感情。

亚马逊的淘宝主图的字体风格和颜色与主工具栏的字体风格和颜色一致，而且这个淘宝主图似乎是整个网站的一部分，而不是一个强加的广告。

再举一个例子——新百伦公布了自己的新鞋，按照留下快速闪光标记的方式吸引了浏览量的注意，让浏览量能够满足他们的需求。

新百伦鞋还展示了热销文档和热销产品的目录

结语

如果用户无法与你设计的横幅互动，很可能不是横幅模式的问题。像该部分的其他内容一样，横幅必须令人兴奋才能合理。没有必要仅仅为了改善显示屏的内容而添加横幅。记住横幅永远不可能比它的内容更好——如果内容无关紧要，用户的感受可能会特别糟糕。

众所周知，如果横幅内容符合产品质量标准，横幅就能以适当的方式向用户突出网站的大众化、特色化内容。因此，对于“我是否应该应用横幅？这个难题合适的回答应该是:如果对整体目标用户的感受有帮助，那就用吧。

创作者|NickBabich是一名前端工程师，关心UI和UX。口译员|乔瑞

文章内容已在作者授权下翻译成中文。全文链接:设计一个用户友好的主页轮播。

文章由爱范儿集团旗下AppSo中文翻译出品，微信号appsolution。