首页 > 软件 > LVAR1:="DMI.PDI"(12,6);输入字符串请用单引号'!

LVAR1:="DMI.PDI"(12,6);输入字符串请用单引号'!

软件 2023-11-11

Axure中继器怎么制作数组跨页联动原型?

众所周知,axure只能使用全局变量在页面之间传输数据。当只有几个参数需要跨页时,我们可以设置适当的全局变量。但是,如果有大量的数据,则不适合为每个参数设置相应的变量。现在,我们只用一个变量就能做到。接下来,玉图网将分享Axure如何使用全局变量在中继器中保存和赋值多个参数,使数据在翻页后不恢复,可以链接到不同的页面,模拟数据库存在的效果。入门Axure做产品经理,就上来学习!精选多套优质Axure自学视频课,综合全面的教会大家Axure软件基础操作以及原型交互,让你可以理论+实践全面发展~

Axure中继器制作数组跨页联动原型步骤:

实现过程(一):利用一个全局变量,对中继器赋值并设置文本

(1)设置全局变量

m默认值可以为空,用于数据临时存放。

bmqhz用于存放整个中继器的数据。默认值可以为空,我这里设置了两个数组:

{1!海康NVR2!192.168.10.203!5544!类型一5!admin6!系统默认编码器01}1

{1!宇视NVR2!192.168.88.203!5544!类型二5!admin6!系统默认编码器02}2

如图,其对应的参数名称分别是“编码器名称、编码器ip、编码器端口、编码器类型、用户名、描述”(密码用圆号代替,所以不用存变量)。

(2)中继器数据赋值

1)中继器载入时:把变量bmqhz的数据复制到变量m,再从m截取第一个数组的参数,存到中继器相应位置。

2)每项加载时,设置文字为富文本,把标记符号设置为透明字体,字体根据实际情况设置小点就行了。

3)第一个数组设置成文本内容后,把它从变量m删除,再触发中继器载入时的交互,使用第二个数组进行赋值。

4)看看效果

实现过程(二):新增数据的保存

(1)以“名称”为例,点击“确认”保存时,把文本值放到中继器,要在前面加1!

(2)把中继器的数据保存到变量中去

设置变量bmqhz为[[LVAR1.text.replace(‘n’,”).replace(‘1!’,'{1!’).replace(‘*’,”).replace(‘_’,”)]],其中LVAR1是中继器元件。(可以先把中继器对象的文本设置到矩形作为参考,再决定如何过滤,如下图)

(3)编辑和删除同理。如下图,编辑后,确认按钮的交互设置:把参数从文本框取出来,加上标记后更新到中继器。

实现过程(三):页面联动

页面联动,在另一页面中展示设备名称,对其的删除操作,影响到上一页面。

(1)展示系统中的编码器设备:在新的页面中,参考“实现过程(一)”中继器的赋值方法即可,这里只显示名称。

(2)删除编码器设备:点击删除按钮时,在设备名称前面加上{,再保存到变量m中,如上图“海康NVR2”保存后,m={1!海康NVR2。在确认删除时,在变量bmqhz中删除“海康NVR2”对应的数组,触发中继器载入时交互即可。

这个函数,我们来拆解一下:

拿默认变量为例(实际上没换行符,下面换行是为了便于说明):

bmqhz=

{1!海康NVR2!192.168.10.203!5544!类型一5!admin6!系统默认编码器01}1

{1!宇视NVR2!192.168.88.203!5544!类型二5!admin6!系统默认编码器02}2

假设我们删除的是第二个编码器数据,那么m存的数据就是{1!宇视NVR,我们拿到这个数据后,需要从变量中把第二个数组删除。

获取“{1!宇视NVR2”的位置x:bmqhz.indexOf(m,0);

获取从“{1!宇视NVR2”开始的第一个“}”的位置,此位置再加2(为了覆盖后面的序列号),得到y:bmqhz.indexOf(‘}’,bmqhz.indexOf(m,0))+2;

截取“宇视NVR2”所在数组的字符:bmqhz.substring(x,y);

把“宇视NVR2”所在数组的字符从变量中删除:bmqhz.replace(‘bmqhz.substring(x,y)’,”);再把步骤1和2中的x、y代入进来。

最后,我们来操作一下

在“编码器管理”页面添加设备,或者修改、删除设备;

切换到“展示编码器”页面,我们可以看到设备名称列表,是和管理页面一致的;

在“展示编码器”页面删除设备,再切换到“编码器管理”页,设备一致;

来回切换数据不丢失。

好咯,关于“Axure中继器怎么制作数组跨页联动原型?”的内容今天就分享到这里了,希望你能从中学到东西哦!Axure学习,的Axure相关文章、Axure自学视频课都是不错的选择!文字理解能力强的话,个人推荐Axure文章学习;但是想要专业学习Axure的话,还是推荐大家选择Axure自学视频课系统学!不仅可以更加清晰有条理,大家也都能够利用自己的碎片化时间学习!

Axure怎样制作一个日志管理原型?

日志管理应该为我们大家日常工作所使用,它可以有效地帮助我们制定工作任务,便于管理和查询。本文使用Axure创建了一个日志管理原型,感兴趣的小伙伴就学习操作起来!学会Axure,人人都是产品经理!这句话,想必对于准备自学Axure或者正在自学Axure的小伙伴们来说并不陌生!而想要完全掌握Axure成为产品经理,可能也并非容易,入门简单,但是交互原理可并不简单!因此提供了系列的Axure自学视频课,可以全面的学习Axure软件基础以及交互原型案例实操~

Axure制作一个日志管理原型步骤:

01材料准备

日期选择器、中继器、文本框、文本、添加按钮、删除按钮

02日期选择器快速制作

选择拖出文本框元件,然后点击类型-选择日期即可。

如果觉得系统提供的日期元件不美观,也可以自己用函数制作

03中继器内摆放

文本框1——命名为开始时间,提示文字开始时间

文本框2——命名为结束时间,提示文字结束时间

文本框3——命名为工作计划,提示文字请输入工作计划

文本框样式可选择无边框透明,会更加美观

添加按钮和删除按钮各一个,美观的按钮可以在icont下载

如下图所示摆放:

04中继器内表格

date是日期,代表是哪一天的计划

time1代表开始时间

time2代表结束时间

plan代表工作计划

05交互事件

中继器每项加载时

设置开始时间文本=item.time1

设置结束时间文本=item.time2

设置结束工作计划文本=item.plan

点击添加按钮时

添加行时间,设置date=选中的日期,其余为空即可,让用户自己设置

点击删除按钮时

删除改行

选中日期时

点击日期后获取日期文本

添加对中继器的筛选,筛选条件为[[TargetItem.date==LVAR1]],lvar1为日期文本

最终效果:

以上就是关于“Axure怎样制作一个日志管理原型?”的全部内容精彩分享了,希望能够帮助到你!更多Axure精彩分享,尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话,那我不妨建议你直接学习体验一下我们的Axure自学自学课,专业讲师授课,可以从基础的知识点开始学起,逐步深入掌握哦~

怎么使用Axure制作表格热力图?

热力图是可视化界面中常用的统计图表,所以今天我们将学习如何在Axure中制作热力图。我们将使用中继器来制作它,因为中继器有很高的可重用性。再次使用时,只需要填写表格中的数据即可自动生成交互效果,包括根据数据自动显示相应的颜色,移动时在标题中显示完整的信息。备注:为准备学习Axure、正在学习Axure的小伙伴提供了专业系统的Axure自学视频课,视频教学,知识点清晰,方便快速地掌握~

使用Axure制作表格热力图方法:

一、材料准备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

条件2:如果Item.Column1这里我们注意,不要用if的条件,要用elseif的条件。if的意思是不管上面成立不,我们都执行该交互,那么低于两千的数据也会显示橙色,这明显是不对的。elseif就是上面条件不成立的情况,才会执行一下交互,所以实际的条件就是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。这样我们就制作完成了。

以后我们需要使用的话,只需要填写在中继器的表格里填写数据即可

以上即是关于“怎么使用Axure制作表格热力图?”的分享内容了,希望能够帮助到你~!更多Axure原型技巧,尽在Axure相关文章!很多小伙伴学习Axure都选择了在网上学习,但是很多都是东拼西凑的学,以致于学习到和实际操作的可能就有所出入了~所以学习Axure,还是系统化比较好!选择的Axure自学视频课,相信能够给予你知识的收获以及动手实操的经验~

Axure如何制作循环弹幕效果?

我们在看电视或者短视频的时候,通常都可以看到顶部有弹幕滑过!而想要使用Axure原型软件也正在一个循环弹幕效果,应该怎么做呢?如果你也想要学习怎么制作,不妨看一看下面的教程!对于不同阶段的Axure学习需求伙伴,为大家提供了多套Axure自学视频课,包括原型图基础入门、APP购物车交互教程、支付宝APP交互教程、APP列表页切换教程、移动登录交互教程等可以全方位的为小伙伴们提供基础的功能学习以及上手实操,感兴趣的就去学习体验~

Axure制作循环弹幕效果教程:

一、思路讲解

在制作之前,作者尝试了几种方式的制作方法,所以和大家一一分享一下。

1.用多个动态面板制作

这种方法的优势是及其简单,我们只需要在各个动态面板里面添加文字,然后设置自动循环的事件,让动态面板的状态为next循环,并且加一个向左滑动的效果。

但是如果仅通过动态面板的滑动动画会存在缺点,因为它的滑动不是匀速的,在面板状态更换时会停下来1s左右。

2.用移动事件制作

如果用移动事件来制作的话就可以避免上述的问题,但是做起来会比动态面板制作的复杂,思路是通过设置两个弹幕组,通过设置动态面板尺寸,只显示一个弹幕组的位置,然后弹幕组同时移动,当第一个弹幕组移出动态面板左边的位置时,将他瞬间移动到最右边继续移动,两个弹幕组不断循环。

那下面我们开始教学:

二、材料准备

动态面板*1——调整动态面板适当大小,并且取消勾选自动调整为内容尺寸。

文本标签*N——新建多个文本标签,填写弹幕文字,调整颜色、大小、位置;将其分成两个弹幕组合1和2,第一个组合放置在动态面板内部,第二个组合放置在动态面板右边。因为一开是没有弹幕,所以弹幕组合1一开始是隐藏的。

文本标签*2——这里用两个标签作为触发事件,后续会详细介绍,默认隐藏。

三、交互设置1.弹幕组合2的交互

移动——将弹幕组合2向右移动到-this.width的位置,就是整个组合移出了动态面板的左边,这里设置动画时间为20000ms,大家可以根据实际来设定移动速度。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互,所以等待20000ms。

触发——触发循环事件2鼠标单击时,用于不断循环,后面讲到循环事件的交互时会细说。

2.弹幕组合1的交互

隐藏——因为弹幕组合1是位于动态面板的里,一开是没有弹幕,所以将他隐藏。

移动——将弹幕组合1向右移动到-this.width的位置,就是整个组合移出了动态面板的左边,这里设置动画时间为组合2的一半,因为是一半距离,即10000ms,大家可以根据实际来设定移动速度。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互。

显示——显示当前元件。

触发——触发循环事件1鼠标单击时,用于不断循环,后面讲到循环事件的交互时会细说。

3.循环事件1的交互

移动——将弹幕组合1移动到动态面板的右面边缘的位置,LVAR1.width就是动态面板的宽度,这里注意我们是瞬间移动的,所以不需要加时间。

移动——瞬间移动完之后,我们继续将弹幕组合1向右移动到-target.width的位置,并且设置动画时间为20000ms;这里和上面载入时的时间说明一下,因为载入的时候,他就在面板里面,所以移动的时间是一半,移动完成之后,我们把它移到动态面板右边边缘的位置,所以是两倍距离,所以时间也是两倍。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互,所以等待20000ms。

触发——触发当前循环事件1鼠标单击时,这样就可以实现不断循环了。

4.循环事件2的交互

这里2的事件基本和1的一致,只是将移动的目标从1改成2。

移动——将弹幕组合2移动到动态面板的右面边缘的位置,LVAR1.width就是动态面板的宽度,这里注意我们是瞬间移动的,所以不需要加时间。

移动——瞬间移动完之后,我们继续将弹幕组合2向右移动到-target.width的位置,并且设置动画时间为20000ms。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互,所以等待20000ms。

触发——触发当前循环事件2鼠标单击时,这样就可以实现不断循环了。

那这样一个高保真的循环弹幕就制作完成了。

以上就是羽兔为各位小伙伴提供的“Axure如何制作循环弹幕效果?”的相关内容讲解了,希望能够帮助到你!学习Axure原型设计,教程不怕多,内容不怕详,更多Axure文章等你阅读~Axure可以轻松处理使原型栩栩如生的细微细节和微交互,学会Axure,原型设计就轻松。来,就可以获取到专业课程学习哦~


标签:信息技术 Axure Axure7 软件 设计

大明白知识网 Copyright © 2020-2022 www.wangpan131.com. Some Rights Reserved. 京ICP备11019930号-18