选择器是系统中常用的选择工具,一般分为点击选择器和滑动选择器。今天作者就教大家如何在Axure里面用中继器制作滑动穿梭框选择器的原型模板。
制作完成之应具备以下交互效果:
- 穿梭框效果:可以通过左右拖动,将选项从可选栏目移动到已选栏目,活动从已选栏目移动到可选栏目
- 复用性效果:可以在中继器表格里面增加、删除、修改选项,数据维护后自动生成交互效果
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://rs5y5o.axshare.com/#g=1
【原型下载】
方式2:https://weidian.com/item.html?itemID=3664758036
一、选择器的制作
我们新建一个中继器,中继器里默认自带一个矩形,我们设置矩形的选中样式和禁用样式。
选中样式就是鼠标移入选项时变灰的样式,禁用样式就是拖动选项时变蓝的样式。
然后我们把这个矩形转为动态面板,这样我们就可以拖动矩形了。
这里我们在中继器表格里Column0出填写具体的选项,因为中继器默认自带设置文本的交互,所以我们不需要修改交互,就可以自动把文字设置到矩形里。
鼠标移入动态面板时,我们用设置矩形选中为真,鼠标移出动态面板时,设置矩形选中为假,添加这个交互之后就可实现移入变色的效果。
二、选择器的复制
完成之后我们把该中继器命名为中继器1,即左侧可选栏目的中继器,然后复制命名为中继器2,中继器2是已选栏目,默认为空,所以我们情况中继器2Column0的所有选项,完成后如下图所示
三、左侧选择器的交互
两个选择则器都制作好之后,我们可以添加交互了,我们首先来增加左侧可选栏目选择器的交互:
1、动态面板拖动时
首先我们用移动的事件,选择跟谁鼠标水平拖动,并且设置拖动的范围,这里拖动的范围是,左侧要大于0,右侧的边界要小于等于已选栏目中继器右侧的那条边,当然也可以理解为左侧边界要小于中继器2左侧的坐标值,但是因为他是在中继器1里面的,所以要减去中继器1左侧的坐标值。
然后用置顶的交互,把左侧可选栏目至于顶层,放置被右侧已选栏目遮挡住,保证移动的过程中,选项都是可以见的。
最后我们用禁用的交互,前面设置的禁用样式为蓝色,这样拖动是就可以看到变色了。
2、动态面板拖动结束时
结束的时候,我们需要根据鼠标指针的位置,判断是否想将该选项移动到右边。
如果鼠标指针位于已选栏目组合的范围内,代表是需要移动到右边的,这时我们用添加行的交互,把当前行的值添加有中继器2里,然后再用删除行的交互,删除当前中继器1的改选项,最后用启用事件,把禁用的矩形启用。
如果如果鼠标指针没有接触已选栏目组合的范围内,我们用移动事件,将动态面板移动到回拖动前的位置,最后用启用事件,把禁用的矩形启用。
四、右侧选择器的交互
右侧选择器的交互其实和左侧选择器的交互基本一致的,只是有左边移动到右边还是从右边移动到左边。主要不同有两点:
1、移动的边界,右边移动到左边,所他他的左边界应该要小于等于0,而且大于等于中继器1的左边界的坐标值,因为在中继器2里,所以也要减去中继器2的坐标值。
2、添加行和删除行,右边移动到左边,应该是在中继器1里添加该选项的行,然后在中继器2中删除当前行。
这样我们就完成滑动选择器原型模板的制作了,以后使用时只需要在中继器表格里填写选项,就可自动生成能滑动的穿梭框效果,是不是很方便呢?
那以上就是用中继器制作滑动选择器原型模板的全部内容了,感谢您的阅读,我们下期见。
作者:梓贤vigo;
微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载