PMBear本次設計以bilibili創作中心為例，主要給大家介紹二級和三級導航欄。
產品經理在做一個完整產品的原型設計時，都需要一個導航菜單欄。這種菜單欄看着簡單，但對於初級產品經理來說是個難點，自己琢磨起來也比較費勁。今天做個導航欄的原型設計教程給大家參考，學會這一招，輕鬆應對導航欄的設計，進一步地提高產品技能。
設計過程
（1）設計概述
本次設計以bilibili創作中心為例，主要給大家介紹二級和三級導航欄。為了展示三級菜單的設計過程，將bilibili原有的二級菜單粉絲管理、互動管理、收益管理整合成二級菜單商業數據。
（2）二級菜單設計
步驟如下：
1）打開Axure RP 8軟件,新建項目，命名為導航欄。
2）創建母版
點擊母版頁面的添加按鈕，新增母版，命名為左側導航欄導航。
編輯母版。
拖拽矩形3到窗口，作為導航欄面板。拖拽三級標題到窗口，命名為bilibili創作中心。
3）製作導航菜單
拖拽矩形3，修改成合適的大小放置到合適的菜單位，按照下圖依次命名。
4）添加二級菜單
複製數據中心，修改名稱為數據總覽。複製數據中心，修改名稱為觀眾分析，並列排放。
選中數據總覽和觀眾分析，點擊右鍵，選擇轉換為動態面板。點擊右鍵，選擇設為隱藏。
在動態面板編輯區，給該動態面板命名為二級-數據中心。
將動態面板二級-數據中心移動到數據中心下方。
5）二級菜單交互設計
選中數據中心，雙擊鼠標單擊時。
按照以下步驟操作，操作完成後點擊確定。
6）創建菜單模塊
按照下圖結構創作菜單模塊。
7）打開首頁管理，拖拽模板左側導航欄到首頁管理窗口，以同樣的方式將母版放到各個模塊中
8）預覽
點擊軟件右上角預覽，可預覽導航欄效果，二級菜單製作完成。
（3）三級菜單
1）按照2.2步驟製作二級菜單：二級-商業數據
2）雙擊打開動態面板二級-商業數據，複製互動管理三個，分別命名為評論管理、彈幕管理、字幕管理。
選中三個矩形，選擇設為動態面板，命名為三級-互動管理，並設為隱藏。
3）交互效果
選中互動管理，雙擊鼠標點擊時，按照如下步驟操作，操作完成後確定。
4）點擊預覽查看效果
總結
總結來說，導航欄是個難的不會，會了不難的功能。這次只是簡單的菜單欄設計，實際的菜單欄還有很多的交互設計和細節處理，以後碰到再和大家分享。
