热图优化

及策

1. 思路分析

• 核心用户价值：帮助用户理解网页点击情况，洞察页面元素热度
• 设计原则：热图由元素+元素热度构成，清晰准确表达元素之间的热度关系即可（例如：元素与位置，元素与热度）。

2. 修改方案

2 红色元素过多

2.1 问题：当点击次数达到一定百分比后，点击次数相差较大的按钮之间的热度区分不明显

• 及策示例：
  

• 正确示例：
  

2.2 解决方案：需要了解现有热度绘制原理

• 腾讯地图热度算法：基于当前人数百分比计算热度
• 百度地图热度算法：基于人数/面积比计算热度
• 我们该采用的热度算法：等差分布？待仔细考虑

3. 元素透明度

3.1 问题：页面底部元素看不清

3.2 方案一：添加透明度

3.3 方案二：文字提高层级

* 风险：需要考虑弹窗层级

4. 底部fix跟随滚动问题

4.1 问题说明：TCL热图

4.2 可能方案一：绘制位置置于底层

• 检查底部fix，绘制在最底部即可

4.3 可能方案二

• 按钮切换，重新绘制热图

5. 采集误差造成的绘制问题

5.1 问题说明：元素过大导致的定位问题

• 美赞臣
  

6. 热度指示器

• 位置：左下角
• 原因：低频、不影响主要内容
• 

3. 其他优化

• 推送网站停留时间无法选中
  

• 推送条件优化
  and/or

参考网站

• 热图绘制参考网站：http://codeflow.org/entries/2013/feb/04/high-performance-js-heatmaps/
• https://jingyan.baidu.com/album/9f7e7ec05b3cca6f2915544d.html?picindex=3
• https://heatmap.me/#mainCarousel
• http://proartist.heatmaptheme.net/
  
• https://heat.qq.com/heatmap_result.php?date=2017-10-29&prov=%E5%8C%97%E4%BA%AC%E5%B8%82&city=%E5%8C%97%E4%BA%AC%E5%B8%82&region_name=%E6%95%85%E5%AE%AB%E5%8D%9A%E7%89%A9%E9%99%A2&region_id=1551&range=60