母版基础知识

01 母版概述

对于一些重复使用的设计元素、控件或者组件，比如操作按钮、分类标签、页面导航、信息列表等都可以将其转换为母版，以方便我们进行重复使用。合理有效的运用母版能够提升我们的设计效率，同时也方便我们对这些复用率高的设计元素进行统一管理。创建好母版后，只需要简单的鼠标拖拽动作就可以直接引用母版的内容，而不需要再机械繁琐的复制粘贴。当我们对母版内容进行修改时，能够同步更新引用页面的母版内容。所以，快速引用、快速修改是母版的显著作用，同时也是提升设计效率的关键因素。

02创建母版

添加母版：进入母版管理面板，点击加号图标按钮，添加母版。选中母版或者鼠标右键选择“重命名”为母版命名，双击母版进入编辑界面，为母版添加内容。

转换为母版：在设计区域中目标元件，鼠标右键选择“转换为母版”，在弹出的对话框中设置母版名称，点击“继续”按钮，成功将这一组设计元素转换为母版。

03母版操作

使用母版面板可以对创建的所有母板进行统一管理。在母版管理面板中，可以添加母版、删除母版、重命名母版名称、移动母版位置及层级和查看母版使用情况报告。下面我们看下各功能操作：

添加母版：直接拖拽母版至页面中的任意位置或者通过鼠标右键单击选择菜单“添加到页面中”，选择需要添加母版的页面，选择母版在页面中的位置，可以选择母版固定位置或者通过坐标设定新的位置。还可以选择母版的图层顺序，系统为我们自动勾选了“页面中不包含此母版才能添加”，如图1所示。通过这种方法，可以实现母版的批量添加，一次性将母版添加至多个页面。通过鼠标右键命令，还可以为已有的母版添加子母版。

图1-添加母版到页面

母版管理面板还可以添加文件夹，利用文件夹可以将母版按照不同的使用需求或组件类型进行分类管理。

删除母版：选中母版，鼠标右键单击选择“删除”，完成母版的永久删除。当有页面使用母版时，这个时候会弹出“母版使用情况报告”，提示我们有哪些页面正在使用母版，这种情况下我们无法直接删除母版。首先我们需要将各页面的母版进行脱离处理，鼠标右键选择“脱离母版”，然后在从母版面板中进行删除。我们还可以从指定的页面中删除母版，保留母版管理中的母版。选中母版，鼠标右键单击选择“从页面中删除”，在弹出的“从页面中移除母版”对话框中，选择需要删除母版的页面，如图2所示。

图2-从页面中移除母版

重命名：双击母版进入编辑模式或者鼠标右键选择“重命名”，编辑母版名称。

移动：选中母版，鼠标右键单击选择移动命令，包含：上移、下移、降级、升级。我们还可以直接拖拽母版至任意位置释放鼠标，完成母版位置的移动或母版层级的调整。

使用情况：通过母版管理面板，可以查看哪些页面使用了母版。选中母版，鼠标右键单击选择“使用情况”，查看使用该母版的页面，如图3所示。

图3-查看母版使用情况

母版遮罩：通常，添加的母版上会覆盖一层粉红色遮罩，这是为了让我们能够在设计元素中快速区分哪些是母版。如果你不喜欢这种区分方式，可以通过点击菜单“视图>遮罩>母版”，取消粉红色的遮罩效果。同样的操作方法，在这里你也可以取消掉动态面板、中继器、图片热区这些元件容器的遮罩效果。

04母版类型

根据母版的拖放行为，可以将母版分为任意位置、固定位置、脱离母版这三种。选中母版，鼠标右键单击选择“拖放行为”，在这里我们可以修改母版的类型，系统默认为任意位置。拖放类型的修改，不会影响到页面中已添加的母版。

任意位置：可以拖放至页面当中的任意位置，可以灵活移动母版的位置。

固定位置：添加到页面中，母版固定显示在页面中的某一位置。

脱离母版：添加到页面中，即表示完全脱离了母版主体，在页面中可以随意修改而不会影响到原有母版。

重写母版数据

当我们将母版添加至页面后，还可以对母版的内容进行编辑，而不会影响到原母版中的内容，这极大的方便了我们一些个性化的数据需求，我们可以为页面中的母版输入真实的数据信息，使得原型内容的仿真度更高。拖拽母版至页面设计区域，选中母版，在右侧的样式面板中，重新编辑母版内容，如图4所示。

图4-重新编辑母版数据

母版引发事件

01 引发事件说明

引发事件属于母版的一种特殊动作，与一般动作不同的是，引发事件的动作对象是一个特殊事件，而不是元件对象，这个特殊事件完全是由我们自定义完成的。引发事件就像是一个导火线，可以引发另外一个事件的发生。这个由我们创建的引发事件可以在不同的引用母版中设置不同的动作。母版中引发自定义事件的事件与各页面中的自定义引发事件必须是同一个事件。比如在母版中我们为某一元件使用了“鼠标单击时”事件，那么引发的自定义事件在页面中也必须是“鼠标单击时”事件。一个母版可以有多个引发事件，而不会相互影响。

我们来举一个工作中的例子，产品经理的原型设计影响着UI界面设计、程序开发、功能测试等相关工作。产品经理每次修改完原型，都要通过邮件将原型发送给UI设计师、开发工程师、测试工程师等下游工作岗位，UI设计师修改界面，开发调整程序逻辑、测试工程师根据新需求重新测试。在这个例子中，产品经理的原型就如同母版，修改原型这一动作对应着自定义事件，各岗位的修改工作就对应着各页面被引发的事件。

在Axure RP 9中还有一个动作与引发事件类似，叫做触发事件，触发事件这个动作的对象也是事件，只不过触发事件的触发对象是系统事件。一个触发事件可以关联某一个元件的多个系统事件，如图5所示，同时触发圆的鼠标单击和鼠标双击两个事件。

图5-触发事件

02 创建和使用引发事件

双击母版进入编辑状态，点击菜单栏“布局>管理母版引发的事件”，点击添加，编辑事件名称，点击确定按钮，完成引发事件的添加。只有母版才能使用这一功能，其他情况下，该菜单命令为灰色不可用状态。

双击母版进入编辑状态，选中需要添加交互的元件，点击“新建交互”按钮，选择事件，选择动作“引发事件”，选择刚才添加的引发事件，点击完成按钮，完成事件的引用。

将母版添加至页面中，选中母版，点击“新建交互”，下拉选择引发事件。点击插入动作，选择动作，配置动作属性。

引发事件使用案例

为了帮助大家进一步理解什么是母版的引发事件，以及如何正确的使用母版引发事件来为我们的原型设计服务，我们一起来看下下文的这样一个案例。

第一步：拖动四个文本标签、一个图片元件、三个icon图标至页面设计区域，icon图标可从阿里巴巴矢量图标库下载。编辑其中的一个文本标签作为文章标题，其余三个作为浏览数、评论数和点赞数。选中这些元件，鼠标右键单击转换为母版，如图6所示。

图6-转换为母版

第二步：双击母版进入编辑模式，点击菜单“布局>管理母版引发的事件”，添加引发事件，点击确定按钮，如图7所示。选中文章标题，点击“新建交互”按钮，选择事件“鼠标单击时”，选择动作“引发事件”，选择刚才添加的引发事件，点击完成按钮，如图8所示。

图7-添加引发事件

第三步：打开一个新页面，重复拖动两次母版至设计区域，分别选中页面中的两个母版，在右侧样式面板中，重新填写数据信息，如编辑文章标题、导入图片、填写浏览数、评论数和点赞数，如图9所示。

图9-填写数据信息

第四步：选中母版，在交互面板中点击“新建交互”按钮，选择第二步添加的引发事件，选择动作“打开链接”，选择在新窗口打开，输入一个外部链接地址。同样的设置方法，完成另外一个母版的交互事件设置。如图10所示。

图10-添加动作

第五步：点击预览，查看原型。两篇文章的内容不一样，点击两篇文章的标题，分别跳转不同的页面。

写在末尾

感谢大家的耐心阅读，如果你有兴趣学习原型设计或Axure交互设计，不妨关注下我的新书《Axure RP9实用教程：原型+高保真+交互+设计》，目前在京东商城和当当网销售，双11期间5折销售。这是我十年来作为产品经理的实战经验所以。这本书由浅入深讲解了Axure RP9的基础功能，讲解过程中结合具体的案例帮助大家加深对元件交互功能的理解。最后两个章节，都是满满的干货案例，旨在通过具体的元件交互案例和页面制作案例，帮助大家找到Axure RP9的交互使用场景，同时也是检查并巩固理论学习的过程。读完这本书，你一定能够轻松驾驭Axure这款工具的使用，绝对物超所值。下图是本书的封面及目录结构。

书的封面

目录结构

关注头条号并查看专栏《Axure RP9新手零基础实用教程》，以全网最低价学习Axure RP9的全套网络教程，购买专栏后，私信可获取课程案例源文件，并赠送高保真组件库一套。