怎样使用网站热点图优化网页布局设计？

：

对于网站而言，好的网页布局不仅包含了能够引起访客兴趣的内容，吸引目标用户，而且包含有直观而漂亮的UI设计，促进销售。许多站长喜欢将自己认为创意爆棚的设计直接应用的网站上，但并没有考虑过这种布局是否符合网站，是否符合目标用户群所需要的体验与需求。

所以，当你在做企业和商务类网站的时候，你需要自省，多问问自己，站在需求方和用户的角度上仔细考量一下，这样的设计布局是否合理？是否真的靠谱？

在下面的案例中，我们根据网页上用户点击的热点图，来了解用户是如何访问网站的，分析你自己网站的利弊，是否有利于目标用户的访问与需求寻找？教你怎样使用网站热点图优化网页布局设计？

1、巨大的Banner广告图真的有效吗？

许多网站都喜欢在网站的导航栏下顶部的位置放上巨大的Banner，宣传主打产品或者主要的服务（具体可查看马海祥博客《》的相关介绍）。一旦使用了这样的设计就意味着网站顶部大部分都会被一张图所填充，用户的注意力会被它所吸引，然后才是让用户注意到下方的其他产品。

上面的这张热点图是最大的体育品牌Vendor的鞋类产品页面，他们顶部的Banner的点击率并不高，仔细分析数据之后发现大概占据了页面总点击量的10%，很明显多数用户看了这个图之后并未被其吸引而是选择向下浏览他们自己真正喜欢的鞋。

2、你应该在最突出的地方放置什么内容？

网站应该什么地方放置什么内容，这些内容是否适合产品以及用户的需求？接下来的两个案例来将展示一下，什么是好内容被放置到错误的地方。

这个网站有几个很有吸引力的甜点食谱被放置于主页最下方，仅有37%的用户会将网页拖到这个位置看到它们，但是几乎所有看到这个食谱的用户都点击了它们，但是绝大多数的用户根本没能浏览到这里，网站应该让这样的杀手级的内容置于最好的位置，不是吗？

几乎相同的情况也发生在运动品牌Vendor的网页上，许多不同类型的鞋被放置在整个长页面上，但只有20%的用户会浏览到页面底部，但是几乎所有浏览到这里的用户都会点击那双鞋，这足以证明它非常吸引人，那么为何不将它挪到用户更容易发现的地方呢？

3、是否始终要为图片附加链接？

在网站上，一图抵千言，这是很正常的事情。但是你的页面中，图片是否传达出正确的含义了？如果图片加了超链接但是用户没有明白你的目的，那这肯定是一种失败的设计。如果你放置的图片吸引了用户去点击，但图片没有附上链接，用户的点击徒劳无功了，这也是一个失败的设计。

第一个案例是一个着陆页。看看热点图，你会发现许多用户点击了图片。用户这个时候应该是想点击图片深入了解一下网站可以为他们提供什么内容，用户希望这个图片有超链接，能引导他们去某个详情页。但是结果并没有。

第二个案例是某款手机的帮助页面。你会注意到，这个地方的客服电话用了鲜明的红色，看起来好象能点击的样子，但是它实际只是纯文本。用户希望能通过点击直接拨打电话，但是看来是不可能了。如果想直接同用户保持联系，那么这个地方必须修改。

如果你在一个页面上有多个链接指向同一个URL，例如：如果有不同位置的3个链接指到同一个特定的产品页面，那么热力图链接点击图将会显示你的用户最喜欢点击哪一个链接，这将帮助你提升网页的设计并让它对用户更加友好（具体可查看马海祥博客《》的相关介绍）。

4、网页的按钮是否容易被点击？

看看下面的APP页面中，网页使用了HOT等关键词来吸引潜在的用户的注意力，但是即便使用了粉红色来填充按钮，它的效果看起来也非常不明显。而男装部分，干脆使用了浅蓝色，这个地方的点击量就更少了，我们可以理解设计师的苦心，但是对于用户，它一点也没有吸引力。

所以，在打造一个优秀的网页之时，不仅要赋予它良好的体验和创意，更多的是会根据用户的习惯与诉求调整设计布局和创意，让页面能够落地，使得用户与网站实现良好的互动。

以上案例中的页面点击热力图是使用Ptengine软件生成的，Ptengine是一个很好的热力图生成工具，它所搜集的数据能清晰的反映网页的实际效果，为网页细节优化提供了有力的数据支撑。不过此软件是英文的，适应的朋友可以好好利用，而对于习惯中文的，用得最多的就是百度统计里的热力图功能了。百度热力图和Ptengine一样，也可直观精准地将网页流量数据分布通过不同颜色区块呈现，给中小网站网页优化与调整提供了有力的参考依据。

百度热力图能统计页面上用户鼠标点击的行为，从而了网站的各个区域的用户点击情况，而且可以显示不可点击区域发生的事情，比如你可能发现访客经常会点击那些不是链接的地方，也许你应该在那个地方放置一个链接。比如，再比如上面所说如果你发现用户总是在点击某个产品图片，你能想到的是他们也许想了解该产品的更多信息（具体可查看马海祥博客《》的相关介绍）。

5、使用热点图分析页面有哪些好处？

热点图出来给站长们带来福利，对数据分析帮助很大，可以清楚知道用户点击页面的轨迹，哪些地方是用户点击最多，受欢迎程度大小可以一目了然，针对后期调整页面埋下伏笔。

简单来说，热点图能直接告诉你用户最爱页面哪些地方？哪个版块是用户最爱？用户访问越多的地方颜色显示会越深。

用户浏览网站页面时，从热点图的点击轨迹看用户首先点击哪块区域，这点很重要，这些地方可以放置一些对用户有价值的内容供用户阅读，可以更好的控制跳出率。

热点图对于各行各业的网站数据分析都有作用，在设计网站架构时可以根据用户习惯来展示，对点击高的文章可以展示在首页位置，最大化给用户提供阅读，增加页面曝光度。热点图可以知道哪个版块最多点击，那个用户最喜欢，发挥数据本身应有的功能，可以针对用户点击图来调整页面结构。

首页的浏览量、点击量、点击率可以看出什么？对此，马海祥建议大家可以做一张Excel表格统计，看每天网站被点击的情况。当网站的架构更加人性化，推荐的文章内容更符合网站风格和人群，当你的活动越来越有意思，过一段时间观察点击率很有很大提升。

总而言之，有了热力图的科学依据，优化网页细节就可对症下药，避免了主观臆想和盲目改版，在点击行为集中和访客多的地方可以放重点内容，可以看到哪些广告图效果不明显，哪些想要被点击的按钮不突出，哪些地方是用户希望点击后得到详细介绍的等等。最关键的是，在做好页面细节优化后，还可以根据热力图定点考量页面调整前后的点击转化效果，然后继续优化。

优秀网站都是通过细节性进行调整，在保持整体网站风格和样式，通过细微的差别体现出与众不同的方式，在网站结合热点图整合创意和设计，让网站跟访客形成良好的互动效果。