如何用Axure快速製作APP互動原型

2022-06-10 15:39:09 字數 2972 閱讀 5959

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何用Axure製作2048小遊戲

2048這款遊戲肯定很多人都玩過吧,2048屬於一款數字遊戲。如果要自己設計2048該如何實現呢?我們都知道,axure 遊戲規則很簡單,每次可以選擇上下左右其中乙個方向去滑動,每滑動一次,所有的數字方塊都會往滑動的方向靠攏外,系統也會在空白的地方亂數出現乙個數字方塊,相同數字的方塊在靠攏 相撞時會...

AXURE製作APP抽屜式選單

1.拖乙個dynamic panel到窗體,將state1改名為state 首頁 2.拖2個dynamic panel到state 首頁中,分別命名為側邊選單及首頁內容,首頁內容蓋住側邊選單 3.在首頁內容和側邊選單隨便放點東 西,比如圖 片之類的,再在首頁內容中放置乙個按鈕,然後設定按鈕的點選事件...

如何快速成為APP製作 H5製作高手?

html5是html最新的修訂版本,2014年10月由全球資訊網聯盟 w3c 完成標準制定。html5的設計目的是為了在移動裝置上支援多 html5,簡稱h5.h5的製作,市場上主要有以下幾類公司。1 公關公司 這類公司離客戶最近,他們承接客戶的活動比較多,一般是受客戶要求或主動向客戶推薦h5的方式...