Microsoft Clarity 5 种热力图完全指南:Click/Scroll/Area/Conversion/Attention
热力图是「看一眼就知道用户在干嘛」的最快工具。本文用 5 分钟讲清楚 Microsoft Clarity 的 5 种热力图分别看什么、怎么读、怎么用,搭配 39 张官方截图 + 一张对比表 + 6 条实战建议,看完就能上手。
- Click maps:看用户「点了哪里」——找死按钮
- Scroll maps:看用户「滚到哪」——找被折叠的关键内容
- Area maps:看业务区(CTA、表单)点击率——自定义矩形
- Conversion maps:看「在 X 区点过的人 % 多少转化」——找真有效的 CTA
- Attention maps:AI 综合点击+滚动+鼠标移动,给老板看 5 秒讲故事
为什么要用热力图
独立站运营最常踩的坑是「我觉得这个按钮很重要,但用户根本不点」。GA4 能告诉你转化率,热力图能告诉你为什么转化率是这个数。一个看数字,一个看行为——两件事永远互补。
热力图不是「好不好看」的问题,是「用户到底想不想点」的问题。
— 阿甘聊跨境
Microsoft Clarity 是免费、无采样、热力图 + 录屏 + 漏斗三件套都给的工具,最适合独立站起步阶段。整篇文章基于 Clarity 官方文档(learn.microsoft.com/en-us/clarity/heatmaps/)写成。
5 种热力图对比
5 种图不是替代关系,是层层递进的。先用 click + scroll 摸清「用户行为」,再用 area + conversion 做「业务分析」,最后用 attention 给决策层汇报。
| 类型 | 看什么 | 核心问题 | 用在哪 |
|---|---|---|---|
| Click maps | 用户点击位置 | 用户想点哪里? | 找死按钮、误点 |
| Scroll maps | 用户滚动深度 | 用户看到了哪里? | 找被折叠的内容 |
| Area maps | 业务区点击率 | 这个 CTA 有多热门? | 自定义矩形分析 |
| Conversion maps | 区域内点击+转化 | 哪个 CTA 真正带来转化? | 漏斗优化 |
| Attention maps | AI 综合热区 | 用户注意力在哪? | 整体布局审视 |
点击热力图 · 看用户「想点哪里」
告诉你用户在页面上「点了哪里」。每个点击都是一个红点,红点越密集的位置 = 用户越想点的位置。

找到被忽略的 CTA、被误点的元素(用户以为可点但实际不是链接的)
怎么读这张图
「点 0 次的 CTA = 隐形 CTA」——把 click map 当作”按钮测温计”用。
最适用:着陆页优化、按钮位置测试

滚动热力图 · 看用户「看到了哪里」
告诉你用户「滚到了哪里」。蓝色 = 看到的人,灰色 = 没看到的人。一眼能看出页面哪一段被折叠了。

判断首屏以下内容是否被看到,决定关键信息该放哪
怎么读这张图
「50% 用户没滚到第二屏」——这意味着第二屏以下的内容几乎不存在。
最适用:长文着陆页、博客文章、产品详情页

区域热力图 · 看业务区「点击率」
在页面上画矩形区域,统计这个区域里有多少点击。和 click map 区别是:area 是你自己定义的「业务区」,比如 CTA 按钮、注册表单。

评估自己定义的”业务区”(CTA、注册表单、加购按钮)的真实点击率
怎么读这张图
「高点击 ≠ 高转化」——area map 帮你区分「真热门」和「假热门」。
最适用:漏斗页、A/B 测试结果对比

转化热力图 · 看「点过的人 % 多少转化」
在 area 基础上再加一层「是否转化」过滤。能看到「在 hero 区点了 CTA 的用户里,有多少最终下了单」。

找出真正带来转化的 CTA,对比”看起来很热门但实际不转化”的按钮
怎么读这张图
「在 hero 点 CTA 的用户里,% 多少最终下单」——这个数字才决定值不值得改版。
最适用:电商漏斗优化、注册转化分析

注意力热力图 · AI 综合「最关注区」
综合点击 + 滚动 + 鼠标移动 + 滚动深度,AI 算出来的「用户最关注的热区」,是 5 种图里信息密度最高的。

一眼看出页面哪里吸引最多注意力,给老板/团队汇报用
怎么读这张图
「设计好看 ≠ 用户爱看」——attention map 是「真好看」的唯一裁判。
最适用:A/B 测试对照、整体布局审视

过滤维度 + 实战建议
过滤维度
5 种图都支持 4 个维度的过滤,可以叠加:
- 设备:Desktop / Mobile / Tablet
- 流量来源:Direct / Search / Social / Email 等
- 国家:按 ISO 国家代码过滤
- 时间范围:最近 24h / 7d / 30d / 自定义
实战建议:先按”移动端 + 直达流量”看,再切”桌面 + 搜索”看,往往差异巨大。
6 条实战建议
click map 能告诉你”用户想做什么”,scroll map 只告诉你”他们看到了什么”。先用 click map 找到死按钮,再用 scroll map 找被折叠的关键内容。
如果某个 CTA 上 0 点击,先确认是不是位置太靠下(看 scroll map),再确认是不是文案有问题(看 recordings),最后改设计。
不要拿 click map 看整个页面。先把”加购按钮、立即注册、首图”等业务区圈出来,再看 area 的点击率。
conversion 是「在 X 区点过的人里,% 多少转化了」。对比不同 CTA 区的转化率,砍掉低于平均的。
一个 dashboard 视图。给老板看的时候用 attention map,5 秒讲完故事。
热力图告诉你”发生了什么”,session recording 告诉你”为什么”。两件事永远一起看。
热力图 + 录屏 = 行为分析的完整闭环
热力图告诉你”发生了什么”,session recording 告诉你”为什么”。Clarity 两者都免费,强烈建议任何热力图分析的结论都去录屏里验证一下。
1. 打开 click map → 找到死 CTA
2. 点击该 CTA → 跳转到对应 session recording
3. 看 5-10 个真实用户在这个 CTA 上的行为(犹豫?滑过?找别的?)
4. 总结原因 → 改设计
总结
Microsoft Clarity 的 5 种热力图不是 5 个独立工具,是5 个层次的递进分析。从「点了哪里」到「哪里带来转化」,从「行为分析」到「业务决策」。配合 session recording 和漏斗分析,Clarity 是独立站运营最值得装的免费工具之一。
装 Clarity 不花一分钱,但能帮你找出”用户为什么不下单”的答案。
— 阿甘聊跨境
