如何在Axure中實現(xiàn)不同元件的單選選中效果？教程詳解在此，請看~~

同一選填內(nèi)容的不同選項，我們可以通過拖動元件庫已有的“單選按鈕”，編輯選項對應(yīng)需要展示的文字；然后全選所有的“單選按鈕”，將他們組合并取名為某一名稱；最后將此名稱復(fù)制到“設(shè)置單選按鈕組名稱”中，即可實現(xiàn)效果。

以我們填寫個人信息中很常見的性別選擇為例。

但如果你所需要呈現(xiàn)的原型不是單選按鈕，而是類似于菜單選中或者頁碼切換的展示效果，那“單選按鈕”就滿足不了你了

這時候我們需要自定義不同元件的單選選中效果，具體的Axure操作步驟可分解為：

第一步

拖入一個矩形元件到頁面中，將其調(diào)整為你想要的形狀和大小，并對其進(jìn)行命名

我拖入了一個矩形，將其圓角半徑設(shè)置為8，將該元件名稱修改為“性別”，并在該矩形內(nèi)輸入想要展示的文字“男性”。

第二步

設(shè)置矩形元件的交互事件（設(shè)置鼠標(biāo)單擊該元件時，它的選中狀態(tài)為“true”）。

第三步

設(shè)置矩形元件的交互樣式（點擊選中，設(shè)置選中的交互樣式為白色字體，填充藍(lán)色）。

第四步

復(fù)制剛剛設(shè)置好的矩形元件，粘貼出你所需數(shù)量的單選元件，并一一修改輸入你需要元件上展示的文字內(nèi)容（需要保證這些元件的命名都是統(tǒng)一的）。

第五步

全選中這些元件，在“設(shè)置選項組名稱”中輸入他們（一樣的）名稱后，點擊F5就可以看到效果了。

原型效果：http://www.wulihub.com.cn/go/Wy3R9J/start.html（附帶頁碼單選的原型效果）

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

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