您的位置 首页 > 数码极客

「系统框架如何画」如何系统建立管理框架…

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



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



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


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



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


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



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



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



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


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



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




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



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



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



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


责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“系统框架如何画,如何系统建立管理框架,系统框架怎么画,框架应该如何画,系统框架结构图怎么画”边界阅读