想紧抓访客眼球不放，这几项网站设计元素请牢记在心!

一个网站上给人的第一印象，通常就能决定访客的去留，其中关键的因素就在网页版面的图片设计，还有就是流行的动态Banne设计。但是Banne设计虽能引人注目，如果和本身内容无关，也只能是徒劳无功，下面郑州建设公司伟之琦小编从以下各类Banne设计的差异进行比较，进而思考网站版面应该如何变化？如果做为一个访客看完以下内容，更能理解一个网站为何要用这种呈现方式，甚至能向网站建设者提出自己的看法，改进版面设计。

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

沃尔玛（Wal-Mart）主页的Banne设计。

但首页Banne设计真的对用户有用吗？或者说它们能算作一种简便的内容呈现方式吗？就上述问题，大家会告诉Banne设计是一种实证效果不好的模式。Erik Runyon 的一项研究显示， 只有 1%的网站访客会点击并浏览横幅相关内容 —— 而其中有 84%的人仅仅是点击第一张滚动图片 。

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

什么是Banne设计？

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

• 它出现在主页靠上部分，占据了「折叠以上部分」（显眼位置）绝大部分区域。

• 在同一个位置展示一条以上的推广，即便实际上一次只能展示一条；每条推广都包含了图像和少许文字。

• 在同一Banne设计中，能看出不止一条主题内容。

Banne设计的优点

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

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

Banne设计的弊端

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

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

优质Banne设计指南

1. 内容第一

有句我们听过无数遍的话： 内容为王 。 Banne设计形式的精美不如其内容与用户的关联度重要。如果Banne设计的内容不相关，无论其与用户的交互多么简单，其用户体验仍将非常糟糕。这里需要提一些重要的规则：

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

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

所以，选择合适的字体和图像使得Banne设计和页面其他内容相匹配就显得非常重要。这样的话，Banne设计才会像整个网站的一部分，而不是网页上被强加的广告。滚动图片的顺序需要仔细斟酌 。要记住，越是靠前的图片，越能获得更多曝光机会。所以，第一张图片永远是最重要的，它还能吸引访客去看下一张图。后续图片都应该按重要性排序。

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

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

2. 限制滚动图片的数量

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

3. 提供进度提醒

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

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

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

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

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


不推荐示范。手机设备滚动图片的字体清晰度不高。

5. 设计恰当的导航按钮

导航按钮要帮助用户识别各项选择，使用户在核心滚动图片中看到相关内容时能回想到这些选择。确保导航按钮存在并出现在横幅内，而不是横幅下方或者其他区域。这样就可以避免显示不当的问题。下面以两例桌面网站为例：Dell 主页上基本看不到下一项/上一项横幅按钮。导航选择以非常小的框出现在横幅下方。

不推荐示范。

连结和按钮的辨识度要高，并且足够大，以方便辨识和点击。如果按钮（下一项/上一项以及滚动图片选择器）小而紧凑，亦或在杂乱背景的表面，则其辨识度不高，也不方便点击。

在 Tissot 主页，横幅左右两端的箭头在浅色背景图映衬下辨识度很高，也方便点击，但在图示暗色背景图上，箭头辨识度就非常低。

不推荐示范。

手机设备支持滑动手势。这不是否定传统的Banne设计操控方式（比如下一项/上一项按钮），而是在支持滑动手势的基础上添加这些操控方式。

推荐示范。手机设备支持滑动手势。

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

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

1. 手机设备不要加载自动滚动功能 

用户在点击屏幕时，可能会因为Banne设计图片自动滚动不小心点到不想点开的图片。

2. 确保自动滚动切换速度不要太快 

有时横幅滚动切换过快，用户无法读取讯息，这会让他们失望。当然，自动滚动切换过慢也有相应的问题——用户会厌烦这些滚动图片。建议测试最佳停留时间，或至少预估普通用户平均花多长时间去浏览和消化相关文字内容和图像讯息。如果理解不同滚动图片的讯息需要不同的时间量，则还要考虑针对单个滚动图片需要单设的停留时间。如果你没法准确把握停留时间，则不建议使用Banne设计。

3. 让用户保持可控状态（控制给人信任）

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

4. 滚动到最后一张图片後不要停止 

继续循环播放所有图片，显示用户正浏览的滚动图片。

除Banne设计之外的最佳选择

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

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

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

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

结束语

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

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