編輯導(dǎo)語：Web后臺的菜單欄通常用來展示產(chǎn)品的整體功能導(dǎo)航，是最常用的Web組件之一，PM一定要了解并學會它的原型畫法。本文仔細介紹了用Axure畫出Web后臺產(chǎn)品的菜單欄組件的步驟與注意要點，希望對你有所啟發(fā)。

我們先來看下Web菜單欄的原型交互效果，詳見下圖或者訪問原型https://kgnha1.axshare.com

由于菜單欄比較常用并且畫起來比較麻煩，建議產(chǎn)品經(jīng)理根據(jù)本文的原型步驟制作一份菜單欄rp源文件，方便后續(xù)多個項目使用。

仔細查看上圖原型，會發(fā)現(xiàn)包含以下這些交互用例，接下來作者會詳細講解每一步如何通過Axure RP 9畫出來。

1. 默認展開左側(cè)菜單的二級頁面
2. 處于某一頁面的時候，對應(yīng)菜單項都會處于選中狀態(tài)并呈現(xiàn)不同的樣式。
3. 點擊一級分類即可收起對應(yīng)的二級頁面，再次點擊即可展開。
4. 默認進入首頁，同時首頁對應(yīng)的菜單處于選中狀態(tài)。此時所有菜單處于展開狀態(tài)。

菜單欄通常有2級結(jié)構(gòu)，第一級菜單是分類，第二級菜單是頁面。一般位于頁面左側(cè)，并且是每個頁面都有它。

01 畫出無交互原型

1、先畫首頁文字。從默認元件庫中拖動“矩形1”到工作區(qū)合適位置，修改尺寸為(160,40)，雙擊輸入文字表示首頁，字號修改為16px，左側(cè)對齊然后左側(cè)邊距修改為40px。

2、再畫首頁圖標。從默認元件庫中拖動“圖片”到矩形中合適位置，尺寸修改為(20,20)，樣式點擊“調(diào)整顏色”圖標，勾選調(diào)整顏色，飽和度拖動到最左邊變成0。

3、再畫首頁文字的選中樣式。右鍵點擊交互樣式，切換到選中狀態(tài)，然后勾選字色然后輸入藍色#0000FF，點擊“確定”按鈕。

4、再畫首頁圖標的選中樣式。右鍵點擊交互樣式，切換到選中狀態(tài)，然后勾選圖像濾波，點擊“確定”按鈕。

5、再畫一級分類。方法同上述4步。

6、再畫二級頁面。方法步驟同1和3，除了字號保持默認。根據(jù)需要復(fù)制多份二級頁面。

7、復(fù)制多份一級分類和二級頁面。

8、在左側(cè)頁面區(qū)域，添加文件夾來作為一級分類，添加頁面來作為二級頁面。然后右鍵分類名稱-重復(fù)-分支來快速復(fù)制。

9、同時選擇所有的菜單欄元件和頂部導(dǎo)航組件，然后右鍵點擊“轉(zhuǎn)換為母版”，然后命名為“菜單欄”。

10、在左側(cè)母版區(qū)域，右鍵母版“菜單欄”，點擊“添加到頁面中…”然后點擊“全選”，勾選“置于底層”，最后點擊確定。

11、生成原型HTML并查看原型效果。

02 畫出有交互原型

12、先畫進入首頁的交互。雙擊母版“菜單欄”進入，選擇首頁，右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時”，添加動作“打開鏈接”，鏈接到“首頁”，點擊“確定”按鈕。(需要提前選擇首頁文字&首頁圖標并右鍵設(shè)為組合并命名為首頁)

13、再畫每個頁面的交互。右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時”，添加動作“打開鏈接”，鏈接到“對應(yīng)的頁面”，點擊“確定”按鈕。

14、再畫一級分類的交互。同時選擇分類名稱&分類圖標并右鍵設(shè)為組合并命名為一級分類；同時選擇多個頁面名稱并右鍵設(shè)為組合并命名為二級頁面。

然后點擊組合“一級分類”，右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時”，添加動作“顯示/隱藏”，目標選擇組合“二級頁面”，操作選擇“切換”，點擊更多選項然后設(shè)置“展開收起”，點擊“確定”按鈕。(同理設(shè)置其他一級分類的交互。注意組合需要單獨命名，方便選擇目標)

15、設(shè)置首頁載入的交互。進入頁面“首頁”，點擊空白區(qū)域，右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“頁面載入時”，添加動作“設(shè)置選中”，目標選擇組合“首頁”，點擊“完成”按鈕。

16、設(shè)置頁面載入的交互。進入頁面“頁面名稱”，點擊空白區(qū)域，右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“頁面載入時”，添加動作“設(shè)置選中”，目標選擇“頁面名稱”，點擊“完成”按鈕(注意需要提前命名頁面名稱來方便選擇目標)

17、生成原型HTML并查看原型效果。

總結(jié)

如果頁面特別多，可以采用三級菜單欄，即第一級菜單是分類，第二級菜單是分類，第三級菜單是頁面。

另外Axure左側(cè)頁面結(jié)構(gòu)中也需要以相應(yīng)的分類名稱頁面名稱進行使用，方便開發(fā)和測試理解。

#相關(guān)閱讀#

Axure教程：制作APP折疊面板

APP下導(dǎo)航如何用Axure畫出來

#專欄作家#

浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于Axure原型設(shè)計和產(chǎn)品規(guī)范。

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

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