從零開始學Axure原型設計（高階篇）

axure不僅能製作靜態的視覺稿、頁面，還能新增互動動作，是進行原型設計的最佳軟體之一。在認識了axure的介面和部件庫之後，我們可以用它來畫線框圖了，但是靜態的線框圖在表達上不如有互動的原型圖來得直觀。

axure高階篇中將會介紹什麼是互動，如何玩轉axure中最頻繁使用的動態面板部件，做出狂拽炫酷的互動效果。另外，還會介紹母版（主要是觸發事件）的使用。

開始使用axure做互動之前，我們先來看看axure的安身立命之本，即互動這個概念。

建立互動包括四個模組：

小貼士：

用例是可以復用的，當你想要把乙個用例上的動作遷移到其他部件上時，只需要右鍵點選該用例，然後點選複製，再點選響應事件選擇貼上即可。

axure實現互動的方式非常多，只要你明白了其中的原理，隨著對這款軟體的熟悉，你就能駕馭它的使用。

在實際工作中，動態面板是我們使用得最多的部件，通過它我們可以實現輪播、手風琴選單、燈箱效果、標籤控制和拖拽等效果。與函式變數結合後還可以做出使用者登陸提示、進度條效果等。

動態面板事件

滾動時：

這個事件是由動態面板滾動欄的滾動所觸發的。要觸發乙個特定滾動位置互動，可以新增條件如：[[this.scrollx]] 和 [[this.scrolly]]，x\y表示x軸和y軸，通過設定距離來控制動態面板的狀態。

大小改變時：

這個事件由面板大小的改變來觸發的。

載入時事件：

這個事件是由頁面初始載入動態面板時觸發的。原理跟頁面載入時事件一樣。

拖拽事件：

拖拽時移動面板：

這個事件是拖拽乙個部件的同時移動面板這個動作。

拖拽事件的選項

設定動態面板

動態面板可用的動作包括：設定動態面板狀態和設定動態面板尺寸。

動態面板狀態：

動態面板狀態管理器

動態面板實戰案例：製作首頁廣告輪播

step 2：

新增點選按鈕改變面板狀態事件。

選中右側按鈕，新增『滑鼠點選時』事件，在彈出的對話方塊中，選擇『設定面板狀態』動作，並在右側按鈕的配置動作中，將動態面板狀態下拉列表選擇為 next。同時設定動態面板狀態的迴圈和動畫以及過渡效果。

製作輪播

什麼是母版？可以把母版形象地比喻為ppt中的模板，即你建立一次，就能重複使用，你改變模板後，所有使用該模板的頁面都會同時發生相應的變化。

觸發事件：

觸發事件的名稱必須是字母數字且不包含空格，如：onmybuttonclick(滑鼠單擊時)。

為母版新增事件可以直接新增用例，在用例編輯器中新增『觸發事件』動作，然後將母版拖動到其他頁面時即可看到已建立的動作。在頁面中可以對已建立的動作新增新的用例。

為母版建立觸發事件

建立後拖動到任意頁面可看到建立的事件

密碼: zmpk

案例展示

原文：