【Axure教程】中继器版热力图

2 评论 6526 浏览 4 收藏 11 分钟

编辑导语:热力图这一形式十分常见,那么我们要如何利用中继器来实现热力图制作呢?本文作者就总结了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.Column1<LVAR1.name,Item.Column1就是只中继器里第一列的数据,LVAR1.name就是变量LVAR1的元件名字,这里LVAR1对应的就是第一个标签(黄色标签0~2000),因为前面我们将它命名为2000,这里的意思其实就是如果第一列的数据小于2000的行。我们就将动态面板设置到state1(黄色页面)。

条件2:如果Item.Column1<LVAR1.name,这里和条件1基本一致,只是LVAR1的变量不同,这里LVAR1代表第二个标签(橙色标签),前面我们将橙色标签命名为4000,所以我们通用用设置面板状态的交互将动态面板设置到state2(橙色页面),即只要低于4000就显示橙色。

这里我们注意,不要用if的条件,要用else if的条件。if的意思是不管上面成立不,我们都执行该交互,那么低于两千的数据也会显示橙色,这明显是不对的。else if就是上面条件不成立的情况,才会执行一下交互,所以实际的条件就是2000到4000。

后面的也是一样,就是从低到高设置条件,根据对应的条件设置动态面板的颜色。设置完文本1对应的动态面板1之后,就可以将交互复制到后面动态面板2-7,然后需要交互里里面的Item.Column1需要改成2~7对应,并且动态面板要重新选择对应的动态面版。

如果这里觉得麻烦的话,其实我们也可以只用一个文本和面板,通过中继器网格布局的方式实现,这样的好处就是省去很多功夫,缺点的话就是中继器表格只有一列,和显示的不一致,没有那么直观,总体来说各有利弊,你们根据你们实际的情况来选择吧。

3. 鼠标移到数据的交互

这里要分三种情况:鼠标移入时,鼠标移动时,鼠标移出时,我们以中继器内文本1元件为例。

1)鼠标移入时

首先,我们要用显示的交互事件,将默认提示弹窗显示。

其次,用设置文本的交互,将具体的数据设置到标签里,标题文字设置为对应横坐标的文字,这里也是用到变量LVAR1,选择对应的横坐标,移入文本1对应就是第一个x坐标元件的文字。

具体数据内容设置为[[Item.Column0]]:[[Item.Column1]],即鼠标对应位置的纵坐标和具体数据。

2)鼠标移动时

我们要做的效果就是弹窗跟随鼠标移动来移动,我们用移动的交互来实现,移动到鼠标对应的位置,这里需要用Cursor函数来获取鼠标的坐标,Cursor.x代表鼠标的x坐标,Cursor.y代表鼠标的纵坐标,我们在鼠标坐标的基础上+10,这样就可以做出跟随鼠标移动的效果。

3)鼠标移出时

鼠标移出文本标签时,我们用隐藏事件将弹窗隐藏。

然后我们可以将上述交互复制到文本2~7里,移动和移出都不需要改变,我们修改鼠标移入时设置文本的值即可,变量LVAR1选择对应的横坐标,Item.Column1修改为对应的Item.Column2~7。这样我们就制作完成了。

以后我们需要使用的话,只需要填写在中继器的表格里填写数据即可,自动生成交互效果,是不是很方便呢?

以上就是本期的全部内容了,感谢您的阅读,我们下期见~88

 

本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 原型很漂亮
    可以,但没必要。工作中直接画两个示意图,讲清楚逻辑。在需求澄清阶段就够了。

    来自香港 回复
    1. 原型是产品经理的第二张脸哦,有空的时候给自己化下妆也挺好的

      来自广东 回复