你好，我是柳博文，欢迎和我一起学习前端工程师的AI实战课。
上节课，我们分析并模拟了不同用户在页面上的行为数据，并使用heatmap完成了热力图的绘制。那么，接下来的这节课，我们就把生成的数据和热力图作为切入点，进一步分析不同的人群在不同UI下的数据表现。
基于这些分析，我们就能制定出更有效的匹配策略，将不同的UI匹配给不同人群，从而在UI层面为业务创造更高的价值。
热力图分析
我们再来观察一下这张使用随机数据生成的热力图，将其与H5页面对比来看。
可以看到，热力图有两个明显的数据特点。一是以页面左上角为原点，越往右下角延伸，数据量就会逐渐减少。二是在页面中存在数据明显集中的区域。
那么我们以前端工程师的视角来分析一下。其实很容易发现两个特征。
第一个特征是，页面中从上至下、从左至右的数据是有一定递减速率的，也就是越往下，数据越少。这也符合用户的日常使用习惯，对于这样的页面结构，用户的注意力应该在商品图以及商品价格上，且用户的耐心有限，不会往下滑动太多屏。
第二个特征是页面中存在热区区域。这些区域数据集中且大量，应该是有一些用户感兴趣的商品或者活动在这个区域。
我们结合具体的H5页面模块分析一下。首先，在这个H5页面中用户比较感兴趣的是秒杀模块，Feeds流的第一个商品以及活动banner。也就是说用户点进页面后，注意力会优先放在在秒杀模块的商品上。
其次，跳转到秒杀二级页面的点击行为也比较多。另外，Feeds流的第一个商品以及Banner活动也迎来了用户的不少注意力，并且产生了大量点击数据。
同样，为了更好地进行对比实验，我们将商品卡片一排一换为一排二的UI结构，再生成一份随机模拟数据，并生成后面的热力图。
可以看到，在替换了商品卡片的UI结构后，数据仍然以左上角为原点，随着页面向右和向下，数据量逐渐减少。同样在页面中存在数据明显集中的区域，这些数据明显集中的区域则是在秒杀模块，banner活动模块以及Feeds中头几个商品卡片处。这就说明秒杀模块以及banner活动模块是用户比较青睐的部分。
因为在生成模拟数据时候，我们将用户的性别和年龄作为用户画像的代表维度加入到了随机数据中。所以我们也可以进一步完成细分人群的分析。
这里我们将性别和年龄这两个维度作为筛选条件来聚合数据，同样完成热力图的绘制，然后再来分析。注意，这里我们将做两组不用的热力图组，分别对应商品UI结构一排一和一排二。
性别和年龄的组合一共有 2*4 为8种组合，这是一个组合表。
那么，我们需要在生成热力图的代码基础上，加入实现筛选过滤功能。具体就是增加两个过滤条件，它们可以从URL中参数获得，代码如下：
const urlParams = new URLSearchParams(window.location.search);
const gender = urlParams.get('gender');
const ageParam = urlParams.get('age')?.split("-").map(Number);
在将数据格式化为heatmap数据时，我们将性别和年龄作为条件过滤数据，再生成一次热力图。后面是实现这个逻辑的代码。
const urlParams = new URLSearchParams(window.location.search);
const gender = urlParams.get('gender') || undefined;
const ageParam = urlParams.get('age') || undefined;
console.log(gender, ageParam);
let filteredData = data;
if (gender || ageParam) {
let ageRange = [0, Infinity];
if (ageParam) {
ageRange = ageParam.split("-").map(Number);
}
// 过滤数据
filteredData = data.filter(click => {
const genderMatch = gender ? click.gender === gender : true;
const ageMatch = click.age >= ageRange[0] && click.age <= ageRange[1];
return genderMatch || ageMatch;
});
}
const formattedData = {
max: 10, // 根据实际数据设置最大值
min: 0, // 根据实际数据设置最小值
data: filteredData.map(entry => ({
x: entry.clickPosition.x, // 提取 clickPosition 下的 x 值
y: entry.clickPosition.y, // 提取 clickPosition 下的 y 值
value: 1 // 可以根据需求修改值，如将所有点击计为1
}))
};
heatmapInstance.setData(formattedData);
按照不同性别、不同年龄进行进行筛选的热力图集合如下。首先是商品卡片一片一结构。第一排为不同年龄段男性的数据热力图，第二排为不同年龄段女性的热力图。
那么，从以上对比图，我们其实可以得出一些结论（注意，这里是通过程序生成的模随机模拟数据）。
我们先分别观察不同性别的用户。男性用户中，年龄越小，产生的点击行为越多，点击数据量越多；而女性用户中，产生的点击行为并没有因为年龄段不同而出现明显区分。
整体来看，这个H5页面中，男性用户的点击行为多于女性用户，且年龄段越低区别越明显。
其次是商品卡片UI结构为一排二，后面展示的就是按照不同性别和年龄段的热力图集合。
第一排为不同年龄段男性的数据热力图，第二排为不同年龄段女性的数据热力图。那么，结合上面的对比图，我们同样也能得出一些结论。
先单看男性用户，似乎在换为一排二更大卡片的商品模块后，年龄越大的用户，点击行为越明显，产生的数据量越多。这与一排一的数据结果有了比较大的区别。这也可以说明在这个H5页面中，年轻男性用户更为青睐商品一排一结构。
再单看女性用户，在换为了一排二商品卡片结构后，点击行为也不随年龄段的不同有明显区别。整体来看，这个H5页面中，仍然是男性用户的点击行为多于女性用户，且年龄段越低，区别越明显。
长尾效应
多数时候，我们的关注点集中在页面的第一屏，而忽略了Feeds流中更深位置产生的数据也会影响整体页面。
现在我们将整个页面逆时针旋转90度后，整个页面的热力图会是这样一个呈现：
可以发现用户的点击数据会随着feeds的深度越深，变得越来越少，并且是按照一个递减的斜率趋势来分布的。实际上在真实业务场景中，无论是以什么维度数据来收集数据，过滤后都会是这样一个衰减趋势。
这也就直接影响到“漏斗转化（Funnel Conversion）”的效率，这是一个广泛应用于多种领域的概念，用来描述用户或客户在某个流程中的转化情况。对于电商领域，也就是有多少人进入了这个页面，进而有多少人在页面中产生了点击跳转操作，直到最后的下单。相应顶部流量越多，转化率就会越高。
那么，为了达到更高的转化，我们就需要尽量减缓这个衰减趋势，增加用户在页面的访问深度，也就是需要将用户留在页面里面，并且让他们的浏览、点击行为持续更久。衰减的趋势减缓了，那么数据的尾巴也就变长了，这也就引出了一个专业的名词“长尾效应”，这样最终的转化和成交量也就会相应增加。
那如何将长尾效应做起来，让用户继续浏览下去呢？因为我们是纯前端的UI实验数据，我们可以重点分析热区部分的UI，是因为什么样的UI设计和结果让用户喜欢点这样的区域。专业些的表达就是找到刺激用户向下滑的UI策略，减少用户流失。
我们将热力图横向放置在一个坐标系中，就能找到比较受欢迎的卡片或组件类型。
坐标系的横坐标是页面横向放置后对应位置的卡片类型，纵坐标则是当前位置上卡片上产生的用户点击数据。
不难看到在这张图中呈现出了数据递减的趋势，但是在某些具有特性的卡片位置处产生了数据凸起，这其实对应了热力图上的热区位置。这张图中对应了秒杀模块、banner活动模块以及首个商品位置。
那么，这些能够带来热区的卡片类型和区域，就能够用来激活页面中其他位置，带来同样效果的数据热区，进而将整个页面的长尾变得更长。
策略定制
那么，根据之前用户行为（点击）数据的对比分析结果，我们可以根据用户的行为偏好来制定一些优化策略，让用户在页面中停留更久，而且逛得更加深入。
我们主要可以从两个方面来做优化。
首先是根据UI结构分析发现的规律，不同的人群用户偏好不同的UI结构。那我们就可以按人群和性别特性做UI结构推荐。比如为年轻的男性用户主推一排一的商品UI结构。这样的方式同样也适用于其他类型人群，但前提是需要找到这类人群的UI喜好共性。
其次是长尾效应，为了在漏斗转化的头部加大进入量，就需要让用户在Feeds中逛得更深更久。通过分析可知，部分Feeds卡片类型能够带来数据热区，让用户能够有一个比较高的关注度，从而带来更多点击量（例如秒杀模块卡片和banner活动模块卡片）。那么，适当添加如同秒杀模块到页面的第二屏或者其他更深的次屏，就能有效促使用户向下滑动多屏，访问更深深度的Feeds流。这个思路同样也适用于banner模块。
总结
我们来一起做个总结吧！
首先，我们对使用模拟数据生成的热力图做了分析，分别以不同商品UI结构“一排一，一排二”，不同形变和年龄段三个方面作为自变量，以数据热力图作为因变量进行了分析。
结合生成的模拟用户数据，我们有不少发现，其中比较重要的结论是：对于这个Feeds流，男性年轻用户对商品卡片为一排一结构的UI设计更为青睐，进而用户点击行为更密集。
然后，我们将热力图进行逆时针旋转90度后发现，无论是商品卡片结构是一排一还是一排二。用户的点击数据会随着feeds的深度越深变得越来越少，并且是按照一个递减的斜率趋势来分布。
总之，通过今天的这些分析，我们知道了，为了达到更好的业务转化效果，可以为不同人群的用户推荐其更加青睐的UI结构。
思考题
这节课里，我们通过热力图分析了用户在电商H5页面上的点击行为，并根据性别和年龄段对点击数据进行了细分分析。同时，我们观察到页面点击行为具有长尾效应，数据呈递减趋势。
作为一名前端工程师，根据这些数据分析结果，你有哪些优化页面交互设计和用户体验的思路呢？
欢迎你在留言区和我交流讨论，如果这节课对你有启发，也推荐你把它分享给更多朋友。
精选留言