AXURE教程:三級菜單和標簽的交互使用
如何讓三級菜單和標簽頁實現交互,筆者在此給出了一個教程,簡單快捷的原型在向你招手~~
今天,教大家如何做一個框架,包含三級菜單和標簽頁兩部分內容,以及他們之間相互交互的內容。
效果如下圖所示:
一、效果介紹
- 左邊菜單欄,最多有三級菜單,可以通過菜單中繼器維護,使用方便。
- 點擊菜單,如果有子菜單會展開或收起子菜單;如果沒有子菜單,自動新增標簽頁,并打開對應頁面(不會重復生成標簽)。
- 點擊不同的標簽頁,切換不同的頁面。
- 刪除所有標簽頁,自動跳轉到首頁。
二、使用方法
本模板使用簡單,已制作好交互效果,只需要填寫“菜單中繼器”的內容即可直接使用。
- 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)中繼器材料
三個組合:
- 一級組合(文本標簽+矩形+圖片+下拉標志);
- 二級組合(文本標簽+矩形+圖片+下拉標志);
- 三級組合(文本標簽+矩形+圖片)。
3)中繼器內邏輯
①點擊一級菜單:
- 收起狀態:如果有子菜單,打開子菜單;如果沒有子菜單,打開該名稱的頁面。
- 展開狀態:收起子菜單。
②點擊二級菜單:
- 收起狀態:如果有子菜單,打開子菜單;如果沒有子菜單,打開該名稱的頁面。
- 展開狀態:收起子菜單。
③點擊三級菜單,打開該名稱的頁面。
具體邏輯如下圖所示:
2. 用中繼器制作標簽頁
1)設置中繼器內的表格
- column0:標簽頁名稱,默認給一個首頁;
- xuanzhong:1打開對應頁面,0不打開。
2)中繼器材料
1個好看的標簽矩形,刪除“x”形狀。
3)中繼器內邏輯
點擊標簽矩形,取消選中其他標簽,選中該標簽并打開對應頁面。
點擊“x”,刪除該標簽,自動選擇下個標簽,并打開選中標簽的頁面。如果所有標簽被刪除,自動生成一個首頁標簽,并打開首頁。
具體邏輯如下圖所示:
3. 制作對應頁面
頁面名稱要和菜單中繼器內名稱相同(沒有子菜單的菜單),然后在對應頁面制作對應內容即可。
4. 制作菜單與標簽頁的交互
點擊沒有子菜單的菜單時,記錄該菜單文字,判斷是否有該標簽頁。如果有,選中并打開該標簽頁;如果無,新建標簽頁并打開對應頁面。
具體邏輯如下圖所示:
總結
該原型非常實用,但制作相對復雜,新手不容易完成。
制作完成后,以后使用方便,僅需簡單填寫菜單中繼器的內容,即可擁有完美的效果,所以強烈推薦給各位使用。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
沒誠意的教學,更像是引流買教程
cuipeng@csgiiot.com 感謝
求一個原型文件,郵箱2495613256@qq.com,非常感謝
原型預覽及下載地址:
https://axhub.im/pro/e9c062785e25944a
不知道缺了什么 實現不了
不知道缺了什么 實現不了
求一個原型文件,2572209130@qq.com,非常感謝
這種方式只適合于菜單數量較少的情況,一旦菜單多起來會十分卡頓。
100個以下基本不卡
求原型文件,5450932@qq.com,謝謝!
我制作了三級菜單,但是上傳到AxureShare上中繼器的內容就沒有了,只有空白框,一個個菜單都打開著,您或許知道為什么嗎
大神,麻煩能把原型發我郵箱嗎?謝謝!508521329@qq.com
沒接觸過中繼器,看完之后似懂非懂……一步一步照著做,但是卡住了,不懂“判斷標簽是否存在”這個組件是什么,放在哪里的?
axure里面中繼器是很常用的一個元件哦,建議您上網系統的學習一下。
我也是,不是說好就一個矩形一個×嗎,后面還有一個觸發按鈕,也不清楚是哪一部分的內容。望大佬解答。
看完了還是不會
嘻嘻,我看完了巴菲特的書也還是沒能成為股神咧
哈,看完還是不太會?你可能需要從Axure基礎開始學
?? 這里推薦你加Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包
領取適合產品新人的原型設計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!
顯示未找到內容TAT 麻煩再分享一個吧