Axure教程:使用選項組實現多級菜單點擊選中
怎么在Axure中,使用選項組,實現多級菜單點擊選中效果?這篇文章里,作者總結了相關步驟如添加元件、設置事件等,做了一定的梳理和分享,一起來看看吧。
演示效果地址:https://gtrfz2.axshare.com
軟件版本:Axure RP v10
適用場景:后臺原型設計需要多級菜單,通過鼠標點擊交互效果。
2個知識點:
- 控件選中樣式設置;
- 控件的選項組概念應用。
一、添加元件
1)首先,頁面增加4個矩形組件。
分別為以下分組:
- 一級菜單:Menu 1、Menu 2;
- 二級菜單:Menu 2.1、Menu 2.2(從屬一級菜單Menu 2,建立從屬關系接下來會講)。
2)分別設置組件樣式,這里我們選擇使用控件的選中樣式Selected Style,設置鼠標點擊后的效果。我這里是一級菜單填充了顏色,二級菜單透明度70%,字體加粗,用以區分。
添加樣式
選中樣式入口
一級菜單選中樣式
二級菜單選中樣式
二、設置事件
1)設置全部矩形組件的鼠標點擊事件為Set Selected/Checked – This Widget。這里需要解釋“This Widget”默認就是當前組件,而不用給每個組件都起名字。
三、設置選項組
鍵盤按住Shift鼠標分別點擊一級菜單組件:Menu 1、Menu 2,右側找到功能入口(因為Axure 10默認隱藏了這個入口),并設置選項組為“一級菜單”。
同理重復上述步驟,設置Menu 2.1、Menu 2.2,選項組為“二級菜單”。
PS:Axure選項組的作用,即同一選項組內只能有一個組件處于選中狀態。這樣我們點擊任一組件,其他組件就會自動取消選中狀態。
大功告成,趕緊預覽一下,看看效果吧~
本文由 @大臉瞄 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!