Axure绘制页面框架

相信大家在日常的B端web原型绘制中会经常绘制到类似框架页面，效果如下：

 左边会展示二级菜单，点击菜单时，右边会内容会实时进行变化，有的伙伴们在初次制作时，可能会直接在每个页面都画上菜单， 如下：

 但是这样有一个问题是，如果后期菜单有变动的的话，比如要新增一个菜单，那么就需要在每个页面中新增这个菜单，并添加交互事件了，可见这样的方法，会导致后期修改非常的麻烦。那么有没有简单点的方法实现这个功能呢。

答案当然是肯定的，这里不得不提到axure基础元件中的内联框架

 那么内联框架的作用是什么呢，通俗一点说,内联框架就是在固定的区域显示内容,如果显示不下了，可以拖动滚条移动到其他的部分，那么在这种框架的需求下，就比较适合使用了。那么下面咱们开始教学，咱们以1920*968（减去浏览器的顶部内容高度）的展示分辨率进行演示

1.新建一个框架页面，并进行页面划分区域并添加对应的元件，具体样式大家可以按照自己喜欢的样式进行编辑

 2.新建两个子页面，员工花名册和员工档案库，并在两个页面里添加一下页面内容，用于后续查看页面跳转是否成功

 3.接下来在框架中进行菜单功能的绘制。拖入矩形，并分别按照菜单的结构进行摆放

 为二级菜单添加交互事件，首先将两个二级菜单添加至同一个选项组

 然后为两个二级菜单添加选中的效果，这里就不做复杂的选中效果了，选中时直接字体加粗

 将员工花名册设置为默认选中项；同时为两个二级菜单添加单击时的交互时间，点击时选中当前元件

 到这里为止，左边菜单的效果就已经实现了，当然大家如果想做高保真或者更好的交互效果，可以自行进行添加，在这里就不产开给大家做赘述了

 4.接下来开始设置内联框架相关的配置，首先需要配置默认打开时，展示哪个页面，这里举例，框架打开时，默认打开员工花名册，需要点击内联框架，选择默认框架目标为员工花名册

 在点击二级菜单时，配置切换内联框架打开对应的页面，同样给另一个二级菜单页配置跳转的，页面

 接下来就是运行查看效果了

更多精彩分享内容请访问：文拾沐译产品经理导航