編輯導語：我們在高峰期使用地圖時會發現有些道路變成了紅色的，這就代表那條道路現在是擁堵的情況，這也是熱力圖的作用；本文作者分析了熱力圖在可視化設計中的應用，我們一起來學習一下。
假設今天在西湖玩了整整一天，在16點打算回家了，但是大家也都知道杭州的交通是非常擁堵的，不清楚這個點回去的路況是怎麼樣的？
這個時候就可以藉助系統自帶地圖上的熱力顯示，我們觀察西湖至時代廣場需要經過路段的顏色可以發現，中河高架中有一小段顯示黃色，復興大橋有一小段顯示紅色其餘為黃色，時代大道顯示黃色，彩虹快速路等其餘路段均顯示綠色。
通過顏色就可以了解到16:18分回家路上經過復興大橋以及前後路段比較擁堵，方便我們合理安排回家路線和時間。
這就是熱力圖在生活中最為常見的一次應用，地圖熱力圖通常通過獲取手機基站定位該區域某個時間內的用戶數量；用不同顏色區塊疊加到地圖上來反應用戶數量在某個時刻的反映，幫助解決人們日常出行道路選擇等問題。
此外，熱力圖還能幫助我們解決很多問題，本文想和大家討論下熱力圖在可視化設計中的應用
一、什麼是熱力圖
首先我們需要對熱力圖做一個定義，熱力圖是數據在頁面上密度、分布以及變化的體現，通過選擇不同的顏色來對應不同的數據區間；將數據量大小轉化成顏色差異，圖形化表達了業務場景下的數據差異，幫助用戶了解真實的數據量分布情況和規律，為用戶決策提供數據依據。
1. 頁面
首先我們需要討論什麼樣的頁面可以被熱力圖所表達？
既然熱力圖是數據在頁面上的體現，那麼頁面必須是一組數據集合的反映，才能被熱力圖圖形化表達，像是設置頁、表單填寫頁作為一個功能入口的頁面是無法用熱力圖表達的；而「從西湖回時代廣場」路線所在頁面是反映了16:18分瞬時不同地區人流量的一組數據，就可以通過熱力圖來表達。
因此我們可以認為只有當頁面反映了一個時間內的一組數據集合時，才能被熱力圖表達。
2. 密度
熱力圖是數據在頁面上密度的體現，什麼是密度呢？
密度是用來衡量頁面上單個位置的數據量，通過設置不同的顏色來對應不同數據量的數據，幫助用戶直觀讀取某個位置的數據量。
像「從西湖回到時代廣場」頁面上這條路線，預設了紅、黃、綠三種顏色，分別對應了不同量級的人流量；假設紅顏色對應的數據區間是500-1000，黃色對應100-500，綠色對應0-100，那麼A這個位置顯示紅色就表達了16:18分A位置有500-1000人。
3. 分布
熱力圖是數據在頁面上分布的體現，怎麼樣來體現分布呢？
我們已知可以用「密度」來描述單個位置的數據量，當掌握不同位置的數據量後，就能描述整個頁面的數據分布情況；因此，分布是用來描述頁面上不同位置的數據量的對比差異的
在「從西湖回到時代廣場」頁面上這條路線上，已知A、B、C、D四個不同位置的數據量區間，就能了解頁面上這條路線的人流量分布情況，A>B>C=D。
4. 變化
變化可以分成兩種，一種是靜態的變化，即在同一時刻位置1到位置2的數據變化；另一種是動態的變化，即同一位置在不同時刻的數據變化。
靜態的變化，當我們已知某一時刻，不同位置的數據量「分布」，就能通過「分布」了解到的數據量差異來描述不同位置的數據變化；在「從西湖回到時代廣場」頁面上這條路線上，當了解到人流量的分布後，就可以描述出人流量從C點到A點是增加的，A點到B點再到D點是不斷減少的。
動態變化描述的是相同位置不同時刻下的變化，在「從西湖回到時代廣場」頁面上這條路線上，A位置在16:18分這個時刻和22:52分這個時刻的人流量是不同的；如果我們將A位置一整天不同時刻的人流量合併在同一個頁面上，並隨著時間變化觀察不同時刻的數據量，得到的動圖就是動態的變化過程。
從「密度」、「分布」和「變化」的定義中，我們也可以發現這3者是具有遞進關係的，我們用「密度」來描述單個位置的數據量；當掌握不同位置的數據量後，就能表達數據量的「分布」；當掌握整個頁面數據量的分布後，就能發現數據量的「變化」。
二、熱力圖的應用價值
了解完熱力圖的定義後，我們來一起了解下熱力圖在可視化設計中的實際應用。
1. 輔助決策
文章開頭的「從西湖回家的」案例，就是一個非常典型的「熱力圖」輔助決策的應用，那麼為什麼熱力圖可以幫助我們輔助決策呢？
因為在我們面臨決策困境時，熱力圖可以非常直觀地描述我們面對的數據現象。
熱力圖通過在頁面上展示不同的顏色來描述不同的數據量，直觀地告訴了用戶，最大值出現在頁面的哪個位置，最小值出現在頁面的哪個位置，不同位置之間存在著怎麼樣的數據變化；而用戶掌握了所面對問題的數據全貌後，可以依據數據做出合理的決策。
案例：
我們要在某個頁面上投放廣告，整個頁面有導航欄、側邊導航欄、篩選查詢區域和數據表格區域4個部分；並提供了3個廣告位分別是廣告A：頂部廣告位、廣告B：導航廣告位、廣告C。
現在要求選擇「點擊次數多」的廣告位進行投放，從常規的認知上拍腦袋認為，頂部和導航區域曝光多點擊次數也會高，那麼真的是這樣的嗎？
這裡我們就可以通過熱力圖來進行輔助決策，隨機挑選數量相同的3批登陸用戶，在相同時間內，每批用戶投放一個廣告位，統計不同廣告位的點擊次數；並用熱力圖表達後發現，用戶點擊量最多的位置是廣告位C。
因為該產品的用戶大部分都是老用戶，已經對產品產生了過濾現象，每次登陸產品直奔篩選區域進行操作查詢其想要的數據，在視覺上早已形成對頂部廣告和導航廣告的過濾行為。
所以當我們面臨決策困境時，不知道怎麼做出決策，不知道做出的決策是否正確的時候，就可以通過熱力圖所描述的數據來輔助決策。
2.提示預警
熱力圖還被應用到需要提示預警的場景，這是利用了視覺對於不同顏色的感受不同。
想一下提到紅黃綠的時候，我們能聯想到什麼，紅綠燈以及各種交通標識，進而產生了「紅色代表禁止、危險，黃色代表警示、緩慢，綠色代表允許、暢通」這樣的認識。
而熱力圖剛好通過顏色來表示不同的數據區間，我們可以將特殊的顏色對應上需要預警的數據區間，一旦數據量達到該數據區間，熱力圖展示該顏色，用戶一看到這個顏色就知道當前數據超過預警值了。
案例：
現在21:24分我要從家裡出發橫跨杭州市區去「臨平」，但是我擔心可能在晚間下班會有高峰擁堵的現象，如果出現了擁堵，我就需要暫緩出行。
假設我們認為道路上人流量超過100是繁忙路段，超過500是擁堵路段。
那麼我們可以設置當人流量在100-500的路段展示黃色，500-1000的路段展示紅色；將21:24分杭州的人流量數據組繪製成熱力圖，呈黃色和紅色的路段區域非常明顯地向我警示在當前這些路段是擁堵繁忙的，那麼我就可以推遲我的出行時間。
三、總結
熱力圖是在可視化設計中非常常見的一種圖表，描述了數據組在頁面上密度，分布以及變化；我們可以通過不同的顏色來對應不同的數據區間，直觀地呈現數據量、清晰地描述數據組的情況，幫助用戶掌握數據現象，起到輔助決策和提示預警的作用。
本文由 @晌午 原創發布於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議