十大頂級原型設計工具
編代碼之(zhi)前,原(yuan)型設計(ji)工具(ju)(ju)可以(yi)幫助程序(xu)員解決設計(ji)問題(ti),即(ji)便(bian)審美不行也沒關系,這(zhe)些工具(ju)(ju)都有著(zhu)(zhu)很棒的模板可供選擇。與客戶(hu)快速分享不同迭代的可能性可以(yi)顯著(zhu)(zhu)加速設計(ji)過程,接下來這(zhe)十大原(yuan)型設計(ji)工具(ju)(ju)值得一試。
1. Origami Studio
Origami最初由Facebook開發,以幫(bang)助(zhu)團隊建(jian)立和設計產品。現在(zai)可(ke)以免費使用,程序員可(ke)注冊為蘋果開發人員,使用Quartz Composer下載(zai)并安裝(zhuang)Xcode以使Origami在(zai)Mac上順(shun)利運行。
與其他原型工具相比,此工具需要更多安裝工作。一旦安裝完成,重慶多媒體制作就可以立刻開始創建設計概念,模擬滾動、滑動和頁面鏈接。Sketch和Photoshop的設計可以導入Origami,并且項目圖層將被保留,可以根據需要進行鏈接,動畫或轉換。Origami不以移動設計為中心:可以設計響應式網站,并模擬文本輸入,FaceTime相機和OS X拖放等功能。
只需點擊一下即可導出原型組(zu)件(jian)(包括(kuo)動畫),Origami還提供了演示工具,使用戶可以為設(she)計添加(jia)自定義背景,全屏查看(kan),并模擬不同的設(she)備。然而,缺點是無(wu)法讓客(ke)戶或(huo)設(she)計團隊直接對項目或(huo)版本記錄評(ping)論。
2. Webflow
Webflow真(zhen)正的發光點是(shi),當(dang)原型設計(ji)完成后,點擊一個按(an)鈕就可以轉換為(wei)生產就緒的網站。
最近,Webflow引入了新功能:一個用于原型的CMS。Webflow的CMS完全可視化,允許創建強大的動態網站而無需編寫代碼,另一個特別有用的功能是使用博客頁面原型概念創建博客。
如果你是自由設計(ji)師,并且難(nan)以(yi)(yi)找到程(cheng)序(xu)員(yuan)將(jiang)你的(de)設計(ji)變現(xian),Webflow可(ke)以(yi)(yi)幫你。你可(ke)以(yi)(yi)設置(zhi)用(yong)戶(hu)帳(zhang)戶(hu)或指(zhi)定管(guan)理員(yuan)來管(guan)理內容,也可(ke)以(yi)(yi)在客戶(hu)端(duan)直(zhi)觀進行更改,或者將(jiang)原型(xing)導出到代(dai)(dai)碼中,Webflow干凈的(de)語義代(dai)(dai)碼可(ke)以(yi)(yi)節省程(cheng)序(xu)員(yuan)幾個小時(shi)(shi)的(de)代(dai)(dai)碼清理時(shi)(shi)間(jian)。
Webflow附帶可(ke)以拖放到原型中(zhong)的網站模板(ban)和(he)Web組件。Webflow響(xiang)應自然,網站布局將針對所有設(she)備進(jin)行(xing)優化:桌面設(she)備,移動(dong)設(she)備和(he)平板(ban)電腦。如果這還不夠,你還可(ke)以設(she)計適用于移動(dong)設(she)備和(he)所有現代瀏覽器的動(dong)畫。Webflow還具有內置擴展性(xing),可(ke)以輕松地(di)將直播原型連接到Slack,MailChimp,Google Drive以及超過400種其他服務(wu)。
3. Proto.io
Proto.io自(zi)帶(dai)的(de)網站(zhan)和(he)應用程(cheng)序模板可(ke)讓(rang)你快速(su)啟動(dong)項(xiang)目(mu),現成的(de)模板內置了多種互動(dong)功能,整(zheng)個(ge)應用程(cheng)序在(zai)(zai)網絡上運(yun)行,所以可(ke)以在(zai)(zai)任何平臺上運(yun)行Proto.io。但其每(mei)個(ge)功能似乎都創建了一(yi)個(ge)新窗口(kou)(用于構建和(he)實(shi)時預覽項(xiang)目(mu))。如果希望將(jiang)標(biao)簽數量保持(chi)在(zai)(zai)最低(di)限度,那么這可(ke)能是(shi)一(yi)件令人煩惱(nao)的(de)事。
Proto.io最近發布了一些插件,可以通過簡單的拖放整合Sketch和Photoshop設計。當導入文件時,Proto.io將文件保留在適當位置,用戶不必浪費時間重新對齊。如果已經導入Proto.io,也可以繼續在Sketch或Photoshop中進行更改,Proto.io原型將自動更新,不必重復導出和導入。
4. Framer
Framer是最受歡迎的原型設計工具之一。重慶動畫公司可以(yi)通過(guo)代碼對任何(he)東西進行原型制作,從而(er)創造出新的突破性設計。但該(gai)工具學習(xi)困難,不過(guo)Framer編碼語言的文檔結(jie)構(gou)非(fei)常良(liang)好,并有很多學習(xi)資料。
Framer的Mac應用程序是精心設計的,可在編寫代碼時提供實時預覽。使用Framer,用戶不會受到其他應用程序拖放工具的限制。此外,由于Framer使用代碼來構建原型,所以可將實時數據從Twitter和Parse等來源整合到原型中。
像(xiang)其他工(gong)具(ju)一樣,Framer支(zhi)持Sketch和(he)Photoshop項(xiang)目,并且還(huan)將保留設(she)計圖層。與大多數工(gong)具(ju)不同的(de)是,Framer還(huan)可以(yi)導(dao)入After Effects文件。當你準備好分享原型(xing)時,Framer可以(yi)生成(cheng)與客戶(hu)端(duan)共享的(de)URL。這些可共享網址(zhi)可在(zai)移動設(she)備上打開以(yi)進(jin)行實時預覽,Framer還(huan)可以(yi)對VR進(jin)行原型(xing)設(she)計。
5. Vectr
Vectr是(shi)免費(fei)的,無(wu)論是(shi)桌面還是(shi)網絡瀏覽器,原型都將保(bao)持同(tong)步,隨(sui)時都可(ke)使用并始終可(ke)訪(fang)問到最新更改。
Vectr原型可與URL共享,并集成到諸如Slack之類的應用程序進行強大的協作。目前,Vectr功能并不豐富,該應用程序的路線圖已經發布,詳細列出了功能列表。包括:完全脫機桌面應用程序,更多平臺,內置版本控制,內置設計資源市場,協同編輯,內置反饋和注釋工具等。
6.Atomic
Atomic擁有漂亮(liang)的用(yong)戶界面和(he)直觀易(yi)用(yong)的動畫時間(jian)軸,Atomic是(shi)一個需要運(yun)行(xing)Google Chrome瀏覽器的Web應用(yong)程序,此外(wai),沒有可用(yong)的桌(zhuo)面應用(yong)程序。
如果使用After Effects進行原型動畫,你將感覺到Atomic的動畫時間軸有多棒。Atomic很靈活,方便調整交互,只需點擊播放按鈕就可查看更改和動畫。
其歷史(shi)選項(xiang)允許用(yong)戶快(kuai)(kuai)退(tui)以(yi)查看歷史(shi)迭代,并從(cong)任(ren)何角度創建新版本。對于(yu)iOS設(she)計(ji)人員,Atomic推出(chu)了帶有iOS設(she)計(ji)元素庫(ku)的套件,以(yi)實現快(kuai)(kuai)速原型設(she)計(ji)。你(ni)也(ye)可(ke)以(yi)直接(jie)將自定義(yi)CSS添加(jia)到(dao)Atomic中,也(ye)可(ke)以(yi)導出(chu)CSS,簡單地(di)將其復制并粘貼到(dao)項(xiang)目中。
7.Easee
Easee是(shi)最令人印(yin)象深(shen)刻(ke)的(de)(de)原型設計(ji)工具之一,當很多(duo)人認為該產品是(shi)Steven Fabre的(de)(de)激情(qing)項(xiang)目(mu)時,Easee卻給人留下了(le)深(shen)刻(ke)的(de)(de)印(yin)象。Easee的(de)(de)目(mu)標是(shi)幫設計(ji)師為網(wang)絡構建漂亮(liang)的(de)(de)動畫,而無需(xu)編寫代碼。
使用Easee,你可以從Sketch和Photoshop中拖放圖層并開始動畫制作。Easee可以在應用程序中創建平滑動畫并導出到CSS,因此可以將它們導入到實際的Web項目中,還可以在網上查看動畫實時預覽。
8.InVision
InVision可(ke)以(yi)說是世界(jie)上(shang)最(zui)流行的(de)原(yuan)型(xing)設(she)計(ji)工具(ju)。該團(tuan)隊(dui)不斷添(tian)加新功能,幫助設(she)計(ji)人員更高(gao)效地進行原(yuan)型(xing)設(she)計(ji)。InVision的(de)最(zui)大功能是其對項目反饋的(de)管理,客戶和設(she)計(ji)團(tuan)隊(dui)可(ke)以(yi)直接(jie)在原(yuan)型(xing)上(shang)提供意見。
將項目狀態傳達給客戶和團隊是至關重要的,通過InVision的項目管理頁面,用戶可以將設計組件組織到狀態工作流中。例如,如果將設計組件拖入“進行中”隊列,客戶或團隊查看狀態時會立即知道正在進行的工作。
前不久,InVision發布了(le)一個稱為Boards的功能,它可(ke)用作演示工具,項目資產管理器(qi)以及(ji)創建moodboards。
InVision的功能列表似乎永無止境(jing):用(yong)(yong)戶(hu)(hu)可從(cong)Sketch或Photoshop導入設計(ji)文(wen)件(jian),動畫(hua)設計(ji)資源(yuan),鏈接頁面以(yi)模擬現實(shi)生活中(zhong)的網站,并在移動設備上預(yu)覽原型,還有版本控制(zhi),無限(xian)的免費(fei)用(yong)(yong)戶(hu)(hu)測試以(yi)及與(yu)Slack,Dropbox,Box等應用(yong)(yong)程序的集成等。
9.Adobe Comp
最近發布的iPad Pro告(gao)訴我們(men),許多廣告(gao)素材正在使用平板電(dian)腦開發項目。Adobe Comp提供了(le)將自然(ran)繪圖手勢轉換為生產就緒圖形所(suo)需的工(gong)具(ju)。
使用Adobe Comp,可以創建與Photoshop,Illustrator和InDesign無縫集成的打印,Web和移動布局。Comp可與Adobe Stock和Typekit一起使用,從而提供圖像,圖形和數百種字體,可以在設計原型時輕松整合。
Adobe Comp提供了開發和(he)設(she)計(ji)原型的(de)新方(fang)法(fa),并且由(you)于其用戶友好的(de)設(she)計(ji),實際(ji)上沒有學習障礙。
10.Principle
Principle由OS X的前蘋果工程師構建,Principle具有可將原型導出到視頻或動畫GIF的功能,重慶flash制作可以(yi)在Dribbble,Twitter或(huo)任何(he)地方共享!
Principle僅適用于(yu)Mac,如果你使用過Sketch,則(ze)原(yuan)理界面將會非常(chang)熟悉。雖然(ran)Principle不包括協作工具,但(dan)這種缺點可(ke)能(neng)會被其(qi)離線功能(neng)所掩蓋。
上一篇:2018年度頂級開源創作工具