热力图是什么 动态热力图是什么

热力图是什么1

热力图是什么 动态热力图是什么

文章插图
热力图是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示 。热力图可以显示不可点击区域发生的事情 。城市热力图该检测方式只提供参考 。发现访客经常会点击那些不是链接的地方,应该在那个地方放置一个资源链接 。比如:如果发现人们总是在点击某个产品图片,也许想看大图,或者是想了解该产品的更多信息 。同样,他们可能会错误地认为特别的图片就是导航链接 。
热力图的主要特色有
1、可以直观清楚地看到页面上每一个区域的访客兴趣焦点,无须报告数据分析,图形化展现,无需任何页面分析经验 。
2、独特的“框统计”,能够框出任意区域的访问详情,如来源、搜索引擎、搜索词、关键词、浏览器等在核心区域的点击情况一目了然,*比清清楚楚 。
3、99%的人没见过,尖端科技傻瓜应用,已申请3项国家发明专利,市面上最粗糙的热力图也要每年几万,IBM的每年300万,而我们对此功能不单独收费,为百度用户独享 。
中继器版热力图2编辑导语:热力图这一形式十分常见,那么我们要如何利用中继器来实现热力图制作呢?本文作者就总结了Axure制作热力图的过程,一起来看看吧 。
热力图是可视化界面里常用的统计图表,那今天我们就学习在Axure里面如何制作热力图吧 。
【热力图是什么 动态热力图是什么】我们会用中继器来制作,因为中继器制作的复用性高,再次使用时,仅需要在表格里填入数据既可以自动生成交互效果,包括根据数据自动显示对应颜色,以及移入时标题显示完整信息 。具体效果如下图所示:
原型地址:https://zuqj6l.axshare.com/#g=1
那下面我们一起开始制作吧 。
一、材料准备1. 表格内容表格内容,我们用中继器来制作,中继器里面我们需要放置一下元件:
1)y轴坐标的文字:我们用文本标签即可 。
2)每列的文本文字:这里我们也是用文本标签,需要几列就增加几个,分别命名为文本1、2、3、4、5、6、7,这样后续我们也容易做交互 。
3)动态面板:动态面板是用来做颜色背景的,动态面板内需要多个状态(state),案例中是5种颜色,所以就用了5个state,每个state里面放置对应颜色的矩形 。将动态面板复制后分别放到文本1、2、3、4、5、6、7的下方 。
中继器表格填写:
Column0对应的是y周坐标文字 。
Column1~7对应的是文本1~7里面的具体数据 。
2. x坐标轴x坐标轴我们我们简单的用文本标签来制作即可,里面填写好对应的数据,案例中文门店1、2、3、4、5、6、7,然后和中继器内对应的文本一一对齐 。
3. 标签标签我们简单用文字+矩形来制作,矩形是用填充颜色填充,后面的文本标签是每个颜色对应的数值范围,完成后如下图所示 。
然后我们还需要给每个颜色的矩形命名,这里比较重要,因为后续我们通过name函数,可以获取到名字,我们在名称里填写该区间的最大数值,后续通过交互就可以自动根据命名的名称来计算,实现自动变色的效果 。例如,黄色矩形的范围是2000一下,就命名为2000;橙色是2000到4000,就命名为4000 。
4. 提示弹窗提示弹窗由矩形和两个文本标签组成,底部背景矩形添加阴影效果,上面是标题文本,对应x坐标轴,下面是数据文本,对应y轴和具体数据 。这个组合默认隐藏 。
这样我们的材料就准备好了,接下里我们开始制作交互 。
二、交互制作中继器每项加载时,我们需要执行一下操作:
1. 设置文本我们要用设置文本的交互,将中继器表格内的值传递到中继器里对应的元件,这样才能显示数据 。
首先将中继器表格的Column0的数据设置到y轴坐标文字的元件;然后将Column1~7的数据设置到文本1~7里面的元件,具体交互如下图所示:
2. 设置面板状态设置面板状态其实就是设置具体的颜色,因为前面在动态面板里面不同的state设置了不同的颜色 。所以我们用设置面板状态的交互来显示对应的颜色 。下面以第一个动态面板,即文本1元件下方的动态面板为例,我们需要执行一下交互:
条件1:如果Item.Column1LVAR1.name,Item.Column1就是只中继器里第一列的数据,LVAR1.name就是变量LVAR1的元件名字,这里LVAR1对应的就是第一个标签(黄色标签0~2000),因为前面我们将它命名为2000,这里的意思其实就是如果第一列的数据小于2000的行 。我们就将动态面板设置到state1(黄色页面) 。