Axure基礎教程:合理使用母版進行模塊化設計

4 評論 60916 瀏覽 133 收藏 12 分鐘

合理地使用母版進行模塊化設計,會使你的原型制作事半功倍。

Axure原型的制作過程中,你一定遇到過這樣的問題,出現在不同頁面的功能模塊,如果你是通過復制粘貼來完成的,那么當該模塊發生變動需要修改時,麻煩就大了,個個需要改,可能改的不一致,也有可能會漏改,以至于辛辛苦苦改了半天,一演示,看到的是沒有改過的舊版,表示很心痛。

此時,就該母版發揮作用了,合理地使用母版進行模塊化設計,會使你的原型制作事半功倍。

針對母版如何高效使用,下面進行較詳細的說明:

一、母版的作用

減少重復工作,提高制作效率;

統一修改維護,提高中途修改效率;

共用資源,提高原型運行效率。

二、模板的基本操作

母版窗口位于軟件工作環境的左下角,基本操作同其他功能一樣:

新建,窗口頂部的添加按鈕可以添加,也可以把頁面中已經做好的模塊選中后,通過右鍵轉換為母版;

petrel-axur-161103-01

刪除,母版窗口中,選中母版后按delete鍵刪除,或者右鍵菜單刪除;

重命名,選中母版后,再次點擊可對母版名稱進行修改,或者右鍵菜單重命名;

編輯,母版窗口中,雙擊母版,主窗口打開母版頁面進行編輯,或者在有使用母版的頁面中雙擊母版,打開母版頁面進行編輯;

新建文件夾,窗口頂部的新建文件夾按鈕,或者右鍵菜單中新建選項;

對母版進行組織管理,直接在窗口中拖動母版調整母版順序活層級關系,或者通過右鍵菜單“移動”選項進行調整;

添加到多個頁面,通過右鍵菜單添加到多個頁面選項(Add to Pages),可以選擇要添加到的頁面,并可以設定添加到頁面的位置;

petrel-ixd-tools-02

從多個頁面中刪除,右鍵菜單操作,這個值得一提的是,當母版已經被頁面使用時,是無法被刪除的,需要先從頁面中刪除母版,此時可以用到這個功能,進行一次性刪除;

petrel-ixd-tools-03

三、模板的導入功能

當一個新的文件想要使用現有文件中的母板時,可以通過新文件的導入功能,將文件中的母版導入新文件。具體操作步驟:

菜單“文件”→“從RP文件導入”→ 選擇目標文件 → 跳過“頁面導入”步驟 → 選擇要導入的目標母版 → 確定導入動作(add/action)→跳過其他導入選項(導入自適應視圖 、導入配置文件、導入頁面說明字段 、導入元件說明字段 、導入頁面樣式、導入元件樣式、導入變量、導入參考線)

petrel-ixd-tools-05

petrel-ixd-tools-06

petrel-ixd-tools-07

這樣,新文件的母版窗口就會出現導入的母版,從而可以在新文件中使用。

母版在原始文件中更新后,一定要通過“導入”功能,并在導入行為中選擇 “replace”,將更新后的母版導入,這樣新文件中的母版才會更新,頁面使用到母版的地方才會同時更新。

另外,在首次導入母版時,可以在原文件的頁面中復制該母版粘貼在新文件的頁面中,這樣,所用到的母版就會出現在新文件的母版窗口。這種方式快捷,但是只適用于添加新母版,母版更新無法通過復制粘貼來實現。

四、母版的拖放行為

1、給母版設置的不同拖放行為,會使母版具有不同的特性:

(1)Palce Anywhere

普通母版,可拖放在頁面的任何位置,統一修改維護,母板有更新,所有用到該母版的頁面都會更新;

(2)LOCKED TO MASTER LOCATION

固定位置母版,在頁面中的位置固定,統一修改維護,母板有更新,所有用到該母版的頁面都會更新,包括母版位置的更新也會在所有頁面中更新;

(3)BREAK AWAY

母版被拖入到頁面中后,即與原母版脫離關系,可在頁面中進行修改,而不影響母版本身,母版的修改更新也不會影響到之前使用過該母版的頁面;

2、設置母版拖放行為的方法

(1) 母版窗口中,母版的右鍵菜單→放置行為(Drop behavior);

(2)通過頁面中已有元件,轉換為母版時,選擇放置行為(Drop behavior);

petrel-ixd-tools-08

petrel-ixd-tools-09

五、母版的觸發事件

母版內的元件事件(events)是不能對母版外的其他元件執行動作(action)的;當你想通過母版內的元件控制母版外元件時,你會發現找不到外部元件,而當你在頁面中使用母版時,也會發現母版沒有事件。細想一下可以理解,一個母版會被多個頁面使用,那么如果母版內的元件可以控制母版外元件時,頁面中使用到母版的地方所對應的動作也應該都是一樣的,但這樣的情況時很少見的。

除此之外,Axure中的事件邏輯是同一個頁面內的元件才可以互相控制,跨頁面需要通過中間變量和中間事件來轉換才能達到跨頁面控制的效果。而母版本身不屬于哪個頁面,又同時會被多個頁面使用,如果母版內的元件能夠控制母版外的元件,那就與這個邏輯相違背了。

不管上面的解釋有沒有看明白,我們只要知道一點,母版內的元件事件觸發不了控制母版外的元件的動作。在頁面中,母版是一個整體,想要使用母版的事件,需要先對母版觸發事件(Raised events)進行管理。

1. 管理母版觸發事件

所謂管理母版觸發事件,就是為母版新增/刪除事件,同時將母版事件與模板內的元件事件相關聯,具體操作如下:

方法一:雙擊打開母版的情況下(也就是在母版內部),通過菜單“布局(Arrange)”→“管理觸發事件”,在打開窗口中,可對母版的觸發事件進行添加、刪除、移動等操作;

petrel-ixd-tools-10

方法二:在母版中選中某個元件,選擇任意事件后,在動作(action)窗口中,也可對觸發事件進行新增、刪除、移動操作(這個窗口主要用來執行第2步,關聯觸發事件,見下圖)。

2. 關聯母版的觸發事件到元件事件

本步操作就是將母版內元件的事件與母版的觸發事件關聯起來,例如,給母版定義了A、B、C三個事件,那么預覽時是哪個元件的什么事件才能觸發母版事件觸發的動作,就從這一步來完成,具體操作:在母版中選中某個元件,選擇想要的元件事件,在動作(action)窗口中,選擇“Raised event”,在右側窗口中勾選需要關聯的母版事件。

petrel-ixd-tools-11

因此,一個元件事件可以關聯多個母版事件,在預覽時,這個元件事件可以觸發該母版事件相關的動作(action)(在頁面中針對母版事件設置的動作);多個元件事件也可以關聯到同一個母版事件,這樣在預覽時,這幾個元件事件任何一個事件發生,都會觸發該母版事件相關的動作(action)(在頁面中針對母版事件設置的動作)。

3. 設置母版事件的關聯動作

本步驟操作是將母版事件與頁面中其他元件關聯起來,實現母版內元件對頁面中元件的控制。具體操作是,在頁面中選中母版,右側屬性窗口會出現母版事件(第1步中定義的母版事件),雙擊母版事件(同元件事件的使用方法),給母版事件設置相關的動作(action)。

petrel-ixd-tools-12

通過以上三個步驟,我們就把母版中的元件事件(event)與針對頁面中的元件需要執行的動作(action)關聯了起來。而母版事件,起到一個銜接作用。

 

作者:Petrel(UXRen社區Axure金牌講師,資深交互設計師)

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 干運營的在大公司也要會它嗎?

    來自北京 回復
  2. 這個軟件在大公司里是產品經理必須要用的嗎?我剛入行不久,對于這個規范化比較迷茫。

    回復
    1. 基本是必須

      回復
    2. 能掌握最好,剛入行有點迷茫正常,多學習多思考,積累項目經驗,慢慢就好了

      來自北京 回復