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

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

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

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

什么是Banner？

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

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

在同一Banner中，能看出有不止一条主题内容。

Banner的优点

通过Banner，可以在主页同一块黄金区域显示多条内容。

越靠近页面顶端的信息更越可能获得更多的关注。

Banner的弊端 

人们经常忽略Banner ，同时忽略掉的还包括全部或部分Banner里的内容（即使Banner可以自动滚动）——访客基本上不会在页面顶端逗留过久。因此，不要指望人们消化掉Banner的所有信息。

设计师通常将Banner视为一系列图片的集合体，但众多用户通常只看了其中的一张图片。 看完Banner中的一系列图片能给人留下精准的印象，使人了解相关服务或产品，但如果一个人只看到其中的一张图的话，他可能就无法明白你想传达的业务信息。

优质Banner设计指南

1. 内容第一

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

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

如果内容对访客不够有吸引力、或没有帮助的话，比如是人们不想关注的推广信息，那就不要用Banner。这些Banner大多数情况下只会分散用户的注意力，而不能指引用户至一个简单明了的行为号召。

Banner内容 不能像广告（或者与广告格式内容一样）。如果内容看起来像广告，大多数用户会选择直接忽视。原因就在于 旗帜盲点（网页使用中的一种现象，指网站访问者自觉或不自觉地忽略Banner样的信息，又可称为广告的盲目性）。

所以，选择合适的字体和图像使得Banner和页面其他内容相匹配就显得非常重要。这样的话，Banner才会像整个网站的一部分，而不是网页上被强加的广告。

滚动图片的顺序需要仔细斟酌 。要记住，越是靠前的图片，越能获得更多曝光机会。所以，第一张图片永远是最重要的，它还能吸引访客去看下一张图。后续图片都应该按重要性排序。

绝对不能把Banner图片当作了解网站特色和内容的唯一途径 。建议将出现在Banner的重要信息另放在页面的其他部分，这样就更容易被网站访客看见。

如果你想让访客看到所有内容，那就不要使用Banner 。哪怕Banner是有效的，但要记住，大多数访客不会浏览每一张Banner图片。

2. 限制滚动图片的数量

Banner 最多放五张图片 。再多的话，用户可能就不会去看了。限制滚动图片的数量，还有一个好处就是帮助访客更好地了解网站内容，回过头来能在Banner里再次发现相关内容。

3. 提供进度提醒

让用户知道一共有多少张滚动图片，还需要让其看到目前「进度」是第几张 。这可以使人们感到一切都在掌控中。

圆点或类似符号能显示滚动图片总数，使用户知道其目前看的是第几张图

4. 确保滚动图片的内容在手机上清晰易读

由于手机越来越强调注意力，优化Banner内容以方便手机客户端查看则是首要任务。文字和图片显示得越清晰，用户越有可能有兴趣去了解相关内容。

所以，确保滚动图片的文字在各种荧幕上清晰易读就非常重要， 即便荧幕内容缩小到非常小的界面，也要能在荧幕上清晰显示 。此外，如果你将桌面网站的插图重复利用到手机页面中，一定要检查文字是否清晰易读。

 5. 设计恰当的导航按钮

导航按钮要帮助用户识别各项选择，使用户在核心滚动图片中看到相关内容时能回想到这些选择。

自动滚动（或自动轮换）小技巧

Banner中不同图片的自动滚动可以让访客浏览相关信息。但要使得自动滚动运行流畅，还需注意以下四点细节：

1、手机设备不要加载自动滚动功能 。用户在点击荧幕时，可能会因为Banner图片自动滚动不小心点到不想点开的图片。

2. 确保自动滚动切换速度不要太快 。有时Banner滚动切换过快，用户无法读取信息，这会让他们失望。当然，自动滚动切换过慢也有相应的问题——用户会厌烦这些滚动图片。

建议测试最佳停留时间，或至少预估普通用户平均花多长时间去浏览和消化相关文字内容和图像信息。

如果理解不同滚动图片的信息需要不同的时间量，则还要考虑针对单个滚动图片需要单设的停留时间。如果你没法准确把握停留时间，则不建议使用Banner。

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

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

 除Banner之外的最佳选择

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

 相比Banner，主图有以下优点：

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

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

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

 结束语

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

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

关键字：网页设计,网络营销,网站设计,网站Banner设计