Axure有時會在一個原型圖中復(fù)用組件，比如彈出對話框、頁面頭部導(dǎo)航條、左側(cè)導(dǎo)航樹等。如果采用簡單的方式，那么可以在每個頁面里都拷貝一份，但當(dāng)修改了組件的某個地方后則需要檢查并修改很多頁面，其工作量可想而知。

為了解決這個問題，Axure提供母版功能。你可以將頁面中公共的部分提取出來定義為母版，然后在需要的頁面里添加該母版。此時如果要修改，則直接修改母版文件，所有引用該母版的頁面會自動更新修改的內(nèi)容。

為母版元素自定義事件的大致步驟為：

定義母版元素–>自定義事件–>添加用例

下文以彈出對話框?yàn)槔f明母版的使用方法。本文僅適用于具有一定Axure使用經(jīng)驗(yàn)的用戶閱讀。

1. 定義母版元素

1) 在Axure文件中任意新建一個頁面，在頁面中繪制一個彈出對話框的樣式，參考下圖：

2) 選擇此對話框中的所有元素，點(diǎn)擊右鍵選擇“轉(zhuǎn)換為母版”，為母版命名并選擇拖放行為Place Anyway，即可以在頁面的任意位置放置母版，創(chuàng)建母版成功后頁面效果如下：

3) 至此，母版創(chuàng)建完成。寫到這里可能大家有一個疑問，上面寫的只是創(chuàng)建母版的步驟，那為什么文章標(biāo)題叫自定義事件呢？帶著這個疑問咱們進(jìn)入下文的內(nèi)容。

2. 為母版自定義事件

由于對話框在頁面中的行為并不是孤立的，點(diǎn)擊對話中的確定、取消按鈕后效果是不同的，比如點(diǎn)擊取消按鈕直接關(guān)閉對話框而沒有其他操作，點(diǎn)擊確定按鈕除了關(guān)閉對話框之外，還要執(zhí)行其他操作。此時，我們可以為對話框自定義事件。

1) 在頁面中添加“彈出對話框”母版，并添加一個Label組件，如下圖所示：

其中，Label組件命名為lblMsg，對話框組件命名為dlgConfirm。

我們想要實(shí)現(xiàn)的效果是點(diǎn)擊確定按鈕，關(guān)閉對話框并在Label中顯示“點(diǎn)擊了確定按鈕”；點(diǎn)擊取消按鈕僅關(guān)閉對話框，Label顯示無變化。

2) 進(jìn)入“彈出對話框”母版編輯界面，為“確定”按鈕新建鼠標(biāo)單擊用例，如下圖：

3) 選擇動作“觸發(fā)事件”，并添加自定義事件onSureButtonClick，并勾選此自定義事件，如下圖所示：

4) 同理，定義“取消”按鈕的單擊動作，并添加自定義事件onCancelButtonClick，如下圖：

5) 關(guān)閉母版編輯頁面，返回添加了母版的頁面，單擊對話框就可以看到自定義的事件了，如下圖：

3. 為自定義事件添加用例

1) 為onSureButtonClick事件添加用例，實(shí)現(xiàn)點(diǎn)擊確定按鈕時隱藏對話框并在Label中顯示自定義內(nèi)容的功能，如下圖：

即：將對話框中的所有元素隱藏，并改變Label的文字為“用戶點(diǎn)擊了確定按鈕”。

2) 同理，為onCancelButtonClick事件添加用例，實(shí)現(xiàn)點(diǎn)擊取消按鈕時隱藏對話框的功能，如下圖：

3) 預(yù)覽頁面，分別點(diǎn)擊確定、取消按鈕查看效果。

說明：

1. 對話框也可以放在一個面板里，點(diǎn)擊按鈕后直接隱藏該面板；
2. 如果對話框被放置在不同的頁面，則可以根據(jù)頁面的具體邏輯為onSureButtonClick和onCancelButtonClick事件定義不同的操作，從而滿足各種使用場景。

作者：王春雷，互聯(lián)科技創(chuàng)始人。12年互聯(lián)網(wǎng)從業(yè)經(jīng)驗(yàn)，5年產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。

本文由 @王春雷 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。