Axure的母版想必大家都不陌生了吧，在項目中使用母版能大幅提高重複勞動的工作效率，特別是在需求產生變更調整原型的時候。
一個合理的母版結構能大幅的縮減繁瑣的工作，下面我們就以APP前端界面的構建為實例，了解如何使用母版快速搭建一個靈活的APP界面框架。
這期又有些啥，點睹為快：點我查看
依據功能展示給母版填充不同的內容
母版的好處不言而喻，任何頁面用到了母版的內容，只需要在母版裡修改所有地方都會被自動修改，相當於引用的關係。
母版有三種拖拽行為：
母版中的內容直接拖拽到頁面中可以直接展示，但為了能更好的將原型展示出來，我們還需要構建顯示的層級關係。為原型加上可演示操作的基礎動畫。
這一步很重要，如果層次結構沒有理清，後面調整交互的時候就會有很多麻煩。
通過獲取屏幕的寬度，讓元件居中
動態的獲取寬度和高度，將頂部和底部固定
由於我需要將頂部狀態欄隱藏，所以將它的大小設置為了0,0
設置尺寸需要減去頂部和底部元件的高度。
加入背景層，讓排版的縫隙處有統一的色調背景
勾選自適應讓動態面板的大小隨內容的大小自適應
經過如上的步驟，我們就已經將大致的內容框架做完，我們為導航設置點擊事件。
期望的結果是，點擊對應導航，則切換顯示動態面板B中的對應狀態。然而卻遇到了問題：
母板中的元件都是獨立的，在Axure右下方的概要頁面中我們只能看到該母版中的元件，是無法看到並操作其它母版中的元件的。要實現導航的交互，我們還需要學習一個知識點，母版自定義事件。
為了便於操作，我直接使用了拼音的事件名字。
滑鼠單擊導航條目的時候，觸發對應的自定義事件。例如點擊投資則觸發touzi自定義事件。
有自定義事件的母版，在其它頁面引用後，在屬性面板中能看到該母版的對應事件
為對應的自定義事件，添加交互邏輯。點擊四個導航，切換顯示動態面板B的四個狀態。
如果你有一定的研發基礎，不難發現母版是提供基礎信息展示的地方【對象】，方便你複製、黏貼、引用【繼承】。與其它元件的交互則在母版外部完成，母版暴露自己的自定義事件【接口】，這些事件在引用到它的頁面中完成不同的交互【實現】。
以上我們就構建了一個適用於大部分APP的前端原型架構，如果技術嫻熟，並不會耗費多長時間，做好後的效果大致如下：【我的原型為高保真效果，大家理解結構層次和方法即可，不必照學】
我們再來回顧下層次結構：
屏幕被劃分為三塊顯示區域：
動態面板A中的內容過大時，會自動產生滾動條，實際在動態面板A中上下滾動時，是在滾動動態面板B中的內容。
1、易於維護和修改
2、邏輯層次清晰有條理
預覽：點我查看
下載地址：https://pan.baidu.com/s/1nuFHWW5 密碼：t453
本文由 @陳張良 原創發布於人人都是產品經理 ，未經許可，禁止轉載。