国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

如何快速讓你的原型動(dòng)起來?

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

母版有三種拖拽行為：

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

教程開始：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們?cè)賮砘仡櫹聦哟谓Y(jié)構(gòu)：

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

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

動(dòng)態(tài)面板A中的內(nèi)容過大時(shí)，會(huì)自動(dòng)產(chǎn)生滾動(dòng)條，實(shí)際在動(dòng)態(tài)面板A中上下滾動(dòng)時(shí)，是在滾動(dòng)動(dòng)態(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)載。