【Axure教程】制作中继器标签

CrazyPM产品经理社区  阅读数  20  2021-07-28 22:37:25

编辑导语:我们在使用各种软件或者网页时,面对我们要去查找的内容,可以使用选择标签的方式进行,比如在进行注册一款新的网页时,我们就会发现有一个兴趣爱好的标签选择;本文作者分享了关于制作中继器标签的方法,我们一起来了解一下。

【Axure教程】制作中继器标签

标签像是目标确定的关键字词,便于查找和定位目标的工具,用来标志产品目标和分类或内容,绑定合适的话题,能方便分类检索,也更容易让用户发现。

随着大数据的发展,标签应用于更大软件系统,所以今天作者教大家在axure里面用中继器制作高保真的标签,包括选择已有标签,输入新增标签,删除已添加的标签。

具体效果如下图所示:

【Axure教程】制作中继器标签

原型地址:https://xy0uki.axshare.com

一、材料准备

中继器1——添加标签的中继器,内部包含矩形(标签文本1)和关闭按钮,标签文本1的样式可自由设置,案例中为外框线蓝色,填充颜色为浅蓝色,圆角,中继器表格中默认一列Column0,因为默认显示没有标签,删除所有标签行。

中继器2——已有标签的中继器,内部进包含矩形(标签文本2),样式可自由设置,案例中为外框线蓝色,填充颜色为浅蓝色,选中颜色为灰色,字体白色加粗,中继器表格中除了默认一列Column0外,还需要增加xuanzhong列,用于控制标签是否被选中;因为是已有可以选择的标签,所以Column0需要填写推荐选择的标签文字。

输入框——通过输入添加标签,默认隐藏边框,默认提示与:按回车创建标签。

默认隐藏按钮——仅用于触发事件,后面交互会详细介绍,包括筛选事件按钮、判断是否重复事件按钮、移动事件按钮、添加行事件按钮。

提示标签——用于输入重复标签时显示提示弹窗,转为动态面板,固定在中部。

外框(非必要)——用于美化,根据需求自由设置。

文字标签(非必要)——例如选择标签的文字,仅用于提示。

【Axure教程】制作中继器标签

二、交互设置

1. 中继器1每项加载时

在中继器1每项加载时,我们需要将中继器里记录的内容设置到标签文本1内,然后根据文字的长短设置标签文本1的尺寸以及关闭按钮的位置:

设置文本——设置标签文本1的值==Item.Column0。

设置尺寸——设置标签文本1的尺寸,宽==Item.Column0.length*14+40,高度保持原来不变。其中Item.Column0.length就是文本的长度,因为我们使用的是14号字体所以乘以14,然后两边个预留10的边距,所以+20,最后再预留关闭按钮+20的间距。

移动——移动关闭按钮到绝对位置,x值=Item.Column0.length*14+40-20,y值保持不变。

【Axure教程】制作中继器标签

2. 文本框提交时事件

首先我们将文本框提交按钮设为设置为筛选事件按钮,当按键盘的回车键时就相当于鼠标单击筛选事件按钮。

下面简单的讲解一下交互思路,首先回车按下时,我们先筛选中继器看有没有和输入内容一样的列,如果有一样的,弹出提示弹窗;如果没有一样的时候,我们移除筛选,并判断输入框内容是否为空,如果为空,代表用户没有输入内容,不做处理;如果不为空,则将文本框内容添加行。完成后设置文本框内容为空,并且移动输入框到标签后面。

筛选——对中继器1筛选,条件为Item.Column0==LVAR1,LVAR1为文本框内容。

触发——触发是否重复事件鼠标单击时。

是否重复事件鼠标单击时——判断中继器可视行数是否为0,如果为0就取消筛选、触发增加行鼠标单击时事件,如果不为0,则显示提示标签,并且设置复原文本框并取消筛选。

【Axure教程】制作中继器标签

添加行事件——如果文本框内容不为空,添加行为文本框内容,触发移动事件,还需要更新标签中继器二看看里面有没有和输入内容一致的,如果有就要选中;下面将标签中继器2是会详细讲到,这里更新行的条件为[[TargetItem.Column0==LVAR1]],更新xuanzhong列的值为1,最后将文本框复原为空值。

【Axure教程】制作中继器标签

移动事件——将文本框移动到绝对位置,x坐标=LVAR1.x+LVAR1.width+10,y坐标保持不变,LVAR1.x代表中继器1的x值,LVAR1.width代表中继器1的宽,整体意思为将文本框移动到中继器后面。

3. 关闭按钮鼠标单击时事件

在关闭该标签时,首先要考虑是否有标签是在下方选择标签内选中的,如果有需要取消其选中,然后删除该行的标签,再出发移动事件,将文本框移到对应位置。

更新行——更新中继器2,条件为Item.Column0==TargetItem.Column0,更新xuanzhong列为0,即相同的文字的标签会取消选中效果。

删除行——删除中继器1的当前行。

触发事件——触发移动事件(将文本框移动到绝对位置,x坐标=LVAR1.x+LVAR1.width+10,y坐标保持不变,LVAR1.x代表中继器1的x值,LVAR1.width代表中继器1的宽,整体意思为将文本框移动到中继器后面)。

【Axure教程】制作中继器标签

4. 中继器2每项加载时

设置文本——设置文本标签2的值==Item.Column0。

设置尺寸——设置文本标签2的尺寸,宽==Item.Column0.length*14+40,高度保持原来不变。其中Item.Column0.length就是文本的长度,因为我们使用的是14号字体所以乘以14,然后两边个预留10的边距,所以+20。

【Axure教程】制作中继器标签

选中——如果xuanzhong列的值为1,设置文本标签2的值为真。简单来说,我们是通过xuanzhong列的值控制推荐标签里的标签是否被选中,如果值为1就选中,不为1就未选中。

5. 文本标签2鼠标单击时

如果xuanzhong的值不等于1,就是标签还未被选中,那我们进行一下交互:

更新行——更新标签中继器当前行xuanzhong的值为1。

设置文本——设置输入框的文本为当前标签的文本,也可以是column0列的值。

触发事件——触发筛选事件鼠标单击时。

【Axure教程】制作中继器标签

设置文本和触发事件的意思,其实相当于我们在输入框内输入已选中标签的文字,然后按回车,应为上面已经写好了输入增加标签的交互,这里直接触发,不用重新写,也是一种快速实现的方式。

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

 

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

题图来自Unsplash,基于CC0协议。

 

赞助商推荐:数极客是新一代用户行为分析与数据智能平台,支持用户数据分析运营数据分析留存分析路径分析漏斗分析用户画像SEM数据分析等16种分析模型的数据分析产品,支持网站统计网站分析APP统计APP分析等分析工具,以及会员营销系统A/B测试工具等数据智能应用,支持SAAS和私有化部署,提升用户留存和转化率,实现数据驱动增长!

 

【独家稿件及免责声明】本站原创文章如需转载请联系我们,未经书面许可禁止转载,本站转载文章著作权归原作者所有,如有侵权请通过邮箱editor@kaifou.com联系我们。

增长工具