編輯導(dǎo)讀：Web產(chǎn)品的單選組件在畫(huà)原型的時(shí)候比較常見(jiàn)，所以產(chǎn)品經(jīng)理有必要深入了解它的各種交互和對(duì)應(yīng)的原型畫(huà)法。本文作者從自身實(shí)踐經(jīng)驗(yàn)出發(fā)，分享了三種畫(huà)單選組件的方法，供大家一同參考和學(xué)習(xí)。

原型地址：https://fvtlr8.axshare.com/

PM可以根據(jù)它們的區(qū)別并結(jié)合實(shí)際場(chǎng)景，選擇合適的方法使用。

一、使用單選按鈕畫(huà)出單選組件

原型演示地址：?https://fvtlr8.axshare.com/#p=使用單選按鈕畫(huà)出單選組件

1、先畫(huà)字段名。從Axure默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到畫(huà)布合適位置，雙擊輸入文字“性別”。

2、再畫(huà)單選按鈕。從Axure默認(rèn)元件庫(kù)拖動(dòng)多個(gè)“單選按鈕”到字段名后面位置，然后水平均勻分布。

3、設(shè)置單選組。同時(shí)選擇多個(gè)單選框，右鍵點(diǎn)擊“設(shè)置單選按鈕組”然后在彈窗中輸入任意名稱(chēng)，注意不能和該頁(yè)面的其他單選組名稱(chēng)一樣。

4、設(shè)置默認(rèn)選項(xiàng)。如需設(shè)置，請(qǐng)點(diǎn)擊單選按鈕本身或者右側(cè)邊欄“交互”中勾選底部的“選中”。請(qǐng)注意單選功能最多只能選中1個(gè)。

5、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

二、使用下拉列表框畫(huà)出單選組件

原型演示地址：?https://fvtlr8.axshare.com/#p=使用下拉列表框畫(huà)出單選組件

1、先畫(huà)字段名。從Axure默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到畫(huà)布合適位置，雙擊輸入文字“性別”。

2、再畫(huà)下拉列表框。從Axure默認(rèn)元件庫(kù)拖動(dòng)“下拉列表框”到字段名后面位置，雙擊顯示彈窗“編輯下拉列表”，點(diǎn)擊“編輯多項(xiàng)”然后在對(duì)應(yīng)彈窗的的輸入框中輸入多個(gè)值，最后點(diǎn)擊“確定”按鈕保存。當(dāng)然也可以點(diǎn)擊“添加”按鈕一個(gè)一個(gè)進(jìn)行添加。

3、設(shè)置默認(rèn)選項(xiàng)。如需設(shè)置，請(qǐng)雙擊該下拉列表框顯示彈窗“編輯下拉列表”，勾選相應(yīng)的選項(xiàng)即可。

4、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

三、使用自定義選項(xiàng)組畫(huà)出單選組件

原型演示地址：?https://fvtlr8.axshare.com/#p=使用自定義選項(xiàng)組畫(huà)出單選組件

1、先畫(huà)字段名。從Axure默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到畫(huà)布合適位置，雙擊輸入文字“性別”。

2、再畫(huà)選項(xiàng)。從Axure默認(rèn)元件庫(kù)拖動(dòng)多個(gè)“矩形1”到字段名后面位置，尺寸修改為合適大小100*30px，然后依次排列。

3、設(shè)置選中樣式。同時(shí)選擇這些選項(xiàng)，右鍵點(diǎn)擊“交互樣式”，在彈窗“交互樣式”中切換到“選中”，勾選填充顏色并設(shè)置為藍(lán)色#0000FF，勾選字色并設(shè)置為白色#FFFFFF，點(diǎn)擊“確定”按鈕。

4、設(shè)置選項(xiàng)組。同時(shí)選擇這些選項(xiàng)，右鍵點(diǎn)擊“選項(xiàng)組”，在彈窗“選項(xiàng)組”中輸入任意組名稱(chēng)，然后點(diǎn)擊“確定”按鈕。以上3步其實(shí)就是自定義了一個(gè)選項(xiàng)組。

5、設(shè)置單擊選中。點(diǎn)擊第一個(gè)選項(xiàng)。右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“設(shè)置選中”，目標(biāo)選擇“當(dāng)前元件”，點(diǎn)擊“完成”按鈕。同時(shí)設(shè)置其他選項(xiàng)的交互事件。

6、設(shè)置默認(rèn)選項(xiàng)。如需設(shè)置，請(qǐng)右鍵相應(yīng)的選項(xiàng)然后點(diǎn)擊“選中”。

7、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

#相關(guān)閱讀#

如何用Axure畫(huà)出Web產(chǎn)品的菜單欄組件

如何用Axure畫(huà)出Web產(chǎn)品的面包屑組件

如何用Axure畫(huà)出Web產(chǎn)品的編輯詳情頁(yè)

如何用Axure畫(huà)出Web產(chǎn)品的列表組件：高級(jí)交互

#專(zhuān)欄作家#

浪子，個(gè)人微信langzipm，公眾號(hào)：浪子畫(huà)原型(langzisay)。專(zhuān)注于Axure原型設(shè)計(jì)和產(chǎn)品規(guī)范。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。