兩種簡單方法:用Axure實現左側動態導航欄

6 評論 22895 瀏覽 27 收藏 4 分鐘

最近在學習Axure的基礎教程,在網上看到了很多例子,整理了一下分享給大家~

第一種方法

(1)首先在面板上畫幾個矩形,大小一樣排列好。

(2)把A1、A2、A3設為動態面板,取名p1;同樣B1、B2、B3;C1、C2、C3分別取名為p2、p3。

(3)給導航欄A設置動作,導航欄對應正確的動態面板。導航欄B導航欄C同理設置好。

(4)這樣就大功告成了,很簡單的一種方法。

第二種方法

(1)第二種方法不同的地方是導航欄會發生變化,同樣先畫幾個矩形。

(2)把導航欄A、A1、A2、A3設為動態面板。注意:不單單是下面的子菜單,是整個一塊設為動態面板。導航欄B、C一樣轉換成動態面板,分別取名p1、p2、p3。

(3)雙擊p1,面板狀態管理。把state1改名為展開狀態。在點擊+號按鈕,新添一項,取名為收起狀態。p2,p3同理。

(4)雙擊打開收起狀態,在面板中畫一個導航欄A一樣的矩形。

(5)給動態面板p1設置動作,選擇狀態那里選擇“Next”。

(6)來看下效果,可以看到導航欄A收起的時候變成收起狀態了。

2種方法不同的地方是第一種不改變主菜單的樣式,第二種改變樣式。產品小白第一次發帖,如有不足的地方還請各位多多指教。

 

本文由 @七彩螺旋蒲公英 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 想問下,哪一種方法好,或者能介紹下適用場景嗎?

    來自河南 回復
  2. 為什么去按照第一種方法去做,會有導航的消失,中間斷了

    來自江蘇 回復
    1. 應該是你的導航欄放重疊了

      來自浙江 回復
  3. 有源文件么?可以參考一下謝謝

    來自北京 回復
  4. ?? 頭像很優秀,文章也很優秀

    來自北京 回復
    1. 多謝夸獎! ??

      來自浙江 回復