本文主要是一個Axure教程，教你如何制作一個輕量級的后臺原型框架，教程總共分為六步，看完教程的大致思路，再結合源文件做一些測試，相信很快就能掌握繪制后臺原型的方法。

教你制作一個輕量級的后臺原型框架，先看看這一期有些啥：

教程開始：

第一步：規(guī)劃后臺的布局

把后臺分為三個部分：

頂部導航；側面導航；內容區(qū)域。

第二步：思考使用合適功能進行展示

第三步：制作頂部導航1. 創(chuàng)建母版頁，順便創(chuàng)建好側面導航等母版頁面

2. 繪制頂部導航

需要將頂部導航的寬設置為瀏覽器的寬，高度可以固定高度。

第四步：制作左側導航1.在側面導航母版中，繪制多個文本框，并設置為一個選項組，設定選中和懸停的樣式

2. 為所有文本框添加點擊事件：點擊的時候選中該文本框

給同一組矩形框定義了一個選項組，即可實現(xiàn)點擊效果的互斥，實現(xiàn)菜單選中效果。

3. 給母版菜單添加鼠標單擊的自定義事件，方便在其引用的頁面做菜單交互

第五步：創(chuàng)建頁面，使用母版中的導航，并創(chuàng)建內容區(qū)域1. 創(chuàng)建頁面，創(chuàng)建內聯(lián)框架，指定內聯(lián)框架到默認菜單頁面

2. 設定內聯(lián)框架的最大尺寸，以適配屏幕，并設定滾動條和隱藏邊框

第六步：為菜單添加交互，使內聯(lián)框架中的內容按需跳轉

以上步驟即可完成一個輕量級的后臺菜單，它足夠的簡單和靈活，內容區(qū)域可以根據(jù)內容的實際大小顯示滾動條。使用母版定義導航，足夠靈活，后續(xù)調整只需要調整母版和自定義事件。

看完教程的大致思路，再結合源文件做一些測試，相信很快就能掌握繪制后臺原型的方法。

本文由 @陳張良 原創(chuàng)發(fā)布于人人都是產品經理 ，未經許可，禁止轉載。

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