Axure中想要設(shè)計(jì)一款三級(jí)導(dǎo)航菜單，該怎么設(shè)計(jì)呢？下面我們就來看看詳細(xì)的教程。

軟件名稱：原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)軟件大?。?0.5MB更新時(shí)間：2018-05-24

1、創(chuàng)建一、二、三級(jí)導(dǎo)航，矩形框表示每個(gè)選項(xiàng)。三級(jí)導(dǎo)航3附圖片分別對(duì)應(yīng)第二步中三級(jí)導(dǎo)航動(dòng)態(tài)面板的 A、B、C 三種面板狀態(tài)，便于切換顯示。同時(shí)，每個(gè)選項(xiàng)（小矩形框）都有選中后的顏色樣式交互：見第三幅圖片。

2、將二級(jí)導(dǎo)航和三級(jí)導(dǎo)航都轉(zhuǎn)換成動(dòng)態(tài)面板，各自取名：二級(jí)導(dǎo)航，三級(jí)導(dǎo)航。同時(shí)對(duì)一級(jí)導(dǎo)航添加交互用例：“選中當(dāng)前元件，顯示二級(jí)導(dǎo)航，隱藏三級(jí)導(dǎo)航。”

3、添加二級(jí)導(dǎo)航菜單中三個(gè)選項(xiàng)的交互用例，如圖操作，第二張和第三張與第一張的邏輯是一樣的，COPY設(shè)計(jì)就可以了。

4、添加三級(jí)導(dǎo)航菜單的交互用例，他們雖然有 A、B、C 這三張狀態(tài)，但他們的邏輯都是相同的。第二張圖就是以 A 狀態(tài)設(shè)計(jì)的交互，只要控制一下鼠標(biāo)停留時(shí)的 UI 樣式就可以了，剩下兩個(gè)狀態(tài)直接 COPY.

5、最后，隱藏二級(jí)導(dǎo)航動(dòng)態(tài)面板，隱藏三級(jí)導(dǎo)航動(dòng)態(tài)面板，將整體界面上的所有元素包裹成一個(gè)總的面板，在總面板上添加交互用例，目的是為了鼠標(biāo)離開的時(shí)候自動(dòng)隱藏2、3級(jí)導(dǎo)航。

以上就是axure設(shè)計(jì)三級(jí)導(dǎo)航菜單的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注錯(cuò)新站長站。

相關(guān)推薦：

Axure 8怎么設(shè)計(jì)三級(jí)折疊菜單?

Axure怎么設(shè)計(jì)多層級(jí)菜單下拉聯(lián)動(dòng)效果?

Axure怎么設(shè)計(jì)一個(gè)左側(cè)二級(jí)導(dǎo)航切換效果?