Axure教程:不同元件的單選選中效果
如何在Axure中實現不同元件的單選選中效果?教程詳解在此,請看~~
同一選填內容的不同選項,我們可以通過拖動元件庫已有的“單選按鈕”,編輯選項對應需要展示的文字;然后全選所有的“單選按鈕”,將他們組合并取名為某一名稱;最后將此名稱復制到“設置單選按鈕組名稱”中,即可實現效果。
以我們填寫個人信息中很常見的性別選擇為例。
但如果你所需要呈現的原型不是單選按鈕,而是類似于菜單選中或者頁碼切換的展示效果,那“單選按鈕”就滿足不了你了
這時候我們需要自定義不同元件的單選選中效果,具體的Axure操作步驟可分解為:
第一步
拖入一個矩形元件到頁面中,將其調整為你想要的形狀和大小,并對其進行命名
我拖入了一個矩形,將其圓角半徑設置為8,將該元件名稱修改為“性別”,并在該矩形內輸入想要展示的文字“男性”。
第二步
設置矩形元件的交互事件(設置鼠標單擊該元件時,它的選中狀態為“true”)。
第三步
設置矩形元件的交互樣式(點擊選中,設置選中的交互樣式為白色字體,填充藍色)。
第四步
復制剛剛設置好的矩形元件,粘貼出你所需數量的單選元件,并一一修改輸入你需要元件上展示的文字內容(需要保證這些元件的命名都是統一的)。
第五步
全選中這些元件,在“設置選項組名稱”中輸入他們(一樣的)名稱后,點擊F5就可以看到效果了。
原型效果:http://www.wulihub.com.cn/go/Wy3R9J/start.html(附帶頁碼單選的原型效果)
本文由 @素小白 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
評論
- 目前還沒評論,等你發揮!