更新时间:2026年7月2号
什么是热力图?
热力图(Heatmap) 把大量用户在页面上的点击、滚动或鼠标移动行为聚合成颜色分布图。颜色越热,通常表示该区域被点击、浏览或经过的次数越多。
一图抵千言——借助热力图,可以直观地观察到用户的总体访问情况和点击偏好,是网站用户体验优化和转化率提升的必备工具。
热力图的类型
市面上的热力图工具,根据监测维度的不同,可分为以下三类:
| 类型 | 监测内容 | 代表产品 |
|---|---|---|
| 点击热力图 | 用户点击行为(链接点击 + 鼠标点击) | Hotjar、CrazyEgg、Clarity |
| 鼠标移动热力图 | 鼠标移动轨迹 | MouseFlow(早期代表) |
| 滚动热力图 | 用户滚动深度 | 多数工具均已标配 |
由于鼠标移动热力图和滚动热力图目前基本已成为各工具的标配功能,实际选型时主要区分的是点击热力图的两类实现方式:
- 链接点击:仅记录可点击元素(如带有 <a> 标签的链接、按钮)代表产品有Adobe Analytics
- 鼠标点击:记录页面所有点击行为(包括图片、空白区域、动态元素等),代表的产品有HotJar、CrazyEgg、Smartlook、Clarity、百度统计、Yandex.Metrica等
重要提醒:用户经常点击的“空白处”往往隐藏着重要的行为线索——比如误以为某张图片是可点击的、试图点击某个不可交互的文案等。因此,推荐优先选择能够记录所有鼠标点击的工具。
主流热力图工具详解
链接点击类:Adobe Analytics
Adobe Analytics的热力图功能通过Activity Map收集页面链接点击,并以覆盖层或报表形式查看链接表现。
- 显示形式:气泡图 或 梯度色块
- 价格:基于Server Call计费(按调用量收费)
- 主要功能:链接点击热力图、维度细分
- 弱点或限制:
- 需安装配置Activity Map插件,使用门槛较高
- 仅记录链接点击,大量点击行为被遗漏
- 热力图渲染精度较粗糙
- 基于 Server Call 收费,采集全量点击成本极高
- 结论:由于仅记录链接点击、采集成本与产出不成正比,不推荐将 Adobe Analytics 作为热力图首选工具。
鼠标点击类:6款主流产品对比
以下产品均可记录鼠标的所有点击行为,我们将逐一分析其热力图功能表现。
Clarity:免费优先选择
Microsoft Clarity 是免费的网站行为分析工具,提供热力图和 Session Replay,适合作为大多数网站的第一套热图工具。
它目前支持点击图、滚动图、录屏、错误和用户行为筛选。官方称其免费且没有流量限制;热力图数据最长保留 9 个月。
- 价格:免费
- 功能:点击热力图、滚动热图(已正式上线)、鼠标移动热图
- 限制:最多访问 12 个月的热力图数据;单图最多收集 100,000 个 PV
- 优点:完全免费、安装简单(支持 GTM 一键安装)、数据完整、支持细分和录屏。
- 缺点:页面加载时会额外引入约 25KB 的脚本代码,对页面性能有一定影响。
HotJar:适合UX研究与用户反馈
HotJarHotjar是热力图领域的头部产品,在国内外贸独立站中应用广泛。
- 价格:基础版免费(2,000 PV/天);个人版 $39/月起步(10,000 PV/天);商业版 $89/月起步(20,000 PV/天)
- 热力图功能:点击热力图、滚动热图、鼠标移动热图
- 限制:数据存储1年;不能结合维度做分析
- 优点:操作简单、上手快,社区文档丰富,是全球用户的首选之一。热力图展示效果清晰,红/蓝色区分度高。
- 缺点:无法结合维度做细分分析,无法自定义时间范围。
CrazyEgg:适合做转化优化
CrazyEgg是老牌热力图工具,功能上比Hotjar更灵活。
Crazy Egg提供点击热图、滚动图、录屏、Confetti 点击细分、A/B Testing等能力。
它的优势是更偏CRO工作流:看到某个按钮点击少后,可以继续按来源、设备等维度拆分,并测试新的页面版本。
- 价格: $24/月起步,有 30 天免费体验期
- 功能:点击热力图、滚动热图
- 限制:数据存储1年
Smartlook:适合Web与App
Smartlook 同时提供Web和App的行为分析能力,包含点击、滚动、移动热图、录屏、事件和漏斗分析。
- 价格:31美元/月起步,有10天体验试用期
- 功能:点击热力图,滚动热图、录屏,支持APP热力图
- 限制:数据的存储时长取决于你选择的套餐;
百度统计
百度统计是国内常用的网站分析工具,提供基于鼠标点击位置的页面点击热力图,适合已有百度生态实施的中文网站,但热图能力通常更基础。
- 价格:免费
- 功能:链接点击、鼠标点击
- 限制:需要页面配置才会有数据;暂不支持框架页面的监控;就只简单显示热力图,不能结合维度做分析;
- 优点:免费、本土化支持较好、适合国内站点。
- 缺点:热力图渲染速度较慢;暂不支持框架页面监控;仅展示简单热力图,无法结合维度分析;需要提前为页面做配置才能采集数据。
Yandex.Metrica
Yandex.Metrica 是俄罗斯搜索引擎 Yandex 提供的免费网站分析工具。
- 价格:免费
- 功能:链接点击、鼠标点击、滚动热图、录屏
- 限制:不能结合维度做分析
- 优点:免费、功能全面(点击+滚动+录屏)。
- 缺点:不能选取时间范围;与其他工具相比,数据发送频率较高,可能影响页面性能;不支持维度细分。
热力图怎么正确使用?
| 热图现象 | 可能原因 | 下一步 |
|---|---|---|
| 用户大量点击图片,但图片不可点击 | 用户以为图片可以进入详情 | 增加链接或明确视觉提示 |
| CTA 点击很少 | 按钮位置、文案或页面层级不清楚 | 对比首屏、颜色、文案和设备 |
| 70% 用户未滚动到核心内容 | 关键信息放得太低 | 上移卖点、价格或 CTA |
| 同一位置出现大量重复点击 | 页面卡顿、元素无响应或用户误解 | 看录屏和前端错误 |
总结
如果只想选一个:
- 免费优先:Microsoft Clarity
- 用户研究与反馈:Hotjar
- 热图 + 转化优化测试:Crazy Egg
- Web 与 App 一起分析:Smartlook
热图最有价值的用途,不是展示“哪里最红”,而是发现用户预期与页面设计不一致的地方,再用数据和实验验证修改是否真的提升转化。