Axure母版的自定义触发事件

第1节 母版简介

在Axure中可以通过母版解决多个页面中重复内容的编辑问题。就像PPT中的母版一样，只需要把每个页面中都有的内容在母版中编辑完毕，然后添加到相应的页面中。当页面中添加了母版的内容时，如果母版中的内容发生了改变，页面中的内容也会同步改变。

第2节 添加/编辑/删除

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

%e5%9b%be7-1

（图7-1）

• 新建

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

• 编辑

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

• 删除：

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

第3节 添加母版到页面中

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

%e5%9b%be7-2

（图7-2）

第4节 从页面中移除母版

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

%e5%9b%be7-3

（图7-3）

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

%e5%9b%be7-4

（图7-4）

• 任意位置

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

• 固定位置

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

• 脱离母版

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

第6节 自定义触发事件

圆儿：这样果然很方便！但是还有个问题。母版中的内容，包括交互都是可以重用在任何页面上，并且与母版保持一致。但是，假如母版中有一个按钮，我需要在不同的页面中，点击这个按钮时，显示不同的内容。需要怎么做呢？

小楼：我没太听懂，你举个例子说一下。

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

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

案例13：母版的自定义触发事件

• 创建一个母版，命名为“OnlineService”。（图7-5）

%e5%9b%be7-5

（图7-5）

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

%e5%9b%be7-6

（图7-6）

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

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

%e5%9b%be7-7

（图7-7）

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

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

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

%e5%9b%be7-8

（图7-8）

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

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

%e5%9b%be7-9

（图7-9）

• 页面PageA中

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

%e5%9b%be7-10

（图7-10）

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

%e5%9b%be7-11

（图7-11）

• 页面PageB中

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

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