最簡單的做法，是直接把滑鼠點選的位置在圖上標出來，比如像下圖這樣：

(圖1)

上圖的每一個小叉代表一次點選（為簡單起見，這兒所有的小叉都是一種顏色，事實上，可以用不同的顏色來表示不同型別的點選，比如點在超連結上的小叉畫成紅色，點在非超連結上的小叉畫成藍色），從圖上可以大致看出來頁面上哪幾個區域的點選比較密集。但很多時侯，我們其實並不想精確地瞭解使用者具體是點在哪個畫素上，——很多時候，使用者是點在這個畫素上，還是點在右邊相鄰的畫素上，並沒有什麼區別，我們想知道的，只是一個區域內的總的點選情況，或者說使用者對這個頁面上各個區域的興趣情況。這個時候，熱區圖（或叫熱力圖）就可以派上用場了。

熱區圖的繪製不復雜，有多種不同的實現，下面介紹一下我的一些實踐。

一、基本思路

色盤

熱區圖上最“冷”的部分到最“熱”的部分應該是什麼顏色？通常我們會預先定義好若干種顏色（比如100種、256種），存放在一個數組中，最冷的部分取第一個顏色（索引為0），次冷的取第二個顏色，直到最熱的部分，取最後一個顏色。這個陣列即是色盤。

熱區圖中比較常見的色盤是從藍色（最冷）取到紅色（最熱）。網頁中我們通常用 RGB 色彩，這兒也可以使用 RGB，不過使用 HSL 色彩表示方法似乎更方便，只要將 H 從 240 取到 0 即可。

(圖2)

當然，不同風格的熱區圖可以使用不同的色盤，除了色彩外，還可以加入一些透明度的變化，比如很冷的地方除了色彩偏藍外，還可以讓它更透明。

對映

我們所能得到的資訊是使用者的點選座標記錄。上面提到，我們真正想了解的並不是使用者具體點在了哪個畫素上，而是頁面上哪個區域更熱或更冷。當我們知道使用者在位置 (x, y) 點選了一次時，我們會合理地認為，使用者感興趣的並不是 (x, y) 這一點，而是包含這一點的一個小區域，比如 (x + 1, y) 這個點很有可能也是在使用者感興趣的區域之內。

那麼問題就是，如何把使用者的一次點選對映到熱區圖上？或者更詳細一點：

問題一、我們如何從使用者點選的位置座標推測出使用者感興趣的區域？
問題二、這個區域內，使用者的興趣程度是如何變化的（或者沒有變化，處處相等）？

這兩個問題是如何繪製熱區圖的關鍵，不同的回答對應著不同的熱區圖實現。很遺憾，這兩個問題都很難回答。但是，我們也可以做一些假設、簡化，然後嘗試根據使用者的點選座標記錄，還原出使用者對頁面各部分的感興趣程度，並據此畫出熱區圖來。

比如，對於第一個問題，我們可以簡單地假設：如果使用者在位置 (x, y) 有一次點選，那麼我們認為這個使用者對頁面上以點 (x, y) 為圓心、r 為半徑的一個圓形區域感興趣。這個 r 可以是 10px 或其它你認為比較合理的值。

接著，對於第二個問題，我們也可以簡單地假設：使用者的興趣值在圓心 (x, y) 處最大，比如值為 r，向外線性遞減，離圓心每遠一畫素興趣值降低 1 ，在圓的邊緣處興趣降為 0。

需要注意的是，上面兩個方案僅僅是一種簡化的假設，並不一定是真實的使用者興趣的情況，這麼假設主要的是為了方便處理。但只要我們的假設有一定合理性，我們也能得到一些具有參考價值的結果。

讓我們來看一看，在這樣的假設之下，我們能得到什麼樣的圖。程式設計處理的過程這兒就略去了，最後的結果如下：

(圖3)

這樣，一個常見的熱區圖就完成了。

如果我們把它畫成三維圖形，大致是這個樣子：

(圖4)

二、問題及更多嘗試

上面的熱區圖已經基本可以使用了，不過，我們應該清楚，這個熱區圖的繪製是基於一定的假設的，比如我們假設使用者的興趣在圓心處為 r，向外線性遞減，每過一個畫素減一。或者直觀一點，使用者的興趣變化如下圖所示：

(圖5)

我們應該清楚，這個假設不一定與真實情況相符合，只是我們為了便於處理而作的假設。如果我們改變一下這個變化的斜率會怎樣呢？比如變成下面這樣：

(圖6)

即我們把興趣的半徑加大一倍，同時變化的斜率減小為原來的一半。在這樣的條件下，我們畫出來的熱區圖如下所示：

(圖7)

可以看到，與原來的圖形非常相似，但變化邊緣柔和了很多。

類似地，我們也可以把這個變化曲線變為其它形狀，比如下面這樣：

(圖8)

這時，熱區圖將變成這樣：

(圖9)

或者，我們來一個大點的改變，對上面 (圖3) 的每個畫素的值取對數，將得到如下圖形：

(圖10)

可以看到，僅僅是對一個假設的改變，我們也能得出很多種不同的熱區圖。究竟哪一種更能反映真實的使用者興趣？我們不得而知。

三、更多思考

上面我們改變的都只是對問題二的假設，對於問題一，我們的假設一直是：使用者的興趣區域為以點選位置為圓心的一個圓。但這個假設是否合理呢？

我們來看一個真實的截圖：

(圖11)

這是某個頁面上圖片輪播廣告右下角的熱區圖。從圖上我們可以看到，右下角頁碼的部分非常的熱，圖片區域本身則好像比較冷。但進一步的統計卻告訴我們，點在圖片上的點選比點選右下角翻頁頁碼上的點選要多很多。

為什麼圖片區域的點選更多，但看起來卻比較冷，翻頁頁碼的點選更少，但看起來卻更熱呢？問題就出在我們對問題一的假設上，我們假設使用者的興趣區域與頁面上的元素無關，無論使用者點在一個圖片上還是一個超連結上，使用者的興趣區域都是一個大小相同的小圓圈。這樣，對於一個圖片而言，雖然對它感興趣的人更多，它上面的點選也更多，但由於它的面積大，平均下來顯得不那麼熱；對於一個翻頁元件而言，雖然對它感興趣的人少一些，點選也少一些，但由於它的面積小，在它上面的點選非常集中，於是它這兒反倒顯得很熱。

所以，更合理的熱區圖，不僅要考慮使用者點選的位置，還要考慮使用者所點選的元素是什麼，是一個圖片，還是一個連結？或者是一個 Flash ？前端埋點程式碼不僅要記錄下使用者滑鼠的座標，還要記錄下當前被點選元素的位置以及尺寸。而對問題一的回答，也不應該只是簡單地假設使用者的興趣區域是一個個的小圓圈，使用者的興趣區域應該是與被點選元素的型別以及尺寸有關的一個形狀。

問題還沒結束。如果我們認為，使用者點選了頁面上一張圖片，表示他對這一整張圖片都有興趣，也即使用者的興趣區域為這個圖片所在的區域，那我們馬上又面臨如何回答問題二：使用者對這個圖片的興趣是處處相同的還是對他所點選的那個位置附近興趣更大一些？如果是後者，興趣程度又是如何變化的？

這些都不是能很容易回答的問題，我們只有通過不斷地試驗來試圖作出一些假設，然後再在實踐中不斷地驗證我們的假設。

注：
1、本文中用到的點選資料是隨機生成的模擬資料，你可以點選這兒下載。
2、本文中的二維熱區圖是用 Python + PIL 生成的，3d 熱區圖及曲線圖是用 Matplotlib 繪製的。