首先,我們要將文件從Axure中導出。
Step1:在Axure內點擊(發布)生成原型文件。Step2:創建壹個空白文件夾作為導出位置,點擊“發布到本地”,將生成的整個文件進行壓縮,選擇壓縮文件格式為ZIP,註意這裏不能加密。接下來,我們將導出來的Axure文件導入到Pixso中:方法壹:直接拖拽至Pixso工作臺,壹鍵導入Axure文件。方法二:壹鍵導入Axure文件,流暢的雲端加載,省時省力,高效遷移。打開工作臺,點擊首頁的(導入文件)按鈕,選擇Axure文件並導入。或使用菜單欄的文件導入功能,導入Axure文件到Pixso打開。
原型工具選對,原型設計也可以很簡單!聰明的選擇是用最小的代價解決最主要的需求,Pixso免費+學習成本低+功能強大且完備,相信聰明的妳可以用它制作出滿意的原型交互設計!
如何使用axurerp制作iosapp原型蘋果版本的axure界面與windows版本的差別不是很大,界面更簡單壹些,熟悉了以後感覺比win系統的更好。創建屬於自己的元件庫
原型制作工具的核心功能無非就是通過元件的堆砌組合,來展示產品的目標形態和效果。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原型中,正文字體采
用微軟雅黑顏色#33333313字號、提示文字為微軟雅黑顏色#999999
10字號、固定的appbar行高為40px,內容據左側屏幕邊緣10px距離......
當然某些規範,比如字體也可以當成壹個字體元件,放到我們自制的元件庫中,總之要根據自己的情況靈活的運用。有了壹套風格之後,加上創建的元件庫隨意修改顏色大小等,我相信制作出來的交互原型肯定是協調統壹的整體。
讀讀日報原型制作
理論方法掌握了,需要實踐的鍛煉才能更好的吸收領悟。我參照「讀讀日報」ios版,對主要的壹些頁面畫了壹些交互原型。基本過程和思路就是按照本文所提到的這些內容。
為了更有形象感,從網上找來壹個iphone手機的邊框,並且創建自己的部件庫,繪制了壹些常用的圖標和控件。然後設定了整體的風格,制作過程中也用到了幾個母版提高效率,同時可以使用輔助線幫助自己保證部件的對齊、平均分布等,進而提高布局的美感。
末尾再次拋出我開篇提到的,如何用axure快速制作app交互原型的方法論:制作屬於自己的元件庫並要學會善用母版,熟悉app設計規範並要有自己壹套交互風格樣式。
axure交互原型圖怎麽做？打開Axure8(axure7也壹樣),默認是新創建的項目,找到“動態面板”元件,如下圖:
拖動元件到工作區,按照圖指示的任意壹個地方給動態面板命名:測試面板
雙擊動態面板元件,出現狀態state1,雙擊進入到state1的編輯:
拖放壹個圖像元件到state1內,雙擊並找到準備的圖片(紅旗),這樣第壹個狀態就編輯好了。
下面編輯第二個狀態,註意看圖,在右下方的“概要”欄目內找到state1右鍵“復制狀態”,這樣裏面的元件大小、位置不會發生改變。復制成功後為便於下面的交互用例,將狀態分別命名為:紅旗、藍旗。
然後點擊藍旗狀態,將圖片替換。
以上步驟完成後,開始編輯交互用例。雙擊紅旗圖片,出現如下圖所示的交互用例,找到:鼠標單擊時,並雙擊出現用例編輯面板。
選擇元件-->設置面板狀態,然後按照圖示選中“測試面板”,並為其設置選擇狀態為:藍旗。同時設定動畫效果。
紅旗狀態編輯完成後,點擊確定,按照下圖所示在case1下郵件復制用例,並粘貼到藍旗狀態下。然後按上壹步的操作,將藍旗點擊是的選擇狀態設置為:紅旗。
最後F5預覽,並點擊圖像測試效果