《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一2.3 母版的拖放行为-阿里云开发者社区

开发者社区> IoT> 正文
登录阅读全文

《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一2.3 母版的拖放行为

简介:

本节书摘来自异步社区《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一书中的第2章,第2.3节,作者 金乌,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.3 母版的拖放行为

母版有三种不同的拖放行为。

任意位置:当拖动母版到设计区域时,你可以将母版自由放置于任何位置。
固定位置:当拖动母版到设计区域时,母版会被自动锁定到母版内容所处的位置。
脱离母版:当拖动母版到设计区域时,该元素会与母版脱离关系,变成可以编辑的部件。
在【母版】面板中,不同行为的母版拥有不同样式的缩略图,见图7。


7bcf7e27d74ffeb4ac7f84eef14bd8bb54242101

(图7)

A:任意位置

B:固定位置

C:脱离母版

要改变母版行为,在【母版】面板中右键点击母版,在弹出的关联菜单中选择【拖放行为】,然后在下一级子菜单中进行选择,见图8。你可以随时在设计区域中右键点击母版,在弹出的关联菜单中修改母版行为,这只会影响到当前选中的母版。


520e8797052b42f3686fd24324bdd43925f4f0e7

(图8)

母版在原型中的应用
在制作原型的过程中,母版常用于创建可重复使用的资源和管理全局变化,现在就以页头、页脚为例详细介绍一下母版的应用。

第一步:使用Axure内建部件创建如图9所示内容,为了便于演示,将页头内容放置于坐标X:0;Y:0;页脚内容放置于坐标X:0,Y:500。


dc5536fb7b1e545a39461ed801a35157885a1767

(图9)

第二步:分别选中页头内容和页脚内容,并将其转换为母版,在弹出的【转换为母版】对话框中,将【拖放行为】设置为【固定位置】,见图10。

第三步:在【站点地图】面板中双击page1,并在【母版】面板中将header和footer两个面板拖放到设计区域,同样的操作,分别给page2、page3添加这两个母版。在将母版拖放至设计区域时,母版header会自动“跑”到坐标(0,0)的位置,母版footer会自动“跑”到坐标(0,500)的位置,这是因为在创建母版时选择了【固定位置】。


00f9031813100bc55074a65fa6056b9a13d13ff3

(图10)

第四步:现在我们要对footer中的内容进行修改,比如将【15天退换货保障】修改为【30天退换货保障】,只需在任意页面的设计区域中双击母版footer的内容,或者在【母版】面板中双击footer,进入母版的编辑状态进行修改即可,见图11,其他所有页面中footer的内容也会同步修改。


7e5f25d88df6e70cde4f0855d3456cba70ee198d

(图11)

至此,母版的常见操作介绍完毕,在现实工作中,母版中的某些元素经常会添加交互,如鼠标悬停时改变交互样式、点击登录按钮弹出会员登录注册模块等。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
IoT
使用钉钉扫一扫加入圈子
+ 订阅

物联网软硬件开发者一站式基地

其他文章