對於產品經理來說，熟練使用一些常用軟體是一項十分必要的技能。其中，作為一個專業的快速原型設計工具，Axure RP無疑在產品人心中擁有一個難以撼動的地位。但就要PS一樣，雖然足夠專業，但同樣也會存在使用靈活性的一些問題。

今天我們就談談，如何用Axure快速製作APP互動原型，不對，更準確的說法應該是：如何用Axure快速製作一份有水準的APP互動原型。作為一名優秀的產品人不僅要保證效率，也要保證質量才行。

首先丟擲我的方法論：製作屬於自己的元件庫並要學會善用母版，熟悉APP設計規範並要有自己一套互動風格樣式。我會以仿照「讀讀日報」IOS版做的一個互動原型稿為例項，表述整個製作過程的思路，希望能對你有所幫助。

建立屬於自己的元件庫

原型製作工具的核心功能無非就是通過元件的堆砌組合，來展示產品的目標形態和效果。Axure自帶的只是一些最基本的元件，而網上的元件庫龐雜混亂，很難找到滿足需求並且稱心的元件，並且大部分都是點陣圖格式，根本無法修改顏色寬度等數值，製作出來的互動又怎麼能達到精美的水準要求呢？

還好Axure提供了「建立部件庫」的功能，能夠支援我們製作一份屬於自己的元件庫。我們可以通過軟體自帶的基本元件搭配組合出我們常用的圖示、控制元件，製作完成後，每次應用的時候還能根據實際情況調整顏色、大小、線寬的數值，從而才能實現互動稿統一完美的風格。

比如，APP中經常會用到一些主頁、分享、搜尋、訊息….各種圖示，或者我們每次遇到喜歡的圖示，都可以用Axure畫出來，以備不時之需。下邊以圖示為例講一下製作元件庫的具體步驟。

一、建立元件庫“綠色檔案”

開啟Axure，在元件庫面板「三條橫線」按鈕下拉選項中找到「建立部件庫」功能，點選會彈出一個另存為對話方塊，這裡需要選擇元件庫檔案的儲存位置，並需要輸入元件庫的名稱。

此時，我們可以看到，檔案的字尾名為 .rplib，這個就是元件庫的格式，而不同於創作互動原型時正常Axure檔案的.rp格式。

輸入檔名稱和儲存位置之後，點選儲存，Axure將重新開啟一個新頁面進行元件的編輯。並且我們可以看到，新頁面跟我們平時創造.rp正常檔案的頁面一模一樣，但不要混淆，此時頁面編輯的是我們在正常.rp檔案中需要用的基本元件。並且我們回到元件庫儲存的位置可以看到，元件庫.rplib檔案圖示為”綠色“，不同於.rp檔案的藍色。

建立好元件庫得”綠色檔案“後，基本準備工作已經做完，下邊就進入到製作過程。

二、元件庫分組

通過觀察Axure預設的元件庫，我們可以看到其元件庫是可以按照類別進行分組的。比如預設的分成了：common、forms、flow等等，這樣能更方便我們找到目標元件的位置。

同樣，我們在製作元件庫的時候，也可以進行分組，規則為：在頁面導航面板上，所有的資料夾都是一個分組，所有沒有在資料夾下的頁面包括其所有子頁面，都隸屬與以元件庫為名的分組下。

分組的規則弄明白之後，我們可以先按照自己對元件庫的規劃進行一個合理的分組，比如要做APP的元件庫，那麼我們可以分成：圖示、控制元件、框架 3個常用分組，接下來就進入到具體元件的製作過程。

三、編輯並製作元件

我們以製作一個”我的“頭像圖示為例，首先在圖示分組下，新增一個頁面並命名為”我的“，雙擊進入到元件編輯頁面，編輯操作就跟我們平時製作正常的.rp檔案一模一樣。我們我們可以參考一些app中常常採用的”我的“圖示樣式，然後用Axure預設的基本形狀元件，比如矩形、橫線、圓形等，組合拼湊成最終比較理想的樣子。

首先我們要明確，Axure中沒有類似PS中的布林運算（能夠自由的對多個形狀進行編輯，比如合併、相交、減去頂層等），所以會給我們製作元件，尤其是圖示帶來一定侷限性，但好在互動原型並不要求苛刻的細節實現，只要我們能夠很清楚的表示出產品形態，有比較整體的風格就可以了。並且我們用Axure基本形狀自己勾畫出來的圖示，能很方便的調整顏色大小等，可以適用不同的互動檔案，這就是從網上找現成的點陣圖圖示很難達到的便利性。

回到“我的”圖示製作，如圖所示，我一共用到了三個基本形狀來進行拼湊，最終組合成了我們經常能看到的一個圖示樣式，並且一眼就能明白它的含義。雖然沒有更多的細節實現，但對於互動原型稿來說已經完全夠用，關鍵是顏色大小等可以很靈活的進行修改。

按照這個思路，我們可以製作更多的圖標出來，當然還可以製作一些常用控制元件比如按鈕、appbar、搜尋欄、圖標占位符等等。如下圖，是我在畫「讀讀日報」原型圖時製作的一個元件庫：

元件庫製作完成之後，然後就進入到最後一個步驟。

四、載入自制元件庫並使用

元件庫製作完成儲存在自己常用的資原始檔夾中。開啟一個正常的.rp檔案，同樣是在元件庫面板「三條橫線」按鈕下拉選項中找到「載入部件庫」功能，然後找到製作完成的元件庫檔案“綠色圖示”載入。

載入之後，我們就可以在「選擇元件庫」下拉選項中，找到剛剛載入的元件庫並選中，然後我們就可以像使用軟體自帶的元件一樣使用我們自制的元件庫了。

怎麼樣，看到這裡你應該學會了如何自制一個元件庫了吧，希望你會花時間動手做一個。當然除了建立部件庫，Axure有很多技巧都需要掌握，比如母版的功能。

學會善用母版

在產品的設計過程中，主導航往往出現在多個頁面，比如APP的底部tab欄。當然不僅僅是導航，當我們頻繁使用任何一組控制元件的時候，希望你不是一直都在複製和貼上，永遠記住，建立一個母版可能是更好的選擇。

使用母版的便利性不單單體現在能夠快速的使用一組控制元件，尤其是在設計後期，當我們需要修改某些基本控制元件的時候，母版帶來的修改效率一定會讓你深深的愛上這個功能，欲罷不能。

除了學會使用母版，更要學會善用母版。同樣有一點希望能記住，不要把太大的組合物件變成母版。因為越是大的組合物件，越是有可能需要在母版的很多地方做出修改。此時把一些母版和另外一個母版合併起來一般會是更好的辦法，這樣對母版的修改會更加的靈活，比如下圖，將產品基本資訊和可能購買狀態分開成兩個母版，組合在一起成為產品的完整頁面

制定一套自己的互動風格

學會了建立自己的元件庫，也懂得了善用母版，當然還有其他很多Axure軟體的使用技巧。應該就可以很快速的完成一份互動原型稿了吧，可是又該如何保證交付稿有統一的風格，達到較高的目標水準呢？

首先，我們要熟悉APP的設計規範，符合Android或者iOS的設計理念，對於一些常規的控制元件設計規則有一定的瞭解。這樣設計出來的產品才能符合這個平臺的特性，並且基於大家對相關平臺的一些固有認知，很容易能夠達成共識。這也是互動原型作為一個溝通交付物應該達成的目標。

基於對APP設計規範的熟悉，同時在製作過程中，要根據使用場景以及自己的習慣來制定一套自己的互動風格。比如可以定義好APP原型中，正文字型採用 微軟雅黑 顏色#333333 13字號、提示文字為微軟雅黑 顏色#999999 10字號、固定的appbar行高為40px，內容據左側螢幕邊緣10px距離……

當然某些規範，比如字型也可以當成一個字型元件，放到我們自制的元件庫中，總之要根據自己的情況靈活的運用。有了一套風格之後，加上建立的元件庫隨意修改顏色大小等，我相信製作出來的互動原型肯定是協調統一的整體。

讀讀日報原型製作

理論方法掌握了，需要實踐的鍛鍊才能更好的吸收領悟。我參照「讀讀日報」iOS版，對主要的一些頁面畫了一些互動原型。基本過程和思路就是按照本文所提到的這些內容。

為了更有形象感，從網上找來一個iPhone手機的邊框，並且建立自己的部件庫，繪製了一些常用的圖示和控制元件。然後設定了整體的風格，製作過程中也用到了幾個母版提高效率，同時可以使用輔助線幫助自己保證部件的對齊、平均分佈等，進而提高佈局的美感。

總結

末尾再次丟擲我開篇提到的，如何用Axure快速製作APP互動原型的方法論：製作屬於自己的元件庫並要學會善用母版，熟悉APP設計規範並要有自己一套互動風格樣式。

希望，我的這點總結思考能給走在產品經理路上的新人一點啟示。，我相信其中有很多地方都可以實現的更加完美，也歡迎能夠一起交流進步。並且除了Axure，有很多工具也能很好地支援APP原型的製作，也需要我進一步去探索學習。

轉載自：http://www.woshipm.com/rp/223634.html