Axure中想要設計一款三級導航菜單,該怎么設計呢?下面我們就來看看詳細的教程。
1、創建一、二、三級導航,矩形框表示每個選項。三級導航3附圖片分別對應第二步中三級導航動態面板的 A、B、C 三種面板狀態,便于切換顯示。同時,每個選項(小矩形框)都有選中后的顏色樣式交互:見第三幅圖片。
2、將二級導航和三級導航都轉換成動態面板,各自取名:二級導航,三級導航。同時對一級導航添加交互用例:“選中當前元件,顯示二級導航,隱藏三級導航。”
3、添加二級導航菜單中三個選項的交互用例,如圖操作,第二張和第三張與第一張的邏輯是一樣的,COPY設計就可以了。
4、添加三級導航菜單的交互用例,他們雖然有 A、B、C 這三張狀態,但他們的邏輯都是相同的。第二張圖就是以 A 狀態設計的交互,只要控制一下鼠標停留時的 UI 樣式就可以了,剩下兩個狀態直接 COPY.
5、最后,隱藏二級導航動態面板,隱藏三級導航動態面板,將整體界面上的所有元素包裹成一個總的面板,在總面板上添加交互用例,目的是為了鼠標離開的時候自動隱藏2、3級導航。
以上就是axure設計三級導航菜單的教程,希望大家喜歡,請繼續關注錯新站長站。
相關推薦:
Axure 8怎么設計三級折疊菜單?
Axure怎么設計多層級菜單下拉聯動效果?
Axure怎么設計一個左側二級導航切換效果?
新聞熱點
疑難解答