美文网首页
【axure 教程】用中继器快速达成全选效果

【axure 教程】用中继器快速达成全选效果

作者: 冰棍儿2464 | 来源:发表于2022-05-24 20:19 被阅读0次

前言:制作原型可以说是产品经理与交互设计师的必经之路,那么用最简单的方式达成想要的效果便有助于我们提升工作效率,并且也可以让整个原型界面更加简介。

废话不多说-跟着我上车

没有对比就没有伤害

来看看这是不是你之前的实现方式:

【此方案不推荐】

理由1:你需要多次复制交互动作并手动一个个更改选项,耽误时间

理由2:此方式不适合多于5个选项,你会为此浪费大量的时间,并且元件较多时你的命名也会异常混乱。

所以,咱们来学习新的方式:

步骤1:设置基本元件

1.在axure元件库里自带复选框,可以直接拖出来使用,作为全选

步骤2:利用中继器完成复选框组

首先说中继器:

a.放置元件:将中继器从元件库内拉出来,双击进去,并且将新的复选框拖入,选中复选框,在“样式”中将福相框对应想要呈现的名称输进去。

b.中继器赋值:经过a步骤我们只是填入了中继器的显示名称,但是需要给中继器赋值,选中中继器,设置交互动作--Item loaded-设置文本--目标:复选框 设置为:文本 值:[[item.column0]] 点击完成则完成中继器的赋值。

步骤3:设置全选的交互动作

已经做好了准备工作,接下来我们就开始设置交互动作:

全选按钮:选中--设置选中--复选框(在中继器内的复选框)为真     取消选中--设置选中--复选框(在中继器内的复选框)为假  


总结

你知道用中继器达成全选效果的好处么?不管你有多少选择项,都只用设置一次交互动作,另外,所有重复的元素都可以利用中继器来快速实现,下篇将带领大家解锁中继器的奥秘。

相关文章

网友评论

      本文标题:【axure 教程】用中继器快速达成全选效果

      本文链接:https://www.haomeiwen.com/subject/sphsprtx.html