Axure实现唯一性选择元件

【概述】

说到唯一性选择,大家首先想到的就是单选框,除了这个场景,唯一性选择还有其他各种形态,比如大家经常用的淘宝商品下单页面,比如我要买一条裤子,那对于尺寸、颜色分类和花呗分期这三个选项,都会用到唯一性选择。在本练习中,我们就要实现宝贝下单的功能,通过本练习,掌握元件选项组和交互样式的使用方法。

【需求分析】

1、实现尺寸、颜色分类、花呗分期的唯一性选择功能;

2、选中的选项红色框选;

【实现思路】

1、在axure里面,有选项组的概念,多个元件可以组成一个组,在这个组里面,同时只有一个元件被选中,这个就是练习的核心;

2、对于元件被选中改变样式,可以设置元件的交互样式实现;

【原型设计】

1、制作尺寸选择: A、拖入三个矩形,并且分别命名为S 、M、L ;

                              B、选中这三个元件,设置选项组为size;

                             

                             

                             C、设置原件的交互样式,当元件被选中的时候,设置字体颜色和边框颜色为红色;

                             

2、制作颜色选择:A、颜色元件的与尺寸差不多,只是拖入两个图片元件,然后分别在这两个元件设置不同的图片;

                             B、选择这两个元件,设置选项组为pic;

                             C、设置原件交互样式,当元件被选中时候,设置边框颜色为红色;

                             

3、制作分期选择:分期选择与尺寸选择类似,不同的一点在于需要设置选项组的名称为fee;

4、到了这里,原型就制作好了,制作好的原型如下所示:

 【交互设计】                  

这个原型设置交互比较简单,在选择框单击的时候,设置当前选择框被选中就可以了。

【总结】

Axure提供的元件的选项组是非常重要的功能,同一个选项组,同时只能有一个选择项被选择,这就为实现唯一性选择提供了很大的便利。

获取原型:关注微信公众号【猿型库】,回复【练习】即可。

更多axure优质资源,请关注微信公众号【猿型库】

发布了12 篇原创文章 · 获赞 3 · 访问量 5615

猜你喜欢

转载自blog.csdn.net/letmeflee112/article/details/104784574