15款優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具

18 評論 596372 瀏覽 543 收藏 15 分鐘

一新來小盆友問:“移動(dòng)產(chǎn)品原型設(shè)計(jì)都用啥工具?”

答:“@#¥……&%*”

又問:“能詳細(xì)說下各個(gè)工具嗎?我比較一下”

“……”

好吧,誰讓我那么的愛分享而你又是小美女呢

———————正文開始————————

首先,一款優(yōu)秀的移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具應(yīng)該具備:

①.支持移動(dòng)端演示(隨時(shí)隨地演示給BOSS,廁所&食堂&電梯…以體現(xiàn)我是那么的敬業(yè)——長點(diǎn)工資必備)

②.組件庫(高效復(fù)用,誰用誰知道)

③.可以快速生成全局流程(程序猿看不懂拆解的,給丫的看這個(gè))

④.在線協(xié)作(多個(gè)PM狗一起用)

⑤.手勢操作、轉(zhuǎn)場動(dòng)畫、交互特效…(這些都不需要,留給專業(yè)的交互、視覺,搞那么虛的不如多想想產(chǎn)品流程邏輯做做減法、寫寫xxRD啥的)

這些年,產(chǎn)品狗們折騰過的原型工具:

1.?POP(Prototyping on Paper)

算是移動(dòng)App原型設(shè)計(jì)神器 ,很多公司在用:quora、sina、豆瓣、36氪、ifanr…

操 作輕巧簡單:先用手機(jī)拍下草圖原型(存到POP app內(nèi));然后開始編輯圖片的哪個(gè)區(qū)域(按鈕)鏈接到什么頁面,添加跳轉(zhuǎn)鏈接熱區(qū),就可以在iPhone上給小伙伴們演示了,并且POP內(nèi)嵌的交互動(dòng)作 如側(cè)滑、展開、消失等,即可滿足一般的動(dòng)態(tài)演示需要。不太明白?

 

2、Pencil Project?
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Pencil Project
Pencil是一款開源的可以用來制作圖表和GUI原型的工具,可以作為一個(gè)獨(dú)立的app,也可以作為Firefox插件。內(nèi)置模版可以幫你繪制桌面和移動(dòng)界面中用到的各種各樣的用戶界面,包括流程圖、UI和一般的通用圖形。

通過它內(nèi)置的模板,你可以創(chuàng)建可鏈接的文檔,并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動(dòng)app模版。

 

3.Axure

優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Axure

大 家都很熟悉了,這里主要說下移動(dòng)端的演示,這樣才充分表達(dá)原型意圖。按F5生成原型的時(shí)候,在“Mobile/Device”選項(xiàng)中可以設(shè)置適配移動(dòng)設(shè)備 的特殊原型(Axure 6.5以下版本),再用移動(dòng)設(shè)備訪問你生成的原型鏈接即可(該頁面創(chuàng)建一個(gè)桌面快捷方式)。

 

4、Proto.io
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之proto
Proto.io是一個(gè)專用的手機(jī)原型開發(fā)平臺(tái)——可以構(gòu)建和部署全交互式的移動(dòng)程序的原型,并且可以模擬出相似的成品。它可以運(yùn)行在大多數(shù)的瀏覽器中,并提供了3個(gè)重要的接口:dashboard、編輯器以及播放器。

dashboard 可以用來管理項(xiàng)目。編輯器是構(gòu)建原型的環(huán)境,由一組設(shè)計(jì)和開發(fā)原型的工具組成,另外還可以構(gòu)建交互。播放器用來觀看原型,并與原型進(jìn)行交互,并提供了相關(guān) 工具來標(biāo)注和保留反饋信息。你可以直接在真實(shí)的移動(dòng)設(shè)備上對原型進(jìn)行測試。并且可以使用iOS或Android上的瀏覽器以全屏模式運(yùn)行原型。

 

5、Moqups
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Moqups
是一個(gè)非常好的、免費(fèi)的HTML5應(yīng)用,通過它可以創(chuàng)建可愛樸素的線框圖、實(shí)體模型和UI概念。該程序使用起來非常簡單,并且有內(nèi)置的模板可以直接使用(模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等)。

它還提供了iPhone和iPad模板,以及iOS相關(guān)的按鈕、提示框、picker、菜單、開關(guān)以及鍵盤等。你可以設(shè)置網(wǎng)格的尺寸,并預(yù)覽和分享你的線框圖。Moqups提供了一個(gè)很有用的功能就是對齊網(wǎng)格,可以使對象精準(zhǔn)對齊。

 

6、UXPin
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之UXPin
UXPin是DeSmart團(tuán)隊(duì)開發(fā)的一個(gè)簡易快速的實(shí)體模型和在線可點(diǎn)擊原型創(chuàng)作工具。它基于優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)原則,在構(gòu)建原型中,它提供了一個(gè)完整的工具包(該工具包具有良好的用戶設(shè)計(jì)模式和元素)來從頭構(gòu)建一個(gè)出色的原型。

UXPin 具有響應(yīng)式的斷點(diǎn)功能,創(chuàng)建的響應(yīng)式原型和線框圖可以運(yùn)行在不同的設(shè)備和分辨率上。另外該軟件還提供了版本控制和迭代功能,可以輕松的共享預(yù)覽,直觀的注 解和實(shí)時(shí)的協(xié)同編輯和聊天。該軟件擁有大量具有吸引力的用戶界面元素風(fēng)格(包括web,iOS,Android等),并且具有快速、靈敏的響應(yīng)拖放接口。

 

7、Omnigraffle
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Omnigraffle
OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結(jié)構(gòu)圖以及插圖等類型圖的app,也可以用來組織頭腦中思考的信息,曾獲得2002年的蘋果設(shè)計(jì)獎(jiǎng)。

它采用拖放的所見即所得界面,你可以用鋼筆工具繪制自定義的模版或者圖形,此外還自帶Graffletopia提供的多個(gè)iPhone、iPad以及Android模版。

 

8、JustinMind
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之justmind
JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以輸出Html頁面。與目前主流的交互設(shè)計(jì)工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更為專屬于設(shè)計(jì)移動(dòng)終端上app應(yīng)用。

JustinMind 可以幫助開發(fā)者設(shè)計(jì)更豐富、更具交互新的移動(dòng)產(chǎn)品線框圖,包含了iPhone、Android 以及iPad常用手勢,滑動(dòng)、縮放、旋轉(zhuǎn),甚至捕捉設(shè)備方向等,從而創(chuàng)造出更具交互性的原型。另外,它可以導(dǎo)出原型信息到Microsoft Word,生成規(guī)范的文檔。

此外,你還可以自定義小組件,創(chuàng)建自定義組件庫,并進(jìn)行分類,不管對象是iPhone、iPad、黑莓、Android還是其他。

 

9、FluidUI
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之FluidUI
Fluid UI是一款用于移動(dòng)開發(fā)的Web原型設(shè)計(jì)工具,可以幫助設(shè)計(jì)師高效地完成產(chǎn)品原型設(shè)計(jì)。Fluid UI 內(nèi)置超過1700款的線框圖和手機(jī)UI控件,并且還會(huì)經(jīng)常進(jìn)行更新。

Fluid UI無設(shè)備限制,無平臺(tái)限制(Windows、Mac以及Linux系統(tǒng)),支持Chrome和Safari瀏覽器(Chrome瀏覽器上的app也可離 線使用)。你可以使用Fluid Player來預(yù)覽你的設(shè)計(jì),收集意見和反饋。還可以以PNG、PDF方式輸出。

Fluid UI使用方法簡單,采取拖拽的操作方式,不需要程序員來寫代碼。另外,F(xiàn)luid UI資源庫非常豐富,有針對iOS、Android以及Windows 8的資源。如果你覺得庫存資源不能滿足你的需求,你也可以自行添加。

 

10、Protoshare
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Protoshare
ProtoShare:在線網(wǎng)站開發(fā)協(xié)同制作工具是一個(gè)十分便捷的在線原型制作工具,側(cè)重于團(tuán)隊(duì)協(xié)作。團(tuán)隊(duì)成員可以通過這個(gè)工具對工作進(jìn)行審查,并及時(shí)提供反饋,對線框圖或內(nèi)容進(jìn)行建議。

作 為一個(gè)強(qiáng)大的線框圖和原型平臺(tái),Protoshare提供了大量移動(dòng)工具集(有來自中心資源庫的大量移動(dòng)模版和大量2D、3D動(dòng)畫過渡)。通過“拖放”界 面,你可以快速創(chuàng)建交互式的線框圖和移動(dòng)原型,然后發(fā)送至iPhone、iPad或者Android設(shè)備進(jìn)行測試,體驗(yàn)app的功能實(shí)現(xiàn)情況。

另外,Protoshare還支持分享和反饋功能,項(xiàng)目成員可以標(biāo)記和跟蹤的反饋信息來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋創(chuàng)建移動(dòng)產(chǎn)品線框圖,進(jìn)而演變?yōu)楦弑U娴脑汀?/p>

 

11、?Wireframe
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Wireframe
Wireframe是一款具有“點(diǎn)擊-拖-放”界面且超簡單的線框圖創(chuàng)作工具。雙擊實(shí)現(xiàn)編輯功能,有限的界面意味著你會(huì)把精力集中于你的想法上。還給每個(gè)線框圖分配了特有的URL,便于標(biāo)記和分享。
Wireframe有瀏覽器窗口和移動(dòng)手機(jī)兩個(gè)模版選項(xiàng),移動(dòng)版有縱向和橫向兩個(gè)選擇。線框圖的每個(gè)元素都可以編輯和轉(zhuǎn)換。

 

12、InVision
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之InVision
InVision是一個(gè)便捷的產(chǎn)品原型生成工具,用戶制作一個(gè)在線原型只需要四部:創(chuàng)建一個(gè)工程、上傳視覺設(shè)計(jì)稿、添加鏈接以及生成在線原型。

確 切說,InVision提供的不是準(zhǔn)確的線框圖,而是一個(gè)快速原型的環(huán)境,可以把你的UX/UI草圖快速連接起來。數(shù)字型的線框圖和高保真的設(shè)計(jì)可以幫你 測試app的工作情況,同時(shí)該工具還支持協(xié)作和分享功能,生成的在線原型可以支持任何人在產(chǎn)品原型的任何地方評論,便于準(zhǔn)確的交流。

針對iOS 開發(fā),InVision還增添了其他功能,比如自定義主屏幕icon和自定義加載頁面。

 

13、Mokk.me?
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Mokk.me

Mokk.me 是一個(gè)簡單快速的原型工具,通過界面上簡單的拖放操作,不用了解單線編程就能創(chuàng)作一個(gè)可以分享、測試以及多平臺(tái)的app。目前,Mokk.me正在測試 中,但它是一個(gè)簡單的基本的工具,任何人可以用它來創(chuàng)建app的布局。你可拖、放或者編輯小工具,可以搭建和連接頁面,還可以選擇過渡動(dòng)畫。它的特點(diǎn)還在 于頁面和按鈕、圖片小工具、文本輸入以及復(fù)選框形式。
另外,你可以借助HTML、CSS以及JavaScript完成app其他一些功能,一旦你創(chuàng)建了原型,你還可以進(jìn)行分享,在iOS 和Android上進(jìn)行測試。

 

14、iPlotz?
優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之iPlotz

iPlotz 是一款可以用來創(chuàng)建可點(diǎn)擊、可導(dǎo)航的原型和線框圖工具,適合網(wǎng)站開發(fā)者和移動(dòng)app開發(fā)者。你可以在一個(gè)可調(diào)整的頁面拖放元件,然后連接起來,增加其他屏 幕或者頁面的熱點(diǎn)鏈接。你可以選擇使用iPhone/iPad模版或者Android模版,任何模版都有獨(dú)一無二的元件設(shè)置。

iPlotz界面明白易懂,支持協(xié)同工作、可分享的編輯權(quán)限、任務(wù)管理以及評價(jià)系統(tǒng)。另外,項(xiàng)目可以以IPML、JPG、PNG、PDF以及HTML形式輸出。

 

15.Adobe Illustrator 俗稱AI

優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具之Illustrator

這是adobe的一款矢量圖設(shè)計(jì)軟件,推薦給設(shè)計(jì)師轉(zhuǎn)型過來的PM(沒興趣的跳過),電商圈不推薦再去費(fèi)力學(xué)習(xí)其他軟件,達(dá)到溝通的目的提高效率是王道。上圖是設(shè)計(jì)出來的原型成品,可以結(jié)合上面提到的POP去演示,so easy。

寫在最后:蘿卜白菜各有所愛,沒有最好的工具,只有最順手的,最終的目的只有一個(gè)——溝通。

 

原文來自:互聯(lián)網(wǎng)分析沙龍

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 大多數(shù)都收費(fèi)了,對于準(zhǔn)備轉(zhuǎn)行 正在學(xué)習(xí)的人來說不友好,現(xiàn)在只有摹客是可以免費(fèi)支持100人以下團(tuán)隊(duì)的協(xié)作,上手也很簡單,小白入門爺們試用

    來自四川 回復(fù)
  2. 互聯(lián)網(wǎng)軟件推薦
    多用下載 http://www.duoyongxiazai.com

    來自安徽 回復(fù)
  3. 補(bǔ)充下:
    互聯(lián)網(wǎng)軟件推薦
    多用下載 http://www.duoyongxiazai.com

    來自安徽 回復(fù)
  4. 大家都說說自己用的原型工具吧,說說心得體會(huì)~!

    來自陜西 回復(fù)
    1. mac版要花錢買……

      來自北京 回復(fù)
  5. ?? 干貨!
    話說…這評論表情好懷念,想起以前混人人的時(shí)候了 ??

    來自北京 回復(fù)
  6. 看了這么多 都不知道選擇那個(gè)用了

    來自江蘇 回復(fù)
  7. 作者如果能再詳細(xì)說明下每款設(shè)計(jì)工具的特點(diǎn)就好了;pop很愛,只是我的手繪嘛,有點(diǎn)菜 唉~~

    來自上海 回復(fù)
  8. 哇哦,又學(xué)到了很多新知識(shí),贊一個(gè)~

    來自安徽 回復(fù)
  9. 還有sketch 也是非常推薦的 mac才有。

    來自浙江 回復(fù)
    1. sketch要付費(fèi)購買吧?快七百呢

      來自廣東 回復(fù)
  10. 有沒有中文 的啊,英文是一大障礙

    來自湖北 回復(fù)
    1. 同問,有高手的話趕緊來回答,雖然我英語不錯(cuò),哈哈

      來自安徽 回復(fù)
  11. 請問怎么收藏呀 ??

    來自山東 回復(fù)
    1. 文末右下角五角星

      來自浙江 回復(fù)
  12. 沒啥好糾結(jié)的,做移動(dòng)產(chǎn)品最好的選擇還是 騰訊出品的UID和AXURE。其他都是浮云。用一段時(shí)間就知道。

    來自菲律賓 回復(fù)
    1. AXURE和騰訊沒啥關(guān)系

      來自上海 回復(fù)