本文主要是一個Axure教程，教你如何製作一個輕量級的後臺原型框架，教程總共分為六步，看完教程的大致思路，再結合源文件做一些測試，相信很快就能掌握繪製後臺原型的方法。
教你製作一個輕量級的後臺原型框架，先看看這一期有些啥：
教程開始：
第一步：規劃後臺的佈局
把後臺分為三個部分：
- 頂部導航；
- 側面導航；
- 內容區域。
第二步：思考使用合適功能進行展示
第三步：製作頂部導航
1. 創建母版頁，順便創建好側面導航等母版頁面
2. 繪製頂部導航
需要將頂部導航的寬設置為瀏覽器的寬，高度可以固定高度。
第四步：製作左側導航
1.在側面導航母版中，繪製多個文本框，並設置為一個選項組，設定選中和懸停的樣式
2. 為所有文本框添加點擊事件：點擊的時候選中該文本框
給同一組矩形框定義了一個選項組，即可實現點擊效果的互斥，實現菜單選中效果。
3. 給母版菜單添加鼠標單擊的自定義事件，方便在其引用的頁面做菜單交互
第五步：創建頁面，使用母版中的導航，並創建內容區域
1. 創建頁面，創建內聯框架，指定內聯框架到默認菜單頁面
2. 設定內聯框架的最大尺寸，以適配屏幕，並設定滾動條和隱藏邊框
第六步：為菜單添加交互，使內聯框架中的內容按需跳轉
以上步驟即可完成一個輕量級的後臺菜單，它足夠的簡單和靈活，內容區域可以根據內容的實際大小顯示滾動條。使用母版定義導航，足夠靈活，後續調整隻需要調整母版和自定義事件。
看完教程的大致思路，再結合源文件做一些測試，相信很快就能掌握繪製後臺原型的方法。
題圖來自 Pexels，基於 CC0 協議
分享到:
閱讀更多 人人都是產品經理 的文章
