Axure基礎(chǔ)教程:合理使用母版進(jìn)行模塊化設(shè)計(jì)

4 評(píng)論 60854 瀏覽 133 收藏 12 分鐘

合理地使用母版進(jìn)行模塊化設(shè)計(jì),會(huì)使你的原型制作事半功倍。

Axure原型的制作過(guò)程中,你一定遇到過(guò)這樣的問(wèn)題,出現(xiàn)在不同頁(yè)面的功能模塊,如果你是通過(guò)復(fù)制粘貼來(lái)完成的,那么當(dāng)該模塊發(fā)生變動(dòng)需要修改時(shí),麻煩就大了,個(gè)個(gè)需要改,可能改的不一致,也有可能會(huì)漏改,以至于辛辛苦苦改了半天,一演示,看到的是沒(méi)有改過(guò)的舊版,表示很心痛。

此時(shí),就該母版發(fā)揮作用了,合理地使用母版進(jìn)行模塊化設(shè)計(jì),會(huì)使你的原型制作事半功倍。

針對(duì)母版如何高效使用,下面進(jìn)行較詳細(xì)的說(shuō)明:

一、母版的作用

減少重復(fù)工作,提高制作效率;

統(tǒng)一修改維護(hù),提高中途修改效率;

共用資源,提高原型運(yùn)行效率。

二、模板的基本操作

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

新建,窗口頂部的添加按鈕可以添加,也可以把頁(yè)面中已經(jīng)做好的模塊選中后,通過(guò)右鍵轉(zhuǎn)換為母版;

petrel-axur-161103-01

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

重命名,選中母版后,再次點(diǎn)擊可對(duì)母版名稱(chēng)進(jìn)行修改,或者右鍵菜單重命名;

編輯,母版窗口中,雙擊母版,主窗口打開(kāi)母版頁(yè)面進(jìn)行編輯,或者在有使用母版的頁(yè)面中雙擊母版,打開(kāi)母版頁(yè)面進(jìn)行編輯;

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

對(duì)母版進(jìn)行組織管理,直接在窗口中拖動(dòng)母版調(diào)整母版順序活層級(jí)關(guān)系,或者通過(guò)右鍵菜單“移動(dòng)”選項(xiàng)進(jìn)行調(diào)整;

添加到多個(gè)頁(yè)面,通過(guò)右鍵菜單添加到多個(gè)頁(yè)面選項(xiàng)(Add to Pages),可以選擇要添加到的頁(yè)面,并可以設(shè)定添加到頁(yè)面的位置;

petrel-ixd-tools-02

從多個(gè)頁(yè)面中刪除,右鍵菜單操作,這個(gè)值得一提的是,當(dāng)母版已經(jīng)被頁(yè)面使用時(shí),是無(wú)法被刪除的,需要先從頁(yè)面中刪除母版,此時(shí)可以用到這個(gè)功能,進(jìn)行一次性刪除;

petrel-ixd-tools-03

三、模板的導(dǎo)入功能

當(dāng)一個(gè)新的文件想要使用現(xiàn)有文件中的母板時(shí),可以通過(guò)新文件的導(dǎo)入功能,將文件中的母版導(dǎo)入新文件。具體操作步驟:

菜單“文件”→“從RP文件導(dǎo)入”→ 選擇目標(biāo)文件 → 跳過(guò)“頁(yè)面導(dǎo)入”步驟 → 選擇要導(dǎo)入的目標(biāo)母版 → 確定導(dǎo)入動(dòng)作(add/action)→跳過(guò)其他導(dǎo)入選項(xiàng)(導(dǎo)入自適應(yīng)視圖 、導(dǎo)入配置文件、導(dǎo)入頁(yè)面說(shuō)明字段 、導(dǎo)入元件說(shuō)明字段 、導(dǎo)入頁(yè)面樣式、導(dǎo)入元件樣式、導(dǎo)入變量、導(dǎo)入?yún)⒖季€)

petrel-ixd-tools-05

petrel-ixd-tools-06

petrel-ixd-tools-07

這樣,新文件的母版窗口就會(huì)出現(xiàn)導(dǎo)入的母版,從而可以在新文件中使用。

母版在原始文件中更新后,一定要通過(guò)“導(dǎo)入”功能,并在導(dǎo)入行為中選擇 “replace”,將更新后的母版導(dǎo)入,這樣新文件中的母版才會(huì)更新,頁(yè)面使用到母版的地方才會(huì)同時(shí)更新。

另外,在首次導(dǎo)入母版時(shí),可以在原文件的頁(yè)面中復(fù)制該母版粘貼在新文件的頁(yè)面中,這樣,所用到的母版就會(huì)出現(xiàn)在新文件的母版窗口。這種方式快捷,但是只適用于添加新母版,母版更新無(wú)法通過(guò)復(fù)制粘貼來(lái)實(shí)現(xiàn)。

四、母版的拖放行為

1、給母版設(shè)置的不同拖放行為,會(huì)使母版具有不同的特性:

(1)Palce Anywhere

普通母版,可拖放在頁(yè)面的任何位置,統(tǒng)一修改維護(hù),母板有更新,所有用到該母版的頁(yè)面都會(huì)更新;

(2)LOCKED TO MASTER LOCATION

固定位置母版,在頁(yè)面中的位置固定,統(tǒng)一修改維護(hù),母板有更新,所有用到該母版的頁(yè)面都會(huì)更新,包括母版位置的更新也會(huì)在所有頁(yè)面中更新;

(3)BREAK AWAY

母版被拖入到頁(yè)面中后,即與原母版脫離關(guān)系,可在頁(yè)面中進(jìn)行修改,而不影響母版本身,母版的修改更新也不會(huì)影響到之前使用過(guò)該母版的頁(yè)面;

2、設(shè)置母版拖放行為的方法

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

(2)通過(guò)頁(yè)面中已有元件,轉(zhuǎn)換為母版時(shí),選擇放置行為(Drop behavior);

petrel-ixd-tools-08

petrel-ixd-tools-09

五、母版的觸發(fā)事件

母版內(nèi)的元件事件(events)是不能對(duì)母版外的其他元件執(zhí)行動(dòng)作(action)的;當(dāng)你想通過(guò)母版內(nèi)的元件控制母版外元件時(shí),你會(huì)發(fā)現(xiàn)找不到外部元件,而當(dāng)你在頁(yè)面中使用母版時(shí),也會(huì)發(fā)現(xiàn)母版沒(méi)有事件。細(xì)想一下可以理解,一個(gè)母版會(huì)被多個(gè)頁(yè)面使用,那么如果母版內(nèi)的元件可以控制母版外元件時(shí),頁(yè)面中使用到母版的地方所對(duì)應(yīng)的動(dòng)作也應(yīng)該都是一樣的,但這樣的情況時(shí)很少見(jiàn)的。

除此之外,Axure中的事件邏輯是同一個(gè)頁(yè)面內(nèi)的元件才可以互相控制,跨頁(yè)面需要通過(guò)中間變量和中間事件來(lái)轉(zhuǎn)換才能達(dá)到跨頁(yè)面控制的效果。而母版本身不屬于哪個(gè)頁(yè)面,又同時(shí)會(huì)被多個(gè)頁(yè)面使用,如果母版內(nèi)的元件能夠控制母版外的元件,那就與這個(gè)邏輯相違背了。

不管上面的解釋有沒(méi)有看明白,我們只要知道一點(diǎn),母版內(nèi)的元件事件觸發(fā)不了控制母版外的元件的動(dòng)作。在頁(yè)面中,母版是一個(gè)整體,想要使用母版的事件,需要先對(duì)母版觸發(fā)事件(Raised events)進(jìn)行管理。

1. 管理母版觸發(fā)事件

所謂管理母版觸發(fā)事件,就是為母版新增/刪除事件,同時(shí)將母版事件與模板內(nèi)的元件事件相關(guān)聯(lián),具體操作如下:

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

petrel-ixd-tools-10

方法二:在母版中選中某個(gè)元件,選擇任意事件后,在動(dòng)作(action)窗口中,也可對(duì)觸發(fā)事件進(jìn)行新增、刪除、移動(dòng)操作(這個(gè)窗口主要用來(lái)執(zhí)行第2步,關(guān)聯(lián)觸發(fā)事件,見(jiàn)下圖)。

2. 關(guān)聯(lián)母版的觸發(fā)事件到元件事件

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

petrel-ixd-tools-11

因此,一個(gè)元件事件可以關(guān)聯(lián)多個(gè)母版事件,在預(yù)覽時(shí),這個(gè)元件事件可以觸發(fā)該母版事件相關(guān)的動(dòng)作(action)(在頁(yè)面中針對(duì)母版事件設(shè)置的動(dòng)作);多個(gè)元件事件也可以關(guān)聯(lián)到同一個(gè)母版事件,這樣在預(yù)覽時(shí),這幾個(gè)元件事件任何一個(gè)事件發(fā)生,都會(huì)觸發(fā)該母版事件相關(guān)的動(dòng)作(action)(在頁(yè)面中針對(duì)母版事件設(shè)置的動(dòng)作)。

3. 設(shè)置母版事件的關(guān)聯(lián)動(dòng)作

本步驟操作是將母版事件與頁(yè)面中其他元件關(guān)聯(lián)起來(lái),實(shí)現(xiàn)母版內(nèi)元件對(duì)頁(yè)面中元件的控制。具體操作是,在頁(yè)面中選中母版,右側(cè)屬性窗口會(huì)出現(xiàn)母版事件(第1步中定義的母版事件),雙擊母版事件(同元件事件的使用方法),給母版事件設(shè)置相關(guān)的動(dòng)作(action)。

petrel-ixd-tools-12

通過(guò)以上三個(gè)步驟,我們就把母版中的元件事件(event)與針對(duì)頁(yè)面中的元件需要執(zhí)行的動(dòng)作(action)關(guān)聯(lián)了起來(lái)。而母版事件,起到一個(gè)銜接作用。

 

作者:Petrel(UXRen社區(qū)Axure金牌講師,資深交互設(shè)計(jì)師)

本文由 @Petrel 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 干運(yùn)營(yíng)的在大公司也要會(huì)它嗎?

    來(lái)自北京 回復(fù)
  2. 這個(gè)軟件在大公司里是產(chǎn)品經(jīng)理必須要用的嗎?我剛?cè)胄胁痪?,?duì)于這個(gè)規(guī)范化比較迷茫。

    回復(fù)
    1. 基本是必須

      回復(fù)
    2. 能掌握最好,剛?cè)胄杏悬c(diǎn)迷茫正常,多學(xué)習(xí)多思考,積累項(xiàng)目經(jīng)驗(yàn),慢慢就好了

      來(lái)自北京 回復(fù)