北大青鸟设计培训：banner轮播图的利弊？

对于许多的企业网站来说，首页最上部分一般都是企业的banner图，为了能够更多的展现内容，许多的设计师将banner都设计成为轮播图的形式，但是，真的轮播图就有很好的展现和点击吗，其实不然，反而因为轮播图的图片大小和代码问题导致了许多SEO问题的产生。

今天，IT培训http://www.kmbdqn.cn/就仔细来分析一下，到底要不要设置banner轮播图呢。

确保你真的需要使用轮播图首先，设计不当的轮播图容易被用户当成与他想浏览的内容不相关的广告图片而直接无视。

在各种网页中早以身经百战的用户，会选择最快速的方式找到和浏览他们想要看的内容。

把精力放在翻看没有预期的轮播图上显然是低效的，一上来就自动进入了用户的视觉盲区。

下面的热力图展示了用户的浏览行为习惯：快速扫描找到想要阅读的区域，然后再进行有序的沉浸式阅读，毫无例外他们都忽略了看起来像广告的图片部分。

除此之外，在2013就有研究结果表明，轮播图的交互效果十分不理想：只有1%的用户点击了轮播图上切换按钮，其中84%的用户只在首屏点了1次。

还有学者针对30多个B2B的网站的网站进行了研究分析，根据轮播图的内容分成了三类：品牌宣传(Branding)、白皮书/在线研讨会(ThoughtLeadership)、服务推广(ServicePromtion)，发现不管是哪一类的内容，点击率都很低(0.16%~0.65%)：不仅如此，不少使用轮播图的网站还存在以下几种SEO问题：复杂的大图导致网站性能低，加载速度慢。

一般轮播图都会承载大量的图片信息，尤其是那些首屏就被高分辨率轮播图铺满的网站，这样庞大的图片信息会对加载速度造成很大影响。

每多加载1秒，就会流失更多用户。

无论是用户还是搜索引擎，都偏好加载更快的网站。

使用轮换的标题。

不少开发者倾向于给页面最上方的轮播图片打上标签，使页面上出现轮换的4-5个不同的标签，导致相关关键词的检索能力降低。

Flash的使用。

部分网站的轮播图使用Flash去展示内容，它能够做出很酷的效果，但却无法被任何搜索引擎抓取。

综上所述，设计不当的轮播图容易被忽略，点击率不理想，还可能会对SEO造成负面影响。

所以，我们不应该在还没有仔细思考过页面希望给用户传容的优先级和希望达到的效果时，就哪里“需要”哪里搬。

事实上，有很多其他方式也能帮助我们解决问题，并带来更好的效果：1、找到最需要触达给用户的内容，将次要内容放在次级位置展示谷歌云平台的产品与服务种类繁多，但并没有使用轮播图展示全部产品和特性，而是将浓缩的品牌价值和理念清晰地展现在用户面前，并提供主(免费试用)、次(与销售人员联系)两个明显的转化入口。

同时，将其他次要入口铺在下方，让用户可以选择通过顶导航或者继续往下浏览，快速找到感兴趣的内容。

2、让它成为内容的一部分氧气是一个专注于提供内衣购买推荐的app，当你按顺序滚动浏览页面的商品时，促销信息会以和通常产品推荐一样的形式出现在你面前，打扰感低，对进入沉浸式阅读的用户转化效果好。

3、砍掉不重要的推广图，直接展示内容右边的图片似乎看起来更“好看”，更“吸引人”，然而在实际场景中用户总是习惯性的忽略banner部分的内容，选择性的浏览正文部分，直接展示用户需要的内容，可以提高用户的检索效率，从而带来更高的转化率。

1、让轮播图看起来像是站点的一部分

将品牌元素贯穿设计始终，使用一致的字体及排版方式，让轮播图成为站点中统一的门面，而不是容易被直接忽略的花哨无序的贴片广告。提供清晰，区分标题、正文和转化入口的层次，提高可读性。

更多UI设计知识，请咨询华南设计学校。

2、慎用自动切换

“固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户，投放100%符合他们预期的内容几乎是不可能的，这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。” —— 电商专家 Depesh Mandalia。

Web易用性大师Jakob Nielsen也曾专门针对会自动切换的轮播图做了可用性研究，结论表明自动切换的轮播图会惹恼用户并更容易被他们忽略。

所以，让你的图片默认静止在最新或者最重要的内容上，给出可以切换的操作预期，由用户自主触发切换操作时才进行切换，是更好的选择。

3、给予清晰的操作反馈和内容预期

展示信息的信息应该面向大部分的访问用户，属于同一类别或有所关联(如都是某个酒店的图片，都是旅游城市的地标图，都是当季发布的新品图等等)，引起访问者的兴趣并诱发进一步切换探索，而不是随机地将一些无明显关联的图片放在同样的位置。

让用户能够快速识别点击区域，减少出错的可能。提供更大的点击区域和hover反馈，让用户能够清晰的感知到哪些区域是可点的。

4、保证可用性，兼顾SEO

最后很重要的一点是，在设计时须考虑到网站的加载速度，对内容进行优化，使用轻量的图片元素和转场动画，保证网站的可用性。

网站优化中alt标签的使用也是非常重要的细节，但是alt标签的视觉效果不明显，常常容易被忽略，这样也会影响搜索引擎对网站的整体评价。那么，优化网站的过程中如何使用alt标签？接下来一起来看看网站SEO优化的过程中alt标签的使用方法。

一、在首页和目录页的使用

一般在网站的首页和目录页都会有轮播图和缩略图，并且图片都带有连接，像这种有指定页面或指向性的图片，添加的alt标签文字应该是该链接页面的标题文字。

网站SEO优化

二、内容详情页的使用

详情页的图片使用alt标签的时候文本需要编写成与图片相关的内容即可，但是因为详情页alt标签较多，所以也会常出现一些问题，倾巢网络为您举例说明：

1、关键词堆砌：这个是很多优化人员会出现的错误，因为听说关键词密度高有利于优化，所以便添加多个关键词的alt标签，导致页面的关键词密度过高，会导致搜索引擎判定网站作弊。

2、alt描述文字过多：在设定alt标签的时候不能用过多的文字，这样搜索引擎会无法识别其中的关键词，无法抓住网站的重点。

三、不识别图

搜索引擎不能识别图片，所以才添加的alt标签，若果一张图片上画的是花朵，但是添加alt标签时什么都不写，那搜索引擎只知道这是一张图片，并不会抓取到图片上是什么内容。

---