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

教你制作一個(gè)輕量級(jí)的后臺(tái)原型框架，先看看這一期有些啥：

先睹為快：【點(diǎn)我預(yù)覽】

教程開(kāi)始：

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

把后臺(tái)分為三個(gè)部分：

1. 頂部導(dǎo)航；
2. 側(cè)面導(dǎo)航；
3. 內(nèi)容區(qū)域。

第二步：思考使用合適功能進(jìn)行展示

第三步：制作頂部導(dǎo)航

1. 創(chuàng)建母版頁(yè)，順便創(chuàng)建好側(cè)面導(dǎo)航等母版頁(yè)面

2. 繪制頂部導(dǎo)航

需要將頂部導(dǎo)航的寬設(shè)置為瀏覽器的寬，高度可以固定高度。

第四步：制作左側(cè)導(dǎo)航

1.在側(cè)面導(dǎo)航母版中，繪制多個(gè)文本框，并設(shè)置為一個(gè)選項(xiàng)組，設(shè)定選中和懸停的樣式

2. 為所有文本框添加點(diǎn)擊事件：點(diǎn)擊的時(shí)候選中該文本框

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

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

第五步：創(chuàng)建頁(yè)面，使用母版中的導(dǎo)航，并創(chuàng)建內(nèi)容區(qū)域

1. 創(chuàng)建頁(yè)面，創(chuàng)建內(nèi)聯(lián)框架，指定內(nèi)聯(lián)框架到默認(rèn)菜單頁(yè)面

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

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

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

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

內(nèi)容下載地址：

作者鏈接：https://pan.baidu.com/s/1JmMRffzw96tTGatYjnjGfg 密碼: tivs

在線預(yù)覽：https://o8mk4j.axshare.com

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

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