网站横幅怎么制作，html横幅广告代码

2023-02-10 11:00:57来源：互联网

A 君导读：双 11、双 12 终于结束了。每到这些电商节日，我们的网页和手机 app 首页就会变得比平时夸张。但夸张不一定是好事，到底怎样的首页轮播图才是科学的？看完 AppSo（微信号 appsolution）今天分享的这篇文章，你就有答案。

横幅、图片滚动、滑块、特色内容模块，或其它你能想得出的类似叫法——它们在网页上随处可见。横幅常被用于电商网站特别是其主页上。大多数电商网站的桌面网站主页都有横幅。

【资料图】

沃尔玛主页的横幅

但主页横幅真的对用户有用吗？或者说它们能算作一种简便的内容呈现方式吗？

就上述问题，随便问一个人，他们都会告诉你横幅是一种实证效果不好的模式（anti-pattern）。Erik Runyon 的一项研究显示，只有 1 %的网站访客会点击并浏览横幅相关内容——而其中有 84 %的人仅仅是点击第一张滚动图片。

Jared Smith 特地做了一个网站叫「我该不该使用横幅？」，来说服大家「即使能用，也不应该用横幅」。但也许，在 Jared 的网站上最好的说明，是 Lee Duddell 说的：

横幅的有用之处在于，你能用它来告诉市场营销领域或者高管人员「你们的最新想法已经呈现在主页上啦」。要么用横幅把用户忽略的内容放在你的主页，要么，如果你想的话，就永远别用横幅。

事实上，若能坚守一些重要的操作细则，主页横幅可以得到很好的宣传效果，还会对用户很有帮助。本文将探讨这些操作细则，并简单介绍如何设计好的横幅。

什么是横幅

横幅是在主页上显示市场营销信息的一种推广形式。设计师通过横幅，不用让用户滚动浏览剩余页面也可实现信息密度（指一份信息所能提供的相关信息量的相对指标）最大化。横幅呈现形式和大小非常多样，但通常情况下，横幅（正如本文所述）都有如下特征：

它出现在主页靠上部分，占据了「折叠以上部分」（显眼位置）绝大部分区域。在同一个位置展示一条以上的推广，即便实际上一次只能展示一条；每条推广都包含了图像和少许文字。在同一横幅中，能看出有不止一条主题内容。

「折叠以上部分」是页面上半部分，这部分是用户点开网址后直接看到的页面。图片来源：userex.co

横幅的优点

通过横幅，可以在主页同一块黄金区域显示多条内容。越靠近页面顶端的信息更越可能获得更多的关注。

横幅的弊端

人们经常忽略横幅，同时忽略掉的还包括全部或部分横幅里的内容（即使横幅可以自动滚动）——访客基本上不会在页面顶端逗留过久。因此，不要指望人们消化掉横幅的所有信息。设计师通常将横幅视为一系列图片的集合体，但众多用户通常只看了其中的一张图片。看完横幅中的一系列图片能给人留下精准的印象，使人了解相关服务或产品，但如果一个人只看到其中的一张图的话，他可能就无法明白你想传达的业务信息。

优质横幅设计指南

1. 内容第一

有句我们听过无数遍的话：内容为王。横幅形式的精美不如其内容与用户的关联度重要。

如果横幅的内容不相关，无论其与用户的交互多么简单，其用户体验仍将非常糟糕。这里需要提一些重要的规则：

如果内容对访客不够有吸引力、或没有帮助的话，比如是人们不想关注的推广信息，那就不要用横幅。这些横幅大多数情况下只会分散用户的注意力，而不能指引用户至一个简单明了的行为号召。横幅内容不能像广告（或者与广告格式内容一样）。如果内容看起来像广告，大多数用户会选择直接忽视。原因就在于旗帜盲点（网页使用中的一种现象，指网站访问者自觉或不自觉地忽略横幅样的信息，又可称为广告的盲目性）。所以，选择合适的字体和图像使得横幅和页面其他内容相匹配就显得非常重要。这样的话，横幅才会像整个网站的一部分，而不是网页上被强加的广告。

不推荐示范。Drugstore.com 的横幅类似广告。

滚动图片的顺序需要仔细斟酌。要记住，越是靠前的图片，越能获得更多曝光机会。所以，第一张图片永远是最重要的，它还能吸引访客去看下一张图。后续图片都应该按重要性排序。绝对不能把横幅图片当作了解网站特色和内容的唯一途径。建议将出现在横幅的重要信息另放在页面的其他部分，这样就更容易被网站访客看见。如果你想让访客看到所有内容，那就不要使用横幅。哪怕横幅是有效的，但要记住，大多数访客不会浏览每一张横幅图片。