Axure教程:不同元件的單選選中效果

0 評論 8638 瀏覽 7 收藏 3 分鐘

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

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

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

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

這時(shí)候我們需要自定義不同元件的單選選中效果,具體的Axure操作步驟可分解為:

第一步

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

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

第二步

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

第三步

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

第四步

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

第五步

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

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!