怎么看热力图：点击、狂点和滚动到达

热力图把数字变成颜色，也就很容易对一个红点读出太多意思。本文先讲看任何热力图都适用的规则，再逐一讲网站热力图（点击、狂点、滚动到达、元素），以及改页面之前要做的检查。

看任何热力图都适用的规则

热力图用颜色表示数量。不管是相关性矩阵还是网页点击图，规则都一样：

1. 先看图例。 颜色通常是相对的：红色表示「这张图里最多」，而不是某个固定数值。颜色一样的两张热力图，总量可能差很多。
2. 找到样本量。 背后有多少次访问、多少行数据、多少人？30 次点击形成的热点只是个案。
3. 看规律，不看像素。 聚集、空白和渐变，比单个最热的点更重要。
4. 同类比较。 同样的日期范围、同样的设备、同样的人群。

对数据图表来说，对行排序和聚类能让规律显现出来。对网站热力图来说，页面布局本身就是坐标轴，所以下一节更重要。

网站热力图的类型

不同类型的网站热力图回答不同的问题：

• 点击热力图：人们在哪里点击或点按。留意那些不是链接却被点的地方（大家以为它能点），以及没人点的重要链接。
• 狂点：在同一处快速连点。这是挫败感的强信号：某个东西看起来能点却不能点，或者响应太慢。
• 滚动到达：到达每个深度的访问占比。能看出注意力在哪里下降，关键内容是不是放在了那之下。
• 元素排行：点击最多的控件，以及占比和访客数。比颜色更好比较。

下表列出每种类型回答什么问题，以及常见的坑。

始终记下设备和热力图背后的会话数。

看滚动到达

滚动到达从上往下读：每一行是至少到达该深度的访问占比。示例里，61% 的访问到达页面中部，但只有 38% 到达四分之三处的价格表。关键内容之前掉得这么陡，说明可以把它往上挪，或者给人继续往下看的理由。

没有通用的「好」曲线。长文章会逐渐流失读者；落地页常在首屏就流失一大块。拿同一个页面、同一种设备，比较改动前后。

下结论之前的检查

1. 按设备拆开。 桌面端和移动端布局不同，混在一起的热力图等于把两个页面叠成一个。
2. 确认布局一致。 如果日期范围内页面改过，点击会落在和叠加页面对不上的位置。
3. 注意模板合并。 /product/* 的热力图合并了很多页面，一个热点可能只来自其中一个商品。
4. 看样本量。 记下热力图背后的会话数和点击数。
5. 留意动态元素。 菜单、轮播和弹窗会移动，点在它们上面的位置可能显得很奇怪。

从热力图到改动

热力图告诉你哪里，很少告诉你为什么。把每个观察变成假设，再到别处验证：如果价格页链接很少被点，从价格页到注册的漏斗能看出点了的人有没有继续转化。如果一篇文章很早就流失读者，拿它和内容效果指标对照。然后只改一处，改完后用同样的设备和同样长度的时间范围再比较热力图。

TapCub 里的热力图

TapCub 的热力图基于自动采集，需要开启它（Pro 及以上套餐）。页面按路径模板合并，可以选择设备：全部、桌面、手机或平板。标签有点击、狂点、滚动到达和元素，日期范围最长 92 天，可按视口宽度筛选，也可以叠加实时页面（见文档热力图）。

页面列表显示点击、狂点、会话、离开时的平均最大滚动深度，以及带文档坐标的点击占比。狂点指 300 毫秒、50 像素内的第三次点击。在自动采集里开启滚动深度之前，滚动到达为空；元素文本默认不采集。密码框、标记 data-tc-ignore 的内容和客服挂件从不采集。热力图不保存页面截图，所以叠加需要一个仍能打开的网址。更多见热力图和参与度指标。

常见问题

热力图怎么看？

先看图例和背后的数据量，再找聚集和空白，而不是盯着单个热点，并且只做同类比较。

网站热力图的颜色代表什么？

相对密度：颜色越暖，表示和同一张图的其他地方相比，点击越多，或到达该处的访问越多。

什么是狂点？

在同一处快速连续点击，说明某个东西的反应不符合预期。在 TapCub 里，是 300 毫秒、50 像素内的第三次点击。

热力图需要多少会话？

要多到按设备拆分或换个日期范围后规律依然成立。一个页面每种设备有几百个会话，是比较合理的下限。

桌面端和移动端要分开看吗？

要。布局不同，合在一起的热力图会把不同位置的点击混在一起。

另见：UX 审计。