在Axure中，母版是非常常用和非常實(shí)用的一個(gè)功能之一，能幫我們節(jié)省不少時(shí)間精力，提高畫原型的效率。這篇文章，作者系統(tǒng)梳理了母版的相關(guān)知識(shí)，供大家參考。

一、為什么要使用母版

母版可以用來創(chuàng)建重復(fù)使用的各類原型設(shè)計(jì)元素，并對(duì)其進(jìn)行全局管理，是整個(gè)項(xiàng)目中重復(fù)使用的元件容器。

母版常用于創(chuàng)建頁頭、頁尾、導(dǎo)航、模板和廣告等。你可以在任何頁面輕松的使用事先創(chuàng)建好的母版，而不必再次辛苦制作或復(fù)制粘貼，這就是母版帶給我們的便利，你可以在母版的版面對(duì)它們進(jìn)行統(tǒng)一管理。

對(duì)母版進(jìn)行的任何修改結(jié)果，修改后的結(jié)果都會(huì)同步到引用的頁面中。

一個(gè)頁面可以同時(shí)使用多個(gè)母版。

當(dāng)每個(gè)頁面中有大量相同重復(fù)的元件時(shí)，使用母版能夠節(jié)省時(shí)間，極大的提高我們的工作效率。

先看下我們?cè)贏xure里使用母版做的高保真交互原型文件案例圖片示例如下：

Axure原型web端演示地址：https://odej85.axshare.com

Axure原型移動(dòng)端演示地址：https://u4k7qj.axshare.com

二、如何制作母版

1. 創(chuàng)建母版

頂部導(dǎo)航

方法一：在母版面板中點(diǎn)擊“新增母版”，為新建母版命名，雙擊母版進(jìn)入編輯界面。

方法二：在設(shè)計(jì)區(qū)域中首先選中要轉(zhuǎn)換為母版的元件，然后點(diǎn)擊右鍵，選擇“轉(zhuǎn)換為母版”，在彈出框的對(duì)話框中設(shè)置母版名稱，命名完成后，還可以設(shè)置母版的拖放行為，下文中會(huì)介紹拖放行為。

創(chuàng)建母版

2. 使用操作

使用母版面板對(duì)其進(jìn)行管理

在母版面板中，可以對(duì)母版進(jìn)行添加、刪除、排序等管理。

• 重命名：雙擊母版或者右鍵選擇“重命名”。
• 刪除母版：右鍵母版，在彈出的菜單列表中點(diǎn)擊刪除。
• 排序：直接拖拽母版或右鍵，在彈出菜單中選擇移動(dòng)，在右側(cè)展開的菜單欄中點(diǎn)擊上移或下移。

母版面板還可以添加文件夾，與站點(diǎn)地圖類似，母版還可以新增子母版。

母版的操作

3. 設(shè)計(jì)區(qū)域添加母版

直接拖拽母版至右側(cè)設(shè)計(jì)區(qū)域可以將母版添加到單個(gè)頁面中；

右鍵點(diǎn)擊母版，選擇“新增到頁面”，在彈出的“新增母版到頁面”對(duì)話框中選擇想要添加母版的頁面，可以實(shí)現(xiàn)母版的批量添加；

右鍵點(diǎn)擊母版，選擇“從頁面刪除”，可以在頁面中批量刪除母版。

母版的添加和刪除

母版上的遮罩：通常，添加的母版上會(huì)覆蓋一層粉紅色遮罩，這是為了讓我們能夠在設(shè)計(jì)元素中快速區(qū)分哪些是母版。

如果你不喜歡這種區(qū)分方式，可以通過點(diǎn)擊菜單中的“視圖>遮罩”，取消粉紅色的遮罩效果。

同樣的操作，在這里你也可以取消掉動(dòng)態(tài)面板、中繼器、圖片熱區(qū)這些元件容器的遮罩效果，見下圖。

取消遮罩

三、母版類型

按照母版的拖放行為，可以將母版分為以下3類：拖放到指定位置、鎖定母版位置、從母版脫離。

要改變母版類型，右鍵點(diǎn)擊母版?！斑x擇拖放行為”，在彈出的菜單中進(jìn)行選擇。

對(duì)模板類型的修改，只會(huì)影響到當(dāng)前要拖放到設(shè)計(jì)區(qū)域的母版。

• 任何位置：拖拽至設(shè)計(jì)區(qū)域，可以放置在設(shè)計(jì)區(qū)域中的任意位置
• 鎖定母版位置：拖拽至設(shè)計(jì)區(qū)域，固定在設(shè)計(jì)區(qū)域的某一位置，不可以隨意移動(dòng)
• 從母版脫離：拖拽至設(shè)計(jì)區(qū)域，即表示脫離了母版，在此處進(jìn)行任何修改，均不會(huì)影響原母版內(nèi)容

母版的拖放行為

四、母版觸發(fā)事件

1. 觸發(fā)事件說明

觸發(fā)事件是創(chuàng)建在母版中，只有母版才具有觸發(fā)事件，允許為母版的每個(gè)不同實(shí)例添加不同的交互。

當(dāng)你想讓母版內(nèi)元件的操作影響到母版外元件時(shí)，也可以使用母版觸發(fā)事件。

觸發(fā)事件的效果是由母版內(nèi)元件觸發(fā)的。

例如，在母版中添加了3個(gè)按鈕，并分別添加了鼠標(biāo)單擊事件，點(diǎn)擊3個(gè)按鈕時(shí)，影響著母版外一個(gè)文本的顯示內(nèi)容。

這樣做的好處是這里的按鈕是一個(gè)母版，對(duì)其操作維護(hù)比較方便，可以應(yīng)用到其它需要有類似效果的頁面。雖然達(dá)到這種效果的方法有很多，但母版觸發(fā)事件的強(qiáng)大之處在于可以多次重復(fù)使用，達(dá)到一勞永逸的目的。

關(guān)于觸發(fā)事件的一些重點(diǎn)說明如下：

觸發(fā)事件只能用于母版內(nèi)的元件創(chuàng)建 一個(gè)母版可以擁有多個(gè)觸發(fā)事件 創(chuàng)建觸發(fā)事件的步驟：

1. 在母版的元件上創(chuàng)建觸發(fā)事件。
2. 將母版拖拽到頁面的設(shè)計(jì)區(qū)域中，選中該母版，在元件交互面板中使用觸發(fā)事件創(chuàng)建交互來影響當(dāng)前頁面的元素。

2. 創(chuàng)建和使用觸發(fā)事件

雙擊母版進(jìn)入編輯狀態(tài)，選中母版要觸發(fā)的觸發(fā)元件，然后在元件交互面板中添加想要觸發(fā)的觸發(fā)事件的事件，在彈出的用例編輯器中第二步，添加“觸發(fā)事件”動(dòng)作，然后在第四步配置動(dòng)作中設(shè)定“觸發(fā)事件”的名稱，最后勾選事件名稱前的復(fù)選框，點(diǎn)擊確定，完成觸發(fā)事件的創(chuàng)建。

此外，還可以雙擊母版，進(jìn)入編輯狀態(tài)；然后在菜單欄中的布局>管理母版觸發(fā)事件，對(duì)觸發(fā)事件進(jìn)行管理。

觸發(fā)事件的添加和管理

創(chuàng)建完觸發(fā)事件后，將母版拖放到任意設(shè)計(jì)區(qū)域中，選中該母版，在元件交互面板中就可以看到剛剛添加的觸發(fā)事件。

觸發(fā)事件的操作方法和平時(shí)操作其他事件是一樣的。

3. 觸發(fā)事件使用案例

為了幫助大家進(jìn)一步理解什么是母版的觸發(fā)事件及其重要性。

在這個(gè)案例中將演示如何通過母版的觸發(fā)事件影響著文本顯示的內(nèi)容。

step1：拖動(dòng)3個(gè)按鈕至設(shè)計(jì)區(qū)域，并在3個(gè)按鈕內(nèi)分別輸入文字“發(fā)現(xiàn)”、“關(guān)注”和“消息”，拖動(dòng)一個(gè)文本標(biāo)簽至設(shè)計(jì)區(qū)域，文本內(nèi)容默認(rèn)輸入“這里顯示按鈕的文字”。

準(zhǔn)備元件

step2：選中3個(gè)按鈕，右鍵設(shè)置為任意位置母版。雙擊母版，進(jìn)入編輯狀態(tài)，為按鈕創(chuàng)建單擊事件，在事件編輯框中添加最下方的“觸發(fā)事件”，在配置動(dòng)作中命名，這里我就偷懶，直接在系統(tǒng)默認(rèn)名稱后加上數(shù)字編號(hào)“NewEvent1”，選中事件名稱前面的復(fù)選框，點(diǎn)擊確定；同樣的操作，為另外兩個(gè)按鈕添加觸發(fā)事件，事件名稱分別為“NewEvent2”和“NewEvent3”。

設(shè)置觸發(fā)事件

step3：返回到頁面當(dāng)中，選中母版為剛才添加的觸發(fā)事件““NewEvent1”添加用例，在用例編輯面板中，添加設(shè)置文本動(dòng)作，在配置動(dòng)作中選擇名為text的文本，設(shè)置文本的值為按鈕1的文字，點(diǎn)擊fx進(jìn)入編輯文本彈框界面，在設(shè)置這個(gè)值之前需要將按鈕1的文字定義為局部變量LVAR1，所以在配置動(dòng)作中文本的值為局部變量LVAR1；按照同樣的操作，為另外兩個(gè)觸發(fā)事件添加用例，需要提醒的是，設(shè)置文本時(shí)，文本的值分別設(shè)置為其按鈕上的元件文字。

為文本配置賦值動(dòng)作

為按鈕文字定義局部變量

step4：至此，所有的設(shè)置已經(jīng)完成，按下F5，預(yù)覽測(cè)試下效果。

Axure8.0版本中稱之為“觸發(fā)事件”，也有一些中文版本翻譯為“引發(fā)事件”，Axure7.0版本稱之為“自定義事件”，雖然叫法不一樣，但表達(dá)的意思是一致的。