如何用Axure快速制作APP交互原型

21 評論 376024 瀏覽 1059 收藏 14 分鐘

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

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

首先拋出我的方法論:制作屬于自己的元件庫并要學會善用母版,熟悉APP設計規范并要有自己一套交互風格樣式。我會以仿照「讀讀日報」IOS版做的一個交互原型稿為實例,表述整個制作過程的思路,希望能對你有所幫助。

創建屬于自己的元件庫

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

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

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

一、創建元件庫“綠色文件”

打開Axure,在元件庫面板「三條橫線」按鈕下拉選項中找到「創建部件庫」功能,點擊會彈出一個另存為對話框,這里需要選擇元件庫文件的存儲位置,并需要輸入元件庫的名稱。

功能入口2

此時,我們可以看到,文件的后綴名為 .rplib,這個就是元件庫的格式,而不同于創作交互原型時正常Axure文件的.rp格式。

保存地址2

輸入文件名稱和存儲位置之后,點擊保存,Axure將重新打開一個新頁面進行元件的編輯。并且我們可以看到,新頁面跟我們平時創造.rp正常文件的頁面一模一樣,但不要混淆,此時頁面編輯的是我們在正常.rp文件中需要用的基本元件。并且我們回到元件庫存儲的位置可以看到,元件庫.rplib文件圖標為”綠色“,不同于.rp文件的藍色。

綠色圖標

創建好元件庫得”綠色文件“后,基本準備工作已經做完,下邊就進入到制作過程。

二、元件庫分組

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

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

分組22

分組的規則弄明白之后,我們可以先按照自己對元件庫的規劃進行一個合理的分組,比如要做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原型的制作,也需要我進一步去探索學習。

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. Axure能夠用布爾運算對多個形狀進行編輯,選中兩個形狀后屬性里面會出現,比如合并、相交、減去等

    來自廣東 回復
  2. 太感謝了,母版是最關鍵的提高效率方法。

    來自廣東 回復
  3. app元件

    來自北京 回復
  4. 后綴 .rplib

    來自廣東 回復
  5. pp元件

    來自北京 回復
  6. app元件

    來自浙江 回復
  7. app元件

    來自廣東 回復
  8. 創建元件庫,通過多種基本形狀組合起來制作了一些圖標,載入這個元件庫后,在使用時進行縮放會變形有什么辦法解決嗎

    來自浙江 回復
    1. 蹲解決方案!

      來自江蘇 回復
  9. ?? ?? 喜歡

    來自安徽 回復
  10. 我想要原型文件,可以發一下不?

    來自四川 回復
  11. 鬧眼子的 關注后哪里是你發的app 元件

    來自湖北 回復
  12. 很好

    來自江蘇 回復
  13. 還有沒有產品元件啊

    來自廣東 回復
  14. “app元件”

    來自北京 回復
  15. 下載地址提示不存在,腫么回事嘛 ?

    來自遼寧 回復
  16. 能否求你這份元件庫 ?? ?? ??

    來自浙江 回復
  17. 網上找來的iPhone手機的邊框?如何搜索這類型app原型邊框 謝謝

    來自廣東 回復
  18. 你的原件庫能否發我一份,huangcw@yoya.com 謝謝。

    來自福建 回復
  19. 第二行,應該是
    ”難以撼動的地位。就像PS一樣“

    來自江西 回復