Axure教程:使用選項組實現多級菜單點擊選中

0 評論 5525 瀏覽 2 收藏 4 分鐘

怎么在Axure中,使用選項組,實現多級菜單點擊選中效果?這篇文章里,作者總結了相關步驟如添加元件、設置事件等,做了一定的梳理和分享,一起來看看吧。

演示效果地址:https://gtrfz2.axshare.com

軟件版本:Axure RP v10

適用場景:后臺原型設計需要多級菜單,通過鼠標點擊交互效果。

2個知識點

  1. 控件選中樣式設置;
  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 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

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