Axure的母版想必大家都不陌生了吧，在項(xiàng)目中使用母版能大幅提高重復(fù)勞動的工作效率，特別是在需求產(chǎn)生變更調(diào)整原型的時候。

一個合理的母版結(jié)構(gòu)能大幅的縮減繁瑣的工作，下面我們就以APP前端界面的構(gòu)建為實(shí)例，了解如何使用母版快速搭建一個靈活的APP界面框架。

這期又有些啥，點(diǎn)睹為快：點(diǎn)我查看

第1步：根據(jù)頁面上的功能劃分不同的區(qū)域塊

第2步：根據(jù)區(qū)域塊來組織母版的結(jié)構(gòu)

第3步：為每個區(qū)域塊填充對應(yīng)的功能

依據(jù)功能展示給母版填充不同的內(nèi)容

第4步：將母版放置到對應(yīng)的原型中，大功告成

如何快速讓你的原型動起來?

母版的好處不言而喻，任何頁面用到了母版的內(nèi)容，只需要在母版里修改所有地方都會被自動修改，相當(dāng)于引用的關(guān)系。

母版有三種拖拽行為：

母版中的內(nèi)容直接拖拽到頁面中可以直接展示，但為了能更好的將原型展示出來，我們還需要構(gòu)建顯示的層級關(guān)系。為原型加上可演示操作的基礎(chǔ)動畫。

教程開始：

第1步：規(guī)劃界面顯示的層級結(jié)構(gòu)，我的思路如下：

這一步很重要，如果層次結(jié)構(gòu)沒有理清，后面調(diào)整交互的時候就會有很多麻煩。

第2步：將固定位置元素放入頁面的任意區(qū)域并初始化位置和尺寸

通過獲取屏幕的寬度，讓元件居中

動態(tài)的獲取寬度和高度，將頂部和底部固定

由于我需要將頂部狀態(tài)欄隱藏，所以將它的大小設(shè)置為了0,0

第3步：設(shè)置外層的動態(tài)面板并初始化位置和尺寸

設(shè)置尺寸需要減去頂部和底部元件的高度。

第4步：為空白區(qū)域加上背景層，并初始化位置和尺寸

加入背景層，讓排版的縫隙處有統(tǒng)一的色調(diào)背景

第5步：在外層動態(tài)面板內(nèi)放置內(nèi)層的動態(tài)面板并設(shè)置自適應(yīng)尺寸

勾選自適應(yīng)讓動態(tài)面板的大小隨內(nèi)容的大小自適應(yīng)

第6步：為內(nèi)層的動態(tài)面板按功能設(shè)置不同的狀態(tài)，并填充對應(yīng)的母版內(nèi)容

第7步：隱藏主頁面元素，初始化后再顯示出來

經(jīng)過如上的步驟，我們就已經(jīng)將大致的內(nèi)容框架做完，我們?yōu)閷?dǎo)航設(shè)置點(diǎn)擊事件。

期望的結(jié)果是，點(diǎn)擊對應(yīng)導(dǎo)航，則切換顯示動態(tài)面板B中的對應(yīng)狀態(tài)。然而卻遇到了問題：

母板中的元件都是獨(dú)立的，在Axure右下方的概要頁面中我們只能看到該母版中的元件，是無法看到并操作其它母版中的元件的。要實(shí)現(xiàn)導(dǎo)航的交互，我們還需要學(xué)習(xí)一個知識點(diǎn)，母版自定義事件。

第1步：為底部導(dǎo)航添加事件，并綁定對應(yīng)事件

為了便于操作，我直接使用了拼音的事件名字。

鼠標(biāo)單擊導(dǎo)航條目的時候，觸發(fā)對應(yīng)的自定義事件。例如點(diǎn)擊投資則觸發(fā)touzi自定義事件。

第2步：在引用到母版的界面中，處理對應(yīng)的自定義事件。點(diǎn)擊導(dǎo)航切換動態(tài)面板狀態(tài)

有自定義事件的母版，在其它頁面引用后，在屬性面板中能看到該母版的對應(yīng)事件

為對應(yīng)的自定義事件，添加交互邏輯。點(diǎn)擊四個導(dǎo)航，切換顯示動態(tài)面板B的四個狀態(tài)。

如果你有一定的研發(fā)基礎(chǔ)，不難發(fā)現(xiàn)母版是提供基礎(chǔ)信息展示的地方【對象】，方便你復(fù)制、黏貼、引用【繼承】。與其它元件的交互則在母版外部完成，母版暴露自己的自定義事件【接口】，這些事件在引用到它的頁面中完成不同的交互【實(shí)現(xiàn)】。

以上我們就構(gòu)建了一個適用于大部分APP的前端原型架構(gòu)，如果技術(shù)嫻熟，并不會耗費(fèi)多長時間，做好后的效果大致如下：【我的原型為高保真效果，大家理解結(jié)構(gòu)層次和方法即可，不必照學(xué)】

我們再來回顧下層次結(jié)構(gòu)：

屏幕被劃分為三塊顯示區(qū)域：

• 頂部
• 內(nèi)容：動態(tài)面板A【固定大小】、動態(tài)面板B【自適應(yīng)大小】
• 背景層：底部

動態(tài)面板A中的內(nèi)容過大時，會自動產(chǎn)生滾動條，實(shí)際在動態(tài)面板A中上下滾動時，是在滾動動態(tài)面板B中的內(nèi)容。

使用母版進(jìn)行框架布局的好處：

1、易于維護(hù)和修改

2、邏輯層次清晰有條理

預(yù)覽：點(diǎn)我查看

下載地址：https://pan.baidu.com/s/1nuFHWW5 密碼：t453

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