有关热点图

如果我们记录用户的点击或者鼠标的移动，并且绘制成热点图，生成的结果可以帮助我们分析和改良UI。

用于分析网站UI友好性的点击热点图可以这么来做：

最简单的方式是记录页面地址，鼠标相当于页面左上角的X和Y。

然后从我们的网页截图，把热点绘制在这个图上。

但是这种热点图的缺点是不能考虑多种用户状态或者说页面状态给页面带来布局的变化。

改良方法是记录页面地址，页面状态（比如是否登录），以及X和Y。

然后根据不同的状态分别截取多张图，为一个页面生成一组热点图。

这种方式的缺点是不适合变化很多的页面，或是随着鼠标的点击变化的页面，比如页面的下拉或弹出层。

可以想到更合理的方式是，通过脚本为页面上每一个需要跟踪点击的元素（或是没有子元素的根元素）生成一个唯一的id（如果已有id了则使用原来的id）

生成id的方法如下：把元素的整个html（比如<div>你好</div>）进行md5 hash

然后我们在每一次点击的时候记录id以及访问量（当然也可以为每一条记录记录详细的时间，这样可以按时间统计）

然后制作一个特殊的页面，这个页面已经生成了所有元素id，使用脚本从后端读取采集到的数据，根据id为元素渲染颜色

（比如50以下绿色，50-100黄色，100-200桔黄色，200以上红色）也就是用脚本在实际的页面上生成热点图

这样直接观察这个可交互的页面就可以看到结果了

注意：

1） 热点图的数据可以只统计数量也可以为每一条数据记录：IP/浏览器类型/用户类型等等，这样我们就可以按照不同的维度来分析

2） 在采集样本的时候可以不用在所有的web服务器都收集，可以在负载均衡的部分服务器采集数据

 

在这里提供一个小程序，点击这里下载源代码，用于生成热点图，对于DEBUG方式会生成一些测试数据，对于RELEASE方式则从MONGODB读取数据

程序的界面如下：

生成的效果图如下：

观察热点图可以发现很多有趣的问题，可以帮助我们分析界面是否友好，以及改良策略。

在这里并没有提供前端脚本的实现和服务端的实现，因为都比较简单。抛砖引玉。