原型工具有多種，為何我確對(duì)Axure情有獨(dú)鐘？ 看了你就明白他的強(qiáng)大。

本文重點(diǎn)是自己制作經(jīng)驗(yàn)分享，視覺元素是次要（自己搞的界面，歡迎UI同學(xué)提上你的寶貴意見）。本次教程分享的是移動(dòng)APP端的左側(cè)滑菜單，在制作的時(shí)候，我們應(yīng)該對(duì)左側(cè)滑菜單有如下理解。

• 側(cè)滑菜單拉出需要觸發(fā)條件，如必須從最左側(cè)（或者靠近左側(cè)一定范圍）往右滑動(dòng)才能拉出菜單。
• 側(cè)滑菜單需要對(duì)滑動(dòng)距離應(yīng)有一定的反應(yīng)，如拉動(dòng)距離不足10時(shí)候，菜單退回，距離大于10完全滑出。

以上就是對(duì)交互的重點(diǎn)，了解到上面的條件后，我們可以開始制作左滑菜單了。在這里，還有一個(gè)難點(diǎn)和重點(diǎn)需要和大家分享，如何在內(nèi)聯(lián)框架中的頁面操作，影響父級(jí)頁面的行為。解釋一下，就是你在內(nèi)聯(lián)框架打開的子頁面，發(fā)生事件后需要父級(jí)框架作出響應(yīng)。

并且下期Axure教程預(yù)告-中繼器元件大小，根據(jù)你錄入的文字動(dòng)態(tài)調(diào)整尺寸。

容器框架搭建及簡(jiǎn)單處理

框架搭建，主要是由三個(gè)元件構(gòu)成，尺寸調(diào)制合適即可。

• 外觀框架（自己畫的，簡(jiǎn)陋了點(diǎn)）
• 底部導(dǎo)航欄-Tabbar
• 空白頁面-內(nèi)聯(lián)框架

事件設(shè)置-載入時(shí)在內(nèi)聯(lián)框架中打開首頁。

首頁搭建及簡(jiǎn)單處理

首頁是我們對(duì)側(cè)滑行為作出反應(yīng)的操作頁，一系列事件都需要在上面完成，下面直接使用我最近做的首頁，只講重點(diǎn)元件。

基礎(chǔ)搭建

首頁主要元件三個(gè)：

• 一個(gè)是主要內(nèi)容面板-動(dòng)態(tài)面板，我們的拖動(dòng)滑動(dòng)等手勢(shì)行為，都應(yīng)在這里才能進(jìn)行交互感應(yīng)。
• 一個(gè)是我們的側(cè)滑菜單，元件類型皆可。
• 一個(gè)是我們的遮罩層-動(dòng)態(tài)面板，尺寸大小和內(nèi)容面板一樣，遮罩層在這里的作用即是位于內(nèi)容面板之上，側(cè)滑菜單之下，用于防止用戶在側(cè)滑菜單后誤觸內(nèi)容內(nèi)容面板的遮罩層，我們?cè)O(shè)置背景為黑色，透明度為百分之30，這樣一個(gè)防誤觸遮罩層就出來了。

元件位置：

內(nèi)容面板位置坐標(biāo)為 x->0 ?y->0 ? ,方便在父級(jí)容器框架中正好完美契合。

側(cè)滑菜單，設(shè)側(cè)滑菜單的寬度為cH， 當(dāng)側(cè)滑事件開始的時(shí)候，應(yīng)該是在內(nèi)容面板 x-ch ，y坐標(biāo)不變。在這里舉例我就按照實(shí)際數(shù)字（側(cè)滑菜單寬度為：122）寫了。通俗說，就是在內(nèi)容面板左側(cè)并排。

遮罩層，尺寸和內(nèi)容面板一樣，位置坐標(biāo)為x->內(nèi)容面板寬度 ，y 坐標(biāo)不變。通俗說，就是在內(nèi)容面板位置右側(cè)并排。

調(diào)整后的相對(duì)位置是如下放置（這里是為了方便展示位置調(diào)成這樣），紅色標(biāo)注為主視覺

實(shí)際位置應(yīng)是這樣：

這樣我們?cè)趦?nèi)聯(lián)框架打開的時(shí)候，只看見綠色的主內(nèi)容面板。

當(dāng)然，我們也可以設(shè)置事件來調(diào)整元件坐標(biāo)，x坐標(biāo)根據(jù)你的內(nèi)容面板和菜單寬度來進(jìn)行調(diào)整。

這樣基本尺寸我們算是調(diào)整完畢了，可以在網(wǎng)頁中預(yù)覽一下。 無誤的應(yīng)是下圖。

以上，基礎(chǔ)搭建完畢。下面開始進(jìn)行側(cè)滑事件設(shè)置。

側(cè)滑事件設(shè)置

元件：內(nèi)容面板-動(dòng)態(tài)面板

事件：

拖動(dòng)開始時(shí)：

還記得側(cè)滑條件么，必須要是在左側(cè)邊緣才能觸發(fā)菜單拉動(dòng)，在Axure的函數(shù)中，有一個(gè)是記錄你滑動(dòng)開始時(shí)的的坐標(biāo)點(diǎn)，這里我們用全局變量記錄下來側(cè)滑開始的x坐標(biāo)，只用記錄x坐標(biāo)即可，y坐標(biāo)這里用不上。

重點(diǎn)：

拖動(dòng)開始時(shí)-設(shè)置 變量值為當(dāng)前觸摸點(diǎn)x坐標(biāo)。

說明：

全局變量自己取名，我這里叫SlideJudge，中午意思大概就是滑動(dòng)判斷；

[[Cursor.x]]表示你觸摸點(diǎn)的x坐標(biāo) ；

事件必須是在拖動(dòng)開始時(shí)。

拖動(dòng)時(shí)：

拖動(dòng)時(shí)讓側(cè)滑菜單元件一起拖動(dòng)事件很簡(jiǎn)單，但是重點(diǎn)是細(xì)節(jié)，這里有幾個(gè)個(gè)細(xì)節(jié)。

（１）拖動(dòng)條件，必須全局變量SlideJudge（觸摸點(diǎn)） ?的X坐標(biāo)應(yīng)該小于某一個(gè)值才能觸發(fā)側(cè)滑菜單拖動(dòng)。

（２）側(cè)滑菜單拖動(dòng)的邊界值設(shè)置，通俗說就是你不能往右側(cè)滑到中間或者靠右邊的位置，我們想要的效果 ? ? ? 應(yīng)該是側(cè)滑菜單滑到盡頭的時(shí)候應(yīng)該就停止滑動(dòng)了。左滑應(yīng)該也是如此，這里附上圖，數(shù)字不是最重 ? ? ? 要的，重要的理解數(shù)字代表的意思。 122是表示側(cè)滑菜單的寬度。

重點(diǎn)： 水平拖動(dòng)，動(dòng)畫無，邊界距離設(shè)置

（３）遮罩層的移動(dòng)，我們直接將遮罩層移動(dòng)到覆蓋主視圖即可，具體數(shù)字在實(shí)際情況中而定。細(xì)節(jié)就是我 ? ? ?們必須要使遮罩層層級(jí)在內(nèi)容視圖之上，側(cè)滑菜單之下。至于動(dòng)畫效果和時(shí)間，看哪個(gè)效果滿意即 ? ? ? ? ?可。

我們來看看效果圖，這樣，你在你設(shè)置的全局變量<某值的時(shí)候是不能拉動(dòng)側(cè)滑菜單的，只有滿足條件才能拉出菜單。

底下很難看的Tabbar后面單獨(dú)講，這里也是重點(diǎn)，怎樣在內(nèi)聯(lián)框架的子頁面中影響父級(jí)頁面的事件操作。

最簡(jiǎn)單的完了，重點(diǎn)開始：

拖動(dòng)結(jié)束時(shí)：

我們拖動(dòng)結(jié)束是有幾個(gè)判斷，就是拖動(dòng)距離大于某個(gè)值使，側(cè)滑菜單完全拉出，小于某個(gè)值的時(shí)候，側(cè)滑菜單完全退出。

函數(shù)講解：

TotalDragX ：

首先是以x坐標(biāo)為參考點(diǎn)，表示你觸摸點(diǎn)開始，到你滑動(dòng)停止的距離大小，比如我開始滑動(dòng)時(shí)，x坐標(biāo)為20，停止滑動(dòng)的時(shí)候，x坐標(biāo)為120 ，則此函數(shù)表示值為100；停止滑動(dòng)x坐標(biāo)為0，則此函數(shù)代表值為-20 。

重點(diǎn)：此函數(shù)值的有正負(fù)值，正值表示你往右滑，負(fù)值表示往右滑。

此時(shí)我們即可設(shè)置判斷，拖動(dòng)結(jié)束時(shí)，如果拖動(dòng)距離大于某值，則完全彈出菜單，否則則退出菜單。

• 完全彈出菜單即設(shè)置 ?側(cè)滑菜單-移動(dòng)-絕對(duì)距離- ?x-0,y-0。 此時(shí)可設(shè)置動(dòng)畫效果。
• 完全退出菜單即設(shè)置 ?回到拖動(dòng)前位置即可 。此時(shí)可設(shè)置動(dòng)畫效果。

補(bǔ)充一點(diǎn)，當(dāng)我們拖動(dòng)結(jié)束距離小于某值的時(shí)候，也就是菜單完全退出的時(shí)候，也應(yīng)該將遮罩層移除。

具體看圖：

到了這里，我們就完全解決了拉出菜單這個(gè)問題。接下來我們要處理-退出菜單的事件。相信到了這里，大家也明白側(cè)滑菜單退出操作應(yīng)該也是和拉出相似了。但是還是有幾個(gè)重點(diǎn)需要說明。

其實(shí)事情不是那么簡(jiǎn)單，還有重要的一步，也就是BUG，如果我們拖動(dòng)開始x坐標(biāo)是大于某值，雖然拖動(dòng)時(shí)，側(cè)滑菜單沒有出現(xiàn)，但是如果我們拖動(dòng)距離大于某值的時(shí)候， 你會(huì)發(fā)現(xiàn)側(cè)滑菜單還是完全出現(xiàn)了，這時(shí)候這種情況是我們不希望看見的，處理方法很簡(jiǎn)單，就是在 拖動(dòng)結(jié)束時(shí)再加一個(gè)判斷，判斷拖動(dòng)點(diǎn)是否在邊緣。

具體看圖：

滑出設(shè)置：

元件：

遮罩層

事件：

拖動(dòng)時(shí)：

由于我們內(nèi)容面板已經(jīng)被遮罩層覆蓋，所以這里我們需要把拖動(dòng)事件移到遮罩層上來。 拖動(dòng)時(shí)設(shè)置如下，此時(shí)不需要判斷是否是從左側(cè)邊緣拖動(dòng)，在這里我也加入了邊界值，防止拖動(dòng)過界問題。

接下來，處理拖動(dòng)結(jié)束判斷問題，也就是向左拖動(dòng)距離大于某值時(shí)，菜單完全退出，小于某值的時(shí)候，則還是完全拉出。

這里重點(diǎn)是，我們向左拖動(dòng)時(shí)（此時(shí)拖動(dòng)距離應(yīng)是負(fù)數(shù)），如果我們的臨界距離是10，則應(yīng)為拖動(dòng)距離小于-10時(shí)，完全退出菜單，拖動(dòng)距離大于-10時(shí)，完全拉出菜單。并且，我們?cè)谕耆顺霾藛蔚耐瑫r(shí)，移除遮罩層。

重點(diǎn)：

拖動(dòng)距離<-10 ,完全退出菜單，并且移除遮罩層。否則，完全拉出菜單。

如圖：

側(cè)滑設(shè)置完畢，收尾工作：

到上的時(shí)候，可以說我們側(cè)滑菜單全部交互已經(jīng)全部設(shè)置好了，我也是邊寫邊做，已經(jīng)可以使用，關(guān)于說的幾個(gè)細(xì)節(jié)需要和大家分享，

在實(shí)際中，拖動(dòng)開始的觸摸點(diǎn)判斷我是一樣的，但是設(shè)置的時(shí)候我不是直接設(shè)置為距離，而是如果觸摸點(diǎn)條件下。我將全局變量設(shè)置為1，表示允許側(cè)滑，否則設(shè)置為0，表示部允許側(cè)滑。

下面的拖動(dòng)條件則是判斷全局變量是否為1，這樣的好處就是，內(nèi)容的動(dòng)態(tài)面板切換的時(shí)候，我只需要判斷變量值是否為1而決定是否有側(cè)滑事件。只需根據(jù)應(yīng)用場(chǎng)景不同，設(shè)置全局變量為1或0即可。

側(cè)滑設(shè)置完畢，?Tabbar問題：

回到問題，我們的側(cè)滑事件是在子頁面中解決的，框架是一個(gè)父級(jí)頁面，那么當(dāng)我側(cè)滑菜單出現(xiàn)的時(shí)候，我不需要Tabbar顯示的時(shí)候怎么辦？

同學(xué)會(huì)發(fā)現(xiàn)，你根本無法設(shè)置父級(jí)框架的元件是否為可見。我們唯一能做的只有一個(gè)事

設(shè)置全局變量

思路來了，我們需要在設(shè)置全局變量的值的時(shí)候，聯(lián)動(dòng)的設(shè)置Tabbar是否可見。

那么，問題來了，怎樣在父級(jí)框架中檢測(cè)全局變量改變的時(shí)候，同時(shí)設(shè)置Tabbar呢？

核心元件，核心元件，核心元件：動(dòng)態(tài)面板。

如果是開發(fā)的同學(xué)這個(gè)問題比較好解決，因?yàn)樵陂_發(fā)中是MVC設(shè)計(jì)思想，只需在視圖控制器中修改即可，但是我們這里是Axure, 所以沒有控制器這個(gè)說法。

但是動(dòng)態(tài)面板有個(gè)核心交互-狀態(tài)改變時(shí)?觸發(fā)事件。

重點(diǎn)核心

如果我們動(dòng)態(tài)面板不斷循環(huán)，那么就不斷觸發(fā) 狀態(tài)改變時(shí)?這個(gè)事件，如果在狀態(tài)改變的時(shí)候能檢測(cè)到全局變量滿足某個(gè)條件，則可間接改變父頁面中的元件狀態(tài) 。

那么我們?cè)诟讣?jí)框架中，應(yīng)該加入一個(gè)動(dòng)態(tài)面板并且添加兩個(gè)及以上狀態(tài)，尺寸位置，內(nèi)容無所謂，為空即可，為視覺效果可設(shè)置隱藏，且設(shè)置尺寸為(w:1.h:1)，取名循環(huán)判斷器，在頁面載入的時(shí)候，即設(shè)置動(dòng)態(tài)面板不斷循環(huán)。

重點(diǎn)

父級(jí)框架 – 載入時(shí) -設(shè)置面板狀態(tài) – 狀態(tài)（Next）-勾選向后循環(huán) ?– ?循環(huán)間隔（100毫秒，視情況而定）

循環(huán)器開始了，我們還需要一個(gè)全局變量默認(rèn)為1可見，并且為動(dòng)態(tài)面板狀態(tài)改變時(shí)添加相應(yīng)事件，這里就不上圖了。

口語理解：

當(dāng)面板狀態(tài)不斷改變時(shí)

每100毫秒判斷

如果全局變量是否為0且Tabbar元件為顯示狀態(tài)，則隱藏動(dòng)態(tài)面板。

如果全局變量是1且Tabbar元件為隱藏狀態(tài)，則顯示動(dòng)態(tài)面板。

如果都不是，則不做任何操作。

• 1—可見
• 0–不可見

重點(diǎn)：

為了避免Tabbar在100毫秒后頻繁改變，在第一次隱藏或者顯示動(dòng)態(tài)面板后，隨即立即設(shè)置全局變量為其他值（我這里設(shè)置為 3 ）。

附上設(shè)置圖：

在這里我們的父級(jí)框架的設(shè)置算是完畢了，但是我們問題是怎樣在內(nèi)聯(lián)框架中的子頁面 操作時(shí)影響父級(jí)框架，所以，此時(shí)，我們轉(zhuǎn)換到我們側(cè)滑菜單頁面，進(jìn)行設(shè)置變量值。

• 文字描述： 側(cè)滑開始時(shí)（遮罩出現(xiàn)）就應(yīng)讓父級(jí)Tabbar設(shè)置為不可見，即全局變量設(shè)置為 0 。
• 側(cè)滑結(jié)束時(shí)（遮罩消失時(shí)），父級(jí)Tabbar應(yīng)設(shè)置為可見，即全局變量為 ? ? ? ? ? 1.

更高級(jí)的設(shè)置，其實(shí)應(yīng)該是在遮罩移動(dòng)時(shí)進(jìn)行判斷設(shè)置變量值，這里主要講的是思維，所以不深入了。

附上設(shè)置圖：

這樣大家再看看，討厭的Tabbar就不見了，當(dāng)然重點(diǎn)不是討論Tabbar放在哪里的問題，問題的重點(diǎn)是，怎樣在內(nèi)聯(lián)框架子頁面的行為，影響父級(jí)框架中元件的狀態(tài)。實(shí)用場(chǎng)景應(yīng)該很多的。

結(jié)語

好了，不知不覺，這個(gè)教程寫了幾個(gè)小時(shí)，也許做只要20分鐘，我不常寫教程，如果有興趣的同學(xué)對(duì)于教程寫法上有不懂或者建議的地方，請(qǐng)指出來，并且我也不太清楚，這種教程是否有同學(xué)看，如果太淺了我可以寫更高級(jí)一點(diǎn)的。

點(diǎn)擊觀看原型

下次準(zhǔn)備寫Axure主體是： 怎樣讓中繼器的每一項(xiàng)，中的某個(gè)元件根據(jù)中繼器的文本而進(jìn)行改變 。

應(yīng)用場(chǎng)景：當(dāng)你用中繼器展示文本標(biāo)簽的時(shí)候，希望每一行的文本長(zhǎng)度是根據(jù)文本內(nèi)容而改變的，而不是固定的。

如圖：

講解： 整個(gè)表是一個(gè)用中繼器表示不同的欄目，長(zhǎng)度高度都是根據(jù)文字類容調(diào)整的，而不是固定高度的。

最后，關(guān)于Axure，教程出現(xiàn)的數(shù)值，和操作事件真的不重要，重要的是思維理解，一步一步下一步，這樣去做。

好了，謝謝大家觀看，有點(diǎn)長(zhǎng)，有點(diǎn)復(fù)雜，感謝每一個(gè)用心看完的同學(xué)。

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