Axure高保真原型:多选下拉列表(自动生成标签)

2023-06-16 0 252

原副标题:Axure声效蓝本:多选下拉列表(手动聚合条码)

多选下拉列表能用作展现可选条码,并容许采用者优先选择数个条码,所以该怎样借助Axure里用网络连接制做三个半选下拉列表。译者归纳了有关关键步骤,期望对你略有协助。

Axure高保真原型:多选下拉列表(自动生成标签)

多选下拉列表常见作须要采用者从几组快捷键中优先选择数个快捷键的情形。它提供更多了三个输入框,采用者能点选进行并优先选择她们钟爱的数个快捷键。多选下拉列表能用作展现可选条码,并容许采用者优先选择数个条码。比如,在三个网志正式发布界底下,能采用多选下拉列表优先选择适用于的条码。

因此那时就教我们在Axure里假如用网络连接制做三个半选下拉列表,因此依照已快捷键手动聚合条码的蓝本模版。

一、效用展现

1、点选下拉列表框能弹出快捷键,点选快捷键能选上快捷键或是中止选上

2、依照已选文本手动表明有关联的条码,因此依照条码数目手动修正下拉框的体积

3、中止选上时,有关联条码手动删掉,也能点选条码里的删掉按键删掉并中止选上

4、快捷键重要信息能在中继器表单里保护,快捷键非常多时,能透过快捷方式每边查阅快捷键

Axure高保真原型:多选下拉列表(自动生成标签)

蓝本门牌号:https://g8a5mh.axshare.com/#g=1

二、制做讲义 1. 用网络连接制做快捷键

她们追加三个网络连接,在网络连接里加进文档条码,大背景正方形,和多选按键,这儿她们即使想自订多选按键的式样,因此她们没用控制系统多选按键,她们用静态液晶来制做,减少三个状况,三个是未选上状况,三个是选上的状况,依次引入选上和未选上的多选按键的素材。

当然你们也能用控制系统的多选按键来制做,依次将她们放入三个状况里,但是须要用个热区挡住他,即使后续是否选上是透过网络连接里的值控制的,并不是透过点选直接改变的。如下图所示摆放:

网络连接表单里她们减少两列:

text列:在该列加进快捷键名,有几个快捷键就填写几行 xuanzhong列:用来控制有关联行的快捷键是否被优先选择,一般假如默认没选上项的话,不填即可,假如项默认某个快捷键选上,就在该快捷键xuanzhong列的值填写1

Axure高保真原型:多选下拉列表(自动生成标签)

在网络连接每项载入时,她们首先用设置文档的交互,将text列快捷键的值设置到文档条码里。

然后她们还要依照xuanzhong列的值来设置静态液晶是选上还是未选上的状况。假如xuanzhong列的值等于1,所以她们用将静态液晶设置到选上状况;假如不等于1,她们就设置到未选上的状况,不过这儿不等于1的情形能不用写,即使他默认就是未选上的状况。

2. 鼠标单击快捷键时的交互

鼠标单击快捷键时,她们要依照判断该快捷键是否已经被选上,假如已被选上,她们就将他设置为未选上,即使控制他是否选上是透过网络连接里选上列的值来控制的,因此她们用更新行的交互,将网络连接里xuanzhong列的值更新为0即可;假如未被选上,我们就将他设置为选上,用更新行的交互,将网络连接里xuanzhong列的值更新为1即可。

Axure高保真原型:多选下拉列表(自动生成标签)

3. 将网络连接转为静态液晶

这样她们就基本完成了下拉快捷键,假如快捷键非常多,这个快捷键就会很常,因此她们把它转为静态液晶,取

假如觉得控制系统的快捷方式不太好看的话,她们还能透过再次转为静态液晶,然后用外液晶遮挡住大部分或全部内液晶的快捷方式,这样去美化一下。

然后她们在底部减少三个大背景正方形,将她们组合在一起,这样下拉快捷键就做好了。

4. 下拉框的制做

下拉框她们须要用到正方形,每边箭头,和网络连接条码组。

鼠标单击这个组合时,她们用表明的交互,将下拉快捷键表明出来,这个她们能优先选择灯箱效用,这样点选其他空白的地方,下拉快捷键就能手动收起来。

Axure高保真原型:多选下拉列表(自动生成标签)

当然她们也能减少一些交互式样让他更加美化,减少正方形选上和禁用式样,鼠标移入移出或是下拉快捷键表明隐藏时,触发这些式样,即使每个人审美不一样,这些你们自行处理即可。

4. 网络连接条码组

前面说到下拉框组合里须要有三个网络连接条码组,她们现在来制做。

须要再网络连接里减少大背景正方形,文字条码和删掉按键,文字条码她们转为静态液晶,即使考虑到有些快捷键太长,她们就自表明前面部分即可。如下图所示摆放即可。

Axure高保真原型:多选下拉列表(自动生成标签)

网络连接表单里不须要修改,用自带的Column0列即可,默认网络连接表单为空。网络连接布局为水平,按网格排布,案例中是每行项目数是2。

在网络连接每项加载时,她们用设置文档的交互,将Column0列的值设置到文档条码里。

Axure高保真原型:多选下拉列表(自动生成标签)

这样条码组就只做完成了。

5. 快捷键和条码的联动

接下来她们要让快捷键和条码进行联动,在快捷键网络连接里,该快捷键被选上,她们就用加进行的交互,将该快捷键的快捷键值减少的条码网络连接里。这儿须要注意的是,即使网络连接每次更新都会从头加载,因此在一开始假如直接加进行的话,选第二个快捷键之后,就会发现之前第一次加进的条码,重复加进了。

因此她们在一开始的时候,要对条码网络连接做三个还原的操作,她们能用删掉所有行的方式,让选上之前的条码网络连接处于三个原始为空的状况。

Axure高保真原型:多选下拉列表(自动生成标签)

她们要删掉条码的话,她们也不是用删掉行的方式,删掉标签里有关联的行。即使她们是透过下拉快捷键网络连接里的值来控制具体表明的条码,因此假如她们想让条码删掉,她们就用更新行的交互,将和条码名称一样的行的xuanzhong列的值更新为0,这样就能把条码删掉。

这样她们就基本完成了,但是她们还须要考虑条码太多的情形。

6. 设置下拉框的体积

她们能依照条码网络连接的体积,来设置外框的体积。

当所有条码加载完成后,她们用设置体积的交互,首先设置下拉框的体积,宽度保持不变,高度就是条码组的高度+每边的边距,这样就能外框就能变高。

同事她们还要用移动的事件,移动下拉快捷键组合,移动到下拉框的底部,这样就能依照条码的多少,手动修正下拉框的体积。

Axure高保真原型:多选下拉列表(自动生成标签)

这样她们就完成了多选下拉列表(手动聚合条码)蓝本模版的制做了,下次采用也很方便,她们只须要在下拉快捷键网络连接表单里填写快捷键值,即可手动聚合交互效用。

那以上就是本期讲义的全部文本,钟爱的同学们能动手试试哦,感谢您的阅读,她们下期见。

本文由 @AI产品人 原创正式发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务