本文給大家講解一下如何在Axure中制作導航欄的收縮與展開，一起來看看~

本文將從以下3個方面展開：

1. 需求分析；
2. Axure關鍵點分析；
3. 效果展示。

1. 需求分析

我們在做原型設計的時候，通常會遇到這樣的需求：點擊導航欄的某個一級菜單，則展開其下面的二級菜單，同時收起其他一級菜單下面的二級菜單。

如果使用Axure軟件來做原型設計，遇到此類需求的時候，我們應該怎么進行需求分析呢？怎么將需求與Axure的功能進行匹配呢？

我們仔細研究需求就會發現，需求的核心點在于：展開菜單的同時收起其他菜單，也就是說菜單的展開或者收起是有條件，在某些條件下需要展開或者收起?？吹竭@里，我們是不是會想到Axure中的動態面板呢？動態面板可以實現元件的顯示及隱藏，正好和需求的訴求點是吻合的。

看到這里，相信大家已經有思路了，用Axure的動態面板功能就可以實現該需求。下面接著講Axure的實現方式。

2. Axure關鍵點分析

通過上面的需求分析，我們已經有了解決思路，即使用Axure動態面板功能來實現。其核心點在于什么時間點展開哪些動態面板，同時隱藏哪些動態面板。

下面為Axure關鍵點分析：

1. 這里涉及到一級菜單和二級菜單，其中前者可以用矩形，后者需要用動態面板；
2. 二級菜單用的動態面板默認隱藏，在點擊其對應的一級菜單的時候才設置為顯示；
3. 點擊一級菜單的時候，顯示其對應的二級菜單動態面板，同時隱藏其他二級菜單的動態面板，并把下面的元件往上拉動；
4. 只需設置第一個一級菜單的交互，可復制至其他的一級菜單然后做一些修改即可。

動作為：設置面板狀態

其他細節，如鼠標懸停一級菜單時背景顏色顯示為淡藍色而鼠標點擊時顯示為綠色，這個可以通過設置矩形的交互樣式來實現。

3. 效果展示

效果展示網址為：https://2knrzw.axshare.com/

本文由 @翠baby 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議