下拉列表框是很常用的元件,Axure元件库也提供了下拉列表框,但是Axure提供的下拉框不够美观,这里我们发扬造轮子的精神,自己定义下拉框。
我们先看一下制作好的省份选择的下拉框:
效果预览:http://www.axurestudy.cn/pr/index.html
【需求分析】
1、下拉列表分成初始状态、初始状态下显示请选择字样,下拉箭头朝下;
2、当鼠标点击的时候,下拉框的的边框变成蓝色,下拉箭头朝上,并且展示下拉列表数据项;
3、当鼠标在下拉列表项上移动的时候,选项变成蓝色;
4、单点击其中一个数据项的时候,下拉框收起,在下拉框里面显示选中项;
【原型设计】
1、现在画布拖入一个矩形框province,并且在矩形框里面输入Font AweSome图标字符靠右对齐,如果不会使用Font AweSome的同学,请查看如何使用字体图标;
2、在矩形框里面拖入一个输入框input,边框设置为0,录入文字“ 请选择 ”;
3、拖入一个中继器,在数据源里面录入省份名称数据;
4、点击右键,把中继器转换为动态面板,设置动态面板高度为合适的高度,并且设置动态面板为垂直方面滚动;
5、设置动态面板为隐藏状态;
至此,自定义下拉列表的原型已经制作完成,现在的效果如下所示:
【交互设计】
1、设置矩形框province的交互样式,当矩形框为选中的时候,设置边框颜色为蓝色;
2、输入框PInput和矩形框Province组合,设置该组合的点击事件,当鼠标单击的时候,设置矩形框Province在选中和取消选中之间进行切换;
3、设置矩形框Province的选中事件,当Province被选中,设置切换为,并且展示动态面板;当Province取消选中的时候,为并且隐藏动态面板;
4、设置中继器的记录的交互状态,当鼠标悬浮的时候,修改矩形框的填充颜色;
5、当选中中继器的一个记录的时候,设置输入框的值为选中值,并且隐藏下拉列表;
到了这里,自定义下拉列表框就制作好了,同学们赶紧去试试吧。
回复【入门】 ,获取零基础Axure快速入门视频教程;
回复【安装】 ,获取安装程序;
回复【练习】 ,获取练习案例;
回复【高保真】,获取高保真原型;
关注微信公众号【猿型库】,获取更多优质Axure资源;