AXURE教程:三級菜單和標簽的交互使用

19 評論 24517 瀏覽 99 收藏 7 分鐘

如何讓三級菜單和標簽頁實現交互,筆者在此給出了一個教程,簡單快捷的原型在向你招手~~

今天,教大家如何做一個框架,包含三級菜單和標簽頁兩部分內容,以及他們之間相互交互的內容。

效果如下圖所示:

在線演示地址

一、效果介紹

  1. 左邊菜單欄,最多有三級菜單,可以通過菜單中繼器維護,使用方便。
  2. 點擊菜單,如果有子菜單會展開或收起子菜單;如果沒有子菜單,自動新增標簽頁,并打開對應頁面(不會重復生成標簽)。
  3. 點擊不同的標簽頁,切換不同的頁面。
  4. 刪除所有標簽頁,自動跳轉到首頁。

二、使用方法

本模板使用簡單,已制作好交互效果,只需要填寫“菜單中繼器”的內容即可直接使用。

  • menu1:填寫一級菜單的名稱;
  • menu2:填寫二級菜單的名稱(需要在一級菜單處先寫該二級菜單的一級菜單名稱);
  • menu3:填寫三級菜單的名稱(需要在一、二級菜單處先寫該三級菜單的一、二級菜單名稱);
  • picture:菜單文字前面的圖標,可上傳圖片;
  • see:1位載入時可見,0為隱藏;一般只有一級菜單填1,其他為0;
  • xiala:如果有子菜單,填1;如果沒有,填0;
  • xuan:填寫默認值0即可;
  • jinyong:填寫默認值0即可。

三、制作方法

1. 用中繼器制作三級菜單

1)設置中繼器內的表格

  • menu1:填寫一級菜單的名稱;
  • menu2:填寫二級菜單的名稱(需要在一級菜單處先寫該二級菜單的一級菜單名稱);
  • menu3:填寫三級菜單的名稱(需要在一、二級菜單處先寫該三級菜單的一、二級菜單名稱);
  • picture:菜單文字前面的圖標,可上傳圖片;
  • see:1位載入時可見,0為隱藏;一般只有一級菜單填1,其他為0;
  • xiala:如果有子菜單,填1;如果沒有,填0;
  • xuan:填寫默認值0即可,既下拉箭頭向下;如果需要默認打開下拉菜單,箭頭向右,填1;
  • jinyong:填寫默認值0即可,用于判斷是否選中。

2)中繼器材料

三個組合:

  1. 一級組合(文本標簽+矩形+圖片+下拉標志);
  2. 二級組合(文本標簽+矩形+圖片+下拉標志);
  3. 三級組合(文本標簽+矩形+圖片)。

3)中繼器內邏輯

①點擊一級菜單:

  • 收起狀態:如果有子菜單,打開子菜單;如果沒有子菜單,打開該名稱的頁面。
  • 展開狀態:收起子菜單。

②點擊二級菜單:

  • 收起狀態:如果有子菜單,打開子菜單;如果沒有子菜單,打開該名稱的頁面。
  • 展開狀態:收起子菜單。

③點擊三級菜單,打開該名稱的頁面。

具體邏輯如下圖所示:

2. 用中繼器制作標簽頁

1)設置中繼器內的表格

  • column0:標簽頁名稱,默認給一個首頁;
  • xuanzhong:1打開對應頁面,0不打開。

2)中繼器材料

1個好看的標簽矩形,刪除“x”形狀。

3)中繼器內邏輯

點擊標簽矩形,取消選中其他標簽,選中該標簽并打開對應頁面。

點擊“x”,刪除該標簽,自動選擇下個標簽,并打開選中標簽的頁面。如果所有標簽被刪除,自動生成一個首頁標簽,并打開首頁。

具體邏輯如下圖所示:

3. 制作對應頁面

頁面名稱要和菜單中繼器內名稱相同(沒有子菜單的菜單),然后在對應頁面制作對應內容即可。

4. 制作菜單與標簽頁的交互

點擊沒有子菜單的菜單時,記錄該菜單文字,判斷是否有該標簽頁。如果有,選中并打開該標簽頁;如果無,新建標簽頁并打開對應頁面。

具體邏輯如下圖所示:

總結

該原型非常實用,但制作相對復雜,新手不容易完成。

制作完成后,以后使用方便,僅需簡單填寫菜單中繼器的內容,即可擁有完美的效果,所以強烈推薦給各位使用。

 

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 沒誠意的教學,更像是引流買教程

    來自天津 回復
  2. 來自HE.NET 骨干網 回復
  3. 求一個原型文件,郵箱2495613256@qq.com,非常感謝

    來自四川 回復
  4. 原型預覽及下載地址:
    https://axhub.im/pro/e9c062785e25944a

    來自廣東 回復
  5. 不知道缺了什么 實現不了

    來自廣東 回復
  6. 不知道缺了什么 實現不了

    來自廣東 回復
  7. 求一個原型文件,2572209130@qq.com,非常感謝

    來自廣東 回復
  8. 這種方式只適合于菜單數量較少的情況,一旦菜單多起來會十分卡頓。

    來自廣東 回復
    1. 100個以下基本不卡

      來自廣東 回復
  9. 求原型文件,5450932@qq.com,謝謝!

    來自廣東 回復
  10. 我制作了三級菜單,但是上傳到AxureShare上中繼器的內容就沒有了,只有空白框,一個個菜單都打開著,您或許知道為什么嗎

    來自河南 回復
  11. 大神,麻煩能把原型發我郵箱嗎?謝謝!508521329@qq.com

    來自上海 回復
  12. 沒接觸過中繼器,看完之后似懂非懂……一步一步照著做,但是卡住了,不懂“判斷標簽是否存在”這個組件是什么,放在哪里的?

    來自福建 回復
    1. axure里面中繼器是很常用的一個元件哦,建議您上網系統的學習一下。

      來自廣東 回復
    2. 我也是,不是說好就一個矩形一個×嗎,后面還有一個觸發按鈕,也不清楚是哪一部分的內容。望大佬解答。

      來自廣東 回復
  13. 看完了還是不會

    來自上海 回復
    1. 嘻嘻,我看完了巴菲特的書也還是沒能成為股神咧

      來自廣東 回復
  14. 哈,看完還是不太會?你可能需要從Axure基礎開始學

    ?? 這里推薦你加Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    領取適合產品新人的原型設計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!

    來自廣東 回復
  15. 顯示未找到內容TAT 麻煩再分享一個吧

    來自福建 回復