skyoo61

Heatmap熱圖，可以非常直觀的呈現一些原本不易理解或表達的數據，比如密度、頻率、溫度等，改用區域和顏色這種更容易被人理解的方式來呈現。熱圖實際上是三維可視化的俯瞰效果。（顏色代表一個維度）。

我們對熱圖并不陌生，教科書里、天氣預報里的氣溫地圖是最典型的案例。

在用戶體驗制勝的微創新時代，熱圖在互聯網用戶行為分析上的應用也越來越被重視。常見的應用有：

鼠標點擊熱圖：

演示地址 http://js.clicki.cn/#/clicki/heatmap   熱圖應用

屏幕滾動熱圖（scroll map）：

眼動/注意力熱圖（Attention heatmap）：

用戶地區熱圖

熱圖的優缺點：

優點：

1. 與實景結合，數據表達更直觀

原始數據：在一個1024*800的網頁上的點擊數據：{x:420,y:302}的信息可讀性，跟下圖相比顯然不可同日而語。

2. 用形狀和色彩傳遞信息，更易理解

人對事物的認知是感性的基于某種基模的，人對形、色、聲、味、溫度、壓力…等可直接感知內容的理解要比數字容易的多，熱圖之所以為“熱圖”是用人們熟知的火焰色彩傳達溫度感，借助形、色和溫度三種基模傳遞原本難以理解的數量信息，非常之給力。

3. 柔化視覺效果更好，對非精確信息表達更合理

攝影愛好者一定知道柔光攝影技巧，照出來的照片更漂亮。

有時候我們更希望得到數據的平均值或近似值，而不是精確值，比如我們點擊網頁上的內容時并不是精確到某一像素，而是一個區域。因此模糊處理后可以更合理的解釋用戶比較喜歡點擊的區域。

 

缺點：

1. 柔化效果，對精確信息表達不準確

優點在某些時候也是缺點，當我們分析作弊時，精確點更具說服力：

看上面兩張圖，第一張圖并不明顯，第二張圖就可以看出問題了，428個點擊，平均分布在10個位置，偏移量不超過5像素，顯然不是人干的。

 

2. 色彩傳遞感性化信息，不容易分辨具體值

還是這幅圖，單從熱圖上看，只有9個圓點，而實際上有卻有1400次點擊。從熱圖上無法分辨出每個圓點涵蓋了多少次點擊，點擊數等量增減，熱圖完全一樣。

 

任何一種可視化手段都不是完美的，更不是萬能的，所以我們在利用可視化技術時，應該根據具體需求做取舍。

熱圖的實際應用：

國外的熱圖產品比較有代表性的：

CrazyEgg：http://www.crazyegg.com

是我所知道最早的公開使用熱圖工具，有熱圖、點圖、鏈接點擊圖。點圖用flash實現，功能強大支持各種條件篩選過濾，而且非常好用?？上鞘召M的，最低每月9美金，只支持10000pv和10個頁面。

 

ClickTale：http://www.clicktale.com

Clicktale是我所知道最早實現用戶鼠標軌跡監測的產品。除點擊熱圖外，clicktale還支持鼠標軌跡重現、鼠標移動熱圖、scrollmap、表單分析等等深度用戶行為分析功能。也是收費的，最低收費99美元/月。

 

國內也有很多產品支持熱圖：

Clicki:http://www.clicki.cn

Clicki是我所知道最早放出熱圖功能的產品，早在2007年就已經有案例，但是當時服務并不穩定，用的人不多。去年Clicki重新改版，熱圖功能非常給力，使用canvas實現，支持全站熱圖，熱圖實時更新，支持多條件過濾。目前功能免費，但需要邀請碼才能注冊。

 

百度統計：tongji.baidu.com

百度統計去年上線了熱圖功能，熱圖用flash實現，支持區域框選和條件過濾。功能免費，需要預先指定要統計的頁面，數據延遲一天。

 

Cnzz也在今年放出熱圖功能，功能跟百度基本一致。

量子統計：http://lz.taobao.com/

量子統計的熱圖功能針對性更強，主要針對淘寶店鋪，量子在淘寶上是收費的，我沒有開通，不太了解具體功能。

熱圖的技術原理：

火丁筆記這篇文章非常清楚的解釋了熱圖的技術原理：http://huoding.com/2011/01/04/39

Oldj這篇文章講解了熱圖渲染的原理：http://oldj.net/article/page-heat-map/

綜合這兩篇文章，基本上能夠實現一個簡單的熱圖功能了。但要實現數據關聯和動態更新，還需要更多的工作。

 

熱圖的開源工具：

Clickheat是我最早了解到的點擊統計開源項目，是一個php的開源代碼，用php渲染圖片，呈現熱圖，熱點太小，呈現效果一般，可以自己改一下，實現更好的效果。

 

phpHeatmap是2006年我做Clicki的熱圖時，實現的一套基于php的熱圖代碼，當時看到Crazyegg，查了一些資料后自己嘗試實現的，后來博客掛了一直沒再更新。這次整理資料重新放到網上，有興趣的同學可以參考。

 

Heatmapjs是一個基于js+html5的熱圖開源項目，Clicki的熱圖就是基于這個項目。功能完善，使用簡單。

 

HeatCanvas是國人開發的一款基于js+canvas的熱圖項目。

 

熱圖技術的更多應用：

 

了解了熱圖的原理和優點，我們可以大膽應用，我舉幾個例子，拋磚引玉：

 

足球比賽中，可以用來呈現隊員在場上的活動熱圖：

超市或商店里呈現顧客的移動和駐足的熱圖，用來優化商品和貨架布局。

統計房屋租金價格，與地圖結合看租房熱度：

 

統計程序中的字幕頻度，用鍵盤和熱圖呈現，來看不同編程語言的常用字符：