不少產(chǎn)品經(jīng)理主要做的產(chǎn)品是后臺(tái)系統(tǒng)，在做后臺(tái)原型的時(shí)候?qū)τ谟行┎糠值膬?nèi)容存在一些疑惑。?

我們的學(xué)員也是一樣，在做后臺(tái)的時(shí)候遇到了一些問題，請(qǐng)教了老師，得到了解答。這里和大家分享一下，同學(xué)們的問題以及解決方法，希望能給大家一些幫助。

同學(xué)們的問題主要集中在后臺(tái)的導(dǎo)航菜單，以及相對(duì)應(yīng)界面的顯示上。因?yàn)閱柕降膯栴}具體是涉及到同學(xué)正在做的工作，所以不方便將同學(xué)原本的圖片等展示出來。為了方便解釋，這里換了一個(gè)例子。? ? ?

那慢慢一個(gè)個(gè)問題來看。

?

1、動(dòng)態(tài)面板和母版

這里的問題主要是對(duì)于菜單部分的疑問。這位同學(xué)主要的問題在于對(duì)動(dòng)態(tài)面板和母版的理解存在一些錯(cuò)誤。

在axure中來說，動(dòng)態(tài)面板和母版是兩個(gè)不存在互斥關(guān)系的內(nèi)容。動(dòng)態(tài)面板是一個(gè)基礎(chǔ)部件，在任何頁面，包括母版頁面中都可以使用。甚至動(dòng)態(tài)面板本身的狀態(tài)頁面中都可以再次使用動(dòng)態(tài)面板。

母版我們可以看成“模板”，它是一個(gè)可以套用、修改的內(nèi)容。母版一般是我們自己利用基礎(chǔ)部件進(jìn)行制作的，包括動(dòng)態(tài)面板在內(nèi)均可使用。

總體來說，動(dòng)態(tài)面板中可以使用母版，母版中也可使用動(dòng)態(tài)面板。比如以這個(gè)例子來講，可以這么做。

建立一個(gè)母版，母版的主要內(nèi)容是導(dǎo)航菜單。使用母版的原因是，在后臺(tái)的大多數(shù)頁面都會(huì)使用到這個(gè)導(dǎo)航菜單，可以復(fù)用。

菜單使用動(dòng)態(tài)面板制作。為什么呢？因?yàn)檫@里的菜單包含了一級(jí)菜單和二級(jí)菜單，可以對(duì)菜單進(jìn)行展開和收起的操作。用動(dòng)態(tài)面板制作兩個(gè)不同的狀態(tài)即可。

展開收起的操作剛好也有同學(xué)像老師請(qǐng)教過，所以這里一起給出答案了。當(dāng)然不用動(dòng)態(tài)面板也是可以的，只是其中的一種較為方便的做法。

2、選中和選中樣式

這里同學(xué)遇到的問題是，在點(diǎn)擊導(dǎo)航進(jìn)入新的頁面，但是選中的設(shè)置是在原來的頁面中設(shè)置的。所以導(dǎo)致新的頁面沒有辦法顯示選中的樣式。

菜單在按照前面母版的做法做好之后，在母版中可以設(shè)置點(diǎn)擊之后進(jìn)行也買你的跳轉(zhuǎn)。比如，點(diǎn)擊內(nèi)容管理-思想觀點(diǎn)，跳轉(zhuǎn)到思想觀點(diǎn)的頁面。

為了避免跟同學(xué)一樣的情況，我們?cè)谶M(jìn)入新的頁面之后再去設(shè)置菜單的選中及樣式。打開跳轉(zhuǎn)的頁面，在頁面載入的時(shí)候，設(shè)置內(nèi)容管理和思想觀點(diǎn)為選中。注意不要忘記在母版中設(shè)置內(nèi)容管理和思想觀點(diǎn)選中時(shí)的交互樣式。

這樣設(shè)置好之后，就可以在跳轉(zhuǎn)到某個(gè)頁面之后，對(duì)應(yīng)的菜單保持選中時(shí)的交互樣式。

?

3、善用內(nèi)部框架

前面的做法可能會(huì)有朋友覺得麻煩，想要找一下有沒有簡單的方法。答案是有的。我們可以用內(nèi)部框架去完成。

在母版頁面中，菜單的旁邊搭建一個(gè)內(nèi)部框架。確定好位置

在母版的菜單中，設(shè)置點(diǎn)擊菜單選項(xiàng)時(shí)，選項(xiàng)為選中的同時(shí)。設(shè)置在內(nèi)部框架中打開“思想觀點(diǎn)”的頁面即可。

最終的效果也是一樣是我們想要的。

注意：用這種方法做的話，被打開的頁面必須不包括母版的內(nèi)容在內(nèi)，不然會(huì)造成元素的重復(fù)。

前面提問的同學(xué)是在自己的工作當(dāng)中遇到的問題，然后尋求老師的幫助。這是在學(xué)習(xí)任務(wù)之外的內(nèi)容，也是VIP同學(xué)能夠享受到的另外的服務(wù)：發(fā)現(xiàn)問題即可尋求老師的幫助進(jìn)行解決，在一定程度上減輕了同學(xué)們的負(fù)擔(dān)。