Microsoft Clarity 热度地图怎么看？一文读懂滚动图和注意力图

给网站装上 Microsoft Clarity 之后，我第一次打开 热度地图（Heatmaps） 时其实是懵的：滚动图里一列列百分比，注意力图里又是时间又是百分比，中文翻译还有点绕，比如“% 访客光临”，看字面意思几乎会理解反。

这篇文章就把我踩过的坑整理一下，重点讲清楚热度地图里最常用、也最容易看错的两张图：

滚动图：有多少人到过这里？

注意力图：大家在这里平均停了多久？

记住这两句话，后面的内容都是在展开它们。

先建立一个概念：把页面当成一张长纸

不管是滚动图还是注意力图，Clarity 都把整个页面看成一张从上到下的长纸：

• 页面最顶部是 0%
• 页面最底部是 100%
• 中间的 50%，就是整张纸一半高度的位置

这里的百分比只表示页面上的位置，不是阅读进度，也不是停留时间。这一点很重要，后面很多误解都是从这里开始的。

一、滚动图：内容有没有被“看到”

滚动图（Scroll map）回答的问题很简单：页面上的某个位置，有多少次访问到达过？

在 Clarity 后台点击顶部的 热度地图，再切换到 滚动 视图，就能看到下面这样的页面。这是我博客上一篇文章的真实数据：

左侧的“滚动数据”有三列：

最容易看错的一列：“% 访客光临”

这一列的英文原文是 % drop off，意思是“流失比例”。中文翻译成“访客光临”，很容易让人以为是“有多少人来过”，其实恰好相反：它表示有多少访问没能到达这里。

所以第二列的比例加上第三列，正好是 100%。

怎么读一行数据

比如这一行：

50% ｜ 4（80%）｜ 20%

翻译成人话就是：有 80% 的访问到过页面一半的位置，另外 20% 没到过。

注意，它不代表：

• 80% 的人停在了这里；
• 20% 的人正好在这里离开。

它只说明“到没到过”，不说明“停在哪”。

怎么看相邻几行的变化

单看一行意义不大，真正有用的是看哪里掉得多。假设一共只有 5 次页面浏览：

可以这样理解：

• 5 次访问都到过 10% 的位置，其中 1 次没有继续往下到 15%；
• 到过 15% 的这 4 次访问，全部都看到了至少 55%；
• 在 55% 到 60% 之间，又有 1 次没继续往下。

如果某两行之间的比例突然大幅下降，说明这一段之后很多人就不往下看了。这时候就值得回到页面上看看：是不是这里内容太长、太无聊，或者用户已经找到想要的东西了？

不过要提醒一句：滚动图只告诉你“到达深度”，不告诉你“为什么离开”。 原因要结合会话录制去看。

那条虚线：“平均折叠数”

在滚动图上，你还会看到一条虚线，旁边写着 “平均折叠数”。这个翻译也比较费解，它的英文是 Average fold，理解成 “平均首屏底线” 会直观很多。

它表示：用户刚打开页面、还没开始滚动时，平均能看到哪里。

• 虚线上方：一打开页面通常就能看到的内容，也就是“首屏”；
• 虚线下方：通常需要往下滑才能看到的内容。

因为每个人的屏幕和浏览器窗口高度都不一样，所以这里显示的是一个平均位置。它不是用户平均滚动到的位置，也不是平均离开的位置。

还有一点容易混淆：页面的前 5%、前 10% 并不等于整个首屏。 如果页面很长，首屏可能同时包含好几个 5% 的区域。

二、注意力图：大家在哪里停留得最久

注意力图（Attention map）回答的是另一个问题：页面上的某一段区域，平均被停留了多长时间？

在热度地图顶部切换到 注意 视图，就能看到同一篇文章的注意力图：

左侧的“注意数据”也是三列：

怎么读一行数据

比如这一行：

40%–45% ｜ 00:01:10 ｜ 28.62%

意思是：页面 40% 到 45% 这一段，平均停留了 70 秒，大约占整个会话平均时长的 28.62%。

这里有三个常见误读，一定要避开：

• 不是“用了 70 秒才滚到这里”。 它说的是在这里停了多久，而不是花多久到达这里。
• 不是每个人都停了 70 秒。 这是所有访问汇总后的平均值。
• 28.62% 是时间比例。 它不是用户比例，也不是流失比例。

第三列可以用一个简单的例子理解：假设整体平均会话时长是 100 秒，某一段区域平均用时 20 秒，那么这一段的“会话长度百分比”就是 20%。这个例子只是为了说明计算方式，不是真实数据。

颜色怎么看

注意力图是用颜色来直观展示的：

• 红色、橙色等暖色：停留时间较长；
• 蓝色、紫色等冷色：停留时间较短。

一眼扫过去，哪里红、哪里蓝，就能大概知道用户的时间花在了哪里。

但要注意：注意力图不是眼球追踪。 停留时间长，可能是在认真阅读、在思考，也可能只是把页面放着去干别的事了。所以“红色”不等于“用户喜欢”，最好再用会话录制确认一下。

另外，一个屏幕通常会同时显示好几段页面区域，官方也没有详细说明时间是怎么分配到每一段的。所以不要把每一行的数值，机械地理解成“这一段文字被完整看了多少秒”。

三、看热度地图时，最容易犯的 7 个错误

把我自己踩过的坑总结一下：

1. 到过，不等于认真看过。 用户可能飞快地划过去，也会被算作“到达”。
2. 停留久，不一定代表内容好。 也可能是看不懂、卡住了，或者人走开了。
3. 不要把各段的平均用时加起来，推算用户多久到达某处。 这些是各区域的平均值，不是某个人的连续时间线，用户还可能跳着看、往回翻。
4. 想知道某个用户第几秒看到了哪里，要看会话录制。 注意力图本身给不了这个答案。
5. 样本太少时，平均值很容易被个别数据带偏。 一个人停留了 10 分钟，就能把整段区域变红。几次浏览不足以代表所有用户。
6. 页面浏览量不等于用户数。 同一个人刷新几次，就会被算成几次浏览。
7. 顶部到达率高、停留时间短，并不矛盾。 所有人都会经过顶部，但不代表都会在顶部停很久。

四、实战：用热度地图分析转化

说了这么多，热度地图最终要用来解决实际问题。以我的一个场景为例：页面目标是引导用户进入工具，给照片添加水印并下载。

这时可以按这个顺序来排查：

滚动图（用户能不能看到按钮）→ 注意力图（按钮附近有没有人停留）→ 点击图（有没有人点）→ 会话录制和事件（点了之后有没有完成下载）

举个例子：

• 如果滚动图显示，只有 30% 的访问到了按钮位置，那问题可能是按钮放得太靠下，可以考虑往上移，或者在首屏再放一个入口；
• 如果按钮位置的到达率很高，但注意力图是一片蓝色，说明大家只是划过去了，可能需要让按钮更醒目，或者把前面的文案写得更有吸引力；
• 如果停留和点击都不错，但最终下载的人很少，那问题就不在落地页了，要去看工具内部的流程哪里卡住了。

最后再强调一点：按钮在首屏，只说明用户“有机会看到”，不代表用户真的注意到了；用户进入了工具，也不代表完成了下载。 每一步都需要单独验证，热度地图只是其中的第一环。

总结

一句话记住 Clarity 热度地图的两张核心图：

• 滚动图看的是“到没到”：有多少比例的访问到过页面的某个位置，“% 访客光临”其实是“没到过的比例”；
• 注意力图看的是“停多久”：某一段区域平均停留了多长时间，颜色越暖停得越久；
• 平均折叠数就是“平均首屏底线”，虚线以上是一打开就能看到的内容。

热度地图能帮你快速发现“问题可能出在哪”，但要知道“为什么”，还得配合点击图、会话录制和转化事件一起看。

官方参考

• Microsoft Clarity：Scroll maps（滚动图与 Average fold）
• Microsoft Clarity：Attention maps（注意力图）