如果我們記錄用戶的點擊或者鼠標的移動，并且繪制成熱點圖，生成的結果可以幫助我們分析和改良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讀取數據

程序的界面如下：

生成的效果圖如下：

觀察熱點圖可以發現很多有趣的問題，可以幫助我們分析界面是否友好，以及改良策略。

在這里并沒有提供前端腳本的實現和服務端的實現，因為都比較簡單。拋磚引玉。

轉載于:https://www.cnblogs.com/lovecindywang/archive/2011/01/28/1947104.html

總結

以上是生活随笔為你收集整理的有关热点图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。