Axure不僅能制作靜態的視覺稿、頁面,還能添加交互動作,是進行原型設計的最佳軟件之一。在認識了Axure的界面和部件庫之后,我們可以用它來畫線框圖了,但是靜態的線框圖在表達上不如有交互的原型圖來得直觀。
Axure進階篇中將會介紹什么是交互,如何玩轉Axure中最頻繁使用的動態面板部件,做出狂拽炫酷的交互效果。另外,還會介紹母版(主要是觸發事件)的使用。
交互基礎知識
開始使用Axure做交互之前,我們先來看看Axure的安身立命之本,即交互這個概念。
創建交互包括四個模塊:
- 交互(interaction):3W= When + Where + What
例如:當鼠標在菜單欄懸停時,菜單欄顏色變深。
- 事件(events):主要有兩類,頁面事件和部件事件。交互是由事件觸發的,事件用于執行某個動作。
- 用例(cases):給同一個任務創建不同的路徑。用例由一系列動作組成,
- 動作(actions):由用例定義的對事件的響應。例如彈出窗口,打開鏈接等等。
小貼士:
用例是可以復用的,當你想要把一個用例上的動作遷移到其他部件上時,只需要右鍵點擊該用例,然后點擊復制,再點擊響應事件選擇粘貼即可。
Axure實現交互的方式非常多,只要你明白了其中的原理,隨著對這款軟件的熟悉,你就能駕馭它的使用。
深入理解動態面板
在實際工作中,動態面板是我們使用得最多的部件,通過它我們可以實現圖片輪播、手風琴菜單、燈箱效果、標簽控制和拖拽等效果。與函數變量結合后還可以做出用戶登陸提示、進度條效果等。
動態面板事件
狀態改變時:
這個事件經常用來觸發面板狀態的一系列交互,例如:狀態1的情況下展示圖片1,狀態2的情況下展示圖片2(制作圖片輪播)。
拖動時:
這個事件是由面板的點擊、拖拽、釋放而觸發的。例如:APP原型中的向右滑動某個圖片則進入到下一張圖片的預覽。
滾動時:
這個事件是由動態面板滾動欄的滾動所觸發的。要觸發一個特定滾動位置交互,可以添加條件如:[[this.ScrollX]] 和 [[this.ScrollY]],X\Y表示X軸和Y軸,通過設置距離來控制動態面板的狀態。
大小改變時:
這個事件由面板大小的改變來觸發的。
載入時事件:
這個事件是由頁面初始加載動態面板時觸發的。原理跟頁面載入時事件一樣。
拖拽事件:
拖拽事件的每個階段都可以添加交互。
拖拽時移動面板:
這個事件是拖拽一個部件的同時移動面板這個動作。
拖拽事件的選項
拖拽時使用條件:
拖拽時光標位置:拖拽過程中光標所處的位置。
部件范圍:被拖拽部件的范圍。
設置動態面板
動態面板可用的動作包括:設置動態面板狀態和設置動態面板尺寸。
動態面板大?。?/strong>
在編輯動態面板時,你會注意到一個藍色虛線輪廓,這表示你在動態面板中只能看到藍色虛線輪廓范圍內的內容。
如果你添加的部件大小超過了動態面板輪廓范圍,那么你可能需要使用添加滾動欄或調整動態面板大小以適合內容。
動態面板狀態:
在默認狀態下,動態面板狀態是空的,所以你需要添加內容(部件)到動態面板中。
要管理動態面板的狀態會用到部件管理器,里面會顯示動態面板的每一個狀態,雙擊可進入該狀態的編輯狀態。
動態面板實戰案例:制作首頁廣告輪播
主要的思路是通過創建包含多個圖片層的動態面板,并通過按鈕(上一張,下一張)控制顯示的圖片,同時可以通過設置用例條件使得圖片輪播能夠自動循環播放。
Step 1:拖拽動態面板到設計區域,或拖拽圖片部件到設計區域并右鍵轉化為動態面板。并添加左側(上一張)和右側(下一張)的按鈕。你還可以設置輪播圓點來控制圖片的播放,每一個小圓點對應一張圖片即可。
Step 2:添加點擊按鈕改變面板狀態事件。
選中右側按鈕,添加『鼠標點擊時』事件,在彈出的對話框中,選擇『設置面板狀態』動作,并在右側按鈕的配置動作中,將動態面板狀態下拉列表選擇為 NEXT。同時設置動態面板狀態的循環和動畫以及過渡效果。
制作圖片輪播
案例的下載和演示鏈接見文末。
母版的使用
什么是母版?可以把母版形象地比喻為PPT中的模板,即你創建一次,就能重復使用,你改變模板后,所有使用該模板的頁面都會同時發生相應的變化。
新建母版:
有兩種方法,一是在母版面板中點擊『新增面板』;二是在設計區選中需要轉換為母版的部件(可以批量選中),右鍵點擊『轉換為母版』。
母版的拖放行為:
- 任何位置:可以拖動母版到任何位置;
- 鎖定母版位置:固定母版在創建時的位置;
- 從母版脫離:當拖動母版到設計區域時,其中包含的部件變成可以編輯的個體,不再歸屬于母版。
觸發事件:
觸發事件(又稱自定義事件)是Axure母版的專用,只有它可以觸發事件。
使用場景:一個母版上的觸發事件出現在該母版的每一個實例的交互行為上,如果一個母版的一個實例和另一個實例的交互行為有很大不同,那么可以創建觸發事件來實現。
觸發事件的名稱必須是字母數字且不包含空格,如:OnMyButtonClick(鼠標單擊時)。
為母版添加事件可以直接新增用例,在用例編輯器中新增『觸發事件』動作,然后將母版拖動到其他頁面時即可看到已創建的動作。在頁面中可以對已創建的動作添加新的用例。
創建后拖動到任意頁面可看到創建的事件
下載動態面板案例:
百度云下載鏈接
密碼: zmpk
案例展示
#專欄作家#
粽小喵,微信公眾號:zong_xiaomiao,人人都是產品經理專欄作家。騰訊產品經理。一個學傳播出身的產品新人,愛好研究原型設計工具。
本文原創發布于人人都是產品經理,未經許可,不得轉載。