编辑导读：Web产物的单选组件在画原型的时候较量常见，所以产物司理有须要深入相识它的各类交互和对应的原型画法。本文作者从自身实践履历出发，分享了三种画单选组件的要领，供各人一同参考和进修。

原型地点：

PM可以按照它们的区别并团结实际场景，选择符合的要领利用。

一、利用单选按钮画出单选组件

原型演示地点：

1、先画字段名。从Axure默认元件库拖动“文本标签”到画布符合位置，双击输入文字“性别”。

2、再画单选按钮。从Axure默认元件库拖动多个“单选按钮”到字段名后头位置，然后程度匀称漫衍。

3、配置单选组。同时选择多个单选框，右键点击“配置单选按钮组”然后在弹窗中输入任意名称，留意不能和该页面的其他单选组名称一样。

4、配置默认选项。如需配置，请点击单选按钮自己可能右侧边栏“交互”中勾选底部的“选中”。请留意单选成果最多只能选中1个。

5、点击“预览”按钮，然后在欣赏器中查察原型结果。

二、利用下拉列表框画出单选组件

原型演示地点：

1、先画字段名。从Axure默认元件库拖动“文本标签”到画布符合位置，双击输入文字“性别”。

2、再画下拉列表框。从Axure默认元件库拖动“下拉列表框”到字段名后头位置，双击显示弹窗“编辑下拉列表”，点击“编辑多项”然后在对应弹窗的的输入框中输入多个值，最后点击“确定”按钮生存。虽然也可以点击“添加”按钮一个一个举办添加。

3、配置默认选项。如需配置，请双击该下拉列表框显示弹窗“编辑下拉列表”，勾选相应的选项即可。

4、点击“预览”按钮，然后在欣赏器中查察原型结果。

三、利用自界说选项组画出单选组件

原型演示地点：

1、先画字段名。从Axure默认元件库拖动“文本标签”到画布符合位置，双击输入文字“性别”。

2、再画选项。从Axure默认元件库拖动多个“矩形1”到字段名后头位置，尺寸修改为符合巨细100*30px，然后依次分列。

3、配置选中样式。同时选择这些选项，右键点击“交互样式”，在弹窗“交互样式”中切换到“选中”，勾选填充颜色并配置为蓝色#0000FF，勾选字色并配置为白色#FFFFFF，点击“确定”按钮。

4、配置选项组。同时选择这些选项，右键点击“选项组”，在弹窗“选项组”中输入任意组名称，然后点击“确定”按钮。以上3步其实就是自界说了一个选项组。

5、配置单击选中。点击之一个选项。右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发事件“单击时”，添加行动“配置选中”，方针选择“当前元件”，点击“完成”按钮。同时配置其他选项的交互事件。

6、配置默认选项。如需配置，请右键相应的选项然后点击“选中”。

7、点击“预览”按钮，然后在欣赏器中查察原型结果。

#相关阅读#

如何用Axure画出Web产物的菜单栏组件

如何用Axure画出Web产物的面包屑组件

如何用Axure画出Web产物的编辑详情页

如何用Axure画出Web产物的列表组件：高级交互

#专栏作家#

荡子，小我私家微信langzipm，公家号：荡子画原型(langzisay)。专注于Axure原型设计和产物类型。