母版基礎知識
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的全套網絡教程，購買專欄後，私信可獲取課程案例源文件，並贈送高保真組件庫一套。
專欄
Axure RP9新手零基礎實用教程
49幣
4人已購
