單選是由多個單選項組成的選擇控件，獲取用戶針對某個事情的唯一結(jié)果。

常用場景有“微信APP-我-個人信息-設(shè)置性別”、“iOS設(shè)置-通知-顯示預(yù)覽”等。

原型畫法（無交互）

單選功能通常包含標(biāo)題和多個單選項，每個單選項由選項名稱和單選按鈕。

（1）先畫標(biāo)題。從默認(rèn)元件庫拖動“文本標(biāo)簽”到工作區(qū)，或者直接把“頁面名稱”作為標(biāo)題。

（2）再畫選項名稱。從默認(rèn)元件庫拖動“矩形1”到工作區(qū)，修改尺寸為375*40px，雙擊輸入文字“選項名稱”，設(shè)置左填充為15px這樣展示效果更妥當(dāng)。

（3）再畫單選按鈕。從默認(rèn)元件庫拖動“文本標(biāo)簽”到“選項名稱”的右邊，雙擊輸入“√”，修改尺寸為40*40px，設(shè)置對齊方式為左右居中和垂直居中。

（4）復(fù)制單選名稱2份，依次排列。

（5）生成原型HTML并在瀏覽器中查看效果。

原型畫法（有交互）

單選功能的常見交互效果：點擊任一單選按鈕自動變?yōu)檫x中狀態(tài)，同時其他單選按鈕變成未選中狀態(tài)。選中狀態(tài)和未選中狀態(tài)的樣式是不一樣的。

（6）繼承上面的“無交互”步驟，從第四步開始繼續(xù)畫“有交互”。設(shè)置按鈕的未選中狀態(tài)，設(shè)置文本顏色為白色。

（7）設(shè)置按鈕的選中狀態(tài)，點擊“交互樣式-選中”，選中字體顏色設(shè)置為#333333。

（8）設(shè)置按鈕為選項組。選擇按鈕設(shè)置選項組名稱為“單選”或者其他名稱，這樣代表該組的按鈕同時只能有一個選中狀態(tài)。

（9）選中標(biāo)題和按鈕，然后右鍵點擊“組合”，然后命名為“單選項”。

（10）設(shè)置單選項的交互。點擊該組合，設(shè)置“鼠標(biāo)單擊時”事件，添加動作“選中”，組織動作“當(dāng)前元件”。

（11）復(fù)制單選項2份，依次排列。

（12）選中第一個按鈕，打勾選中，這樣生成原型之后默認(rèn)選中它。

（13）生成原型HTML并在瀏覽器中查看效果。

添加到APP功能庫

不同場景下的單選功能，標(biāo)題不一樣，樣式相對固定。

根據(jù)多年P(guān)M經(jīng)驗，總結(jié)出3種常用的“單選”，添加到APP功能庫。

單選（打勾）

單選（主流）

單選（傳統(tǒng)）

注意事項

單選功能同一時間只有一個選中狀態(tài)。

單選功能可以設(shè)計多種樣式，另外選擇器也可充當(dāng)單選功能。

相關(guān)閱讀

APP開關(guān)功能怎么用Axure畫出來

APP九宮格如何用Axure畫出來

APP上導(dǎo)航如何用Axure畫出來

APP下導(dǎo)航如何通過Axure畫出來

常見的列表頁如何用Axure畫出來

#專欄作家#

浪子，公眾號：langzisay，人人都是產(chǎn)品經(jīng)理專欄作家。業(yè)務(wù)型PM。

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

題圖來自 Pexels ，基于 CC0 協(xié)議