熱圖（heat map），也稱熱力圖，是以特殊高亮的形式顯示用戶頁(yè)面點(diǎn)擊位置或用戶所在頁(yè)面位置的圖示，借助熱圖，可以直觀地觀察到用戶的總體訪問(wèn)情況和點(diǎn)擊偏好。

一圖勝千言！產(chǎn)品網(wǎng)站經(jīng)常使用各式圖表來(lái)提取或者表達(dá)信息，其中熱圖是常見(jiàn)的一種，尤其是在站點(diǎn)管理、界面優(yōu)化、等場(chǎng)合，熱力圖更是被們廣泛應(yīng)用，那么，我們?cè)撊绾谓柚鸁崃D來(lái)優(yōu)化產(chǎn)品網(wǎng)站呢？今天，我們就來(lái)一探究竟。

一、3種不同的熱圖及原理

目前常見(jiàn)的熱圖主要有3種：基于鼠標(biāo)點(diǎn)擊位置的熱圖、基于鼠標(biāo)移動(dòng)軌跡的熱圖和基于內(nèi)容點(diǎn)擊的熱圖。

三種熱圖的原理、外觀各異，適用的場(chǎng)景各有不同。

1、基于鼠標(biāo)點(diǎn)擊位置的熱圖

如百度統(tǒng)計(jì)的頁(yè)面點(diǎn)擊圖，記錄用戶點(diǎn)擊在屏幕解析度的位置，但是基于鼠標(biāo)點(diǎn)擊位置的熱圖不會(huì)追蹤內(nèi)容的變化而變化，只是記錄相對(duì)時(shí)間內(nèi)鼠標(biāo)點(diǎn)擊的絕對(duì)位置。

2、基于鼠標(biāo)移動(dòng)軌跡的熱圖

如國(guó)外的MoseStats、Mouseflow等，記錄用戶鼠標(biāo)移動(dòng)、停留等行為，熱圖多為軌跡形式。同樣，基于鼠標(biāo)移動(dòng)軌跡熱圖不會(huì)追蹤內(nèi)容的變化而變化，只是記錄相對(duì)時(shí)間內(nèi)鼠標(biāo)移動(dòng)的的絕對(duì)位置。

3、基于內(nèi)容點(diǎn)擊的熱圖

如GrwoingIO熱圖，記錄用戶在網(wǎng)頁(yè)內(nèi)容上的點(diǎn)擊，自動(dòng)過(guò)濾掉頁(yè)面空白處（沒(méi)有內(nèi)容和鏈接）的無(wú)效點(diǎn)擊。基于內(nèi)容點(diǎn)擊的熱圖，最大特點(diǎn)是熱圖追蹤內(nèi)容變化而變化，記錄用戶相對(duì)時(shí)間內(nèi)對(duì)內(nèi)容的點(diǎn)擊偏好。

二、產(chǎn)品優(yōu)化和熱圖選擇

基于鼠標(biāo)點(diǎn)擊位置的熱圖和基于鼠標(biāo)移動(dòng)軌跡的熱圖，可以反映用戶在頁(yè)面位置上鼠標(biāo)的點(diǎn)擊、移動(dòng)和停留偏好，站長(zhǎng)管理員、產(chǎn)品經(jīng)理、設(shè)計(jì)師等可以借助其對(duì)用戶的訪問(wèn)偏好有一定的了解。

然而，當(dāng)產(chǎn)品經(jīng)理要開(kāi)始優(yōu)化產(chǎn)品設(shè)計(jì)時(shí)，前兩種基于位置的熱圖也常常帶來(lái)困惑。

一是密密麻麻的熱圖柔化了效果，對(duì)精確信息表達(dá)不充分，產(chǎn)品經(jīng)理很難抓住重點(diǎn)。

二是熱圖的高亮色彩傳遞的是感性化的信息，不容易分辨具體的數(shù)值。

三是相對(duì)時(shí)間內(nèi)，熱圖只記錄鼠標(biāo)在絕對(duì)位置上的點(diǎn)擊，無(wú)法追蹤內(nèi)容的變化。

更多時(shí)候，產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員更多關(guān)心的是用戶在不同內(nèi)容上（如每一篇文章、每一件商品、每一張圖片等等）的點(diǎn)擊偏好，然后才能有的放矢地進(jìn)行優(yōu)化。

而基于內(nèi)容點(diǎn)擊的熱圖收集的是用戶在不同內(nèi)容上的點(diǎn)擊情況，過(guò)濾掉了頁(yè)面空白處（沒(méi)有內(nèi)容和鏈接）的無(wú)效點(diǎn)擊，并且熱圖追蹤頁(yè)面內(nèi)容的變化而變化，可以適應(yīng)很多商業(yè)網(wǎng)站內(nèi)容頻繁更新的需要。

三、產(chǎn)品該如何優(yōu)化？

任何工具都應(yīng)該以提升工作效率為目標(biāo)，作為數(shù)據(jù)可視化的重要工具，熱圖應(yīng)該幫助產(chǎn)品經(jīng)理快速發(fā)現(xiàn)用戶行為規(guī)律，幫助產(chǎn)品經(jīng)理快速優(yōu)化和迭代產(chǎn)品。

基于強(qiáng)大的 無(wú)埋點(diǎn) 數(shù)據(jù)采集技術(shù)，GrowingIO熱圖清晰地展示用戶在頁(yè)面不同內(nèi)容上的點(diǎn)擊偏好，那么，產(chǎn)品經(jīng)理該如何用好這種強(qiáng)大的工具呢？

1、用戶 誤點(diǎn)擊 ，還是設(shè)計(jì)不合理？

某產(chǎn)品在官網(wǎng)詳細(xì)介紹了其核心功能，并在首頁(yè)設(shè)置了4個(gè)功能分類，很多訪問(wèn)用戶以為功能介紹可以點(diǎn)進(jìn)去，然后就不停地點(diǎn)擊，卻發(fā)現(xiàn)根本就沒(méi)反應(yīng)。

實(shí)際上，這4個(gè)功能介紹就未設(shè)置鏈接，產(chǎn)品一開(kāi)始認(rèn)為這是用戶 誤點(diǎn)擊 ，但是以 自定義分析 功能為例，查看詳細(xì)數(shù)據(jù)，發(fā)現(xiàn)工作日每天竟然有1K-2K的用戶點(diǎn)擊了該功能。

這樣的設(shè)計(jì)對(duì)用戶體驗(yàn)非常不友好，不但浪費(fèi)了用戶點(diǎn)擊，而且無(wú)形中降低了用戶的訪問(wèn)深度，產(chǎn)品經(jīng)理可以嘗試在該位置添加功能詳情的鏈接，以滿足用戶的好奇或者需求，同時(shí)提高用戶的訪問(wèn)深度。

2、毫厘必爭(zhēng)的網(wǎng)頁(yè)，如何優(yōu)化內(nèi)容？

對(duì)于流量巨大的網(wǎng)站（如電商網(wǎng)站、新聞資訊網(wǎng)站、門(mén)戶網(wǎng)站），網(wǎng)頁(yè)上一塊小小的區(qū)域也意味著巨大的點(diǎn)擊量和營(yíng)業(yè)收入。

熱力圖可以幫助產(chǎn)品經(jīng)理快速了解用戶的點(diǎn)擊偏好，然后根據(jù)訪問(wèn)點(diǎn)擊的多少，快速優(yōu)化內(nèi)容。

為了方便訪問(wèn)用戶快速找到內(nèi)容，某技術(shù)博客在網(wǎng)頁(yè)右側(cè)設(shè)置了 熱門(mén)文章 和 熱門(mén)標(biāo)簽 兩個(gè)欄目。觀察基于內(nèi)容的熱圖，卻發(fā)現(xiàn)下方的 熱門(mén)標(biāo)簽 獲得了比 熱門(mén)文章 更多的點(diǎn)擊，既然用戶對(duì)我們博客推薦的內(nèi)容不感興趣，我們是不是考慮優(yōu)化一下內(nèi)容推薦？

3、相同結(jié)構(gòu)的網(wǎng)頁(yè)，難道要一張一張分析？

現(xiàn)在的網(wǎng)站有大量相同結(jié)構(gòu)的頁(yè)面，如電商的商品頁(yè)、媒體資訊的文章頁(yè)、產(chǎn)品后臺(tái)等等。

以電商網(wǎng)站的商品頁(yè)為例，雖然商品詳情頁(yè)商品信息不一樣，但是都在相同的位置有商品照片、庫(kù)存情況、價(jià)格、商品規(guī)格參數(shù)、用戶評(píng)論、加入購(gòu)物車等等內(nèi)容。

通過(guò)路徑設(shè)置，將原本 ......blog/article_1 路徑下的熱圖通配為為 ......blog/* ，用 * 模糊匹配所有的博客文章，這樣，我們就能看到看到跨所有博客文章頁(yè)面的熱圖效果，通過(guò)這樣的便捷的頁(yè)面設(shè)置，產(chǎn)品經(jīng)理可以對(duì)大量相同結(jié)構(gòu)的頁(yè)面進(jìn)行快速的分析和優(yōu)化。

四、如何通過(guò)熱力圖分析網(wǎng)站

百度熱力圖相信很多站長(zhǎng)并不陌生，其強(qiáng)大的功能，不僅能夠幫助我們優(yōu)化和調(diào)整網(wǎng)頁(yè)設(shè)計(jì)提供科學(xué)依據(jù)，還可以動(dòng)態(tài)考量頁(yè)面調(diào)整前后的點(diǎn)擊效果，下面我們一起看下，如何通過(guò)熱力圖分析網(wǎng)站：

1、網(wǎng)站導(dǎo)航分析

例如：我們經(jīng)常看見(jiàn)，有些網(wǎng)站將公司介紹放在頻道第二欄，而有些是將公司產(chǎn)品放在頻道第二欄，到底哪種布局是正確的呢？

通過(guò)熱力圖，我們可以清晰的看到，哪些頻道用戶點(diǎn)擊較多即頻道的受眾程度。

通常，在前期頻道設(shè)計(jì)的時(shí)候，我們會(huì)依據(jù)關(guān)鍵詞的重要性，從左至右依次布局，也就是說(shuō)，靠首頁(yè)最近的放置最重要的關(guān)鍵詞。但是，無(wú)論什么網(wǎng)站，我們的布局肯定不是一成不變的。而在調(diào)整的過(guò)程中，我們就是依據(jù)用戶瀏覽行為，將用戶最關(guān)注的放在網(wǎng)站最重要的位置。

2、首頁(yè)核心位置的分析

一個(gè)優(yōu)秀的網(wǎng)站，必定是符合用戶瀏覽習(xí)慣的，可能我們?cè)诰W(wǎng)站優(yōu)化的過(guò)程中，會(huì)出現(xiàn)排名有了，但是跳出率卻很高的現(xiàn)象，有些是首頁(yè)跳出率高，有些是內(nèi)頁(yè)跳出率高，無(wú)論哪種，我們都可以從數(shù)據(jù)中找到原因。

如果是首頁(yè)呢？這是不是告訴我們，用戶在進(jìn)入首頁(yè)以后沒(méi)有找到自己需要的內(nèi)容？我們是否應(yīng)該將用戶最關(guān)心的內(nèi)容或產(chǎn)品，在首頁(yè)放在最核心位置？從而依次布局。

既然是數(shù)據(jù)分析，肯定是每個(gè)網(wǎng)站都有區(qū)別，但是其根本不會(huì)變，就是以提高用戶體驗(yàn)度為核心。

五、產(chǎn)品迭代，熱圖能幫的上什么忙？

埋點(diǎn) 是所有產(chǎn)品經(jīng)理的痛，從提需求、寫(xiě)代碼、返數(shù)據(jù)再到做分析，這是一個(gè)漫長(zhǎng)、繁瑣、低效的過(guò)程。

在強(qiáng)大的 無(wú)埋點(diǎn) 數(shù)據(jù)采集技術(shù)的基礎(chǔ)上，基于內(nèi)容點(diǎn)擊的熱圖可以直觀展示用戶在頁(yè)面上內(nèi)容的點(diǎn)擊偏好，讓產(chǎn)品經(jīng)理對(duì)用戶的行為規(guī)律一目了然。

在《精益》中有一個(gè)非常流行的概念 最小可行性產(chǎn)品(MVP)，強(qiáng)調(diào)通過(guò) 驗(yàn)證性學(xué)習(xí) 的方式來(lái)快速迭代產(chǎn)品，熱圖就是一個(gè)非常好的工具，產(chǎn)品經(jīng)理從熱圖中發(fā)現(xiàn)問(wèn)題、提出假設(shè)，然后快速實(shí)驗(yàn)來(lái)驗(yàn)證或者推翻我們的假設(shè)。

冰凍三次，非一日之寒。 在 idea-product-data 的不斷迭代中，熱圖應(yīng)該成為產(chǎn)品經(jīng)理的一種工作方式！

其間，熱力圖中越紅的地方就是用戶點(diǎn)擊越多的地方，也是大多數(shù)用戶最重視的內(nèi)容，此外，熱力點(diǎn)擊圖還有一個(gè)功用是 連接點(diǎn)擊圖 ，經(jīng)過(guò)這個(gè)功用，能夠看到咱們的頁(yè)面的連接在一定時(shí)間段的點(diǎn)擊量。

連接點(diǎn)擊圖首要是展示用戶對(duì)于連接的重視度，這么能夠從點(diǎn)擊圖中剖析，哪個(gè)節(jié)目用戶點(diǎn)擊率高，能夠思考把相應(yīng)的節(jié)目前移，這么才干更契合用戶體會(huì)。

當(dāng)然，熱力圖給我們的信息遠(yuǎn)遠(yuǎn)還不止這些，本文主要是引導(dǎo)SEO人員如何去進(jìn)行熱力圖的分析以及能夠認(rèn)識(shí)到數(shù)據(jù)分析的重要性。