大拇指知识分享!欢迎光临!
我们一直在努力!

axure内联框架怎么用(内联框架的实现原理)

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

c41a30361bc742b681d198e9678cb562noop.image_

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

c9840d00f7e44c49924fb902aa26d93dnoop.image_

e55d382d07b34e09b7617d66a90e4d2dnoop.image_

94c76d47cb26479d871eda8e5f4d85abnoop.image_

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

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

7927515e204e48328b2d963775e12f7cnoop.image_

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

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

a01beb3668204e8690de8144652dd912noop.image_

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

0dd800ad8c944d5aa2f389b661ca1ae0noop.image_

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

ecb4eaa6dc8247ecbb7ec5f9b006ba11noop.image_

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

b8bd0a19c2e842dc9e4672e8cc1cf3d4noop.image_

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

b285650450664c4193546b4f4c641187noop.image_

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

b49b47f352154b4f82b8fb32294e3e2anoop.image_

8e24b55f88b9494aba3c92718e23f37dnoop.image_

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

cc23a10cb9584bf5ac624aab9edf2e25noop.image_

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

2d1a4b45a66e4ee2aef10947e6f6e06enoop.image_

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

0f51b8c83df548e086a69f067b9e9db9noop.image_

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

c2ab784743a34667939658a8d7dac528noop.image_
赞(0)
未经允许不得转载:大拇指知识 » axure内联框架怎么用(内联框架的实现原理)
分享到: 更多 (0)

评论 抢沙发

1 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大拇指知识!

联系我们联系我们