產(chǎn)品新人可能會被原型制作給難住，作為產(chǎn)品人的必備技能，可以先從幾個方面開始實(shí)踐，本文作者介紹了一些必要的案例。
產(chǎn)品新人可能會被原型制作給難住，作為產(chǎn)品人的必備技能，可以先從幾個方面開始實(shí)踐，本文作者介紹了一些必要的案例。
入職產(chǎn)品經(jīng)理，或轉(zhuǎn)行產(chǎn)品經(jīng)理崗位時，遇到的第一個難點(diǎn)便是原型制作。
原型制作工具有很多，但用得最普遍的還是Axure ，從Axure RP8到Axure RP9頁面操作改動比較大。本文選用Axure RP9版本，梳理總結(jié)了作者在日常工作中最常用到的Axure功能點(diǎn)，僅作為作者日常工作總結(jié)，可供需要的小伙伴進(jìn)行參考。
一、Axure元件庫 1.1 基礎(chǔ)元件庫
基礎(chǔ)元件庫分為四類，如圖所示，包括基本元件、表單元件、帶單和表格、表及元件，除了動態(tài)面板、中繼器使用稍微復(fù)雜點(diǎn)外，其他大部分的元件使用相對來說都比較簡單。
1.2 自定義元件庫
在畫原型的時候，很多同學(xué)可能會碰到基礎(chǔ)元件庫找不到合適的元件。這種情況下，一般會通過別的渠道找到合適的元件，以便于畫出我們想要的原型。
在這種場景下，我們可以記錄自己的元件庫，把每次找到的元件都以一個自定義元件庫的形式存起來，這樣也可以在其他項(xiàng)目中使用該元件時可以快速獲取，只要Axure導(dǎo)入一次自定義元件庫就可以了。所有項(xiàng)目共享同一個自定義元件庫，后續(xù)還可以不斷的完善擴(kuò)充此元件庫，畫原型的效率也會得到極大的提升。
1.3 創(chuàng)建自定義元件庫
點(diǎn)擊文件/New Library ，然后填寫自定義庫名稱、保存為rplib格式文件即可。在使用的時候，導(dǎo)入元件庫就可以了。
當(dāng)然，只要能適合項(xiàng)目原型需求，也可以通過一些其他渠道獲取別人的優(yōu)秀元件庫使用。
二、母版的使用
合理的使用母版將極大提升原型制作的效率，當(dāng)多個頁面共用一部分組件，各個頁面之間也都是不同的頁面，則可以將這部分組件設(shè)置為母版。
一個典型的例子是在設(shè)計(jì)APP原型時，底部的導(dǎo)航欄、矩形的模擬機(jī)等作為一個母版，只要畫一次就可以了，后續(xù)其他頁面只要調(diào)用母版使用即可。如果母版頁面需要修改，也只需修改一次就可以了。
兩種方法可以創(chuàng)建母版，第一種可以在母版TAB頁中創(chuàng)建，第二種在頁面中選擇需要的組件并鼠標(biāo)右鍵選擇“創(chuàng)建母版”。
在母版中添加的交互事件為全局事件，在所有使用母版的頁面中都會起作用。
三、動態(tài)面板的使用
基本上每個項(xiàng)目原型的制作，動態(tài)面板都是一個必用的元件，動態(tài)面板是一個非常實(shí)用的元件，用它可以輕松制作出瀏覽滾動效果、TAB頁面切換效果、輪播Banner圖等，下文主要講解動態(tài)面板的這三個典型應(yīng)用案例。
3.1 頁面內(nèi)容滾動效果
用動態(tài)面板制作出頁面內(nèi)容滾動效果，包括垂直滾動或水平滾動，效果圖如下：
首先，我們頁面放置一個矩形，右鍵單擊矩形將其轉(zhuǎn)化為動態(tài)面板，雙擊進(jìn)入動態(tài)面板，放置若干個矩形如上圖所示。
然后，雙擊空白處，返回至主頁面；右鍵選擇滾動條，根據(jù)需要選擇垂直或水平滾動條；然后調(diào)整主頁面動態(tài)面板尺寸，使動態(tài)面板尺寸小于內(nèi)容的尺寸便可以通過滑動查看內(nèi)容（只能在預(yù)覽的情況下查看滾動效果）。
本例中選擇的滾動條菜單為“scroll as needed”，不管是水平還是垂直，只要動態(tài)面板尺寸小于內(nèi)容頁，就會展示出滾動條。
3.2 TAB頁面切換效果
效果如下圖所示，通過點(diǎn)擊頂部的TAB可以切換展示的內(nèi)容，同時修改了TAB按鈕的點(diǎn)擊效果。
頁面元素如下圖所示。
首先，配置頂部TAB頁面的選中填充色，默認(rèn)第一個TAB為選中狀態(tài)。TAB頁面內(nèi)容配置兩個動態(tài)面板，內(nèi)容如下圖所示：
兩個TAB按鈕的單擊事件交互邏輯如圖所示，配置完成預(yù)覽可以查看TAB頁切換效果。
3.3 輪播Banner圖
實(shí)現(xiàn)效果如下圖所示：
首先，了解一下頁面輪播圖相關(guān)元素，包括三個動態(tài)面板，每個面板中放了一張圖片作為面板內(nèi)容，另外添加了三個關(guān)聯(lián)圖片的圖片定位點(diǎn)，如下圖所示：
配置三個定位點(diǎn)的選中狀態(tài)，并將第一個定位點(diǎn)默認(rèn)為選中狀態(tài)，配置動態(tài)面板載入事件，如下圖所示：
在面板狀態(tài)發(fā)生改變時，配置交互事件，修改定位點(diǎn)選中狀態(tài)，如下圖所示：
四、中繼器的使用
中繼器類似于一個微型的數(shù)據(jù)庫，頁面中只要有可以重復(fù)展示的元素（數(shù)據(jù)不同），就可以使用中繼器，還可以做到對數(shù)據(jù)條目進(jìn)行增刪改查、排序等常用功能，下面用案例來介紹一下中繼器的常用功能。
4.1 初步使用
使用中繼器展示內(nèi)容（同一個數(shù)據(jù)模型，不同的數(shù)據(jù)），如下圖所示，4條記錄，每條記錄都包含一張圖片、名稱、價(jià)格、銷量，只要單獨(dú)配置數(shù)據(jù)就可以使列表元素自動生成。
具體步驟：首先添加一個中繼器元件到頁面，雙擊進(jìn)入配置頁面，刪除默認(rèn)的矩形，然后添加需要的元素，比如在本案例中為圖片、名稱、價(jià)格、銷量，如圖所示。
其次，在樣式中配置中繼器表格名稱，使用英文與中繼器配置頁面中的文字或圖片保持一致，修改完名稱后添加幾條數(shù)據(jù)進(jìn)去，如下圖所示：
再次，在中繼器加載時，需要關(guān)聯(lián)數(shù)據(jù)展示，所以需要配置頁面文字或圖片與數(shù)據(jù)之間的關(guān)聯(lián)關(guān)系，在中繼器加載時設(shè)置文本、設(shè)置圖片即可，如下圖所示：
4.2 內(nèi)容排序
中繼器內(nèi)容項(xiàng)排序，效果如下圖所示，案例中通過“價(jià)格升序”，“銷量降序”“觸發(fā)價(jià)格升序事件”等操作演示了中繼器內(nèi)容排序功能。
“價(jià)格升序”操作的交互事件邏輯如下：
“銷量降序”操作的交互事件邏輯如下：
“觸發(fā)價(jià)格升序事件”操作的交互事件邏輯如下：
4.3 增加內(nèi)容項(xiàng)
中繼器添加內(nèi)容（通過頁面操作向中繼器增加一行內(nèi)容），實(shí)現(xiàn)效果如下圖所示、
只要我們填寫字段值，點(diǎn)擊添加就可以把輸入的內(nèi)容加入中繼器（圖片暫時不支持自定義上傳，需要預(yù)先配置并按照條件判斷去選擇展示哪張圖片）。
圖片選擇邏輯如下：
中繼器使用“添加行”功能，名稱、銷量、價(jià)格等文字使用局部變量，圖片可以通過右鍵單擊表格進(jìn)行導(dǎo)入，此案例中不同的圖片添加不同的行。
點(diǎn)擊fx（函數(shù)）位置可以配置局部變量和全局變量，如下圖所示，首先需要添加局部變量，然后才可以引用。此處函數(shù)的作用是可以讀取頁面元素內(nèi)容并加入到中繼器中，而不是直接寫死。
4.4 內(nèi)容項(xiàng)刪除
效果如下圖所示，在刪除框內(nèi)輸入需要刪除項(xiàng)的名稱，點(diǎn)擊“刪除”便可刪除中繼器對應(yīng)的內(nèi)容項(xiàng)。
此處使用中繼器“刪除行”功能，配置如下：
同樣此處也使用了函數(shù)，首先配置兩個局部變量LVAR1和LVAR2，在其相等時刪除項(xiàng)目即可，如下圖所示：
4.5 中繼器內(nèi)容篩選
效果如下圖所示，通過選擇篩選條件（女生羽絨服、嬰兒裝、全部，此處也可以通過函數(shù)從頁面讀取篩選條件）篩選符合的結(jié)果。
通過對中繼器“添加篩選”功能可以實(shí)現(xiàn)頁面篩選功能效果，選擇中繼器變量名稱判斷是否等于特定值即可（當(dāng)然也可以設(shè)置為其他局部變量）。而頁面篩選條件中的“全部”篩選效果實(shí)現(xiàn)，只需要配置中繼器的“移除篩選”功能即可，具體邏輯見下圖所示：
4.6 中繼器標(biāo)記行、取消標(biāo)記
中繼器標(biāo)記行的一個重要作用是可以通過標(biāo)記進(jìn)行批量處理，操作效果如下圖所示。先標(biāo)記行，然后取消標(biāo)記，在進(jìn)行刪除操作，則實(shí)際沒有進(jìn)行刪除操作；如果先標(biāo)記行不進(jìn)行取消標(biāo)記，則刪除操作生效，刪除了標(biāo)記的所有行。
標(biāo)記所有行、取消標(biāo)記所有行、刪除標(biāo)記行等操作比較簡單，如下圖所示。當(dāng)然標(biāo)記也可以按條件標(biāo)記，也可以增加函數(shù)進(jìn)行較復(fù)雜標(biāo)記，在此不做說明了。
本文就先寫到這里，使用Axure PR9提供的強(qiáng)大功能將會極大提升產(chǎn)品原型設(shè)計(jì)的效率和原型水平。
期待與各位小伙伴們共同學(xué)習(xí)、共同進(jìn)步。
作者：李生才；聯(lián)系作者： lscncut@163
本文由 @李生才 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
