15款優(yōu)秀移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具
一新來小盆友問:“移動(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? 通過它內(nèi)置的模板,你可以創(chuàng)建可鏈接的文檔,并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動(dòng)app模版。 3.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 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 它還提供了iPhone和iPad模板,以及iOS相關(guān)的按鈕、提示框、picker、菜單、開關(guān)以及鍵盤等。你可以設(shè)置網(wǎng)格的尺寸,并預(yù)覽和分享你的線框圖。Moqups提供了一個(gè)很有用的功能就是對齊網(wǎng)格,可以使對象精準(zhǔn)對齊。 6、UXPin 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 它采用拖放的所見即所得界面,你可以用鋼筆工具繪制自定義的模版或者圖形,此外還自帶Graffletopia提供的多個(gè)iPhone、iPad以及Android模版。 8、JustinMind 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 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 作 為一個(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 12、InVision 確 切說,InVision提供的不是準(zhǔn)確的線框圖,而是一個(gè)快速原型的環(huán)境,可以把你的UX/UI草圖快速連接起來。數(shù)字型的線框圖和高保真的設(shè)計(jì)可以幫你 測試app的工作情況,同時(shí)該工具還支持協(xié)作和分享功能,生成的在線原型可以支持任何人在產(chǎn)品原型的任何地方評論,便于準(zhǔn)確的交流。 針對iOS 開發(fā),InVision還增添了其他功能,比如自定義主屏幕icon和自定義加載頁面。 Mokk.me 是一個(gè)簡單快速的原型工具,通過界面上簡單的拖放操作,不用了解單線編程就能創(chuàng)作一個(gè)可以分享、測試以及多平臺(tái)的app。目前,Mokk.me正在測試 中,但它是一個(gè)簡單的基本的工具,任何人可以用它來創(chuàng)建app的布局。你可拖、放或者編輯小工具,可以搭建和連接頁面,還可以選擇過渡動(dòng)畫。它的特點(diǎn)還在 于頁面和按鈕、圖片小工具、文本輸入以及復(fù)選框形式。 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 這是adobe的一款矢量圖設(shè)計(jì)軟件,推薦給設(shè)計(jì)師轉(zhuǎn)型過來的PM(沒興趣的跳過),電商圈不推薦再去費(fèi)力學(xué)習(xí)其他軟件,達(dá)到溝通的目的提高效率是王道。上圖是設(shè)計(jì)出來的原型成品,可以結(jié)合上面提到的POP去演示,so easy。 寫在最后:蘿卜白菜各有所愛,沒有最好的工具,只有最順手的,最終的目的只有一個(gè)——溝通。 原文來自:互聯(lián)網(wǎng)分析沙龍
Pencil是一款開源的可以用來制作圖表和GUI原型的工具,可以作為一個(gè)獨(dú)立的app,也可以作為Firefox插件。內(nèi)置模版可以幫你繪制桌面和移動(dòng)界面中用到的各種各樣的用戶界面,包括流程圖、UI和一般的通用圖形。
Proto.io是一個(gè)專用的手機(jī)原型開發(fā)平臺(tái)——可以構(gòu)建和部署全交互式的移動(dòng)程序的原型,并且可以模擬出相似的成品。它可以運(yùn)行在大多數(shù)的瀏覽器中,并提供了3個(gè)重要的接口:dashboard、編輯器以及播放器。
是一個(gè)非常好的、免費(fèi)的HTML5應(yīng)用,通過它可以創(chuàng)建可愛樸素的線框圖、實(shí)體模型和UI概念。該程序使用起來非常簡單,并且有內(nèi)置的模板可以直接使用(模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等)。
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è)出色的原型。
OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結(jié)構(gòu)圖以及插圖等類型圖的app,也可以用來組織頭腦中思考的信息,曾獲得2002年的蘋果設(shè)計(jì)獎(jiǎng)。
JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以輸出Html頁面。與目前主流的交互設(shè)計(jì)工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更為專屬于設(shè)計(jì)移動(dòng)終端上app應(yīng)用。
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)行更新。
ProtoShare:在線網(wǎng)站開發(fā)協(xié)同制作工具是一個(gè)十分便捷的在線原型制作工具,側(cè)重于團(tuán)隊(duì)協(xié)作。團(tuán)隊(duì)成員可以通過這個(gè)工具對工作進(jìn)行審查,并及時(shí)提供反饋,對線框圖或內(nèi)容進(jìn)行建議。
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)換。
InVision是一個(gè)便捷的產(chǎn)品原型生成工具,用戶制作一個(gè)在線原型只需要四部:創(chuàng)建一個(gè)工程、上傳視覺設(shè)計(jì)稿、添加鏈接以及生成在線原型。
另外,你可以借助HTML、CSS以及JavaScript完成app其他一些功能,一旦你創(chuàng)建了原型,你還可以進(jìn)行分享,在iOS 和Android上進(jìn)行測試。
大多數(shù)都收費(fèi)了,對于準(zhǔn)備轉(zhuǎn)行 正在學(xué)習(xí)的人來說不友好,現(xiàn)在只有摹客是可以免費(fèi)支持100人以下團(tuán)隊(duì)的協(xié)作,上手也很簡單,小白入門爺們試用
互聯(lián)網(wǎng)軟件推薦
多用下載 http://www.duoyongxiazai.com
補(bǔ)充下:
互聯(lián)網(wǎng)軟件推薦
多用下載 http://www.duoyongxiazai.com
大家都說說自己用的原型工具吧,說說心得體會(huì)~!
mac版要花錢買……
?? 干貨!
話說…這評論表情好懷念,想起以前混人人的時(shí)候了 ??
看了這么多 都不知道選擇那個(gè)用了
作者如果能再詳細(xì)說明下每款設(shè)計(jì)工具的特點(diǎn)就好了;pop很愛,只是我的手繪嘛,有點(diǎn)菜 唉~~
哇哦,又學(xué)到了很多新知識(shí),贊一個(gè)~
還有sketch 也是非常推薦的 mac才有。
sketch要付費(fèi)購買吧?快七百呢
有沒有中文 的啊,英文是一大障礙
同問,有高手的話趕緊來回答,雖然我英語不錯(cuò),哈哈
請問怎么收藏呀 ??
文末右下角五角星
沒啥好糾結(jié)的,做移動(dòng)產(chǎn)品最好的選擇還是 騰訊出品的UID和AXURE。其他都是浮云。用一段時(shí)間就知道。
AXURE和騰訊沒啥關(guān)系