APP原型設計:高效制作APP DEMO的五個步驟

眾所周知,目前國內(nèi)外的原型設計工具很多,找一款適合自己的才是最好的。做原型之前頭腦要有自己的思路和框架,包括可以借鑒的產(chǎn)品、需要的素材等。

25學堂推薦給大家的用的通用的原型工具是Axure,移動端可用Justinmind、墨刀。

制作移動demo的app

之前25學堂的一名網(wǎng)友說道,試了各式各樣的APP原型設計工具,最終在墨刀我完成了第一個完整的APP原型,使用過程中輕便易用,基本上大部分的效果都可以輕松實現(xiàn),而且導出的html5原型還原度很不錯。這款工具雖然是面向設計師的,但是小白用戶也很容易上手,很節(jié)省時間呀!

移動APP設計師們特別是交互設計師往往需要承擔制作Demo的工作,而這個過程從上涉及到產(chǎn)品想法和主要功能、信息架構和界面的組織,甚至向下涉及到視覺風格和互動反饋等各個環(huán)節(jié);

打交道的人可能包括了產(chǎn)品經(jīng)理(提供原始的產(chǎn)品概念,用戶需求分析或者是功能完整的產(chǎn)品文檔),視覺設計師(提供UI風格和設計稿),用戶研究員(提出測試用例或者研究需求)。

25學堂特別推薦的視頻教程:

1、justinmind最新版發(fā)布和justinmind視頻教程大全

2、手機上快速制作APP Demo的交互神器-App.eal

3、用Axure制作APP交互原型的視頻教程【共6節(jié)課】

 

下面重點介紹高效制作APPDEMO的五個步驟:

①、腦圖(思維導圖)把討論的結果理清:

功能模塊,邏輯關系,信息架構,業(yè)務流程;

25學堂腦圖制作工具推薦: 百度腦圖(naotu.baidu.com)和思維導圖。

百度腦圖

②、流程圖:

產(chǎn)品功能的流程,從注冊-各功能使用圖表的形式來說明這一過程;

流程圖制作工具也可以用以上工具或者是word。

 

③、信息框架圖:

這樣比較直觀的顯示這款產(chǎn)品的結構;

功能設計是具體而言,一個用戶如何使用一款產(chǎn)品,可以看做是對信息結構和流程的具體 ? ? ? ? ? 體現(xiàn)。

 

④、線框圖:

低保真的設計圖(內(nèi)容大綱、信息結構、交互行為)。

app線框圖

 

⑤、視覺設計(有能力有時間也可以做成交互):

高保真的產(chǎn)品靜態(tài)設計圖(頁面(流程)跳轉邏輯和明確的文案設計及釋)。

太來勁APP界面設計欣賞

25學堂還跟大家分享Facebook 的產(chǎn)品原型設計工具:Origami — Design Prototyping

以及尹廣磊的原型設計外包服務。

每天更新,
全站高品質(zhì)素材免費下載!