本文我们来介绍内部框架、热区和母版的基础使用,这三种控件在Axure原型设计中也是比较常用的,掌握其使用方法,能够提高效率节省工作量。
- 内部框架
使用内部框架控件,可以在当前页面中嵌入其他页面,可以是网页地址、Axure 页面。内部框架可以自由调整其大小和位置以适应页面布局。通过设置来源网址属性来指定要嵌入的网页地址。
1.1 示例一:在同一个页面整合多个页面内容
上一节我们讲了动态面板的进阶使用,例举了五种用法,我们想要将这5个示例页面整合到一个页面中,方便查看效果,就可以使用5个内部框架,分别设置加载时事件,在内部框架中打开5个链接。
1.2 示例二:结合动态面板手风琴菜单,制作常用的web平台。
首先使用手风琴菜单,设置一个菜单栏。
菜单栏右侧拖入一个内部框架,调整大小。双击内部框架,设置链接属性,选择连接到当前设计的一个页面,选择滚动页面。
为菜单栏每个按钮设置点击事件:单击时,分别选择各自对应的页面在内部链接打开。
2.热区
热区是一个透明的元件,在预览时完全看不到任何内容。在画布中,热区是一块淡绿色的矩形。和矩形相比,热区除了大小之外的所有属性都不可修改,占用内存非常少,通常用在需要特殊交互事件时,例如,在同一个图片需要多个不同的交互事件,或者不同内容的区域需要同一个交互事件。
2.1 示例一:为同一个图片添加不同交互事件
以中国地图为例,鼠标移到不同省份显示当前省份的名称。我们现在画布添加一张地图图片,在不同的省份区域上方各放置一块热区,设置鼠标移入时,改变省份名称标签的文字。
2.2 示例二:为列表添加点击删除弹出确认弹窗
为列表的行数据添加操作是经常用到的,普通的做法是为每个操作按钮添加点击事件。如果不需要区分不同数据触发不同的事件时,我们可以使用热区,为所有行设置一个触发事件,这样将做更加简单高效。
3.母版
原型设计中,通常有一些复用率高的元件或元件组合,这时候为了更便利,我们可以将这些复用频繁的模块做成母版,统一设计,可以做到一次修改多个页面都能更新,能大幅提高重复劳动的工作效率。实际中,经常遇到需求多次变更调整的情况,这时候一个合理的母版结构能大幅的缩减繁琐的工作,方便我们管理自己的页面设计及快速的创建一个产品原型。
示例:页面底部footer
在页面中创建一个版权所有的底部footer,右键单击选择转换为母版,为所有页面添加母版
在左侧母版栏,找到我们创建出的母版,右键单击,拖拽行为选择“任何位置”,在需要加footer的页面直接拖拽放到合适的位置。演示可以看到,母版效果已经实现
4.总结
以上我们结合示例介绍了内部框架、热区、母版的使用方法。内部框架可以实现引用制定的内部或外部链接,热区轻松实现一对多、多对一等组合的交互,母版在一个模块被多个页面或模块复用时,可实现一次改动,多处更新。是原型设计中经常遇到的场景。