編輯導語：在日常工作中，我們經常需要用到菜單欄，那麼如何通過AxureRP 9制作一個動态菜單？作者介紹了相關步驟，供你參考，幫助你更好地使用AxureRP 9制作工具。

如何用AxureRP 9制作一個動态菜單？

需要使用到的工具有：AxureRP 9，本教程主要采用該工具中的動态面闆的移動、顯示/隐藏來實現。

首先，使用基礎元件搭建一級菜單欄，可按照下圖所示建多個一級菜單：

• 步驟1：選擇一個矩形框。
• 步驟2：為矩形框填充顔色。
• 步驟3：為矩形框命名為：系統設置。

使用動态面闆搭建二級菜單欄，可按照下圖所示建多個二級菜單：

• 步驟1：選擇一個動态面闆；
• 步驟2：為動态面闆命名為：p1；
• 步驟3：雙擊動态面闆，進入到面闆圖層，在圖層中重複第（一）步的操作，在動态面闆中建多個二級菜單。

重複第一、二步操作，搭建出菜單的初始頁面。為了方便下面操作步驟的描述：這裡對元件進行統一的命名，且每個一級菜單下對應的二級菜單分别是：

接下來為菜單加上交互動作：我們要實現點擊一級菜單将其二級菜單收起和展開的效果，以【系統設置】和【p1】為例，點擊【系統設置】，【p1】可以顯示或隐藏，使用切換隐藏顯示來實現。

• 步驟1：選擇【系統設置】，點擊【新建交互】；
• 步驟2：選擇交互動作“單擊時”；
• 步驟3：添加動作：顯示/隐藏
• 步驟4：選擇需要顯示、隐藏的元件：【p1】；
• 步驟5：設置動作為：切換；
• 步驟6：點擊“确定”。

至此，完成了一個一級菜單和其二級菜單的收縮與展開效果。其他菜單組按照上述操作進行同樣設置。

當二級菜單展開之後，其下面的菜單應該往下進行移動。以【p1】為例，當【p1】顯示時，【任務督辦】的坐标x應該移動至【p1】的左方，【任務督辦】的坐标y應該移動至【p1】的下方；

1. 步驟1：選擇動态面闆【p1】，點擊【新建交互】，選擇【顯示時】；
2. 步驟2：添加動作：移動；
3. 步驟3：選擇元件：【任務督辦】
4. 步驟4：選擇移動類型：到達；
5. 步驟5：點擊：f(x);
6. 步驟6：點擊添加局部變量；
7. 步驟7：修改局部變量命名，修改為a；
8. 步驟8：選擇“元件”；
9. 步驟9：選擇元件為：【p1】；
10. 步驟10：點擊：插入變量或函數；
11. 步驟11：填寫變量公式；
12. 步驟12：點擊“确定”，完成x的設置；
13. 步驟13：重複第5/6/7/8/9/10/11/12，完成y的設置。

當二級菜單收縮之後，其下面的菜單應該往上進行移動。以【系統設置】為例，當【p1】隐藏時，【任務督辦】的坐标x應該移動至【系統設置】的左方，【任務督辦】的坐标y應該移動至【系統設置】的下方；

相應的操作同第（五）步，隻不過在新建交互時，點擊“隐藏”。

重複第（五）、（六）步，完成【p2】的設置。由于【p3】下方沒有菜單，所以【p3】不用進行設置。

當【任務督辦】、【事務辦理】移動後，其相應的二級菜單【p2】、【p3】也應該跟随一起移動。以【任務督辦】為例，【任務督辦】移動時，設置【p2】跟随即可。

1. 步驟1：選擇【任務督辦】，點擊【新建交互】，選擇【移動時】；
2. 步驟2：選擇動作：移動；
3. 步驟3：選擇元件：【p2】；
4. 步驟4：選擇移動類型：跟随當前元件。
5. 步驟5：點擊“确定”。

重複上述操作設置【事務辦理】。

完成上述操作後，基本實現了表單的靈活收縮和展開。但是我們發現，在點擊【系統設置】時，【事務辦理】沒有跟着一起移動，這裡需要對【p2】進行設置，【p2】移動時，【事務辦理】跟随移動。重複上一步，對【p2】進行設置。

1. 步驟1：選擇【p2】，點擊【新建交互】，選擇【移動時】；
2. 步驟2：選擇動作：移動；
3. 步驟3：選擇元件：【事務辦理】；
4. 步驟4：選擇移動類型：跟随當前元件。
5. 步驟5：點擊“确定”。

本文由 @冰砂蜜 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部