本文給大家分享：在Axure軟件中，如何引入模塊化思維+母版庫(kù)+元件庫(kù)+中繼器，來(lái)巧妙提升畫(huà)原型的效率（文中的截圖為移動(dòng)端APP原型）。

我們都知道，互聯(lián)網(wǎng)產(chǎn)品需要不斷地迭代，不斷地完善和加入新功能……

但在畫(huà)原型的時(shí)候，我們會(huì)發(fā)現(xiàn)，隨著功能的不斷增多，就會(huì)有很多元件、列表、界面等需要在多處重復(fù)使用。一旦要修改某個(gè)功能/界面時(shí)，所有用到過(guò)此功能/界面的地方都要跟著改，要做很多重復(fù)性的基礎(chǔ)工作。

雖然多花點(diǎn)時(shí)間就改好了，但長(zhǎng)此以往，卻也浪費(fèi)了不少時(shí)間，總有一番滋味在心頭。其實(shí)，我們可以用模塊化思維，來(lái)避免這些時(shí)間的浪費(fèi)。

比如，前端的模塊化思維：將一些重復(fù)使用的CSS樣式剝離出來(lái)，單獨(dú)放在一個(gè)地方，需要的時(shí)候再去調(diào)用，以此來(lái)提高工作效率。

其實(shí)Axuer也提供了類(lèi)似的，能實(shí)現(xiàn)模塊化思維的功能，可以把重復(fù)使用的元件或功能剝離出來(lái)，需要的時(shí)候再去調(diào)用。下面我們就一起來(lái)看看，Axure怎么用模塊化思維來(lái)提升畫(huà)原型的效率。

模塊化思維+母版庫(kù)+元件庫(kù)+中繼器，巧妙提升畫(huà)原型的效率

1、創(chuàng)建“單個(gè)元件母版庫(kù)”

在Axure中，將重復(fù)使用率較高的基礎(chǔ)元件，做成一套“單個(gè)元件母版庫(kù)”，比如：手機(jī)殼、頭部信息欄、字母鍵盤(pán)等。

2、創(chuàng)建“組合元件母版庫(kù)”

將單個(gè)元件進(jìn)行組合，做出一套復(fù)用率較高的“組合元件母版庫(kù)”，比如：“信息欄+標(biāo)題欄的組合框架”、二級(jí)界面框架等。

3、創(chuàng)建“中繼器元件母版庫(kù)”

將原型中需要經(jīng)常修改的列表，用中繼器做出一套“中繼器元件母版庫(kù)”，比如：城市篩選列表、會(huì)員中心列表等；后期只需要在中繼器母版中進(jìn)行修改，那么所有調(diào)用該列表的界面，就都會(huì)完成修改了。

4、創(chuàng)建“APP元件庫(kù)”

將具有個(gè)性化特征，而沒(méi)法做成母版庫(kù)的基礎(chǔ)元件、組合元件，統(tǒng)一做成“APP元件庫(kù)”，比如：

• 很多二級(jí)界面頭部導(dǎo)航欄的文字，雖然字號(hào)、字體、顏色都是統(tǒng)一的，但每個(gè)界面導(dǎo)航的文字內(nèi)容卻不相同，可以把這類(lèi)元件做成“APP元件庫(kù)”，使用時(shí)，更改文字內(nèi)容即可；
• 還有一些界面轉(zhuǎn)場(chǎng)時(shí)，需要輕提示效果，雖然樣式一致，但提示的文字內(nèi)容卻不相同，這種輕提示也可以做成“APP元件庫(kù)”；
• 再比如“交互手勢(shì)+觸發(fā)區(qū)域+連接線(xiàn)+拖動(dòng)矩形（下圖右）”組合成的流程組件，雖然樣式都是統(tǒng)一的，但每次拖動(dòng)的距離、方向卻不一樣，這類(lèi)元件也做成“APP元件庫(kù)”。

5、創(chuàng)建“界面母版庫(kù)”

用“單個(gè)元件母版庫(kù)”+“組合元件母版庫(kù)”+“中繼器元件母版庫(kù)”+“APP元件庫(kù)”，做出原型中需要的各個(gè)界面，即“界面母版庫(kù)”。

6、創(chuàng)建“功能點(diǎn)頁(yè)面”，完成最終的交互效果

每個(gè)功能點(diǎn)，新建一個(gè)頁(yè)面（為確保頁(yè)面打開(kāi)速度，每個(gè)頁(yè)面最多放置3個(gè)相關(guān)聯(lián)的功能點(diǎn)，不要超過(guò)10個(gè)界面），將“界面母版庫(kù)”中的界面，拖入到相應(yīng)的頁(yè)面中。

比如：注冊(cè)頁(yè)面中，拖入【APP注冊(cè)界面】”、注冊(cè)成功后的【會(huì)員中心界面】等界面，然后再將需要的個(gè)性化元件從“APP元件庫(kù)”中拖出來(lái)，比如：注冊(cè)成功時(shí)，拖出“輕提示元件”，修改提示語(yǔ)后，放在相應(yīng)的位置即可。

總結(jié)：磨刀不誤砍柴工

剛開(kāi)始建這些庫(kù)也是要花些時(shí)間的，但隨著庫(kù)的成熟與完善，隨著對(duì)各種庫(kù)使用的越來(lái)越熟練，后期添加或修改原型界面時(shí)，就會(huì)節(jié)省很多時(shí)間了。所以花點(diǎn)時(shí)間，引入模塊化思維去畫(huà)原型，是可以大大提高畫(huà)原型的效率的。

原型預(yù)覽地址：https://axhub.im/pro/8570ea18c5837f76/#g=1&p=index

相關(guān)閱讀：

Axure教程_移動(dòng)端APP原型框架搭建

Axure教程_移動(dòng)端APP原型動(dòng)效庫(kù)之【彈框提示語(yǔ)】

Axure教程_移動(dòng)端APP原型動(dòng)效庫(kù)之【底部導(dǎo)航】

Axure教程_移動(dòng)端APP原型常用動(dòng)效庫(kù)集合

Axure教程_移動(dòng)端APP原型動(dòng)效庫(kù)之【底部彈框】

作者：亮亮，公眾號(hào)：亮亮原型

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

題圖來(lái)自PEXELS，基于 CC0 協(xié)議