微软 Clarity 热力图完全指南：从原理到 AI 洞察

1. 什么是热力图？

热力图（Heatmap）是一种数据聚合可视化工具。它把 Clarity 已经收集到的所有点击和滚动数据按页面位置叠加在一起，用”红 = 频繁，蓝 = 稀少”（或其他配色方案）的方式呈现，让你一眼看到用户行为热点。

Clarity 自动跟踪所有访客在手机、电脑、平板上的点击和滚动，并实时聚合生成热力图。这套数据帮你回答”用户在做什么”，而不是”有多少人来了”（后者是 Google Analytics 的事）。

2. 第一次打开 Heatmaps：零状态

第一次进入 Heatmaps 标签页时，看到的是”零状态”——还没有数据，需要先选一个页面：

这个页面包含两个入口：

输入 URL 之后会进入”添加群组页面”模式：

这个模式支持正则表达式，可以把一类 URL 一起加进来（比如 blog 类目下所有文章、product 详情页所有 SKU）。

3. 热力图的工作原理（数据如何产生）

Clarity 的热力图不依赖任何额外埋点，完全由 Clarity 自带的录屏脚本自动收集：

4. 5 种热力图类型：怎么选

打开任一热力图后，顶部工具栏有 3 个核心开关，加上细分选项总共 5 种热力图类型：

4.1 Click maps（点击图）

Click 图聚合所有点击位置，颜色越红 = 点击越多。Clarity 把点击分成 7 种类型帮你区分意图：

实战中 Rage clicks 和 Dead clicks 是最值得看的两个——它们直接暴露”用户想点什么但点不到”的问题。

4.2 Scroll maps（滚动图）

显示用户滚动到页面不同位置的百分比。冷色 = 到达的人少，暖色 = 到达的人多。帮你判断：

4.3 Area maps（区域图）

显示页面不同区域的点击密度（不是单点）。适合看模块级别（比如”产品特点区”vs”价格区”vs”FAQ 区”哪个被互动最多），而不只是个点。

4.4 Conversion maps（转化图）

把产生了转化（购买 / 注册 / 加购）的会话单独筛选出来，叠在热力图上。可以看到”最终转化的用户”都点了什么——这是最有商业价值的视图，因为其他点击图里充斥着无效点击。

4.5 Attention maps（注意力图）

综合停留时间 + 滚动深度 + 点击三维数据，告诉你用户在每个区域”花多少注意力”。比单纯的点击更准——比如一段没人点的文字，用户可能真的在读。

5. 关键功能：群组页面、筛选、细分

5.1 群组页面（Group of Pages）

当你想看”所有博客文章”或”所有产品详情页”的整体行为时，群组页面就派上用场了。Clarity 会把多 URL 的数据合并到同一张热力图上。常见场景：

URL 匹配支持正则和前缀两种模式，详细语法见官方文档。

5.2 筛选器与 Segments

顶部 Filters 按钮可以筛选：

组合筛选后保存为 Segment（细分），下次直接调出来。比如”美国移动端 Google 搜索流量在过去 7 天的行为”——就是一个 segment。

6. 切换截图：同一 URL 不同状态

很多 URL 在不同设备 / 不同 viewport / 不同状态下样子不同。Clarity 会自动抓取这些状态：

7. 对比模式：把两个版本摆在一起看

想看”新版本 vs 旧版本”、”美国 vs 中国”、”移动端 vs 桌面端”在同一页面上的热力图差异？Heatmaps Compare 就是干这个的。

用法：

注意限制：只有当两个 URL 都有 Clarity 跟踪代码时才能对比，且对比的只能是同一项目下的页面，不能跨项目对比。

8. AI 洞察：Copilot 直接读懂热力图

2025 年新功能：Heatmaps Insights，用 Microsoft 的 Copilot（生成式 AI）直接分析热力图，把数据变成人能读的结论。

使用方法：

Copilot 仅在安装了 Clarity 跟踪代码的页面上可用。如果某些页面没装，AI 洞察会跳过这些页。

9. 怎么用热力图提升转化率

热力图不是用来”看数据”的，是用来”找问题、改设计、验证效果”的。一个标准工作流：

10. 限制与 FAQ

11. 写在最后

Clarity 的热力图是 2025 年性价比最高的用户行为分析工具——免费、零流量上限、自动生成、5 种视图、AI 解读。它不能替代录屏、漏斗、Google Analytics，但作为”看用户行为”的起点，已经足够。

实际工作中，录屏 + 热力图 + 漏斗 = 完整的用户行为三位一体。三者结合使用，能让一个 5 人小团队的产品决策质量接近大厂的用户研究部门。