Axure學(xué)習(xí)：網(wǎng)站后臺導(dǎo)航菜單的制作及對應(yīng)內(nèi)容的顯示

時間：2023-07-24 21:36:01 | 來源：網(wǎng)站運營

時間：2023-07-24 21:36:01 來源：網(wǎng)站運營

Axure學(xué)習(xí)：網(wǎng)站后臺導(dǎo)航菜單的制作及對應(yīng)內(nèi)容的顯示：不少產(chǎn)品經(jīng)理主要做的產(chǎn)品是后臺系統(tǒng)，在做后臺原型的時候?qū)τ谟行┎糠值膬?nèi)容存在一些疑惑。


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

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



那慢慢一個個問題來看。

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



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

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



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



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

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



菜單使用動態(tài)面板制作。為什么呢？因為這里的菜單包含了一級菜單和二級菜單，可以對菜單進行展開和收起的操作。用動態(tài)面板制作兩個不同的狀態(tài)即可。



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






2、選中和選中樣式



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

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



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





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



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

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

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



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



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



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



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