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