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

梓賢vigo
19 評論 24826 瀏覽 99 收藏 7 分鐘
🔗 产品经理在不同的职业阶段,需要侧重不同的方面,从基础技能、业务深度、专业领域到战略规划和管理能力。

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

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

效果如下圖所示:

在線演示地址

一、效果介紹

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

二、使用方法

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

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

三、制作方法

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

1)設置中繼器內(nèi)的表格

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

2)中繼器材料

三個組合:

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

3)中繼器內(nèi)邏輯

①點擊一級菜單:

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

②點擊二級菜單:

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

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

具體邏輯如下圖所示:

2. 用中繼器制作標簽頁

1)設置中繼器內(nèi)的表格

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

2)中繼器材料

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

3)中繼器內(nèi)邏輯

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

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

具體邏輯如下圖所示:

3. 制作對應頁面

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

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

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

具體邏輯如下圖所示:

總結(jié)

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

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

 

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 沒誠意的教學,更像是引流買教程

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

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

    來自廣東 回復
  5. 不知道缺了什么 實現(xiàn)不了

    來自廣東 回復
  6. 不知道缺了什么 實現(xiàn)不了

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    來自福建 回復
专题
18490人已学习17篇文章
随着互联网的不断发展,不少产品开始了适老化改造,帮助老年人更好地融入智能生活。本专题的文章分享了适老化的设计思路。
专题
12503人已学习12篇文章
在各大产品中,都离不开会员体系的建立,那么会员权益模块产品该如何设计?本专题的文章分享了会员权益设计的思考
专题
36510人已学习14篇文章
订单系统是看似简单,实际上是一个逻辑复杂的系统。
专题
56050人已学习20篇文章
产品上线后冷启动怎么做最有效?这是产品经理和运营必须要了解的。
专题
53206人已学习18篇文章
做了好多年的产品经理,该不会连注册登录功能设计都没整明白吧?