這是25學(xué)堂分享的五款國外優(yōu)質(zhì)的移動APP原型設(shè)計工具。同時也對每款移動APP原型設(shè)計工具的優(yōu)缺點進行點評。
另外,這五款國外APP原型設(shè)計工具都是需要付費的。因為確實好用。功能的也很強大。
1、Proto.io
基于Web界面,帶有IOS和安卓下的調(diào)試器
Proto.io這個web應(yīng)用強大得令人吃驚,它有很多很多的功能。不過,因為所有工作都是依靠拖放、點擊按鈕和選擇列表的值,有時候想找到需要的設(shè)定會讓人有點兒不知所措。
鑒于IF原型的本質(zhì)特點——不同的對象以不同的速度移動——我不得不增加一些自定義的JavaScript計算腳本。Proto.io提供的單行文本框?qū)τ谌唛L的計算腳本來說太小了。為了能夠概覽腳本,我得把它們保存在我電腦上的文本文件里。特別需要注意是,這些JavaScript運算式可能會失敗,卻沒有任何警告信息。如果有些東西不工作,一定要檢查瀏覽器的控制臺。(我遇到一個錯誤,是一個包含負值的變量造成的。)
創(chuàng)建原型的同時預(yù)覽
這個相當(dāng)讓人惱火:你必須每次都點擊 [ Save Project ] 然后點 [ Preview ] 才能看到你作出修改后的效果。
把原型發(fā)給客戶
在網(wǎng)頁上:簡單——你可以生成一個公網(wǎng)鏈接,就像這個。(這些連接也可以用移動瀏覽器打開,然后作為一個“app”添加到IOS主屏上。)你可以在?Proto.io Spaces?向公眾用戶展示你的作品。
在移動設(shè)備上:你可以給用戶建立免費的評估帳號,允許他們訪問一個項目。他們可以在IOS或安卓app里運行你的原型。
原型跟app的區(qū)別
不多。不過動效不夠流暢,因為我不得不在滾動視圖里添加很多包含自定義JavaScript計算腳本的交互功能。在web上跑得蠻好的,但是在設(shè)備上實在太慢了。似乎更簡單的原型回放速度能正常些。
優(yōu)點
易于制作快速的實體模型,因為有大量的標(biāo)準(zhǔn)UI元素庫,而且很多是可以定制的。
Proto.io在這五種工具中是唯一一個同時也是基于頁面的。你可以在一個項目中包含多個屏,屏之間可以創(chuàng)建過渡效果。
支持元件跟Dropbox同步。
缺點
沒有即時預(yù)覽。
如果加了很多交互,像本文的例子一樣,動效會變慢。
你的所有原型都保存在Proto.io的web平臺上,這意味著如果你要取消你的帳號,你連運行它們都不再能了。(有個可能是你把帳號“寄存”:當(dāng)你重新激活帳號,你的項目還會在那兒。寄存帳號是免費的。)
3D動效不可能。
原型范例
在?Proto.io Spaces上查看(注冊一個帳號,把項目導(dǎo)入到你的帳號就能看了。)
iOS app:
Android app:
價格:
29美元/月,或者288美元/年,可以有5個活躍項目。還有10、15、30個活躍項目的套餐,以及一個15日免費試用期。
2、Pixate
OS X和Windows桌面應(yīng)用,IOS和安卓調(diào)試器
Pixate似乎恰到好處的平衡了易用性和功能性:它比簡單的基于頁面的工具功能更多,但學(xué)習(xí)曲線并不很陡。仔細看過用戶指南和視頻教程后你就能上手了。還有幾個演示供你解構(gòu),看看它們是怎么做出來的。
預(yù)覽
Pixate Studio可以使用Xcode的IOS Simulator(Mac版)來運行原型,也可以通過本地WiFi用IOS或安卓app來訪問原型。這個功能很棒,特別是Simulator和app都是即時更新的。
發(fā)給客戶
如果你有云套餐(5美元/月),你可以發(fā)布一個項目,人們可以用IOS或安卓調(diào)試器掃描這個網(wǎng)頁上的二維碼來運行原型。
你可以在你的云帳號里增加無限量的"協(xié)作者",允許他們訪問原型,他們必須在調(diào)試器app中登錄自己的帳號才能訪問。
或者,你可以僅僅把.pixate文件用郵件發(fā)給別人,他們可以在Pixate Studio中打開并運行(但同時客戶也能看到原型是怎么做的,還能做出修改)。
跟app的區(qū)別
第六個頁面會消失,因為Pixate的canvas畫布只有這么寬(最多五個頁面)。
優(yōu)點
易于學(xué)習(xí)
缺點
依舊有些問題,有時可能需要繞開bug。
原型范例
Mac或PC應(yīng)用:
移動應(yīng)用:
價格:
Pixate Studio
免費!(曾經(jīng)149美元,直到谷歌于2015年7月收購Pixate。)
Pixate Cloud
5美元/用戶/月 或者 50美元/用戶/年,有30天免費試用期。
3、Facebook Origami
運行在蘋果公司的Mac版Quartz Composer中,iPhone或iPad上有個查看器用來測試。
你很可能已經(jīng)知道,Origami是Facebook?Paper的設(shè)計團隊開發(fā)的。Origami不是個獨立程序,它相當(dāng)于Quartz Composer的一個插件。而Quartz Composer是一個可視化程序設(shè)計環(huán)境,蘋果公司開發(fā)工具集的一部分。
在Quartz Composer里,你通過把多個“patch”相互連接來進行編程。不同的patch有不同的功能。Origami主要是一套額外的patch,用來設(shè)計app UI。與必須寫代碼相比,很多人更喜歡這種方式(不包括我)。但是,當(dāng)你必須描述諸如“如果這樣,那么就用這段計算的值那樣做,但如果不是這樣....”,你還是不得不“編程”,只不過這個編程是通過連接幾個patch,而不是寫幾行代碼。
另外提一下:IDEO也基于Quartz Composer創(chuàng)建了一個原型設(shè)計框架,叫Avocado。它有的一些功能,在某些項目里可能會很方便:藍牙集成、一個IOS交互式鍵盤、一個像滾輪那樣交互的撥號盤patch、和一個可翻轉(zhuǎn)的卡片patch,而且層也可以做成可拖拽的。
預(yù)覽
在桌面:Quartz Composer有一個查看器,你在編輯器里的任何修改會在查看器里即時得到反映。
在設(shè)備上:用Origami Live app,你可以在IOS設(shè)備上測試,IOS設(shè)備需要插在Mac上。app對所有手勢(觸摸、滑動等)都會作出反應(yīng),但實際上只是Quartz Composer里運行的程序的觀察窗而已。如果你的Mac難以以60fps運行原型,那么它在Origami Live里面也跑不了多快。
發(fā)給客戶
這個就難了。你當(dāng)然可以給你的原型做一個屏幕錄像,但是這樣就達不到做一個交互式原型的目的了,還不如用After Effects做點什么呢。唯一一個在其它電腦上測試原型的現(xiàn)實辦法是準(zhǔn)備相同的配置。如果你的客戶用Mac,她可以安裝Quartz Composer + Origami來運行你的原型——當(dāng)然,還得首先注冊蘋果開發(fā)者帳號。
跟app的區(qū)別
可能會比真家伙慢一點兒,這取決于你的電腦。Quartz Composer絕對是個電老虎,會讓你的散熱風(fēng)扇狂轉(zhuǎn)的,尤其是當(dāng)你的Mac沒有強大的顯卡(比如我的Mac Mini),或者連接了多個顯示器(罪過?。N抑挥靡慌_顯示器,最多才能跑到20fps。
優(yōu)點
文檔雖然有些不全,但是有個非?;钴S的用戶社區(qū)。此外,你還可以找到不少的視頻、教程和博文。
缺點
不容易知道活兒該怎么做,有那么多patch,不知道該用哪個。
Quartz Composer否保持活躍開發(fā)現(xiàn)在還不清楚,最近的版本是2011年11月份發(fā)布的。但另一方面,蘋果公司很可能會在擱置這個工具之前,發(fā)行一個使用Quartz框架的替換工具來做可視化交互設(shè)計。
原型范例
Mac 應(yīng)用:
IOS查看器:
價格:
免費!你還需要一個蘋果開發(fā)者帳號,那也是免費的,就像啤酒、或者隨便蘋果公司的開發(fā)人員喝的什么。(譯者注:蘋果公司每隔數(shù)周都會舉行“啤酒狂歡”獎勵員工,為他們提供免費啤酒和開胃菜。)
4、Framer
Framer Studio是Mac上的原型設(shè)計應(yīng)用,但Framer.js僅需要Safari或Chrome.
交互原型設(shè)計框架?Framer.js ?官網(wǎng):http://framerjs.com/
這里沒有拖放、按鈕或連接點,用Framer你必須“寫代碼”。程序員會覺得這跟在家一樣自在,而設(shè)計師就未必了。不過它并不很難————Framer Studio使用了一款精簡版的JavaScript,叫CoffeeScript。實際的引擎(Framer.js)使用JavaScripts,這就造就了大量的可能性:只要瀏覽器可以做的你都能做,比如使用即時數(shù)據(jù)連接服務(wù)器,或者創(chuàng)建一個Twitter客戶端顯示實時推文。
預(yù)覽
在桌面:Framer Studio在右側(cè)有個即時可交互的預(yù)覽,你做的修改可以馬上更新。
在設(shè)備上:有安卓和IOS下的app,在同一個WiFi網(wǎng)絡(luò)里它們都可以連接到Framer Studio,每次在Framer Studio保存修改后會自動刷新原型。
發(fā)給客戶
只需點一下鼠標(biāo)就能生成一個公開頁面(比如這個),可以用Chrome或Safari查看,移動瀏覽器也行(鏈接可以作為“應(yīng)用”加入到IOS主屏)。同樣的鏈接也能用IOS和安卓查看器(其實就是無邊框的瀏覽器)打開。像IF這樣較大的原型在查看器里加載需要花幾秒鐘,但加載后動效就平滑了。
跟app的區(qū)別
這個原型比其它四個更能干一些:你可以在最近的一頁切換登錄、注冊和重置密碼模式。(你并不能真正的登錄或注冊,但這些操作在Framer里也能再現(xiàn)。)
優(yōu)點
與 Sketch 或 Photoshop的集成是再好不過了:設(shè)計的時候可以用你給的命名來引用層或?qū)ο?。(Framer.js包含一個Mac應(yīng)用Framer Generator,也能做到這一點。)
任何JavaScript能做到的——比如從web service獲得即時數(shù)據(jù),使用加速度傳感器——用Framer都是可以實現(xiàn)的。
缺點
你必須為所有東西寫代碼,包括動效或交互。你需要熟悉或者了解CoffeeScript,或許再加上JavaScript。
原型范例
Mac應(yīng)用:
iOS app:
Android app:
價格:
Framer.js,JavaScript框架,是開源免費的。
Framer Studio 需要99美元。(有14天免費試用期。)
5、Form by RelativeWave
Mac應(yīng)用,帶有一個iPhone或iPad上的查看器
Form還很年輕(2014年9月發(fā)布),而且很明顯,它是從Facebook和IDEO在Quartz Composer上所做的得到了啟發(fā)。RelativeWave的那些家伙很可能想:“如果沒有Quartz Composer這個包袱,Origami會是什么樣呢?” Origami用戶會覺得Form用起來很舒服,很多patch是相同的,而且Form只包含你需要的那些patch。
預(yù)覽
原型是在通過WiFi或USB連接的IOS設(shè)備上運行的。如果沒有設(shè)備連上,你會發(fā)現(xiàn)雙擊兩個patch之間的連接時不會有讀數(shù)顯示出來。如果像Quartz Composer那樣,Mac應(yīng)用里帶個查看器的話肯定是很方便的,這個功能似乎已經(jīng)在計劃中了。
發(fā)給客戶
免費的IOS查看器能夠打開.form文件,你只需要把文件用郵件發(fā)給客戶,讓他們用自己的IOS設(shè)備運行即可。
跟app的區(qū)別
我覺得不多。如果你發(fā)現(xiàn)了就告訴我。
優(yōu)點
與Origami相比:原型在設(shè)備上是以原生方式運行的,所以比Origami Live反應(yīng)靈敏得多。
你可以使用設(shè)備上的相機、加速度傳感器、陀螺儀和定位功能。(Origami可以使用Mac上的攝像頭)
缺點
跟Origami一樣,如果搞了一個復(fù)雜的原型,跑起來就像面湯一樣粘呼呼的。把patch組合起來能夠獲得更好的概覽效果。
原型范例
Mac應(yīng)用:
iOS app:
價格
免費!Mac應(yīng)用曾經(jīng)是79.99美元,谷歌去年11月(那時Form發(fā)布了僅僅數(shù)月)收購了RelativeWave之后就免費提供了。
全站高品質(zhì)素材免費下載!