Axure進(jìn)階篇中將會(huì)介紹什么是交互，如何玩轉(zhuǎn)Axure中最頻繁使用的動(dòng)態(tài)面板部件，做出狂拽炫酷的交互效果。另外，還會(huì)介紹母版（主要是觸發(fā)事件）的使用。

交互基礎(chǔ)知識(shí)

開(kāi)始使用Axure做交互之前，我們先來(lái)看看Axure的安身立命之本，即交互這個(gè)概念。

創(chuàng)建交互包括四個(gè)模塊：

• 交互（interaction）：3W= When + Where + What
  例如：當(dāng)鼠標(biāo)在菜單欄懸停時(shí)，菜單欄顏色變深。
• 事件（events）：主要有兩類(lèi)，頁(yè)面事件和部件事件。交互是由事件觸發(fā)的，事件用于執(zhí)行某個(gè)動(dòng)作。
• 用例(cases)：給同一個(gè)任務(wù)創(chuàng)建不同的路徑。用例由一系列動(dòng)作組成，
• 動(dòng)作(actions)：由用例定義的對(duì)事件的響應(yīng)。例如彈出窗口，打開(kāi)鏈接等等。

小貼士：

用例是可以復(fù)用的，當(dāng)你想要把一個(gè)用例上的動(dòng)作遷移到其他部件上時(shí)，只需要右鍵點(diǎn)擊該用例，然后點(diǎn)擊復(fù)制，再點(diǎn)擊響應(yīng)事件選擇粘貼即可。

Axure實(shí)現(xiàn)交互的方式非常多，只要你明白了其中的原理，隨著對(duì)這款軟件的熟悉，你就能駕馭它的使用。

深入理解動(dòng)態(tài)面板

在實(shí)際工作中，動(dòng)態(tài)面板是我們使用得最多的部件，通過(guò)它我們可以實(shí)現(xiàn)圖片輪播、手風(fēng)琴菜單、燈箱效果、標(biāo)簽控制和拖拽等效果。與函數(shù)變量結(jié)合后還可以做出用戶(hù)登陸提示、進(jìn)度條效果等。

動(dòng)態(tài)面板事件

狀態(tài)改變時(shí)：

這個(gè)事件經(jīng)常用來(lái)觸發(fā)面板狀態(tài)的一系列交互，例如：狀態(tài)1的情況下展示圖片1，狀態(tài)2的情況下展示圖片2（制作圖片輪播）。

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

這個(gè)事件是由面板的點(diǎn)擊、拖拽、釋放而觸發(fā)的。例如：APP原型中的向右滑動(dòng)某個(gè)圖片則進(jìn)入到下一張圖片的預(yù)覽。

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

這個(gè)事件是由動(dòng)態(tài)面板滾動(dòng)欄的滾動(dòng)所觸發(fā)的。要觸發(fā)一個(gè)特定滾動(dòng)位置交互，可以添加條件如：[[this.ScrollX]] 和 [[this.ScrollY]]，X\Y表示X軸和Y軸，通過(guò)設(shè)置距離來(lái)控制動(dòng)態(tài)面板的狀態(tài)。

大小改變時(shí)：

這個(gè)事件由面板大小的改變來(lái)觸發(fā)的。

載入時(shí)事件：

這個(gè)事件是由頁(yè)面初始加載動(dòng)態(tài)面板時(shí)觸發(fā)的。原理跟頁(yè)面載入時(shí)事件一樣。

拖拽事件：

• 開(kāi)始拖拽時(shí)
• 正在拖拽時(shí)
• 結(jié)束拖拽時(shí)

拖拽事件的每個(gè)階段都可以添加交互。

拖拽時(shí)移動(dòng)面板：

這個(gè)事件是拖拽一個(gè)部件的同時(shí)移動(dòng)面板這個(gè)動(dòng)作。

拖拽事件的選項(xiàng)

拖拽時(shí)使用條件：

拖拽時(shí)光標(biāo)位置：拖拽過(guò)程中光標(biāo)所處的位置。

部件范圍：被拖拽部件的范圍。

設(shè)置動(dòng)態(tài)面板

動(dòng)態(tài)面板可用的動(dòng)作包括：設(shè)置動(dòng)態(tài)面板狀態(tài)和設(shè)置動(dòng)態(tài)面板尺寸。

動(dòng)態(tài)面板大小：

在編輯動(dòng)態(tài)面板時(shí)，你會(huì)注意到一個(gè)藍(lán)色虛線輪廓，這表示你在動(dòng)態(tài)面板中只能看到藍(lán)色虛線輪廓范圍內(nèi)的內(nèi)容。

如果你添加的部件大小超過(guò)了動(dòng)態(tài)面板輪廓范圍，那么你可能需要使用添加滾動(dòng)欄或調(diào)整動(dòng)態(tài)面板大小以適合內(nèi)容。

動(dòng)態(tài)面板狀態(tài)：

在默認(rèn)狀態(tài)下，動(dòng)態(tài)面板狀態(tài)是空的，所以你需要添加內(nèi)容（部件）到動(dòng)態(tài)面板中。

要管理動(dòng)態(tài)面板的狀態(tài)會(huì)用到部件管理器，里面會(huì)顯示動(dòng)態(tài)面板的每一個(gè)狀態(tài)，雙擊可進(jìn)入該狀態(tài)的編輯狀態(tài)。

動(dòng)態(tài)面板實(shí)戰(zhàn)案例：制作首頁(yè)廣告輪播

主要的思路是通過(guò)創(chuàng)建包含多個(gè)圖片層的動(dòng)態(tài)面板，并通過(guò)按鈕（上一張，下一張）控制顯示的圖片，同時(shí)可以通過(guò)設(shè)置用例條件使得圖片輪播能夠自動(dòng)循環(huán)播放。

Step 1：拖拽動(dòng)態(tài)面板到設(shè)計(jì)區(qū)域，或拖拽圖片部件到設(shè)計(jì)區(qū)域并右鍵轉(zhuǎn)化為動(dòng)態(tài)面板。并添加左側(cè)（上一張）和右側(cè)（下一張）的按鈕。你還可以設(shè)置輪播圓點(diǎn)來(lái)控制圖片的播放，每一個(gè)小圓點(diǎn)對(duì)應(yīng)一張圖片即可。

Step 2：添加點(diǎn)擊按鈕改變面板狀態(tài)事件。

選中右側(cè)按鈕，添加『鼠標(biāo)點(diǎn)擊時(shí)』事件，在彈出的對(duì)話框中，選擇『設(shè)置面板狀態(tài)』動(dòng)作，并在右側(cè)按鈕的配置動(dòng)作中，將動(dòng)態(tài)面板狀態(tài)下拉列表選擇為 NEXT。同時(shí)設(shè)置動(dòng)態(tài)面板狀態(tài)的循環(huán)和動(dòng)畫(huà)以及過(guò)渡效果。

制作圖片輪播

案例的下載和演示鏈接見(jiàn)文末。

母版的使用

什么是母版？可以把母版形象地比喻為PPT中的模板，即你創(chuàng)建一次，就能重復(fù)使用，你改變模板后，所有使用該模板的頁(yè)面都會(huì)同時(shí)發(fā)生相應(yīng)的變化。

新建母版：

有兩種方法，一是在母版面板中點(diǎn)擊『新增面板』；二是在設(shè)計(jì)區(qū)選中需要轉(zhuǎn)換為母版的部件（可以批量選中），右鍵點(diǎn)擊『轉(zhuǎn)換為母版』。

母版的拖放行為：

• 任何位置：可以拖動(dòng)母版到任何位置；
• 鎖定母版位置：固定母版在創(chuàng)建時(shí)的位置；
• 從母版脫離：當(dāng)拖動(dòng)母版到設(shè)計(jì)區(qū)域時(shí)，其中包含的部件變成可以編輯的個(gè)體，不再歸屬于母版。

觸發(fā)事件：

觸發(fā)事件（又稱(chēng)自定義事件）是Axure母版的專(zhuān)用，只有它可以觸發(fā)事件。

使用場(chǎng)景：一個(gè)母版上的觸發(fā)事件出現(xiàn)在該母版的每一個(gè)實(shí)例的交互行為上，如果一個(gè)母版的一個(gè)實(shí)例和另一個(gè)實(shí)例的交互行為有很大不同，那么可以創(chuàng)建觸發(fā)事件來(lái)實(shí)現(xiàn)。

觸發(fā)事件的名稱(chēng)必須是字母數(shù)字且不包含空格，如：OnMyButtonClick(鼠標(biāo)單擊時(shí))。

為母版添加事件可以直接新增用例，在用例編輯器中新增『觸發(fā)事件』動(dòng)作，然后將母版拖動(dòng)到其他頁(yè)面時(shí)即可看到已創(chuàng)建的動(dòng)作。在頁(yè)面中可以對(duì)已創(chuàng)建的動(dòng)作添加新的用例。

創(chuàng)建后拖動(dòng)到任意頁(yè)面可看到創(chuàng)建的事件

下載動(dòng)態(tài)面板案例：