當前位置:菜譜大全網 - 素菜食譜大全 - Axure原型模板——如何用axure快速制作APP交互原型

Axure原型模板——如何用axure快速制作APP交互原型

如何用AxureRP8搭建壹個簡單登錄頁面的原型?使用AxureRP8搭建原型,就不得不提到組件庫的使用。對於Axure來說,組件庫在某種程度上其實相當於平面設計的工具欄。如果想在頁面上搭建壹個簡單的原型,組件庫中組件的使用是必不可少的,就像搭建積木原型需要積木的原理是壹樣的。那麽,讓我們看看如何使用組件庫中的組件來構建壹個簡單的原型。具體步驟如下:

1,第頁。整個軸左下角的位置就是頁面的位置。壹般情況下,系統默認為三頁。當然,妳也可以復制很多頁面,雙擊第壹頁,然後我們就可以構建壹個當前頁面的簡單原型。

2.在組件庫中選中矩形2的這個元素,拖動到畫布中,根據自己需要的大小畫出相應的大小。這裏選擇1920*1080的尺寸,這也是蘋果手機plus版的分辨率尺寸,在圖中所示的位置可以做相應的調整。

3.選擇壹個占位符。占位符通常代表圖片在原型中的位置。這裏,占位符用於表示登錄頁面中經常出現的信息,如徽標。當然,如果妳想讓它更漂亮,妳也可以選擇使用圖片。

4.選擇矩形1和文本框來創建登錄位置的顯示效果。具體來說,雙擊元素以編輯矩形元素。這裏,我們選擇將矩形設置為單詞login。

5.單擊組件,同時按住Ctrl鍵以復制組件。具體來說,使用這種方法,可以方便地創建密碼的顯示效果。

6.創建壹個按鍵按鈕,即登錄按鈕。拖動之後,我們將其命名為Login Now。具體來說,創建完成後,按F5,點擊發布,這樣我們就可以用網頁打開自己的原型來看顯示效果了。

任務管理移動端Axure原型設計這是Axure8做的壹個高保真的任務管理APP原型模板,包括待辦、日程、統計、me四個主要模塊。作為壹個效率工具的原型,核心功能都得到了體現,整體風格清新簡潔,可以作為移動原型的模板。

此外,這部作品還包含了宮廷導航、日歷、復讀機、表單、動作面板、圖表、卡片等多種常用的移動組件。,可以直接復制或拖動到項目中使用。對於初學者來說,也是Axure互動學習的友好模板。

點擊這裏預覽完整的原型。

壹些圖片

如何快速原型化與Axure的APP交互,創建自己的組件庫?

原型制作工具的核心功能無非是通過組件的堆疊和組合來展現產品的目標形態和效果。Axure只附帶了壹些基本組件,但是在線組件庫很復雜。

亂,很難找到符合需求,滿意的組件,而且大多是位圖格式,無法修改色寬等值。產生的交互如何滿足精致的標準要求?

好在Axure提供了“創建零件庫”的功能,可以支持我們制作自己的零件庫。我們可以通過軟件的基本組件來組合我們常用的圖標和控件。制作完成後,我們可以在每次應用時根據實際情況調整顏色、大小、線寬的數值,從而實現交互稿的統壹完美風格。

例如,壹些圖標如主頁、分享、搜索、消息...都是經常在APP中使用的,或者我們每次遇到喜歡的圖標,都可以用Axure畫出來,以備不時之需。下面就以圖標為例,來說說制作組件庫的具體步驟。

首先,創建壹個元件庫“綠色文件”

打開Axure,在元件庫面板的“三條水平線”按鈕的下拉選項中找到“創建元件庫”的功能。點擊它,彈出另存為對話框,需要選擇元件庫文件的存儲位置,輸入元件庫的名稱。

此時,我們可以看到文件的後綴是。rplib,它是組件庫的格式,不同於。創建交互式原型時普通Axure文件的rp格式。

輸入文件名和存儲位置後,點擊保存,Axure將重新打開壹個新頁面來編輯組件。我們可以看到新頁面和我們通常創建的頁面是壹樣的。rp普通文件。

頁面完全相同,但不要混淆。此時,該頁面編輯了我們需要在正常情況下使用的基本組件。rp文件。當我們回到存儲組件庫的位置時,我們可以看到組件庫。rplib文件圖。

它被標記為“綠色”,這不同於。rp文件。

創建好構件庫的“綠色文件”後,基本的準備工作已經完成,下面是制作流程。

二、組件庫分組

通過觀察Axure的默認組件庫,我們可以看到它的組件庫可以按類別分組。比如默認分為:常用、表格、流程等。,這使我們更容易找到目標組件的位置。

同樣,當我們制作壹個組件庫時,我們也可以對其進行分組。規則是:在頁面導航面板上,所有文件夾都是分組的,不在文件夾下的所有頁面,包括它們的所有子頁,都屬於以組件庫命名的組。

在了解了分組規則之後,我們可以先根據自己對組件庫的規劃進行合理的分組。比如我們要做壹個APP的組件庫,可以把它分成圖標、控件、框架三個常見的組,然後就可以進入具體組件的制作流程了。

第三,編輯和制作組件

讓我們以制作壹個“我的”頭像圖標為例。首先,在圖標分組下,添加壹個頁面,命名為“我的”。雙擊進入組件編輯頁面,編輯操作照常正常。

的。rp文件完全壹樣。我們可以參考壹些app中常用的“我的”圖標樣式,然後使用Axure默認的基本形狀元素,如矩形、水平線、圓形等。,進行組合和拼讀。

組成最後理想的樣子。

首先要明確的是,Axure沒有類似PS中的布爾運算(可以自由編輯多個形狀,比如合並、相交、減去頂層等。),所以會給我們做組件,特別是。

是圖標帶來了壹些限制,但好在交互原型並不要求苛刻的細節,只要我們能清晰的表達產品形態,有更整體的風格就可以了。我們使用Axure

自己勾畫出基本形狀的圖標可以很容易地調整顏色大小等。,並且可以適用於不同的交互文件,這就是從網上很難找到現成位圖圖標的便利。

回到我的圖標制作,如圖,我用三個基本形狀拼湊,最後組合成壹個我們經常看到的圖標樣式,壹眼就能明白它的意思。雖然沒有更多的細節需要實現,但是對於交互原型稿來說完全夠用了。關鍵是顏色大小可以靈活修改。

按照這個思路,我們可以制作更多的圖標,當然也可以制作壹些常見的控件比如按鈕、appbar、搜索欄、圖標占位符等等。下圖是我畫每日閱讀原型時做的壹個組件庫:

組件庫做好之後,那麽就到了最後壹步。

第四,加載自制的元件庫並使用

組件庫被制作並保存在其常用的資源文件夾中。開個普通的。rp文件。同樣,在庫面板“三橫線”按鈕的下拉選項中找到“加載零件庫”的功能,然後找到成品庫文件的“綠色圖標”進行加載。

加載後,我們可以在“選擇組件庫”下拉選項中找到並選擇新加載的組件庫,然後就可以像使用軟件自帶的組件壹樣使用我們自制的組件庫了。

反正妳應該已經學會自己做壹個組件庫了。我希望妳能花時間做壹個。當然,除了創建組件庫,Axure還有很多技能需要掌握,比如大師的功能。

學會善用大師

在產品設計的過程中,主導航往往會出現在多個頁面上,比如app底部的標簽欄。當然不僅僅是導航。當我們頻繁使用任何壹組控件時,希望妳不要壹直復制粘貼。永遠記住,創造壹個主人可能是更好的選擇。

使用大師的方便之處不僅僅在於妳現在可以快速的使用壹套控件,尤其是在設計後期,當我們需要修改壹些基礎控件的時候,大師帶來的修改效率壹定會讓妳深深的愛上這個功能。

除了要學會用大師,還要學會用好大師。還有,希望記得不要把太大的組合對象變成主人。因為復合對象越大,就越有可能需要位於母版上的許多位置。

方進行修改。這個時候,壹般是將壹些母版與另壹個母版進行合並,這樣母版的修改會更加靈活。比如下圖把產品的基本信息和可能的購買狀態壹分為二。

主,共同組成壹個完整的產品頁面。

發展妳自己的互動風格

我學會了如何創建自己的組件庫,如何利用好master,當然還有很多其他使用Axure軟件的技巧。快速完成壹個交互原型草稿應該是可以的,但是如何保證交付的草稿風格統壹,達到更高的目標水平?

首先要熟悉APP的設計規範,符合Android或者iOS的設計理念,對壹些常規的控件設計規則有壹定的了解。這樣設計出來的產品只能用。

結合這個平臺的特點,並基於相關平臺的壹些固有知識,很容易做到* * *知識。這也是交互原型作為壹個傳播交付品應該達到的目標。

在熟悉APP的設計規範的基礎上,在制作過程中,根據使用場景和自己的習慣,制定自己的交互風格。比如可以定義APP原型中采用文本字體。

使用微軟雅黑顏色# 333313字號,提示文字為微軟雅黑顏色# 99999。

字體大小10,固定appbar行高40px,內容距離屏幕左邊緣10px。......

當然,有些規範,比如字體,也可以作為壹個字體組件,放入我們自制的組件庫中。總之要根據自身情況靈活運用。有了壹套風格,再加上創建組件庫隨意修改顏色大小,相信制作出來的交互原型壹定是壹個協調的整體。

閱讀日報的原型

理論方法的掌握需要實踐來更好的吸收和領悟。我參考了iOS版的《每日閱讀》,為壹些主頁面畫了壹些交互原型。基本過程和思路與本文所述內容壹致。

為了有更生動的感覺,我從網上找了壹個iPhone邊框,創建了自己的組件庫,畫了壹些常用的圖標和控件。然後整體風格定下來,制作過程中用幾個母版,提高效率。同時,可以使用輔助線來幫助您確保組件的對齊和均勻分布,從而提高布局的美感。

摘要

最後再次拋出我在開頭提到的方法論,如何用Axure快速制作壹個APP的交互原型:制作自己的組件庫並學會善用大師,熟悉APP的設計規範,有自己的壹套交互風格。