穿梭框(Transfer)是原型设计中较为常用的控件之一,本期我们实验利用Axure中继器实现动态穿梭框控件。
一、交互样式动态交互结果如下:
1. 初始载入时仅在待选区显示待选项,已选区现选项不显示;
禁用已选区全选勾选框、添加按钮与移除按钮;
待选区已选选项数量与已选区已选选项数量、可见选项数量均为“0”;
2. 选中选项时被选中选项标志为蓝色;
显示实际的已选选项数量(待选区or已选区);
全选按钮状态改观,当已选选项数量便是当前区域可见选项数量时,全选按钮改观为选中状态,不然改观为半选中状态;
启用添加/移除按钮;
3. 打消选中时对应选项规复初始颜色;
显示实际的已选选项数量(待选区or已选区);
全选按钮状态改观,当已选选项数量便是当前区域可见选项数量时,全选按钮改观为选中状态,不然改观为半选中状态;
按照已选选项数量判定添加/移除按钮状态(禁用/启用);
4. 点击添加/移除按钮时埋没当前区域已选中选项,并在方针区域显示对应选项;
待选区/已选区已选选项数量均为“0”,待选区/已选区可见选项数量为实际值;
待选区/已选区全选勾选框为未选中状态;
禁用添加、移除按钮;
清空搜索框已输入的要害词;
5. 点击全选勾选框时当全选勾选框为未选中状态时,选中当前区域全部选项;
当全选勾选框为已选中状态时,打消选中当前区域全部选项;
当全选勾选框为半选中状态时,选中当前区域全部选项;
同步更新已选选项数量、添加/移除按钮状态;
6. 输入要害词搜索时输入要害词,显示删除图标,并按照输入的要害词展示对应的可见选项;
清空要害词,埋没删除图标,打消当前所有已选中选中,展示当前区域全部可见选项;
点击删除图标,清空已输入的要害词;
检索出的可见选项可以选中/打消选中;
二、根基思路按照当前中继器可见选项数量(VC,VisibleCount)与已选选项数量(SC,SelectedCount)节制载入时全选勾选框(SelectAll)是否启用及状态;
通过中继器[[Column.Visible]]列节制待选区与已选区选项是否显示;
勾选选项时,标志当前选中行及方针中继器中对应行,并更新已选选项数量;
按照已选选项数量(SC)节制添加、移除按钮是否启用;
点击添加、移除按钮时,更新已标志行[[Column.Visible]]值。
以上是穿梭框根基思路。本期较上一期《原型设计-Axure中继器实现动态树布局控件》难度小了许多,细心耐性即可。
三、实现步调 1. 基本元件-选项1)选项-静态结果
在Axure画布中新增组合元件“Option”,组成元素:组合元件“Option -Select”+文本标签(Option -Name)+矩形(未定名,宽198,高38),并调解到符合巨细。个中组合元件“Option-Select”组成元素为:矩形(未定名,宽12,高12)+Icon(√);
参照上图,别离配置单个元件的交互样式;
针对组合元件Option配置选项组:Row;
针对组合元件Option配置交互结果,单击时,若当前未选中,配置选中“当前”为真。若当前已选中,打消选中。
新增中继器“Optional”,将组合元件“Option”复制个中,并配置中继器属性“断绝列表项之间的选项组”为“不勾选”;
往中继器“Optional”中添加初始数据(初始数据可自行按照需要添加);
中继器数据列说明。
2)选项-初始载入结果
页面载入时,添加筛选,只显示Visible=1的数据;
配置(Option-Name)显示内容为[[Column.Name]]。
2. 基本元件-搜索框不详述,拜见上期文章《原型设计-Axure中继器实现动态树布局控件》
3. 基本元件-全选选择框在Axure画布中新增动态面板“SelectAll”,组成元素如下:
根基思路:按照已选中选项的数量切换动态面板(SelectAll)。详细交互在动态结果中添加。
4. 基本元件-按钮-添加/移除参考源文件,不详述
5. 静态结果将建造好的基本元件举办组合如下:
复制一份已建造好的样式,定名为“Selected”,并将个中继器[[Column.Visile]]数值修改为“0”,即不显示;
将已选区、待选区4个文本标签别离定名如下,用于后续交互。
6. 动态结果-初始载入时配置Optional-SC、Selected-SC、Selected-VC初始值为0;
配置页面载入时,文本标签Optional-VC值为Optional中继器的可视Item汇总数;
配置载入时,全选勾选框Optional-SelectAll、Selected-SelectAll初始状态,配置如下:
即,当可选项数量为0时,禁用全选勾选框;
当可选项数量不为0,且已选项数量便是可选项数量时,配置全选勾选框为选中;
当可选项数量不为0,且已选项数量小于可选项数量但大于0时,配置全选勾选框为半选中;
当可选项数量不为0,已选项数量为0时,配置全选勾选框为未选中状态。
配置载入时,添加(Add)/移除(Remove)按钮初始状态如下:
即,当待选区已选项数量0时,启用添加(Add)按钮。不然禁用;
移除(Remove)按照已选区已选项数量判定,道理沟通。
7. 动态结果-选项选中/打消选中结果配置待选区Optional下组合元件Option单击时,交互如下:
即当选项Option未被选中时,点击单击:
配置当前为选中;
标志当前行,标志已选区Selected中继器中名称沟通的行;
配置待选区已选项数量Optional-SC为当前数量+1;
触发事件:Add-载入时、Optional-SelectAll载入时。
当选项Option已选中时,点击单击:
配置当前为未选中;
打消标志当前行,打消标志已选区Selected中继器中名称沟通的行;
配置待选区已选项数量Optional-SC为当前数量-1;
触发事件:Add-载入时、Optional-SelectAll载入时。
配置待选区Optional下组合元件Option-Select交互如下:
即当Option-Select未被选中时,单击配置当前为选中,同时触发事件Option-单击时;
当Option-Select被选中时,单击配置当前为未选中,同时触发事件Option-单击时。
参照A、B步调,针对已选区Selected中选项与选项勾选框做雷同的交互配置。
8.动态结果-全选勾选框选中/打消选中结果配置待选区Optional下组合元件SelectAll单击时,交互如下:
即,当全选勾选框为未选中状态时,配置当前为选中,触发事件:Option-单击时;
当全选勾选框为已选中状态时,打消当前选中,触发事件:Option-单击时;
编辑导语:在企业中,我们常常会碰着大量的数据以及阐明数据的环境,数据可视化就发挥了很大的浸染;数据可视化是指将数据以视觉形式来泛起,如图表或舆图,以辅佐人们相识这些数据的意义;本文作者分享了关于企业数...
编辑导语:我们在日常糊口中见到的大大都都是上置式饮水机,在安装水桶的时候很是不利便,对付很多女孩子来说更是需要淹灭半天时间才气安装好。那么,为什么看起来更利便的下置式饮水机还没代替上置式饮水机呢?这内...
编辑导语:如安在事情中做一个高效的人呢?这个问题对付各行各业的人来说,都很重要,对付产物司理来说也不破例。那么,如何才气做一个高效的产物司理呢?本文作者为我们总结了6点,尽力做到这六点,你也可以成为一...
编辑导语:在面临巨大的用户体验阐明时,可以用到三位体验模子把他化繁为简,辅佐我们面临纷杂的体验因素,整理思路,梳理出方针产物当前的定位;本文作者对此举办了具体的阐明,我们一起来看一下。 在UX规模,...
心途经程 刚踏入政务规模的时候,斗志昂扬想要做出许多改变。但总被现实啪啪打脸,相信许多入坑的伴侣和我一样。先不谈改变一个行业的大抱负。哪怕只通过本身的专业本领,为这个行业做出一分孝敬的都十分艰巨,我...
编辑导语:用户登录界面是吸引用户的一个很重要的手段,新颖的界面往往可以给用户留下深刻的印象,从而晋升一款产物的好感。那么,如何用Axure建造渐变色用户登录交互呢?本文作者通过实际操纵为我们举办了分享...