Axure技巧:為母版元素自定義事件

10 評論 30719 瀏覽 94 收藏 6 分鐘

Axure有時會在一個原型圖中復用組件,比如彈出對話框、頁面頭部導航條、左側導航樹等。如果采用簡單的方式,那么可以在每個頁面里都拷貝一份,但當修改了組件的某個地方后則需要檢查并修改很多頁面,其工作量可想而知。

為了解決這個問題,Axure提供母版功能。你可以將頁面中公共的部分提取出來定義為母版,然后在需要的頁面里添加該母版。此時如果要修改,則直接修改母版文件,所有引用該母版的頁面會自動更新修改的內容。

為母版元素自定義事件的大致步驟為:

定義母版元素–>自定義事件–>添加用例

下文以彈出對話框為例說明母版的使用方法。本文僅適用于具有一定Axure使用經驗的用戶閱讀。

1. 定義母版元素

1) 在Axure文件中任意新建一個頁面,在頁面中繪制一個彈出對話框的樣式,參考下圖:

1

2) 選擇此對話框中的所有元素,點擊右鍵選擇“轉換為母版”,為母版命名并選擇拖放行為Place Anyway,即可以在頁面的任意位置放置母版,創建母版成功后頁面效果如下:

2

3) 至此,母版創建完成。寫到這里可能大家有一個疑問,上面寫的只是創建母版的步驟,那為什么文章標題叫自定義事件呢?帶著這個疑問咱們進入下文的內容。

2. 為母版自定義事件

由于對話框在頁面中的行為并不是孤立的,點擊對話中的確定、取消按鈕后效果是不同的,比如點擊取消按鈕直接關閉對話框而沒有其他操作,點擊確定按鈕除了關閉對話框之外,還要執行其他操作。此時,我們可以為對話框自定義事件。

1) 在頁面中添加“彈出對話框”母版,并添加一個Label組件,如下圖所示:

3

其中,Label組件命名為lblMsg,對話框組件命名為dlgConfirm。

我們想要實現的效果是點擊確定按鈕,關閉對話框并在Label中顯示“點擊了確定按鈕”;點擊取消按鈕僅關閉對話框,Label顯示無變化。

2) 進入“彈出對話框”母版編輯界面,為“確定”按鈕新建鼠標單擊用例,如下圖:

4

3) 選擇動作“觸發事件”,并添加自定義事件onSureButtonClick,并勾選此自定義事件,如下圖所示:

5

4) 同理,定義“取消”按鈕的單擊動作,并添加自定義事件onCancelButtonClick,如下圖:

6

5) 關閉母版編輯頁面,返回添加了母版的頁面,單擊對話框就可以看到自定義的事件了,如下圖:

7

3. 為自定義事件添加用例

1) 為onSureButtonClick事件添加用例,實現點擊確定按鈕時隱藏對話框并在Label中顯示自定義內容的功能,如下圖:

8

即:將對話框中的所有元素隱藏,并改變Label的文字為“用戶點擊了確定按鈕”。

2) 同理,為onCancelButtonClick事件添加用例,實現點擊取消按鈕時隱藏對話框的功能,如下圖:

9

3) 預覽頁面,分別點擊確定、取消按鈕查看效果。

說明:

  1. 對話框也可以放在一個面板里,點擊按鈕后直接隱藏該面板;
  2. 如果對話框被放置在不同的頁面,則可以根據頁面的具體邏輯為onSureButtonClick和onCancelButtonClick事件定義不同的操作,從而滿足各種使用場景。

 

作者:王春雷,互聯科技創始人。12年互聯網從業經驗,5年產品設計經驗。

本文由 @王春雷 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. get母版,多謝大佬分享

    來自北京 回復
  2. 學習了,重點懂了步驟

    來自山東 回復
  3. 將彈出框以及內容轉化為一個動態面板,這樣在顯示/隱藏時應該會方便很多。

    來自江蘇 回復
  4. 1)和3)步驟沒看懂

    來自上海 回復
    1. 哪個章節的?能否具體描述一下?謝謝!

      來自北京 回復
    2. 章節2. 為母版自定義事件中
      步驟3)選擇動作“觸發事件”,并添加自定義事件onSureButtonClick,并勾選此自定義事件
      這里的添加自定義事件onSureButtonClick,怎么操作呀,我到這就卡住了,onSureButtonClick是什么呀

      來自上海 回復
    3. 在截圖里“用例編輯器”對話框的右側中部有一個綠色的加號,點擊就可以添加事件,名稱可以根據需要任意命名。

      來自北京 回復
    4. 你的版本是7.0吧,我的是8.0版本,第四步配置動作的頁面跟你的不一樣,沒有那些按鈕,只有選擇被觸發事件的元件,不能添加自定義事件onSureButtonClick

      來自上海 回復
    5. 對,我的是7.0

      來自北京 回復
    6. 搞明白了,在8.0版本中,那一步不是觸發事件,而是引發事件

      來自上海 回復