Axure怎么給網(wǎng)頁設計左側(cè)三級導航菜單欄?

Axure中想要設計一款三級導航菜單,該怎么設計呢?下面我們就來看看詳細的教程。
1、創(chuàng)建一、二、三級導航,矩形框表示每個選項。三級導航3附圖片分別對應第二步中三級導航動態(tài)面板的 A、B、C 三種面板狀態(tài),便于切換顯示。同時,每個選項(小矩形框)都有選中后的顏色樣式交互:見第三幅圖片。
2、將二級導航和三級導航都轉(zhuǎn)換成動態(tài)面板,各自取名:二級導航,三級導航。同時對一級導航添加交互用例:“選中當前元件,顯示二級導航,隱藏三級導航。”
3、添加二級導航菜單中三個選項的交互用例,如圖操作,第二張和第三張與第一張的邏輯是一樣的,COPY設計就可以了。
4、添加三級導航菜單的交互用例,他們雖然有 A、B、C 這三張狀態(tài),但他們的邏輯都是相同的。第二張圖就是以 A 狀態(tài)設計的交互,只要控制一下鼠標停留時的 UI 樣式就可以了,剩下兩個狀態(tài)直接 COPY.
5、最后,隱藏二級導航動態(tài)面板,隱藏三級導航動態(tài)面板,將整體界面上的所有元素包裹成一個總的面板,在總面板上添加交互用例,目的是為了鼠標離開的時候自動隱藏2、3級導航。
以上就是axure設計三級導航菜單的教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
相關(guān)文章
- Axure設計的登陸頁面怎么生成網(wǎng)頁原型?Axure中設計的登陸網(wǎng)頁想要直接生成網(wǎng)頁原型,該怎么生成呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2018-01-10
- Axure文件怎么生成html分享鏈接?Axure中設計的模型想要分享給朋友觀看,該怎么生成html鏈接呢?下面我們就來看看2017-12-21
- Axure RP怎么制作選項卡控件?網(wǎng)頁需要選項卡控件,但是Axure RP中沒有選項卡控件,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2017-12-21
- Axure rp怎么設計微信的交互界面?Axure中想要設計一個網(wǎng)頁交互的效果,該怎么制作呢?下面我們就來看看Axure設計微信交互界面的教程,需要的朋友可以參考下2017-12-17
- axure頁面載入時自動選中按鈕該怎么實現(xiàn)?axure中使用母版的時候想要實現(xiàn)單個頁面按鈕的添加選中狀態(tài),我們可以使用函數(shù)來實現(xiàn),下面我們就來看看詳細的教程,需要的朋友可2017-12-05
- Axure母版怎么使用?Axure一般都會創(chuàng)建母版,但是母版有什么功能,該怎么使用呢?下面我們就來看看Axure母版功能詳細介紹,需要的朋友可以參考下2017-11-30
Axure文本輸入框怎么去掉邊框? Axure隱藏輸入框邊框的教程
Axure文本輸入框怎么去掉邊框?Axure設計網(wǎng)頁原型的時候,插入了文本輸入框,但是有邊框,想要去掉邊框,該怎么操作呢?下面我們就來看看Axure隱藏輸入框邊框的教程,需要2017-11-17- Axure怎么設計頁面標簽可以切換的登錄框?Axure中在設計登陸框的時候,想要設計企業(yè)會員和個人會員兩個登陸頁面,可以使用標簽切換,該怎么設計呢?下面我們就來看看詳細的2017-11-08
- Axure RP 8怎么設計立體的圓角矩形按鈕?Axure RP 8中想要設計一個查詢的圓角矩形按鈕,該怎么設計呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2017-11-02
- axure怎么設計鼠標展開折疊效果?axure中想要繪制一個可以折疊展開功能的原型,該怎么設計呢?下面我們就來看看axure制作折疊效果的教程,需要的朋友可以參考下2017-11-01