從零開始學Axure原型設計:動態面板與母版

0 評論 69589 瀏覽 549 收藏 9 分鐘

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軸,通過設置距離來控制動態面板的狀態。

大小改變時:

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

載入時事件:

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

拖拽事件:

  • 開始拖拽時
  • 正在拖拽時
  • 結束拖拽時

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

拖拽時移動面板:

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

2016-01-10_18-14-42

拖拽事件的選項

拖拽時使用條件:

拖拽時光標位置:拖拽過程中光標所處的位置。

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

設置動態面板

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

動態面板大?。?/strong>

在編輯動態面板時,你會注意到一個藍色虛線輪廓,這表示你在動態面板中只能看到藍色虛線輪廓范圍內的內容。

如果你添加的部件大小超過了動態面板輪廓范圍,那么你可能需要使用添加滾動欄或調整動態面板大小以適合內容。

動態面板狀態:

在默認狀態下,動態面板狀態是空的,所以你需要添加內容(部件)到動態面板中。

要管理動態面板的狀態會用到部件管理器,里面會顯示動態面板的每一個狀態,雙擊可進入該狀態的編輯狀態。

動態面板實戰案例:制作首頁廣告輪播

主要的思路是通過創建包含多個圖片層的動態面板,并通過按鈕(上一張,下一張)控制顯示的圖片,同時可以通過設置用例條件使得圖片輪播能夠自動循環播放。

Step 1:拖拽動態面板到設計區域,或拖拽圖片部件到設計區域并右鍵轉化為動態面板。并添加左側(上一張)和右側(下一張)的按鈕。你還可以設置輪播圓點來控制圖片的播放,每一個小圓點對應一張圖片即可。

Step 2:添加點擊按鈕改變面板狀態事件。

選中右側按鈕,添加『鼠標點擊時』事件,在彈出的對話框中,選擇『設置面板狀態』動作,并在右側按鈕的配置動作中,將動態面板狀態下拉列表選擇為 NEXT。同時設置動態面板狀態的循環和動畫以及過渡效果。

2016-01-10_18-30-35

制作圖片輪播

案例的下載和演示鏈接見文末。

母版的使用

什么是母版?可以把母版形象地比喻為PPT中的模板,即你創建一次,就能重復使用,你改變模板后,所有使用該模板的頁面都會同時發生相應的變化。

新建母版:

有兩種方法,一是在母版面板中點擊『新增面板』;二是在設計區選中需要轉換為母版的部件(可以批量選中),右鍵點擊『轉換為母版』。

母版的拖放行為:

  • 任何位置:可以拖動母版到任何位置;
  • 鎖定母版位置:固定母版在創建時的位置;
  • 從母版脫離:當拖動母版到設計區域時,其中包含的部件變成可以編輯的個體,不再歸屬于母版。

觸發事件:

觸發事件(又稱自定義事件)是Axure母版的專用,只有它可以觸發事件。

使用場景:一個母版上的觸發事件出現在該母版的每一個實例的交互行為上,如果一個母版的一個實例和另一個實例的交互行為有很大不同,那么可以創建觸發事件來實現。

觸發事件的名稱必須是字母數字且不包含空格,如:OnMyButtonClick(鼠標單擊時)。

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

2016-01-10_17-20-08

創建后拖動到任意頁面可看到創建的事件

下載動態面板案例:

百度云下載鏈接

密碼: zmpk

案例展示

#專欄作家#

粽小喵,微信公眾號:zong_xiaomiao,人人都是產品經理專欄作家。騰訊產品經理。一個學傳播出身的產品新人,愛好研究原型設計工具。

本文原創發布于人人都是產品經理,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!