axure8.0原型设计实例:地区选择联动

2017年4月24日 阅读:305

所有关系到地址选择的地方几乎都能看到地区选择联动的设计,即后面更加详细的地区选择都会根据前面的大体地区选择的改变而改变。用户选择的某一个省份的之后,用户只需要在该省的所有市进行选择就行了。那么如何实现这种地区选择联动呢?原理很简单,通过下拉列表框和动态面板相结合即可。这里就教教如何使用axure8.0实现地区选择联动原型。

第一步:拖放摆放好相关控件

1、一个下拉列表框,命名为“省”,列表选项编辑为:广东、广西、湖南、江西、福建和贵州;

2、一个动态面板,命名为“市”,设置6个面板状态,每个状态以列表框中的6个选项命名;

3、在每个面板状态中,均放置一个下拉列表框,列表选项编辑相对应省份的所有市的名称。

第二步:为“省”添加选项改变时用例

添加6个用例:

Case1:如果当前元件被选择为广东时,设置“市”的面板状态为广东;

Case2:如果当前元件被选择为广西时,设置“市”的面板状态为广西;

Case3:如果当前元件被选择为湖南时,设置“市”的面板状态为湖南;

Case4:如果当前元件被选择为江西时,设置“市”的面板状态为江西;

Case5:如果当前元件被选择为福建时,设置“市”的面板状态为福建;

Case6:如果当前元件被选择为贵州时,设置“市”的面板状态为贵州;

预览中,随便选择某一省份时,相对应的市的选项就会出现联动改变。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之地区选择联动
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/24/536/

没有评论

评论已关闭。