中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

這期又有些啥，點睹為快：點我查看

第1步：根據頁面上的功能劃分不同的區域塊

第2步：根據區域塊來組織母版的結構

第3步：為每個區域塊填充對應的功能

依據功能展示給母版填充不同的內容

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

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

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

母版有三種拖拽行為：

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

教程開始：

第1步：規劃界面顯示的層級結構，我的思路如下：

這一步很重要，如果層次結構沒有理清，后面調整交互的時候就會有很多麻煩。

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

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

動態的獲取寬度和高度，將頂部和底部固定

由于我需要將頂部狀態欄隱藏，所以將它的大小設置為了0,0

第3步：設置外層的動態面板并初始化位置和尺寸

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

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

加入背景層，讓排版的縫隙處有統一的色調背景

第5步：在外層動態面板內放置內層的動態面板并設置自適應尺寸

勾選自適應讓動態面板的大小隨內容的大小自適應

第6步：為內層的動態面板按功能設置不同的狀態，并填充對應的母版內容

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

經過如上的步驟，我們就已經將大致的內容框架做完，我們為導航設置點擊事件。

期望的結果是，點擊對應導航，則切換顯示動態面板B中的對應狀態。然而卻遇到了問題：

母板中的元件都是獨立的，在Axure右下方的概要頁面中我們只能看到該母版中的元件，是無法看到并操作其它母版中的元件的。要實現導航的交互，我們還需要學習一個知識點，母版自定義事件。

第1步：為底部導航添加事件，并綁定對應事件

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

鼠標單擊導航條目的時候，觸發對應的自定義事件。例如點擊投資則觸發touzi自定義事件。

第2步：在引用到母版的界面中，處理對應的自定義事件。點擊導航切換動態面板狀態

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

為對應的自定義事件，添加交互邏輯。點擊四個導航，切換顯示動態面板B的四個狀態。

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

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

我們再來回顧下層次結構：

屏幕被劃分為三塊顯示區域：

• 頂部
• 內容：動態面板A【固定大小】、動態面板B【自適應大小】
• 背景層：底部

動態面板A中的內容過大時，會自動產生滾動條，實際在動態面板A中上下滾動時，是在滾動動態面板B中的內容。

使用母版進行框架布局的好處：

1、易于維護和修改

2、邏輯層次清晰有條理

預覽：點我查看

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

本文由 @陳張良 原創發布于人人都是產品經理?，未經許可，禁止轉載。