【Axure教程】用中继器制作滑动选择器(穿梭框)

简介: 【Axure教程】用中继器制作滑动选择器(穿梭框)

选择器是系统中常用的选择工具,一般分为点击选择器和滑动选择器。今天作者就教大家如何在Axure里面用中继器制作滑动穿梭框选择器的原型模板。

制作完成之应具备以下交互效果:

  1. 穿梭框效果:可以通过左右拖动,将选项从可选栏目移动到已选栏目,活动从已选栏目移动到可选栏目
  2. 复用性效果:可以在中继器表格里面增加、删除、修改选项,数据维护后自动生成交互效果

640.gif

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://rs5y5o.axshare.com/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3664758036

一、选择器的制作

我们新建一个中继器,中继器里默认自带一个矩形,我们设置矩形的选中样式和禁用样式。

选中样式就是鼠标移入选项时变灰的样式,禁用样式就是拖动选项时变蓝的样式。

然后我们把这个矩形转为动态面板,这样我们就可以拖动矩形了。

这里我们在中继器表格里Column0出填写具体的选项,因为中继器默认自带设置文本的交互,所以我们不需要修改交互,就可以自动把文字设置到矩形里。

640.png

鼠标移入动态面板时,我们用设置矩形选中为真,鼠标移出动态面板时,设置矩形选中为假,添加这个交互之后就可实现移入变色的效果。


 57b13cbc74fa19b73c13e4a938dd6c76.png

二、选择器的复制

d1ec038236dc89a139f5300da1001c41.png

完成之后我们把该中继器命名为中继器1,即左侧可选栏目的中继器,然后复制命名为中继器2,中继器2是已选栏目,默认为空,所以我们情况中继器2Column0的所有选项,完成后如下图所示

三、左侧选择器的交互

两个选择则器都制作好之后,我们可以添加交互了,我们首先来增加左侧可选栏目选择器的交互:

1、动态面板拖动时

首先我们用移动的事件,选择跟谁鼠标水平拖动,并且设置拖动的范围,这里拖动的范围是,左侧要大于0,右侧的边界要小于等于已选栏目中继器右侧的那条边,当然也可以理解为左侧边界要小于中继器2左侧的坐标值,但是因为他是在中继器1里面的,所以要减去中继器1左侧的坐标值。

然后用置顶的交互,把左侧可选栏目至于顶层,放置被右侧已选栏目遮挡住,保证移动的过程中,选项都是可以见的。

最后我们用禁用的交互,前面设置的禁用样式为蓝色,这样拖动是就可以看到变色了。


 2fc90a16f0abb083dadd16a17c06e8f6.png

2、动态面板拖动结束时

结束的时候,我们需要根据鼠标指针的位置,判断是否想将该选项移动到右边。

如果鼠标指针位于已选栏目组合的范围内,代表是需要移动到右边的,这时我们用添加行的交互,把当前行的值添加有中继器2里,然后再用删除行的交互,删除当前中继器1的改选项,最后用启用事件,把禁用的矩形启用。

f3c00c4fc30048f846a7d9cd5d92e2f9.png

如果如果鼠标指针没有接触已选栏目组合的范围内,我们用移动事件,将动态面板移动到回拖动前的位置,最后用启用事件,把禁用的矩形启用。

9f062830e11dd53abb58bd52cc4b4a70.png

四、右侧选择器的交互

右侧选择器的交互其实和左侧选择器的交互基本一致的,只是有左边移动到右边还是从右边移动到左边。主要不同有两点:

1、移动的边界,右边移动到左边,所他他的左边界应该要小于等于0,而且大于等于中继器1的左边界的坐标值,因为在中继器2里,所以也要减去中继器2的坐标值。

e0aafc7f9658354b63728a3c8198328c.png

2、添加行和删除行,右边移动到左边,应该是在中继器1里添加该选项的行,然后在中继器2中删除当前行。

94a6269b0714591b1f0dfeb42b9b458c.png

这样我们就完成滑动选择器原型模板的制作了,以后使用时只需要在中继器表格里填写选项,就可自动生成能滑动的穿梭框效果,是不是很方便呢?

那以上就是用中继器制作滑动选择器原型模板的全部内容了,感谢您的阅读,我们下期见。

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
23天前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
|
3月前
Axure 母版红色怎么去除?
Axure 母版红色怎么去除?
36 0
|
数据可视化
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格
|
C++ Python
|
存储 JSON 前端开发
【红隼书签】自定义光影、自定义背景、亮度和主题功能
【红隼书签】是一款简洁的在线书签导航网站。
105 1
【Axure教程】中继器图片列表(放大效果)
【Axure教程】中继器图片列表(放大效果)
【Axure教程】中继器图片列表(放大效果)