如果我們記錄用戶的點(diǎn)擊或者鼠標(biāo)的移動(dòng)，并且繪制成熱點(diǎn)圖，生成的結(jié)果可以幫助我們分析和改良UI。

用于分析網(wǎng)站UI友好性的點(diǎn)擊熱點(diǎn)圖可以這么來做：

最簡(jiǎn)單的方式是記錄頁(yè)面地址，鼠標(biāo)相當(dāng)于頁(yè)面左上角的X和Y。

然后從我們的網(wǎng)頁(yè)截圖，把熱點(diǎn)繪制在這個(gè)圖上。

但是這種熱點(diǎn)圖的缺點(diǎn)是不能考慮多種用戶狀態(tài)或者說頁(yè)面狀態(tài)給頁(yè)面帶來布局的變化。

改良方法是記錄頁(yè)面地址，頁(yè)面狀態(tài)（比如是否登錄），以及X和Y。

然后根據(jù)不同的狀態(tài)分別截取多張圖，為一個(gè)頁(yè)面生成一組熱點(diǎn)圖。

這種方式的缺點(diǎn)是不適合變化很多的頁(yè)面，或是隨著鼠標(biāo)的點(diǎn)擊變化的頁(yè)面，比如頁(yè)面的下拉或彈出層。

可以想到更合理的方式是，通過腳本為頁(yè)面上每一個(gè)需要跟蹤點(diǎn)擊的元素（或是沒有子元素的根元素）生成一個(gè)唯一的id（如果已有id了則使用原來的id）

生成id的方法如下：把元素的整個(gè)html（比如<div>你好</div>）進(jìn)行md5 hash

然后我們?cè)诿恳淮吸c(diǎn)擊的時(shí)候記錄id以及訪問量（當(dāng)然也可以為每一條記錄記錄詳細(xì)的時(shí)間，這樣可以按時(shí)間統(tǒng)計(jì)）

然后制作一個(gè)特殊的頁(yè)面，這個(gè)頁(yè)面已經(jīng)生成了所有元素id，使用腳本從后端讀取采集到的數(shù)據(jù)，根據(jù)id為元素渲染顏色

（比如50以下綠色，50-100黃色，100-200桔黃色，200以上紅色）也就是用腳本在實(shí)際的頁(yè)面上生成熱點(diǎn)圖

這樣直接觀察這個(gè)可交互的頁(yè)面就可以看到結(jié)果了

注意：

1） 熱點(diǎn)圖的數(shù)據(jù)可以只統(tǒng)計(jì)數(shù)量也可以為每一條數(shù)據(jù)記錄：IP/瀏覽器類型/用戶類型等等，這樣我們就可以按照不同的維度來分析

2） 在采集樣本的時(shí)候可以不用在所有的web服務(wù)器都收集，可以在負(fù)載均衡的部分服務(wù)器采集數(shù)據(jù)

?

在這里提供一個(gè)小程序，點(diǎn)擊這里下載源代碼，用于生成熱點(diǎn)圖，對(duì)于DEBUG方式會(huì)生成一些測(cè)試數(shù)據(jù)，對(duì)于RELEASE方式則從MONGODB讀取數(shù)據(jù)

程序的界面如下：

生成的效果圖如下：

觀察熱點(diǎn)圖可以發(fā)現(xiàn)很多有趣的問題，可以幫助我們分析界面是否友好，以及改良策略。

在這里并沒有提供前端腳本的實(shí)現(xiàn)和服務(wù)端的實(shí)現(xiàn)，因?yàn)槎急容^簡(jiǎn)單。拋磚引玉。

轉(zhuǎn)載于:https://www.cnblogs.com/lovecindywang/archive/2011/01/28/1947104.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。