应用分析中的热图：什么是热图、类型及工作原理

什么是热图？

热图（heatmap）— 一种数据可视化方法，其中指标的值通过颜色显示：从蓝色或绿色（最低活跃度）经过黄色到红色（最高活跃度）。在移动分析的背景下，热图显示用户最常点击哪些界面元素，哪些元素被忽略。

与数字报告不同，热图能即时直观地理解行为模式。根据 NN Group (2024) 的数据，热图将用户行为分析时间与表格数据相比减少了60%。这使其成为用户体验研究人员和产品设计师不可或缺的工具。

分析中的热图类型

点击热图

点击热图 — 最常用的类型，显示屏幕上的触摸和点击点。颜色越暖，该区域的交互越多。用于验证假设：如果“购买”按钮位于冷区，需要将其上移或更改其设计。点击热图还能揭示误点击 — 当用户点击不可点击的元素并期待反应时。

滚动热图

滚动热图显示滚动到屏幕或页面各部分用户的百分比。顶部 — 100%，往下 — 减少。如果在屏幕高度的50%处剩余用户不足30%，关键内容需要上移。根据 Crazy Egg (2024) 的数据，在带有长表格的移动应用中，65%的用户不会滚动到第一屏以下。

移动热图

移动热图 — 跟踪鼠标光标的移动轨迹（在桌面上）。Nielsen Norman Group 的研究显示光标移动与用户视线方向之间存在高度相关性（0.85–0.90）。在移动应用中，对应的是触摸图，不仅显示点击，还显示长按和滑动。

热图的工作原理

工作原理 — 基于收集用户与屏幕的每次交互的坐标。分析平台的SDK（Hotjar、Smartlook、UXCam）记录每次点击或触摸的X和Y坐标，同时记录屏幕分辨率和设备类型。这些数据被聚合并以覆盖层的形式叠加在屏幕截图上。

颜色显示使用渐变：从蓝色（最大交互次数的0–5%）经过绿色和黄色到红色（95–100%）。每个点代表一次或多次交互。现代平台在悬停到某个区域时还会显示点击的绝对数量。

为了获得可靠的数据，每个页面或屏幕至少需要100–200次会话。根据 Hotjar (2025) 的数据，500次会话的误差小于5%，被视为做出设计决策的统计显著数据。

如何使用热图数据

热图数据 应用于三种场景：转化率优化、可用性改进和设计决策验证。第一种情况，热图显示用户是否点击CTA按钮 — 如果没有，按钮会上移或改变颜色。第二种情况 — 识别用户错误地认为是交互式的元素。

在验证场景中，比较屏幕重新设计前后的热图。如果热点区域转移到了目标元素（例如“加入购物车”按钮），则重新设计成功。根据 VWO (2024) 的数据，基于热图数据的A/B测试中有70%显示出统计显著的转化率提升。

不要仅依赖热图 — 将其与会话录制和定量分析相结合。热图显示“在哪里”，但不回答“为什么”的问题 — 这需要定性行为分析。

移动端与桌面端应用的热图

移动端热图在几个方面与桌面端不同。移动设备上没有光标，因此移动热图被触摸热图取代 — 触摸图还会额外记录按压力度（3D Touch）和持续时间。由于屏幕尺寸有限，滚动热图在移动设备上至关重要：70%的用户可能看不到“折痕以下”的内容。

桌面端热图使用光标移动作为注意力的代理 — 光标位置与视线焦点之间的相关性根据 Nielsen Norman Group 的数据达到0.85。在移动设备上不存在这种相关性，因此注意力分析使用视线固定图（眼动追踪）或长按图。根据 UXCam (2024) 的数据，由于屏幕尺寸的多样性，移动端热图需要多40%的会话才能实现统计显著性。

为跨平台应用设置热图时，请为iOS和Android创建单独的热图 — 导航差异（手势 vs 按钮）可能会根本性地改变点击分布。同时根据操作系统版本进行过滤：Android 12+上使用 Material You 的界面元素可能与 Android 11 上的外观和位置不同。

热图实现示例

要跟踪 Android 移动应用中的点击，请使用以下 Kotlin 代码。它捕获触摸坐标并将其发送到分析系统以构建热图。

class HeatmapTracker {
    fun trackEvent(activity: Activity) {
        activity.window.decorView.setOnTouchListener { _, event ->
            if (event.action == MotionEvent.ACTION_UP) {
                val bundle = Bundle().apply {
                    putFloat("x", event.x)
                    putFloat("y", event.y)
                    putInt("screen_width", resources.displayMetrics.widthPixels)
                }
                Firebase.analytics.logEvent("touch_heatmap", bundle)
            }
            false
        }
    }
}

收集数据后，在BI工具中构建热图，或使用现成的平台如 UXCam 进行自动可视化。

热图平台比较

热图平台在功能、价格和与移动SDK集成深度方面各不相同。Hotjar — 最流行的网页热图工具，界面简单，免费方案每天最多35次会话。但 Hotjar 不支持移动应用 — 仅支持网页版本和PWA。对于移动应用，请使用带有原生SDK的 Smartlook 或 UXCam。

UXCam — 移动端热图领导者：支持 Android 和 iOS，按设备类别自动过滤，A/B测试覆盖层模式以及机器学习异常检测。Smartlook 在 Growth 方案中提供无限录制次数，并支持在同一个项目中同时使用移动端和网页端热图。Microsoft Clarity — 适用于无限流量的网页项目免费替代方案，但不支持移动SDK。

选择平台时，请考虑数据更新频率、过滤深度以及导出原始点击坐标用于自定义分析的能力。根据 G2 Reviews (2025) 的数据，UXCam 在移动端热图解决方案中获得最高评分（4.6/5），Hotjar 在网页端解决方案中（4.4/5）。

分析热图时的常见错误

第一个错误 — 未经设备过滤就分析热图。屏幕分辨率强烈影响元素的位置：在 iPhone 15 Pro 上位于顶部的元素，在廉价 Android 上可能位于中间。始终按设备型号或屏幕尺寸过滤热图。

第二个错误 — 混淆点击的绝对数量和相对数量。红色区域可能很热不是因为转化率高，而是因为元素占据了屏幕的50%。使用归一化热图，其中颜色显示相对于元素大小的百分比比率。

第三个错误 — 忽略在屏幕上花费的时间。如果用户在屏幕上花费的时间很少，热图“冷”不是因为设计差，而是因为兴趣低。结合参与度指标 — 屏幕时间和会话时长 — 分析热图。