Axure教程 :六步制作一个轻量级的后台原型框架

制作一个轻量级的后台原型框架，先看看这一期有些啥：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

先睹为快：【点我预览】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

教程开始：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

第一步：规划后台的布局

把后台分为三个部分：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

1. 顶部导航；
2. 侧面导航；
3. 内容区域。

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

第二步：思考使用合适功能进行展示

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

第三步：制作顶部导航

1. 创建母版页，顺便创建好侧面导航等母版页面

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

2. 绘制顶部导航

需要将顶部导航的宽设置为浏览器的宽，高度可以固定高度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

第四步：制作左侧导航

1.在侧面导航母版中，绘制多个文本框，并设置为一个选项组，设定选中和悬停的样式

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

2. 为所有文本框添加点击事件：点击的时候选中该文本框

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

给同一组矩形框定义了一个选项组，即可实现点击效果的互斥，实现菜单选中效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

3. 给母版菜单添加鼠标单击的自定义事件，方便在其引用的页面做菜单交互

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

第五步：创建页面，使用母版中的导航，并创建内容区域

1. 创建页面，创建内联框架，指定内联框架到默认菜单页面

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

2. 设定内联框架的最大尺寸，以适配屏幕，并设定滚动条和隐藏边框 

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

第六步：为菜单添加交互，使内联框架中的内容按需跳转

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

以上步骤即可完成一个轻量级的后台菜单，它足够的简单和灵活，内容区域可以根据内容的实际大小显示滚动条。使用母版定义导航，足够灵活，后续调整只需要调整母版和自定义事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

看完教程的大致思路，再结合源文件做一些测试，相信很快就能掌握绘制后台原型的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

内容下载地址：

作者链接：https://pan.baidu.com/s/1JmMRffzw96tTGatYjnjGfg 密码: tivs文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html

在线预览：https://o8mk4j.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3930.html