編輯導(dǎo)讀：在導(dǎo)航頁面的時(shí)候，怎么盡可能復(fù)用，減少無謂的復(fù)制黏貼？動(dòng)態(tài)面板和內(nèi)聯(lián)框架可以幫助實(shí)現(xiàn)。本文作者根據(jù)自身經(jīng)驗(yàn)，從兩個(gè)方面進(jìn)行分析，希望對(duì)你有幫助。

上次分享的《Axure9原型設(shè)計(jì)：動(dòng)態(tài)面板實(shí)現(xiàn)手風(fēng)琴菜單（低配版）》，只是實(shí)現(xiàn)了導(dǎo)航欄，但是頁面不止導(dǎo)航欄，就像寫代碼一樣，怎么盡可能復(fù)用，減少無謂的復(fù)制黏貼？那就必須配上內(nèi)聯(lián)框架。這次就用動(dòng)態(tài)面板和內(nèi)聯(lián)框架實(shí)現(xiàn)可復(fù)用導(dǎo)航頁，而且要盡可能簡(jiǎn)單。

步驟如下：

一、拖拉元件

擺出首頁常見樣式的一級(jí)菜單，簡(jiǎn)單起見，直接拖拉，不用放到別的容器里。為了后面交互方便，每個(gè)元件都有命名，包括“ⅴ”（命名是個(gè)好習(xí)慣，為了我們交互時(shí)可以清晰看到元件名稱，且方便檢查邏輯）。

拉出動(dòng)態(tài)面板，命名：手風(fēng)琴二級(jí)菜單，設(shè)置不可見和自適應(yīng)內(nèi)容。并添加4個(gè)狀態(tài)頁，每個(gè)狀態(tài)頁都跟對(duì)應(yīng)的一級(jí)菜單命名對(duì)應(yīng)。

右邊，頭部拉出一個(gè)文本框命名Title，用來顯示每個(gè)菜單的路徑，下面一個(gè)內(nèi)聯(lián)框架，內(nèi)聯(lián)框架設(shè)置隱藏邊框。

添加二級(jí)菜單對(duì)應(yīng)的頁面，以及頁面內(nèi)容，頁面名稱和菜單名稱是一致的，這個(gè)就略過。

二、添加交互

給一級(jí)菜單添加“單擊”交互，4個(gè)一級(jí)菜單內(nèi)容大同小異，而且Axure9可以復(fù)制粘貼交互代碼，非常方便。

邏輯：?jiǎn)螕魰r(shí)如果動(dòng)態(tài)面板不可見則可以看見動(dòng)態(tài)面板，并且移動(dòng)到對(duì)應(yīng)一級(jí)菜單的坐標(biāo)下，并推動(dòng)下方元件改變布局，旋轉(zhuǎn)小箭頭180°；再次點(diǎn)擊則收起動(dòng)態(tài)面板。

給二級(jí)菜單添加“單擊”交互，這個(gè)就更得復(fù)制粘貼了，不知道其他同學(xué)是怎么搞的，菜單越多重復(fù)操作就越多（遇到重復(fù)枯燥的操作就不自主想代碼是怎么實(shí)現(xiàn)的）。

邏輯：?jiǎn)螕魰r(shí)在內(nèi)聯(lián)框架中顯示對(duì)應(yīng)的二級(jí)菜單頁面，并且設(shè)置Title顯示菜單的路徑，取得都是元件的text值拼接起來。

就這樣，就2個(gè)事件，不過這個(gè)示例不能同時(shí)展開多個(gè)二級(jí)菜單，不嫌麻煩的話，可以把動(dòng)態(tài)面板分開，而不是在一個(gè)動(dòng)態(tài)面板用多個(gè)狀態(tài)。其實(shí)只要有了思路，實(shí)現(xiàn)方式感覺千篇一律。

效果：https://e6osrz.axshare.com

本文由 @頭發(fā)漸少脾氣漸漲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。