對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，熟練使用一些常用軟件是一項(xiàng)十分必要的技能。其中，作為一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，Axure RP無(wú)疑在產(chǎn)品人心中擁有一個(gè)難以撼動(dòng)的地位。但就要PS一樣，雖然足夠?qū)I(yè)，但同樣也會(huì)存在使用靈活性的一些問(wèn)題。

今天我們就談?wù)?，如何用Axure快速制作APP交互原型，不對(duì)，更準(zhǔn)確的說(shuō)法應(yīng)該是：如何用Axure快速制作一份有水準(zhǔn)的APP交互原型。作為一名優(yōu)秀的產(chǎn)品人不僅要保證效率，也要保證質(zhì)量才行。

首先拋出我的方法論：制作屬于自己的元件庫(kù)并要學(xué)會(huì)善用母版，熟悉APP設(shè)計(jì)規(guī)范并要有自己一套交互風(fēng)格樣式。我會(huì)以仿照「讀讀日?qǐng)?bào)」IOS版做的一個(gè)交互原型稿為實(shí)例，表述整個(gè)制作過(guò)程的思路，希望能對(duì)你有所幫助。

創(chuàng)建屬于自己的元件庫(kù)

原型制作工具的核心功能無(wú)非就是通過(guò)元件的堆砌組合，來(lái)展示產(chǎn)品的目標(biāo)形態(tài)和效果。Axure自帶的只是一些最基本的元件，而網(wǎng)上的元件庫(kù)龐雜混亂，很難找到滿足需求并且稱心的元件，并且大部分都是位圖格式，根本無(wú)法修改顏色寬度等數(shù)值，制作出來(lái)的交互又怎么能達(dá)到精美的水準(zhǔn)要求呢？

還好Axure提供了「創(chuàng)建部件庫(kù)」的功能，能夠支持我們制作一份屬于自己的元件庫(kù)。我們可以通過(guò)軟件自帶的基本元件搭配組合出我們常用的圖標(biāo)、控件，制作完成后，每次應(yīng)用的時(shí)候還能根據(jù)實(shí)際情況調(diào)整顏色、大小、線寬的數(shù)值，從而才能實(shí)現(xiàn)交互稿統(tǒng)一完美的風(fēng)格。

比如，APP中經(jīng)常會(huì)用到一些主頁(yè)、分享、搜索、消息….各種圖標(biāo)，或者我們每次遇到喜歡的圖標(biāo)，都可以用Axure畫出來(lái)，以備不時(shí)之需。下邊以圖標(biāo)為例講一下制作元件庫(kù)的具體步驟。

一、創(chuàng)建元件庫(kù)“綠色文件”

打開Axure，在元件庫(kù)面板「三條橫線」按鈕下拉選項(xiàng)中找到「創(chuàng)建部件庫(kù)」功能，點(diǎn)擊會(huì)彈出一個(gè)另存為對(duì)話框，這里需要選擇元件庫(kù)文件的存儲(chǔ)位置，并需要輸入元件庫(kù)的名稱。

此時(shí)，我們可以看到，文件的后綴名為 .rplib，這個(gè)就是元件庫(kù)的格式，而不同于創(chuàng)作交互原型時(shí)正常Axure文件的.rp格式。

輸入文件名稱和存儲(chǔ)位置之后，點(diǎn)擊保存，Axure將重新打開一個(gè)新頁(yè)面進(jìn)行元件的編輯。并且我們可以看到，新頁(yè)面跟我們平時(shí)創(chuàng)造.rp正常文件的頁(yè)面一模一樣，但不要混淆，此時(shí)頁(yè)面編輯的是我們?cè)谡?rp文件中需要用的基本元件。并且我們回到元件庫(kù)存儲(chǔ)的位置可以看到，元件庫(kù).rplib文件圖標(biāo)為”綠色“，不同于.rp文件的藍(lán)色。

創(chuàng)建好元件庫(kù)得”綠色文件“后，基本準(zhǔn)備工作已經(jīng)做完，下邊就進(jìn)入到制作過(guò)程。

二、元件庫(kù)分組

通過(guò)觀察Axure默認(rèn)的元件庫(kù)，我們可以看到其元件庫(kù)是可以按照類別進(jìn)行分組的。比如默認(rèn)的分成了：common、forms、flow等等，這樣能更方便我們找到目標(biāo)元件的位置。

同樣，我們?cè)谥谱髟?kù)的時(shí)候，也可以進(jìn)行分組，規(guī)則為：在頁(yè)面導(dǎo)航面板上，所有的文件夾都是一個(gè)分組，所有沒(méi)有在文件夾下的頁(yè)面包括其所有子頁(yè)面，都隸屬與以元件庫(kù)為名的分組下。

分組的規(guī)則弄明白之后，我們可以先按照自己對(duì)元件庫(kù)的規(guī)劃進(jìn)行一個(gè)合理的分組，比如要做APP的元件庫(kù)，那么我們可以分成：圖標(biāo)、控件、框架 3個(gè)常用分組，接下來(lái)就進(jìn)入到具體元件的制作過(guò)程。

三、編輯并制作元件

我們以制作一個(gè)”我的“頭像圖標(biāo)為例，首先在圖標(biāo)分組下，添加一個(gè)頁(yè)面并命名為”我的“，雙擊進(jìn)入到元件編輯頁(yè)面，編輯操作就跟我們平時(shí)制作正常的.rp文件一模一樣。我們我們可以參考一些app中常常采用的”我的“圖標(biāo)樣式，然后用Axure默認(rèn)的基本形狀元件，比如矩形、橫線、圓形等，組合拼湊成最終比較理想的樣子。

首先我們要明確，Axure中沒(méi)有類似PS中的布爾運(yùn)算（能夠自由的對(duì)多個(gè)形狀進(jìn)行編輯，比如合并、相交、減去頂層等），所以會(huì)給我們制作元件，尤其是圖標(biāo)帶來(lái)一定局限性，但好在交互原型并不要求苛刻的細(xì)節(jié)實(shí)現(xiàn)，只要我們能夠很清楚的表示出產(chǎn)品形態(tài)，有比較整體的風(fēng)格就可以了。并且我們用Axure基本形狀自己勾畫出來(lái)的圖標(biāo)，能很方便的調(diào)整顏色大小等，可以適用不同的交互文件，這就是從網(wǎng)上找現(xiàn)成的位圖圖標(biāo)很難達(dá)到的便利性。

回到“我的”圖標(biāo)制作，如圖所示，我一共用到了三個(gè)基本形狀來(lái)進(jìn)行拼湊，最終組合成了我們經(jīng)常能看到的一個(gè)圖標(biāo)樣式，并且一眼就能明白它的含義。雖然沒(méi)有更多的細(xì)節(jié)實(shí)現(xiàn)，但對(duì)于交互原型稿來(lái)說(shuō)已經(jīng)完全夠用，關(guān)鍵是顏色大小等可以很靈活的進(jìn)行修改。

按照這個(gè)思路，我們可以制作更多的圖標(biāo)出來(lái)，當(dāng)然還可以制作一些常用控件比如按鈕、appbar、搜索欄、圖標(biāo)占位符等等。如下圖，是我在畫「讀讀日?qǐng)?bào)」原型圖時(shí)制作的一個(gè)元件庫(kù)：

元件庫(kù)制作完成之后，然后就進(jìn)入到最后一個(gè)步驟。

四、載入自制元件庫(kù)并使用

元件庫(kù)制作完成保存在自己常用的資源文件夾中。打開一個(gè)正常的.rp文件，同樣是在元件庫(kù)面板「三條橫線」按鈕下拉選項(xiàng)中找到「載入部件庫(kù)」功能，然后找到制作完成的元件庫(kù)文件“綠色圖標(biāo)”載入。

載入之后，我們就可以在「選擇元件庫(kù)」下拉選項(xiàng)中，找到剛剛載入的元件庫(kù)并選中，然后我們就可以像使用軟件自帶的元件一樣使用我們自制的元件庫(kù)了。

怎么樣，看到這里你應(yīng)該學(xué)會(huì)了如何自制一個(gè)元件庫(kù)了吧，希望你會(huì)花時(shí)間動(dòng)手做一個(gè)。當(dāng)然除了創(chuàng)建部件庫(kù)，Axure有很多技巧都需要掌握，比如母版的功能。

學(xué)會(huì)善用母版

在產(chǎn)品的設(shè)計(jì)過(guò)程中，主導(dǎo)航往往出現(xiàn)在多個(gè)頁(yè)面，比如APP的底部tab欄。當(dāng)然不僅僅是導(dǎo)航，當(dāng)我們頻繁使用任何一組控件的時(shí)候，希望你不是一直都在復(fù)制和粘貼，永遠(yuǎn)記住，創(chuàng)建一個(gè)母版可能是更好的選擇。

使用母版的便利性不單單體現(xiàn)在能夠快速的使用一組控件，尤其是在設(shè)計(jì)后期，當(dāng)我們需要修改某些基本控件的時(shí)候，母版帶來(lái)的修改效率一定會(huì)讓你深深的愛(ài)上這個(gè)功能，欲罷不能。

除了學(xué)會(huì)使用母版，更要學(xué)會(huì)善用母版。同樣有一點(diǎn)希望能記住，不要把太大的組合對(duì)象變成母版。因?yàn)樵绞谴蟮慕M合對(duì)象，越是有可能需要在母版的很多地方做出修改。此時(shí)把一些母版和另外一個(gè)母版合并起來(lái)一般會(huì)是更好的辦法，這樣對(duì)母版的修改會(huì)更加的靈活，比如下圖，將產(chǎn)品基本信息和可能購(gòu)買狀態(tài)分開成兩個(gè)母版，組合在一起成為產(chǎn)品的完整頁(yè)面

制定一套自己的交互風(fēng)格

學(xué)會(huì)了創(chuàng)建自己的元件庫(kù)，也懂得了善用母版，當(dāng)然還有其他很多Axure軟件的使用技巧。應(yīng)該就可以很快速的完成一份交互原型稿了吧，可是又該如何保證交付稿有統(tǒng)一的風(fēng)格，達(dá)到較高的目標(biāo)水準(zhǔn)呢？

首先，我們要熟悉APP的設(shè)計(jì)規(guī)范，符合Android或者iOS的設(shè)計(jì)理念，對(duì)于一些常規(guī)的控件設(shè)計(jì)規(guī)則有一定的了解。這樣設(shè)計(jì)出來(lái)的產(chǎn)品才能符合這個(gè)平臺(tái)的特性，并且基于大家對(duì)相關(guān)平臺(tái)的一些固有認(rèn)知，很容易能夠達(dá)成共識(shí)。這也是交互原型作為一個(gè)溝通交付物應(yīng)該達(dá)成的目標(biāo)。

基于對(duì)APP設(shè)計(jì)規(guī)范的熟悉，同時(shí)在制作過(guò)程中，要根據(jù)使用場(chǎng)景以及自己的習(xí)慣來(lái)制定一套自己的交互風(fēng)格。比如可以定義好APP原型中，正文字體采用 微軟雅黑 顏色#333333 13字號(hào)、提示文字為微軟雅黑 顏色#999999 10字號(hào)、固定的appbar行高為40px，內(nèi)容據(jù)左側(cè)屏幕邊緣10px距離……

當(dāng)然某些規(guī)范，比如字體也可以當(dāng)成一個(gè)字體元件，放到我們自制的元件庫(kù)中，總之要根據(jù)自己的情況靈活的運(yùn)用。有了一套風(fēng)格之后，加上創(chuàng)建的元件庫(kù)隨意修改顏色大小等，我相信制作出來(lái)的交互原型肯定是協(xié)調(diào)統(tǒng)一的整體。

讀讀日?qǐng)?bào)原型制作

理論方法掌握了，需要實(shí)踐的鍛煉才能更好的吸收領(lǐng)悟。我參照「讀讀日?qǐng)?bào)」iOS版，對(duì)主要的一些頁(yè)面畫了一些交互原型。基本過(guò)程和思路就是按照本文所提到的這些內(nèi)容。

為了更有形象感，從網(wǎng)上找來(lái)一個(gè)iPhone手機(jī)的邊框，并且創(chuàng)建自己的部件庫(kù)，繪制了一些常用的圖標(biāo)和控件。然后設(shè)定了整體的風(fēng)格，制作過(guò)程中也用到了幾個(gè)母版提高效率，同時(shí)可以使用輔助線幫助自己保證部件的對(duì)齊、平均分布等，進(jìn)而提高布局的美感。

總結(jié)

末尾再次拋出我開篇提到的，如何用Axure快速制作APP交互原型的方法論：制作屬于自己的元件庫(kù)并要學(xué)會(huì)善用母版，熟悉APP設(shè)計(jì)規(guī)范并要有自己一套交互風(fēng)格樣式。

希望，我的這點(diǎn)總結(jié)思考能給走在產(chǎn)品經(jīng)理路上的新人一點(diǎn)啟示。，我相信其中有很多地方都可以實(shí)現(xiàn)的更加完美，也歡迎能夠一起交流進(jìn)步。并且除了Axure，有很多工具也能很好地支持APP原型的制作，也需要我進(jìn)一步去探索學(xué)習(xí)。

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