十大頂級原型設計工具
編代碼之(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年度頂級開源創作工具