Axure RP教程 | 母版管理&&自定义触发事件

2020年5月16日09:09:03 发表评论 102 views

做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?

当然,我知道能够复制粘贴,但是,如果将来再发生改动的话,还是每个页面中都要再修改一次。太麻烦啦!

在Axure中可以通过母版解决多个页面中重复内容的编辑问题。

Axure RP教程 | 母版管理&&自定义触发事件

Axure教程 | 母版管理&&自定义触发事件【图片来源于网络】

就像PPT中的母版一样,只需要把每个页面中都有的内容在母版中编辑完毕,然后添加到相应的页面中。当页面中添加了母版的内容时,如果母版中的内容发生了改变,页面中的内容也会同步改变。

一、Axure RP 母版的使用

第1节 添加/编辑/删除

我们先来看一下母版的基础操作:新建、编辑与删除。(图7-1)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-1)

新建:点击面板中的新建按钮或者点击面板空白处按快捷键<Ctrl+回车键>完成母版的创建。

编辑:创建后可以对母版名称进行编辑,双击母版名称,画布则变成母版的编辑区域。母版画布中可以像组织页面内容一样,放入元件、添加交互等组成模板的内容。

删除:如果需要删除一个母版,需要先将母版从所有关联的页面中移除,才可以删除母版。被删除的母版有下级母版时,下级母版将被同时删除。如果需要查看母版被添加到哪些页面中,可以在母版名称上点击【鼠标右键】,在菜单中选择【使用情况】进行查看。

第2节 添加母版到页面中

在母版名称上单击<鼠标右键>,打开右键菜单,在菜单列表中点击选项【添加到页面中】,在弹出的窗口中,可以指定将母版放到哪些页面中使用。指定页面的时候软件提供了一些快捷功能给我们使用。(图7-2)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-2)

第3节 从页面中移除母版

如果页面上不再需要某个母版,或者将某个母版添加到了无需添加该母版的页面中,我们可以通过在母版名称上点击<鼠标右键>,打开右键菜单,选择【从页面中移除】,在打开的页面中选择要移除的页面后,点击【确定】即可完成移除。(图7-3)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-3)

另外,也可以在页面中,点击母版将其选中,然后按下<Delete>键其删除。

第4节 拖放行为

像一些网站的底部信息,每个页面中也都相同,这种内容可以做成母版使用吗?

母版除了使用前面的方法添加到页面中,还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要,软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>,打开右键菜单,在【拖放行为】的二级菜单中进行选择。(图7-4)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-4)

任意位置:允许将母版内容放入画布中的任意位置上摆放。

固定位置:母版内容放入到画布中并松开鼠标后,母版内容会自动放置到画布中的固定位置上,这个位置与母版中该内容所在的位置一致。

脱离母版:允许将母版内容放入画布中的任意位置上摆放。但是,当拖放结束后,这些内容与母版脱离联系,变成普通元件存在于画布中。母版进行编辑发生改变时,这些内容不会同步发生变化。

第5节 自定义触发事件

母版中的内容,包括交互都是可以重用在任何页面上,并且与母版保持一致。但是,假如母版中有一个按钮,我需要在不同的页面中,点击这个按钮时,显示不同的内容。需要怎么做呢?

二、母版自定义触发案例使用

案例要求:

比如说啊! A、B两个页面中添加了同一个母版,母版中有一个在线客服的按钮。在A页面中,鼠标进入这个按钮时显示客服小张的头像,而在B页面中,鼠标进入这个按钮时则显示客服小李的头像。

嗯,这么说我就明白了。我也给你举个例子。

我们家里用电,如果只有一个供电总线,那么开关供电总线的电闸会影响家中所有的供电。但是,我们希望每个房间的供电都能单独控制,所以,需要安装一个设备叫“配电箱”,通过配电箱就可以对每个房间的供电进行单独管理,不会互相影响。在Axure中,母版中的每个触发事件添加交互都像供电总线,影响所有使用了这个母版页面。如果在添加了母版的页面上给母版中的某个触发事件单独添加交互,这就需要我们给母版中的这个触发事件接上一个“配电箱”,这个“配电箱”的名字叫“自定义触发事件”。

案例一:母版的自定义触发事件

Axure RP教程 | 母版管理&&自定义触发事件

母版的自定义触发事件

1、创建一个母版,命名为“OnlineService”。(图7-5)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-5)

2、为母版的原件命名和设置

双击母版名称,在画布中打开母版的编辑区域,然后,添加母版中的内容,一个矩形按钮和用于显示头像的图片。因为在鼠标进入按钮时,需要添加交互改变头像图片,所以我们需要为图片元件命名为“CallCenter”;(图7-6)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-6)

3、创建一个自定义的触发事件,就如同需要购买一个配电箱。

创建自定义触发事件,需要先双击母版名称,打开母版的编辑区域。然后,在导航菜单中,点击菜单项【布局】,选择列表中的最后一项【管理母版触发事件】中进行创建。本案例中,需要对按钮元件的【鼠标移入时】事件进行不同页面的交互设置,就可以点击【+】添加一个自定义的触发事件名称,比如:“MyMouseMove”。(图7-7)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-7)

注意:只有画布中编辑母版的内容时,才能在导航菜单中打开【管理母版触发事件】的选项。否则,该选项为灰色的禁用状态。

4、将母版中的触发事件与自定义触发事件绑定,就像将供电总线接入配电箱。

为按钮元件的【鼠标移入时】事件添加交互,【添加用例】,并设置动作为选择【引发事件】为“MyMouseMove”。(图7-8)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-8)

5、每个页面的按钮元件分别添加不同的动作。

将母版添加到PageAPageB两个页面中。在添加了母版的页面中点中母版,则会在交互的功能界面中出现这个母版中绑定的所有自定义触发事件,就像从配电箱中接出的分线。(图7-9)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-9)

6、页面PageA

为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于图片元件“CallCenter”,为客服小张的头像。(图7-10)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-10)

然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“弹出效果”。弹出效果能够让鼠标离开时,显示出来的图片元件“CallCenter”再自动恢复隐藏状态。(图7-11)

Axure RP教程 | 母版管理&&自定义触发事件

(图7-11)

7、页面PageB

为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于元件“CallCenter”,为客服小李的头像。(参考图7-10)

然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“弹出效果”。(参考图7-11)

案例二:母版制作的导航菜单项对应页面变色

母版的自定义触发事件,就好像母版与页面之间的一条通道,通过这条通道,就可以实现在不同的页面中为母版中的元件添加不同的交互。

Axure RP教程 | 母版管理&&自定义触发事件

导航变换颜色的效果

下面,我们就一起来看实现步骤。

1、双击打开母版“Menu”的编辑区,然后软件导航菜单中点击【布局】,选择最后一项【管理自定义触发事件】。

注意:必须先打开母版的编辑区,否则【布局】菜单中的【管理自定义触发事件】选项是灰色不可用的状态。

2、在【管理触发事件】的窗口,点击加号“+”按钮,新建一个触发事件并命名,例如“PageOnLoad”,点击【确定】按钮保存退出。

Axure RP教程 | 母版管理&&自定义触发事件

3、将母版中每一个导航菜单项的【载入时】事件都通过【引发事件】的动作指向刚刚创建的自定义触发事件“PageOnLoad”。

以菜单项“index”为例:

Axure RP教程 | 母版管理&&自定义触发事件

把刚刚添加的交互复制,粘贴给其它的菜单项之后,就可以关闭母版的编辑区,到页面中添加相应的交互了。

4、母版的功能面板中,在母版“Menu”上点击鼠标右键,将母版【添加到页面中】。

Axure RP教程 | 母版管理&&自定义触发事件

5、在每个页面中,点中母版“Menu”,然后双击【交互】中我们自定义的触发事件【PageOnLoad】。

以“index”页为例:

Axure RP教程 | 母版管理&&自定义触发事件

6、在用例编辑界面中,设置动作【选中】母版“Menu”中与页面同名的矩形。

以“index”页为例:

Axure RP教程 | 母版管理&&自定义触发事件

7、参照第5步和第6步为每个页面中的母版添加相应的交互。
8、为每个页面添加一些内容,然后进行预览,就能够看到我们想要的交互效果。

Axure RP教程 | 母版管理&&自定义触发事件

源文件下载:

提取码:ikpw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: