热点图是通过使用不同的标志将图或页面上的区域按照受关注程度的不同加以标注并呈现的一种分析手段，标注的手段一般采用颜色的深浅、点的疏密以及呈现比重的形式，不管使用哪种方式最终得到的效果是一样的，那就是以前枯燥的数据变得如此清晰明了，眼前豁然开朗。

热点图将用户的每一次鼠标点击、滚动、视野停留都转作了数据化的色彩绘制出来，您不但可以一目了然用户偏好，更方便和设计师沟通，优化网页设计。

热点图是一款好用的用户行为分析工具，通过用户在页面上的浏览轨迹，点击热区来找到网站内对用户有价值的信息，并且优化网站死角来更加丰富和满足用户体验。

一、热点图的两种实现形式

目前热点图有两种主要的实现形式：

点击热点图（clickmap）：基于鼠标的点击行为采集、分析、呈现，crazy egg点击热点图的佼佼者。

注意力热点图（Attation heatmap）：不需要采集分析鼠标行为数据，而是使用综合多种神经学相关的算法来对人的视觉注意力进行模拟而生成以吸引注意力程度不同的热点图，风鬼（Feng-Gui）在这方面已有多年的经验积累，相当不错。

下面我就借助马海祥博客的平台跟大家分别介绍一下：

1、点击热点图

点击热点图的生成过程我们可以简单划分成三个部分：

（1）、鼠标点击数据采集与上传

第一部分的实现需要在企业网站的产品展示页面埋设相应javascript代码，代码核心思想是利用鼠标点击时会触发onMouseDown事件，然后在事件中添加脚本捕捉鼠标点击的具体位置坐标、相应链接以及屏幕分辨率等相关数据，然后通过httpRequest对象将数据发送到访客鼠标点击数据采集服务器保存，数据采集服务器会将数据以某种固定格式保存，方便数据分析服务器提取和分析这些数据。

（2）、数据的分析建模生成点击热点图

第二部分是主要部分，当网站决策者需要查看某页面的热点图时，触发系统向鼠标点击数据分析服务器发出生成热点图请求，分析服务器通过在获得相应的访客鼠标点击数据后进行汇总分析，形成该请求页面的点击数据集，在数据集基础上进行图形建模，最终形成产品关注度热点图，主要的步骤解释如下：

a、解析鼠标点击数据记录：我们在采集鼠标点击数据时会按照一种固定的预先定义好的格式进行记录，那么解析的过程遵守同样的规则进行解析，最终还原各数据项，为建模做准备。

b、还原鼠标点击位置：首先生成空白热点图，然后在获得的点击数据基础上进行点击位置等数据还原

c、点击数据集建模：使用预先设计好的单位点击效果图来标识每个点击行为，直到完成整个点击数据集的建模

d、生成热点图：将已经完成的点击数据建模图进行格式转换，转换后的图形将根据点击的密集程度分成不同的颜色区域，点击越密集的地方颜色将越鲜艳，相反点击稀疏的地方颜色相应的要淡一些，最后转换后的图片需要进行透明化的处理，这个主要为为了后续展现过程服务，我们最终是希望将这个生成的热点图直接置于产品展示位置之上，透明的效果可以非常清楚的看到背后对应的产品信息。

（3）、热点图的呈现

第三部分主要解决如何将服务器端生成的点击热点图展示给网站决策者，这个过程是比较简单的，可以结合新建层以及图片透明化处理等手段来完成，这一步好了我们就可以得到大致效果图，如下：

当然上图是使用颜色的深浅来表示受关注的强弱，也可以使用点的密集程度以及百分比来进行标注，这方面crazy egg做的非常不错，大家可以去感受下。

2、注意力热点图

注意力热点图是通过模拟人类看见物体前几秒的视觉效果，同时使用一种预测一个真人最可能查看物体的方式的算法生成热点图，这个算法综合了几种神经科学研究理论，包括特征整合理论、显著性研究、视觉注意理论，眼动追踪, 人类感知和认知。

使用注意力热点图，设计师、广告主、创作者可以通过分析图像吸引注意力的强弱来对这幅图像的效果进行预先测试，当然也可以用于跟踪注意力转移路线，视觉热点图一般由以下因素组成：

（1）、热区：最感兴趣的区域。

（2）、热点排序：下一个感兴趣的点以及何时兴趣转移到其上（毫秒级）。

（3）、视觉串联：眼睛在热点间运动情况。

（4）、被忽略的区域。

视觉关注度热点图不仅可以对图片进行热点和关注度分析，还可以对视频进行分析，这个是点击热点图无法做到的，但对于分析的准确性点击热点图的准确性要高于视觉关注度热点。

二、热点图的功能特点

从线下到线上，从单一到多样，从展示到交互，从缓慢起步到爆炸发展。整个人类文明所获得的全部数据中，有90%是在过去三年内所产生，这就是我们正在并且将持续依赖的线上世界，而面对我们视线不能触达的遥远彼端，我们需要一个助手来帮助自己收集、清洗和整理数据。

将用户的一次次鼠标点击还原，变成曲线、报告、可视化热图等等多种多样便于我们理解的信息，让我们看到用户如何在网站中互动，在数据中找到问题、获取机会，最大化优化用户体验、萃取推广价值，像传统服务那样能够面对面地把握用户的心思并作出正确的引导，不，我们甚至可以借助更聪明的数据做得更好。

在这个新的数据时代，使用与之相匹配的工作方法，让每一次访问、每一次页面浏览、每一次鼠标点击产生非凡的价值，进行热图展示，真实反映用户视野。

1、可视化的用户行为

您讨厌一边拿着受访列表一边往页面元素上对照是不是？我们也讨厌这样。所以我们通过热图工具令用户的每一次鼠标点击、滚动、视野停留都转作了数据化的色彩绘制出来。现在您不但可以一目了然看到用户喜欢什么？更可以方便地和设计部门的同事交流。

热点图可以直观清楚地看到页面上每一个区域的访客兴趣焦点，无须报告数据分析，图形化展现，无需任何页面分析经验。

2、完美支持细分和对比

只是将所有的点击堆放在一起还远远不够，细分永远能够告诉我们更多，新访客和回访客的行为意向是不同的，为什么有些用户能够完成注册而有些不能？细分可以给我们更多启发。

3、有条有理的点击分布图

只看热点和色彩还不够，需要点击量的数值？不妨试试点击分布图，它能够整整齐齐地为您显示一个元素上的点击量数值。无论是链接、按钮还是图片、板块，连同出站链接、搜索框这样传统监测无法直接统计的元素也可以包含在内，甚至连平时隐藏鼠标悬浮才会展开的元素也能捕捉到！

4、标记推广营销

准备投放广告？在社交网络上发布了消息并且附上了通往网站的链接？准备进行邮件营销？推荐您全部使用网址构建器给广告等链接指向的着陆页面贴上标记。经过了特殊的标记，这些和自然流量不同的入站来源能够被特别区分出来，了解用户的质量和访问偏好，更进一步帮助您优化广告的投放策略。

5、转化漏斗

通过将您有意引导用户依次访问的页面流程设置为，可以通过漏斗中积累的数据查看有多少用户按照您预期的引导不断前行，有多少用户中途放弃离开，找到漏斗中的泄露点迅速改善，挽留更多的用户顺利完成转化！

6、快速细分

拒绝繁琐的细分操作成为寻求数据意义的障碍，定位细分目标，只需要几次点击。直观地寻找细分对象，一边阅读数据一边快速钻取发现机会和问题。快速细分不仅快速易用，还贯穿着整个报告体系，找到一个剖析点，可以带着它穿行全部报告甚至热图，直到您获取到最终的信息。

7、转化率与转化价值

通过转化，让重要的用户事件变得可以度量，我们不仅可以记录对网站有益的转化，如注册、购买、索取资料，还建议您对意味着网站损失的用户行为同样予以衡量，如注销账户、取消订阅、取消订单等等。更加公正全面地衡量渠道和内容表现，当您发现一个渠道为您带来了大量用户订单，但是用户在完成某项行为后又大量取消订单，您便需要进一步考虑推广策略了。