热力图|热力元素分析看板实例( 二 )_

图片拼接—首先将多个截屏转化为灰度图，通过像素对比的方法找出前后图片相似的部分，计算出图片拼接的位置，进而对图片进行裁剪拼接，最后融合成一张完整的长图。
2. 获取图片视图树我们可以把一个app页面的构成简单理解为一张一张的小图片按层次和位置堆叠而成。所以页面可以用一个是视图树的结构来表示。而图片上的每一个元素标示就是树中的节点。
视图树节点包含的关键信息有位置信息。另外我们还需要通过了节点的路径构建一个id，作为识别图片模块元素的唯一标示。

文章插图
3. 匹配视图树与埋点事件有了页面上每一个元素的标示后，我们需要将埋点事件与元素标示对应上。由于页面上的元素标示非常多一张图可能有上百个元素构成。但是其中真正有数据上报的元素只有少数部分。所以我们以埋点事件为主键来匹配元素标示。
对于其中调用埋点系统中标准自动打点能力做的打点，客户端可以直接获取其埋点信息作自动填充，但是对于有些因为打点时机较复杂而采用手动上报的埋点，则只能通过人工维护匹配关系。
4. 数据处理与展现在数据展示阶段，我们采用框选展示数据的形式，同时考虑模块之间有层级关系，所以还在页面上做了下钻的能力。
既可以比对不同一级入口的点击率（比如搜索，推荐，导航金刚）。又可以针对制定一级入口下钻到具体类目看不同类目到转化效率（比如看导航金刚里的酒店，机票等）。

文章插图
另外支持热力对比的功能，设置不同的筛选条件，并在对比图上做了元素联动的设计，帮助业务更好聚焦在自己关注点位上作比对。

文章插图
五、写在最后可以看到，方案实现到这里，目前还不是真正意义热力图，我们可以进一步把视觉做得更好。
对于单图对比模块指标的场景下，需要进一步根据数值的大小，参考excel的条件格式，给不同的模块上色阶。
对于不同设置条件下的多图比对场景，需要可以单独凸显对应模块做可视化凸显（比如以两个模块的外框粗细表示指标的大小）。
作者：edan，前商业数据分析师，现TMD数据产品经理；“数据人创作者联盟”成员；期望和数据小伙伴一起做些有意思的事情。
本文由@一个数据人的自留地原创发布于人人都是产品经理。未经许可，禁止转载
题图来自pexels，基于CC0协议