网站横幅怎么制作，html横幅广告代码
横幅、图像滚动条、滑块、特色内容模块或您能想到的任何东西 - 它们遍布网络。横幅通常用于电子商务网站，尤其是它们的主页。大多数电子商务网站的桌面主页上都有横幅。
沃尔玛主页横幅
但是主页横幅真的对用户有用吗？还是它们算作呈现内容的一种简单方式？
就上述问题询问任何人，他们会告诉您横幅是一种反经验模型。根据 Erik 的一项研究，只有 1% 的网站访问者点击并查看与横幅相关的内容，其中 84% 的人只是点击了第一个滚动图片。
Jared Smith 创建了一个名为“我应该使用横幅吗？”的网站。说服每个人“如果它有效，它不应该”。但也许 Jared 网站上最好的描述是 Lee 所说的：
其实，如果你坚持一些重要的操作规则，首页可以得到很好的宣传，对用户很有帮助。本文将探讨这些操作方法的精髓，并简要说明如何设计一个好的横幅。
横幅是一种在主页上显示营销信息的促销形式。设计师使用横幅来最大化信息密度（一条信息可以提供的相关信息量的相对度量），而无需用户滚动浏览页面的其余部分。横幅有多种形式和大小，但通常情况下，横幅（如本文所述）具有以下特征：
它出现在首页的上部，占据了大部分“首屏”（显眼位置）。在同一个地方展示多个促销活动，即使一次实际上只展示一个；每个促销都包含一张图片和一小段文字。在同一个中，可以看出主题内容不止一个。 “收起上面的部分”是页面的上半部分，也就是用户点击网址后直接看到的页面。图片来源：.co
横幅优势
有了，可以在首页的同一个黄金区域展示多条内容。靠近页面顶部的信息更有可能获得更多关注。横幅的缺点
人们经常忽略横幅，包括横幅中的全部或部分内容（即使横幅自动滚动）——访问者通常不会在页面顶部逗留太久。所以不要指望人们会消化横幅中的所有信息。设计人员通常将横幅视为图像的集合，但许多用户通常只看到一个图像。查看横幅中的一系列图片可以对相关服务或产品给出准确的印象，但如果一个人只看到一张图片，他可能无法理解您想要传达的商业信息。有一句话我们听过无数次：内容为王。横幅形式的美感不如其内容与用户的相关性重要。
如果横幅的内容无关紧要，无论与用户交互多么简单，它的用户体验仍然会很糟糕。以下是一些需要提及的重要规则：
如果内容对访问者没有吸引力或对他们没有帮助，请不要使用横幅，例如人们不想关注的促销活动。大多数情况下，这些横幅只是分散用户的注意力，而不是引导他们进行简单而清晰的号召性用语。横幅内容不能类似于广告（或与广告格式内容相同）。如果内容看起来像广告，大多数用户会直接忽略它。原因在于横幅盲区（网页使用中的一种现象，是指网站访问者有意或无意地忽略了类似横幅的信息，也称为广告盲区）。因此，选择正确的字体和图像以使横幅与页面的其余部分相匹配是非常重要的。这样，横幅将充当整个网站的一部分，而不是页面上的强加广告。不推荐演示。类似于广告的横幅。
滚动图像的顺序需要仔细考虑。请记住，图像越高，您获得的曝光就越多。所以，第一张图片总是最重要的，它也会吸引访问者到下一张图片。后续图像应按重要性排序。横幅图像绝不应用作了解网站功能和内容的唯一方式。建议将横幅中出现的重要信息放在页面的其他位置，以便网站访问者更容易看到。如果您希望访问者看到所有内容，请不要使用横幅。即使横幅是有效的，请记住，大多数访问者不会浏览每一个横幅图像。横幅最多可容纳五张图片。如果有更多，用户可能不会观看。限制滚动图片数量的另一个好处是，它可以帮助访问者更好地了解网站内容，并在横幅中再次找到相关内容。
让用户知道总共有多少滚动图片，让他们看到当前的“进度”。这可以让人觉得一切尽在掌握。
一个点或类似符号可以显示滚动图片的总数，让用户知道他们当前正在看哪张图片
随着手机越来越强调注意力，优化横幅内容以供移动客户端查看是当务之急。文字和图像越清晰，用户就越有可能对了解内容感兴趣。
因此，重要的是要确保滚动图像的文字在各种屏幕上清晰易读，即使屏幕内容缩小到非常小的界面也是如此。此外，如果您将桌面网站中的插图重复用于移动网页，请务必检查文字是否清晰。
不推荐演示。移动设备上滚动图片的字体分辨率不高。图片来源：
导航按钮可帮助用户识别选项，以便当他们在核心滚动图像中看到相关内容时可以重新调用它们。
确保导航按钮存在并出现在横幅内，而不是横幅下方或其他地方。这避免了不适当的显示问题。以下是两个桌面网站示例：
戴尔主页上很少显示下一个/上一个横幅按钮。导航选项显示在横幅下方非常小的框中。
不推荐演示
Apple 主页提供高度可见且易于识别的下一个/上一个按钮。
推荐演示
链接和按钮应该是可识别的并且足够大，以便于识别和点击。如果按钮（下一个/上一个和滚动图像选择器）小而紧凑，或者位于背景杂乱的表面上，它们就不太清晰或易于点击。
在天梭首页，左右两端的箭头在浅色背景图下辨识度高，容易点击，但在深色背景图上，箭头辨识度很差.
不推荐演示
移动设备支持滑动手势。这并不是要否定传统的横幅控件（例如下一个/上一个按钮），而是在支持滑动手势的基础上添加这些控件。
推荐演示。移动设备支持滑动手势。图片来源：
横幅中不同图像的自动滚动允许访问者浏览相关信息。但是，为了让自动滚动运行顺畅，需要注意以下四个细节：
1. 移动设备不应加载自动滚动。当用户点击屏幕时，他们可能不小心点击了他们不想点击的图片，因为横幅图片会自动滚动。
2. 确保自动滚动切换不会太快。有时，横幅滚动切换太快，用户无法阅读信息，这让他们感到沮丧。当然，自动滚动切换太慢也有相应的问题——用户会厌倦这些滚动图像。
建议测试最佳停留时间，或至少估计用户平均花费多长时间浏览和消化相关的文本内容和图像信息。
如果需要不同的时间来理解不同滚动图像的信息，还要考虑单个滚动图像所需的单独停留时间。如果您不确切知道停留时间会持续多长时间，则不建议使用横幅。
3. 让用户保持控制（控制带来信任）。通过将鼠标放在横幅上来暂停自动滚动可防止自动切换到用户将要查看或单击的滚动图像。在任何活跃的用户交互（例如点击横幅按钮）之后，终止自动滚动功能，因为点击代表一个活跃的用户请求，这表明用户有兴趣和感兴趣。
4. 滚动到最后一张图片后不要停止。继续循环浏览所有图片，显示用户正在查看的滚动图片。
首页横幅最常见的问题是缺乏上下文：通常，用户只知道下一张滚动图片的内容，没有理由说服他们关注下一张图片。所以，他们不太愿意看这些内容。要解决这个问题，除了，还可以考虑主图（大宣传图）。
与相比，主图有以下优势：
用户可以专注于这张图片，而不是分散他们对其他滚动图片的注意力。静态主图像比滚动更不易分散注意力。如果设计师明白他们只能选择一张图片，并且图片也表达了他们的情感，他们更有可能选择呈现更能代表相关服务或产品的内容。您可以有效地确定内容的优先级、放弃横幅、使用有用且有效的主图像，并在横幅中包含与号召性用语相关的元素。
例如下图亚马逊主页截图，设计师使用主图设计突出其畅销产品——.这张主图既醒目又富有表现力。
亚马逊的主图字体和颜色与主菜单栏的字体和颜色相匹配，并且主图看起来是整个网站的一部分，而不是强加的广告。
再举一个例子 - New 发布了它的新鞋，以一条快速闪过的路径吸引游客的注意力，让游客可以得到他们想要的东西。
New 展示畅销目录和畅销产品
如果用户无法与您的横幅设计交互，则可能不是横幅模式的问题。与页面的其余部分一样，横幅需要具有吸引力才能有效。不要仅仅为了向屏幕添加内容而添加横幅。请记住，横幅永远不会胜过其内容 - 如果内容无关紧要，用户体验将特别糟糕。
但是，如果横幅的内容符合质量标准，则横幅可以将网站的热门和特色内容以体面的方式呈现给用户。因此，正确回答“我应该使用横幅吗？”应该是：如果它有助于目标用户的体验，那就使用它。
