# Heat Map Analyzer

> 热力图分析器 - 页面滚动、点击、鼠标移动和注意力热力图分析，识别用户行为模式和优化机会

- Skill: `huifer/heat-map-analyzer` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add huifer/heat-map-analyzer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/huifer/heat-map-analyzer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: huifer (https://skillmd.com/u/huifer)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/huifer/heat-map-analyzer

---


# Heat Map Analyzer 🔥

> 专业的用户行为可视化分析系统，通过热力图深度洞察用户交互模式，发现页面优化机会，提升用户体验和转化率

基于用户行为数据的多维度热力图分析工具，揭示用户真实行为模式，帮助数据驱动的页面优化决策。

---

## 🎯 核心功能

### 1. 滚动热力图分析

#### 滚动深度分析

```yaml
指标体系:
  总滚动深度:
    - 平均滚动深度: 55%
    - 中位滚动深度: 48%
    - 最大滚动深度: 95%
    - 滚动到底部比例: 12%

  分段数据:
    - 首屏可见: 100% 用户
    - 滚动至25%: 78% 用户
    - 滚动至50%: 52% 用户
    - 滚动至75%: 28% 用户
    - 滚动至90%: 15% 用户
    - 滚动至100%: 12% 用户

  关键发现:
    - 折点1: 600px位置(-22%用户)
    - 折点2: 1200px位置(-26%用户)
    - 折点3: 1800px位置(-24%用户)
```

#### 滚动vs转化分析

```markdown
滚动深度与转化率关系：

深度范围        | 到达率  | 转化率  | 贡献度
----------------|---------|---------|--------
首屏 (0-600px)  | 100%    | 3.2%    | 65%
浅滚动 (600-1200px) | 78% | 5.8% | 25%
中滚动 (1200-1800px) | 52% | 7.2% | 8%
深滚动 (1800px+) | 28%  | 12.5%   | 2%

关键洞察:
- 深滚动用户转化率是浅滚动的2.2倍
- 首屏贡献65%转化(到达率最高)
- CTA在1800px以下位置转化率最佳
```

#### 滚动优化建议

```yaml
内容布局:
  问题: 关键内容在600px后，22%用户未看到
  建议: 将CTA上移至首屏
  预期: +18%转化

  问题: 重要信息在1200px后
  建议: 添加悬浮CTA按钮
  预期: +12%转化

页面长度:
  问题: 页面过长(3000px)，完成率仅12%
  建议: 精简内容至1800px内
  预期: +25%完读率
```

### 2. 点击热力图分析

#### 点击密度分析

```yaml
高点击区域:
  主导航菜单:
    点击数: 12,500/天
    热度: 🔥🔥🔥🔥🔥
    转化率: 15%

  产品图片:
    点击数: 8,200/天
    热度: 🔥🔥🔥🔥
    转化率: 22%

  "立即购买"按钮:
    点击数: 5,600/天
    热度: 🔥🔥🔥🔥
    转化率: 45%

  客户评价:
    点击数: 3,200/天
    热度: 🔥🔥🔥
    转化率: 35%

低点击区域:
  侧边栏:
    点击数: 450/天
    热度: 🔥
    转化率: 8%

  页脚链接:
    点击数: 280/天
    热度: 🔥
    转化率: 5%

  社交分享按钮:
    点击数: 120/天
    热度: ⚪
    转化率: 3%
```

#### 点击模式分析

```markdown
点击聚类分析：

主交互区 (中心区域):
- 占比: 72%
- 平均点击: 4.2次/访问
- 转化率: 18%

边缘区域:
- 占比: 18%
- 平均点击: 1.8次/访问
- 转化率: 8%

无效点击:
- 占比: 10%
- 原因: 误点、好奇点击、测试行为

关键发现:
- 用户集中点击中心区域(F型浏览)
- 非交互元素被点击(误认为是按钮)
- CTA按钮点击密度最高但转化率有优化空间
```

#### 可点击性分析

```yaml
问题元素:
  看起来可点但不可点:
    - 产品缩略图(点击率85%，但无反应)
    - 价格标签(点击率32%，但无反应)
    - 五星评分(点击率28%，但无反应)

  建议: 添加可点击性或改变视觉提示

不可点击但应该可点:
    - 规格参数表格
    - 评价图片
    - 相关产品缩略图

  建议: 添加交互功能

高点击低转化:
  - "了解更多"按钮(点击1200次/天，转化率5%)
  - 视频播放按钮(点击800次/天，转化率8%)

  建议: 优化落地页内容
```

### 3. 鼠标移动热力图

#### 注意力分布

```yaml
热点区域:
  产品主图区:
    停留时长: 平均8.5秒
    鼠标经过: 95%用户
    转化率: 25%

  产品标题区:
    停留时长: 平均4.2秒
    鼠标经过: 88%用户
    转化率: 18%

  价格区:
    停留时长: 平均3.8秒
    鼠标经过: 92%用户
    转化率: 22%

  CTA按钮区:
    停留时长: 平均2.5秒
    鼠标经过: 78%用户
    转化率: 45%

冷点区域:
  页脚: 鼠标经过12%用户
  侧边栏: 鼠标经过25%用户
  辅助信息: 鼠标经过35%用户
```

#### 鼠标轨迹分析

```markdown
典型浏览模式：

F型模式 (68%用户):
  → 水平扫描顶部
  ↓ 稍微向下移动
  → 水平扫描中部
  ↓ 垂直扫描左侧

Z型模式 (18%用户):
  → 左上到右上
  ↘ 对角线到左下
  → 左下到右下

随机模式 (14%用户):
  - 无明显规律
  - 移动路径分散
  - 停留时间短

关键发现:
- F型模式用户转化率最高(22%)
- 用户注意力集中在首屏和左侧
- 右侧内容被忽略
```

#### 悬停行为分析

```yaml
元素悬停:
  产品图片:
    悬停率: 85%
    平均悬停时长: 3.2秒
    悬停后转化: 28%

  价格:
    悬停率: 78%
    平均悬停时长: 2.8秒
    悬停后转化: 32%

  CTA按钮:
    悬停率: 65%
    平均悬停时长: 1.5秒
    悬停后转化: 55%

  评价星级:
    悬停率: 52%
    平均悬停时长: 2.2秒
    悬停后转化: 38%

悬停犹豫点:
  运费信息: 平均5.2秒悬停(犹豫)
  退款政策: 平均4.8秒悬停(关注)
  规格: 平均3.5秒悬停(选择困难)
```

### 4. 注意力热力图

#### 视觉焦点

```markdown
注意力热力图：

🔥🔥🔥🔥🔥 最热 (80-100%注意力)
  - 产品主图(左上)
  - 产品标题
  - 价格

🔥🔥🔥🔥 热 (60-80%注意力)
  - "立即购买"按钮
  - 客户评价星级
  - 产品规格

🔥🔥🔥 温 (40-60%注意力)
  - 产品描述
  - 详细图片
  - 配送信息

🔥🔥 冷 (20-40%注意力)
  - 相关产品
  - 社交分享

⚪ 冰冷 (0-20%注意力)
  - 页脚链接
  - 公司信息
  - 法律条款
```

#### 注意力vs转化

```yaml
高关注高转化:
  - CTA按钮(关注度78%, 转化率45%)
  - 价格(关注度92%, 转化率32%)
  - 产品图(关注度95%, 转化率28%)

高关注低转化:
  - 规格选择(关注度88%, 转化率15%)
  - "了解更多"(关注度65%, 转化率5%)

低关注高价值:
  - 社交证明(关注度35%, 潜在转化+18%)
  - 紧迫性提示(关注度28%, 潜在转化+12%)
```

### 5. A/B测试热力图对比

#### 变体对比

```markdown
变体A (当前):
  首屏CTA转化: 3.2%
  平均滚动深度: 48%
  CTA点击率: 12%

变体B (优化):
  首屏CTA转化: 4.8% (+50%)
  平均滚动深度: 55% (+7pp)
  CTA点击率: 18% (+6pp)

热力图差异:
  变体B的注意力更集中
  变体B的点击密度更高
  变体B的无效点击更少

统计显著性: 99.8%
推荐: 全面部署变体B
```

#### 对比维度

```yaml
点击分布对比:
  - CTA点击率变化
  - 点击热区分布变化
  - 无效点击比例变化

注意力对比:
  - 热区面积变化
  - 注意图变化
  - 冷点区域变化

行为模式对比:
  - 滚动深度变化
  - 鼠标轨迹变化
  - 悬停行为变化
```

### 6. 移动端热力图

#### 触摸分析

```yaml
触摸热点:
  屏幕上半部:
    - 触摸占比: 65%
    - 转化率: 28%
    - 最佳区域: 400-600px

  屏幕中部:
    - 触摸占比: 28%
    - 转化率: 15%

  屏幕下半部:
    - 触摸占比: 7%
    - 转化率: 8%

手势类型:
  - 点击: 72%
  - 滑动: 18%
  - 长按: 8%
  - 双击: 2%
```

#### 移动端vs桌面端

```markdown
行为差异:

            桌面端    移动端    差异
平均滚动    1800px   2400px   +33%
首屏转化    3.2%     2.8%     -0.4pp
CTA点击率   12%      18%      +6pp
页面停留    45秒     38秒     -7秒
跳出率      42%      58%      +16pp

关键发现:
- 移动端用户滚动更多但转化更低
- 移动端CTA点击率更高
- 移动端跳出率更高

优化建议:
- 移动端首屏优化
- 简化移动端流程
- 优化触摸目标大小(至少44x44px)
```

---

## 📋 使用场景

### 场景1：完整热力图分析

```bash
/heat-map-analyzer --full --page "product-page" --period 30d
```

输出示例：

```markdown
🔥 热力图完整分析 - 产品页 (过去30天)

## 页面概览

**页面**: 产品详情页
**URL**: /products/smart-watch-pro
**访问量**: 45,000 PV
**独特访客**: 32,000
**转化率**: 8.5%

## 滚动热力图分析

### 滚动深度分布

```
100% ████████████████████░░░░░░ 12% 用户到达
 90% ██████████████████░░░░░░░░ 15% 用户到达
 80% ██████████████████░░░░░░░░ 18% 用户到达
 70% ████████████████░░░░░░░░░░ 22% 用户到达
 60% ███████████████░░░░░░░░░░░ 25% 用户到达
 50% ██████████████░░░░░░░░░░░░ 28% 用户到达
 40% ██████████████░░░░░░░░░░░░ 35% 用户到达
 30% ███████████████░░░░░░░░░░░ 45% 用户到达
 20% ██████████████████░░░░░░░░ 58% 用户到达
 10% ████████████████████░░░░░░ 72% 用户到达
  0% ████████████████████████░ 100% 用户到达
     0px     600px   1200px  1800px  2400px
```

### 关键折点分析

**折点1: 600px位置**
- 流失: 22%用户
- 位置: 价格和CTA之间
- 原因: 可能是价格偏高导致犹豫
- 建议: 添加分期付款选项

**折点2: 1200px位置**
- 流失: 26%用户
- 位置: 产品描述部分
- 原因: 内容过长或不够吸引
- 建议: 精简内容，增加视频

**折点3: 1800px位置**
- 流失: 24%用户
- 位置: 评价区域开始
- 原因: 评价内容不够突出
- 建议: 将评价上移，增加图片评价

### 滚动vs转化关系

| 滚动深度 | 到达率 | 转化率 | 贡献度 |
|---------|--------|--------|--------|
| 首屏(0-600px) | 100% | 5.2% | 62% |
| 浅滚动(600-1200px) | 78% | 9.8% | 25% |
| 中滚动(1200-1800px) | 52% | 14.2% | 10% |
| 深滚动(1800px+) | 28% | 22.5% | 3% |

**关键洞察**: 深滚动用户转化率是首屏用户的4.3倍

## 点击热力图分析

### 点击密度热力图

```
热度等级分布:

🔥🔥🔥🔥🔥 极热 (>5000点击/天)
  [立即购买] 按钮 (5,600点击)
  产品主图 (4,200点击)

🔥🔥🔥🔥 热 (2000-5000点击/天)
  [加入购物车] (3,200点击)
  产品缩略图 (2,800点击)
  评价星级 (2,100点击)

🔥🔥🔥 温 (500-2000点击/天)
  规格选择 (1,200点击)
  数量选择 (950点击)
  配送信息 (780点击)

🔥🔥 冷 (100-500点击/天)
  相关产品 (320点击)
  社交分享 (180点击)
  帮助链接 (120点击)

⚪ 冰冷 (<100点击/天)
  页脚链接 (85点击)
  法律条款 (45点击)
```

### 点击vs转化

**高点击高转化** (优化重点):
- "立即购买": 点击5600, 转化率45%
- 产品缩略图: 点击2800, 转化率38%

**高点击低转化** (改进机会):
- "了解更多": 点击850, 转化率8%
- 规格选择: 点击1200, 转化率12%

**低点击高价值** (增加曝光):
- 社交证明: 点击180, 潜在转化+25%
- 紧迫性提示: 点击120, 潜在转化+15%

### 可点击性问题

**误点击元素**:
- 产品标题(点击率32%, 不可点)
- 五星评分(点击率28%, 不可点)
- 规格说明(点击率18%, 不可点)

**建议**:
- 将产品标题改为可点(跳转到详情)
- 五星评分显示时添加评价弹窗
- 规格说明添加提示框

## 鼠标移动热力图

### 注意力热力图

```
注意力分布:

产品主图区    ████████████████████ 95%用户, 8.5秒停留
产品标题区    ██████████████████░  88%用户, 4.2秒停留
价格区        ███████████████████░ 92%用户, 3.8秒停留
CTA按钮区     ████████████████░░░░ 78%用户, 2.5秒停留
评价星级区    ██████████████░░░░░░ 65%用户, 3.2秒停留
规格区        ██████████████░░░░░░ 62%用户, 4.5秒停留
描述区        ████████████░░░░░░░░ 45%用户, 6.8秒停留
相关产品      ██████░░░░░░░░░░░░░░ 25%用户, 2.2秒停留
```

### 浏览模式分析

**F型浏览** (68%用户):
- 水平扫描顶部 → 左侧垂直扫描
- 转化率: 22%
- 平均停留: 52秒

**Z型浏览** (18%用户):
- 对角线浏览模式
- 转化率: 15%
- 平均停留: 38秒

**随机浏览** (14%用户):
- 无规律移动
- 转化率: 8%
- 平均停留: 28秒

### 悬停行为

**高悬停元素**:
- 产品图片: 悬停85%, 平均3.2秒
- 规格选择: 悬停72%, 平均4.5秒(犹豫)
- 价格: 悬停78%, 平均2.8秒

**悬停后转化**:
- 产品图片悬停 → 28%转化
- 规格选择悬停 → 18%转化
- 价格悬停 → 35%转化

## A/B测试对比

### 当前版本 vs 优化版本

**版本A (当前)**:
- 首屏CTA转化: 3.2%
- 平均滚动深度: 48%
- CTA点击率: 12%

**版本B (优化CTA位置)**:
- 首屏CTA转化: 4.8% (+50%)
- 平均滚动深度: 55% (+7pp)
- CTA点击率: 18% (+6pp)

**热力图差异**:
- 版本B的CTA区域热度+35%
- 版本B的注意力更集中
- 版本B的无效点击-22%

**统计显著性**: 99.8%
**推荐**: 全面部署版本B

## 移动端热力图

### 触摸热点

```
触摸分布:

屏幕上部
████████████████████ 65%触摸, 28%转化
(0-400px)

屏幕中部
██████████░░░░░░░░░░ 28%触摸, 15%转化
(400-800px)

屏幕下部
████░░░░░░░░░░░░░░░░ 7%触摸, 8%转化
(800px+)
```

### 移动端 vs 桌面端

| 指标 | 桌面端 | 移动端 | 差异 |
|------|--------|--------|------|
| 平均滚动 | 1800px | 2400px | +33% |
| 首屏转化 | 3.2% | 2.8% | -0.4pp |
| CTA点击 | 12% | 18% | +6pp |
| 页面停留 | 45秒 | 38秒 | -7秒 |
| 跳出率 | 42% | 58% | +16pp |

## 关键发现

### 主要问题

1. **首屏转化率低** (3.2%)
   - 原因: CTA位置不够突出
   - 影响: 62%转化来自首屏
   - 优先级: 最高

2. **滚动流失严重**
   - 600px处流失22%
   - 1200px处流失26%
   - 优先级: 高

3. **移动端跳出率高** (58%)
   - 原因: 首屏加载慢、CTA不清晰
   - 优先级: 高

4. **误点击问题**
   - 22%点击为无效点击
   - 可点击性混乱
   - 优先级: 中

### 主要机会

1. **CTA优化** (+50%转化)
2. **社交证明增强** (+25%转化)
3. **移动端优化** (+18%转化)
4. **价格展示优化** (+12%转化)

## 优化建议

### 立即执行 (P0)

**1. 优化CTA位置**
- 移至首屏中心位置
- 增加视觉权重
- 添加紧迫性文案
- 预期: +50%转化

**2. 修复可点击性**
- 产品标题可点击
- 五星评分可交互
- 添加视觉反馈
- 预期: -22%误点击

### 短期优化 (30天)

**3. 增强社交证明**
- 将评价上移至1200px内
- 添加图片评价
- 显示实时购买数
- 预期: +25%转化

**4. 优化价格展示**
- 添加分期付款选项
- 突出节省金额
- 价格对比标签
- 预期: +12%转化

### 中期优化 (90天)

**5. 移动端优化**
- 优化首屏加载速度
- 增大触摸目标(44x44px)
- 简化结账流程
- 预期: +18%转化

**6. 内容优化**
- 精简产品描述
- 添加产品视频
- 优化图片质量
- 预期: +15%转化

## 预期效果

**优化后预测**:
- 首屏转化率: 3.2% → 5.5% (+2.3pp)
- 总体转化率: 8.5% → 12.8% (+4.3pp)
- 移动端转化: 2.8% → 4.5% (+1.7pp)
- 平均订单价值: ¥520 → ¥565 (+8.7%)
```

### 场景2：点击热力图分析

```bash
/heat-map-analyzer --click --page "checkout"
```

### 场景3：A/B测试对比

```bash
/heat-map-analyzer --compare --variant-a "original" --variant-b "optimized"
```

---

## 💡 最佳实践

### 数据收集
- 足够样本量(>1000访问)
- 多时段收集(避免偏差)
- 分设备收集
- 隐私合规

### 分析方法
- 多类型热力图结合
- 定量+定性分析
- A/B测试验证
- 持续监控

### 优化策略
- 优先高影响低投入
- 数据驱动决策
- 小步迭代测试
- 避免过度优化

---

## 🔗 相关Skills

- `/page-cro` - 页面转化率优化
- `/ab-test-setup` - A/B测试设计
- `/customer-journey-mapper` - 客户旅程映射
- `/basic-analytics` - 基础分析

---

**Visualize behavior, optimize experience! 🔥**

**版本**: 1.0.0
**更新**: 2026-04-12
**作者**: Shopilot Team