Axure设计之三级联动选择器教程(中继器)

使用Axure设计三级联动选择器(如省市区选择器)时,可以利用中继器的数据存储和动态交互功能来实现。下面介绍中继器三级联动选择器设计的教程:

一、效果展示:

1、在三级联动选择器中,首先选择省份,省份下拉列表中的选项会根据数据集自动填充;

2、当鼠标移动到省份选项后,城市下拉列表会自动更新,仅显示与该省份相关的城市;

3、进一步当鼠标移动到城市后,区县下拉列表会更新为仅显示所选城市的区县;

预览:https://fdsg8u.axshare.com

二、设计思路

1、利用中继器存储省、市、区三级数据,并通过数据集管理这些数据;

2、为省份、城市和区县分别设置选择器,作为用户交互的界面元素;

3、当下拉列表的选项改变时,触发交互事件,根据选中的选项动态更新其他下拉列表的内容;

4、通过中继器的筛选功能,实现根据选中项动态更新下拉列表的效果。

三、关键步骤

1、添加中继器并设置数据集:

从元件库中拖入中继器到画布上,分别命名省级选择中继器、市级选择中继器、区级选择中继器;

省级选择中继器包括code、value两列,市级/区级选择中继器包括code、value、pcode三列,code为省份编码(关联市级选项使用),value为显示名称,pcode为上级行政区划编码;

在数据集表格中,导入省份、城市、区县数据。

2、配置省份下拉列表的交互:

选中省份下拉列表,添加"鼠标移入时"的交互事件;

在交互事件中,使用筛选功能更新城市中继器的数据,只显示与选中省份对应的城市;

同时,清空或重置城市和区域下拉列表的选项。

3、配置城市下拉列表的交互:

选中城市下拉列表,添加"鼠标移入时"的交互事件;

在交互事件中,使用筛选功能更新区域中继器的数据,只显示与选中城市对应的区县;

同时,可以根据需要添加提示信息或验证逻辑。

4、配置区域下拉列表(可选):

如果区域下拉列表只是用于显示选中的区域名称,则无需添加复杂的交互逻辑;

可以简单地显示选中的区域名称,或根据需要添加其他交互效果。

5、优化界面和测试交互:

根据设计需求,调整下拉列表和中继器的布局和样式;

在不同的省份、城市和区县之间切换,确保三级联动选择器能够正确地显示和更新数据;

测试交互的流畅性和准确性,确保用户能够轻松完成省、市、区的选择。

通过以上步骤,你可以使用Axure RP中的中继器设计一个功能完善、交互流畅的三级联动选择器。这个选择器可以应用于各种需要地址选择的场景,如电商平台、数据筛选等。

关键词:axure 三级联动选择 省市区选择

End·往期推荐

大屏可视化:舞动数据与美观的"设计秘籍"

Axure科技感大屏系统设计:智慧农场管理平台

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃

相关推荐
xy34536 天前
Axure9.0 热区典型实战使用场景
ui·axure·原型·产品设计
充值内卷6 天前
把 Visio 和 Axure 塞进一个 1.5 MB 的 exe:Visioxure 的架构与取舍
架构·axure
充值内卷6 天前
Visio、Axure、draw.io、ProcessOn、墨刀、Figma:六款工具哪个该干哪件事
axure·draw.io·processon
xy345311 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy345311 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
汉派日月土申18 天前
【移动元件库】8.时间轴
产品经理·axure
结构化知识课堂21 天前
Axure产品原型设计:AI能画原型了,为什么你还得懂这些术语?
人工智能·axure·原型设计·ai产品经理
xy345325 天前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
结构化知识课堂1 个月前
AI产品设计思维:需求分析的新变化(与传统软件的区别)
人工智能·产品经理·axure·需求分析·ai产品经理·数据产品经理
xy34532 个月前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计