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

我們都知道，互聯網產品需要不斷地迭代，不斷地完善和加入新功能……

但在畫原型的時候，我們會發現，隨著功能的不斷增多，就會有很多元件、列表、界面等需要在多處重復使用。一旦要修改某個功能/界面時，所有用到過此功能/界面的地方都要跟著改，要做很多重復性的基礎工作。

雖然多花點時間就改好了，但長此以往，卻也浪費了不少時間，總有一番滋味在心頭。其實，我們可以用模塊化思維，來避免這些時間的浪費。

比如，前端的模塊化思維：將一些重復使用的CSS樣式剝離出來，單獨放在一個地方，需要的時候再去調用，以此來提高工作效率。

其實Axuer也提供了類似的，能實現模塊化思維的功能，可以把重復使用的元件或功能剝離出來，需要的時候再去調用。下面我們就一起來看看，Axure怎么用模塊化思維來提升畫原型的效率。

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

1、創建“單個元件母版庫”

在Axure中，將重復使用率較高的基礎元件，做成一套“單個元件母版庫”，比如：手機殼、頭部信息欄、字母鍵盤等。

2、創建“組合元件母版庫”

將單個元件進行組合，做出一套復用率較高的“組合元件母版庫”，比如：“信息欄+標題欄的組合框架”、二級界面框架等。

3、創建“中繼器元件母版庫”

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

4、創建“APP元件庫”

將具有個性化特征，而沒法做成母版庫的基礎元件、組合元件，統一做成“APP元件庫”，比如：

• 很多二級界面頭部導航欄的文字，雖然字號、字體、顏色都是統一的，但每個界面導航的文字內容卻不相同，可以把這類元件做成“APP元件庫”，使用時，更改文字內容即可；
• 還有一些界面轉場時，需要輕提示效果，雖然樣式一致，但提示的文字內容卻不相同，這種輕提示也可以做成“APP元件庫”；
• 再比如“交互手勢+觸發區域+連接線+拖動矩形（下圖右）”組合成的流程組件，雖然樣式都是統一的，但每次拖動的距離、方向卻不一樣，這類元件也做成“APP元件庫”。

5、創建“界面母版庫”

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

6、創建“功能點頁面”，完成最終的交互效果

每個功能點，新建一個頁面（為確保頁面打開速度，每個頁面最多放置3個相關聯的功能點，不要超過10個界面），將“界面母版庫”中的界面，拖入到相應的頁面中。

比如：注冊頁面中，拖入【APP注冊界面】”、注冊成功后的【會員中心界面】等界面，然后再將需要的個性化元件從“APP元件庫”中拖出來，比如：注冊成功時，拖出“輕提示元件”，修改提示語后，放在相應的位置即可。

總結：磨刀不誤砍柴工

剛開始建這些庫也是要花些時間的，但隨著庫的成熟與完善，隨著對各種庫使用的越來越熟練，后期添加或修改原型界面時，就會節省很多時間了。所以花點時間，引入模塊化思維去畫原型，是可以大大提高畫原型的效率的。

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

相關閱讀：

Axure教程_移動端APP原型框架搭建

Axure教程_移動端APP原型動效庫之【彈框提示語】

Axure教程_移動端APP原型動效庫之【底部導航】

Axure教程_移動端APP原型常用動效庫集合

Axure教程_移動端APP原型動效庫之【底部彈框】

作者：亮亮，公眾號：亮亮原型

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

題圖來自PEXELS，基于 CC0 協議