Axure实现唯一性选择元件

【概述】

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

【需求分析】

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

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

【实现思路】

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

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

【原型设计】

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

                              B、选中这三个元件，设置选项组为size；

                             

                             

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

                             

 

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

                             B、选择这两个元件，设置选项组为pic；

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

                             

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

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

 【交互设计】                  

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

【总结】

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

回复【入门】 ，获取零基础Axure快速入门视频教程；

回复【安装】 ，获取安装程序；

回复【练习】 ，获取练习案例；

回复【高保真】，获取高保真原型；

关注微信公众号【猿型库】，获取更多优质Axure资源；