Axure學習:網站後臺導航菜單的製作及對應內容的顯示

不少產品經理主要做的產品是後臺系統,在做後臺原型的時候對於有些部分的內容存在一些疑惑。

 

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

 

同學們的問題主要集中在後臺的導航菜單,以及相對應界面的顯示上。因爲問到的問題具體是涉及到同學正在做的工作,所以不方便將同學原本的圖片等展示出來。爲了方便解釋,這裏換了一個例子。

 

 

那慢慢一個個問題來看。

1、動態面板和母版

這裏的問題主要是對於菜單部分的疑問。這位同學主要的問題在於對動態面板和母版的理解存在一些錯誤

 

在axure中來說,動態面板和母版是兩個不存在互斥關係的內容。動態面板是一個基礎部件,在任何頁面,包括母版頁面中都可以使用。甚至動態面板本身的狀態頁面中都可以再次使用動態面板。

母版我們可以看成“模板”,它是一個可以套用、修改的內容。母版一般是我們自己利用基礎部件進行製作的,包括動態面板在內均可使用。

總體來說,動態面板中可以使用母版,母版中也可使用動態面板。比如以這個例子來講,可以這麼做。

 

建立一個母版,母版的主要內容是導航菜單。使用母版的原因是,在後臺的大多數頁面都會使用到這個導航菜單,可以複用。

菜單使用動態面板製作。爲什麼呢?因爲這裏的菜單包含了一級菜單和二級菜單,可以對菜單進行展開和收起的操作。用動態面板製作兩個不同的狀態即可。

 

 

展開收起的操作剛好也有同學像老師請教過,所以這裏一起給出答案了。當然不用動態面板也是可以的,只是其中的一種較爲方便的做法。

 

2、選中和選中樣式

 

這裏同學遇到的問題是,在點擊導航進入新的頁面,但是選中的設置是在原來的頁面中設置的。所以導致新的頁面沒有辦法顯示選中的樣式。

 

菜單在按照前面母版的做法做好之後,在母版中可以設置點擊之後進行也買你的跳轉。比如,點擊內容管理-思想觀點,跳轉到思想觀點的頁面。

爲了避免跟同學一樣的情況,我們在進入新的頁面之後再去設置菜單的選中及樣式。打開跳轉的頁面,在頁面載入的時候,設置內容管理和思想觀點爲選中。注意不要忘記在母版中設置內容管理和思想觀點選中時的交互樣式。

這樣設置好之後,就可以在跳轉到某個頁面之後,對應的菜單保持選中時的交互樣式。

 

 

3、善用內部框架

 

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

 

在母版頁面中,菜單的旁邊搭建一個內部框架。確定好位置

 

在母版的菜單中,設置點擊菜單選項時,選項爲選中的同時。設置在內部框架中打開“思想觀點”的頁面即可。

 

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

 

注意:用這種方法做的話,被打開的頁面必須不包括母版的內容在內,不然會造成元素的重複。

前面提問的同學是在自己的工作當中遇到的問題,然後尋求老師的幫助。

--------------------------

爲大家準備了資料哦,歡迎掃碼領取!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章