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

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

如何在Axure中實現不同元件的單選選中效果?教程詳解在此,請看~~

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

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

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

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

第一步

拖入一個矩形元件到頁面中,將其調整為你想要的形狀和大小,并對其進行命名

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

第二步

設置矩形元件的交互事件(設置鼠標單擊該元件時,它的選中狀態為“true”)。

第三步

設置矩形元件的交互樣式(點擊選中,設置選中的交互樣式為白色字體,填充藍色)。

第四步

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

第五步

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

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

 

本文由 @素小白 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!