如何設(shè)計(jì)人人都是產(chǎn)品經(jīng)理Axure 7.0二級(jí)導(dǎo)航下拉菜單
---在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí),實(shí)現(xiàn)下拉菜單功能是一個(gè)常見(jiàn)的需求。本文將介紹如何在Axure RP 7.0中設(shè)計(jì)二級(jí)導(dǎo)航下拉菜單,讓用戶可以點(diǎn)擊一級(jí)菜單展開(kāi)或收縮對(duì)應(yīng)的二級(jí)菜單,并實(shí)現(xiàn)點(diǎn)擊二級(jí)菜單時(shí)的搜索隱藏
---
在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí),實(shí)現(xiàn)下拉菜單功能是一個(gè)常見(jiàn)的需求。本文將介紹如何在Axure RP 7.0中設(shè)計(jì)二級(jí)導(dǎo)航下拉菜單,讓用戶可以點(diǎn)擊一級(jí)菜單展開(kāi)或收縮對(duì)應(yīng)的二級(jí)菜單,并實(shí)現(xiàn)點(diǎn)擊二級(jí)菜單時(shí)的搜索隱藏效果。
設(shè)計(jì)一級(jí)菜單和二級(jí)菜單
首先,從部件庫(kù)中拖入一個(gè)矩形部件,將其命名為menu1,并設(shè)置文本名稱(chēng)為一級(jí)菜單。然后再次從部件庫(kù)中拖入4個(gè)相同大小的矩形部件,命名為二級(jí)菜單,并調(diào)整它們的位置和大小。重復(fù)相同的步驟制作另外兩個(gè)一級(jí)菜單menu2和menu3,以及它們各自的四個(gè)子菜單作為二級(jí)菜單。
設(shè)置菜單組和交互樣式
選擇menu1、menu2、menu3后,右鍵點(diǎn)擊,在彈出的下拉列表中選擇selection group,將它們組合成一組并命名為A。然后將每個(gè)一級(jí)菜單下面的四個(gè)子菜單分別命名為B、C、D。接著設(shè)置菜單和二級(jí)菜單的交互樣式,包括鼠標(biāo)懸停時(shí)和選中時(shí)的字體顏色和背景填充顏色。
設(shè)置動(dòng)態(tài)面板
針對(duì)每個(gè)一級(jí)菜單下面的四個(gè)二級(jí)菜單,右鍵選擇轉(zhuǎn)換為動(dòng)態(tài)面板。在動(dòng)態(tài)面板狀態(tài)管理框中,修改每個(gè)動(dòng)態(tài)面板的名稱(chēng)為對(duì)應(yīng)數(shù)字。這樣就可以方便地管理和切換不同狀態(tài)的面板。
設(shè)置一級(jí)菜單的交互動(dòng)作
當(dāng)用戶點(diǎn)擊一級(jí)菜單時(shí),需要實(shí)現(xiàn)選中該菜單并展開(kāi)對(duì)應(yīng)的二級(jí)菜單,再次點(diǎn)擊時(shí)則收縮隱藏。通過(guò)在交互中設(shè)置對(duì)應(yīng)動(dòng)作,可以實(shí)現(xiàn)這一效果。例如,為menu1設(shè)置點(diǎn)擊時(shí)的動(dòng)作為顯示/隱藏面板1、2和3的切換,并且選中menu1。
設(shè)置二級(jí)菜單的交互動(dòng)作
設(shè)計(jì)二級(jí)菜單的交互動(dòng)作也很簡(jiǎn)單,當(dāng)用戶點(diǎn)擊二級(jí)菜單時(shí),需要隱藏該二級(jí)菜單。通過(guò)設(shè)置對(duì)應(yīng)的動(dòng)作,比如點(diǎn)擊面板1的狀態(tài)1,設(shè)置在鼠標(biāo)單擊時(shí)隱藏該面板即可。
通過(guò)以上步驟,你可以輕松在Axure 7.0中設(shè)計(jì)實(shí)現(xiàn)一個(gè)功能完善的二級(jí)導(dǎo)航下拉菜單,提升用戶體驗(yàn)和頁(yè)面交互性。愿你的設(shè)計(jì)能夠?yàn)橛脩魩?lái)更好的使用體驗(yàn)!