編代碼之前，原型設(shè)計工具可以幫助程序員解決設(shè)計問題，即便審美不行也沒關(guān)系，這些工具都有著很棒的模板可供選擇。與客戶快速分享不同迭代的可能性可以顯著加速設(shè)計過程，接下來這十大原型設(shè)計工具值得一試。

1. Origami Studio

Origami最初由Facebook開發(fā)，以幫助團隊建立和設(shè)計產(chǎn)品。現(xiàn)在可以免費使用，程序員可注冊為蘋果開發(fā)人員，使用Quartz Composer下載并安裝Xcode以使Origami在Mac上順利運行。

與其他原型工具相比，此工具需要更多安裝工作。一旦安裝完成，就可以立刻開始創(chuàng)建設(shè)計概念，模擬滾動、滑動和頁面鏈接。Sketch和Photoshop的設(shè)計可以導(dǎo)入Origami，并且項目圖層將被保留，可以根據(jù)需要進行鏈接，動畫或轉(zhuǎn)換。Origami不以移動設(shè)計為中心：可以設(shè)計響應(yīng)式網(wǎng)站，并模擬文本輸入，F(xiàn)aceTime相機和OS X拖放等功能。

只需點擊一下即可導(dǎo)出原型組件（包括動畫），Origami還提供了演示工具，使用戶可以為設(shè)計添加自定義背景，全屏查看，并模擬不同的設(shè)備。然而，缺點是無法讓客戶或設(shè)計團隊直接對項目或版本記錄評論。

2. Webflow

Webflow真正的發(fā)光點是，當(dāng)原型設(shè)計完成后，點擊一個按鈕就可以轉(zhuǎn)換為生產(chǎn)就緒的網(wǎng)站。

最近，Webflow引入了新功能：一個用于原型的CMS。Webflow的CMS完全可視化，允許創(chuàng)建強大的動態(tài)網(wǎng)站而無需編寫代碼，另一個特別有用的功能是使用博客頁面原型概念創(chuàng)建博客。

如果你是自由設(shè)計師，并且難以找到程序員將你的設(shè)計變現(xiàn)，Webflow可以幫你。你可以設(shè)置用戶帳戶或指定管理員來管理內(nèi)容，也可以在客戶端直觀進行更改，或者將原型導(dǎo)出到代碼中，Webflow干凈的語義代碼可以節(jié)省程序員幾個小時的代碼清理時間。

Webflow附帶可以拖放到原型中的網(wǎng)站模板和Web組件。Webflow響應(yīng)自然，網(wǎng)站布局將針對所有設(shè)備進行優(yōu)化：桌面設(shè)備，移動設(shè)備和平板電腦。如果這還不夠，你還可以設(shè)計適用于移動設(shè)備和所有現(xiàn)代瀏覽器的動畫。Webflow還具有內(nèi)置擴展性，可以輕松地將直播原型連接到Slack，MailChimp，Google Drive以及超過400種其他服務(wù)。

3. Proto.io

Proto.io自帶的網(wǎng)站和應(yīng)用程序模板可讓你快速啟動項目，現(xiàn)成的模板內(nèi)置了多種互動功能，整個應(yīng)用程序在網(wǎng)絡(luò)上運行，所以可以在任何平臺上運行Proto.io。但其每個功能似乎都創(chuàng)建了一個新窗口（用于構(gòu)建和實時預(yù)覽項目）。如果希望將標(biāo)簽數(shù)量保持在最低限度，那么這可能是一件令人煩惱的事。

Proto.io最近發(fā)布了一些插件，可以通過簡單的拖放整合Sketch和Photoshop設(shè)計。當(dāng)導(dǎo)入文件時，Proto.io將文件保留在適當(dāng)位置，用戶不必浪費時間重新對齊。如果已經(jīng)導(dǎo)入Proto.io，也可以繼續(xù)在Sketch或Photoshop中進行更改，Proto.io原型將自動更新，不必重復(fù)導(dǎo)出和導(dǎo)入。

4. Framer

Framer是最受歡迎的原型設(shè)計工具之一。它可以通過代碼對任何東西進行原型制作，從而創(chuàng)造出新的突破性設(shè)計。但該工具學(xué)習(xí)困難，不過Framer編碼語言的文檔結(jié)構(gòu)非常良好，并有很多學(xué)習(xí)資料。

Framer的Mac應(yīng)用程序是精心設(shè)計的，可在編寫代碼時提供實時預(yù)覽。使用Framer，用戶不會受到其他應(yīng)用程序拖放工具的限制。此外，由于Framer使用代碼來構(gòu)建原型，所以可將實時數(shù)據(jù)從Twitter和Parse等來源整合到原型中。

像其他工具一樣，F(xiàn)ramer支持Sketch和Photoshop項目，并且還將保留設(shè)計圖層。與大多數(shù)工具不同的是，F(xiàn)ramer還可以導(dǎo)入After Effects文件。當(dāng)你準(zhǔn)備好分享原型時，F(xiàn)ramer可以生成與客戶端共享的URL。這些可共享網(wǎng)址可在移動設(shè)備上打開以進行實時預(yù)覽，F(xiàn)ramer還可以對VR進行原型設(shè)計。

5. Vectr

Vectr是免費的，無論是桌面還是網(wǎng)絡(luò)瀏覽器，原型都將保持同步，隨時都可使用并始終可訪問到最新更改。

Vectr原型可與URL共享，并集成到諸如Slack之類的應(yīng)用程序進行強大的協(xié)作。目前，Vectr功能并不豐富，該應(yīng)用程序的路線圖已經(jīng)發(fā)布，詳細列出了功能列表。包括：完全脫機桌面應(yīng)用程序，更多平臺，內(nèi)置版本控制，內(nèi)置設(shè)計資源市場，協(xié)同編輯，內(nèi)置反饋和注釋工具等。

6.Atomic

Atomic擁有漂亮的用戶界面和直觀易用的動畫時間軸，Atomic是一個需要運行Google Chrome瀏覽器的Web應(yīng)用程序，此外，沒有可用的桌面應(yīng)用程序。

如果使用After Effects進行原型動畫，你將感覺到Atomic的動畫時間軸有多棒。Atomic很靈活，方便調(diào)整交互，只需點擊播放按鈕就可查看更改和動畫。

其歷史選項允許用戶快退以查看歷史迭代，并從任何角度創(chuàng)建新版本。對于iOS設(shè)計人員，Atomic推出了帶有iOS設(shè)計元素庫的套件，以實現(xiàn)快速原型設(shè)計。你也可以直接將自定義CSS添加到Atomic中，也可以導(dǎo)出CSS，簡單地將其復(fù)制并粘貼到項目中。

7.Easee

Easee是最令人印象深刻的原型設(shè)計工具之一，當(dāng)很多人認為該產(chǎn)品是Steven Fabre的激情項目時，Easee卻給人留下了深刻的印象。Easee的目標(biāo)是幫設(shè)計師為網(wǎng)絡(luò)構(gòu)建漂亮的動畫，而無需編寫代碼。

使用Easee，你可以從Sketch和Photoshop中拖放圖層并開始動畫制作。Easee可以在應(yīng)用程序中創(chuàng)建平滑動畫并導(dǎo)出到CSS，因此可以將它們導(dǎo)入到實際的Web項目中，還可以在網(wǎng)上查看動畫實時預(yù)覽。

8.InVision

InVision可以說是世界上最流行的原型設(shè)計工具。該團隊不斷添加新功能，幫助設(shè)計人員更高效地進行原型設(shè)計。InVision的最大功能是其對項目反饋的管理，客戶和設(shè)計團隊可以直接在原型上提供意見。

將項目狀態(tài)傳達給客戶和團隊是至關(guān)重要的，通過InVision的項目管理頁面，用戶可以將設(shè)計組件組織到狀態(tài)工作流中。例如，如果將設(shè)計組件拖入“進行中”隊列，客戶或團隊查看狀態(tài)時會立即知道正在進行的工作。

前不久，InVision發(fā)布了一個稱為Boards的功能，它可用作演示工具，項目資產(chǎn)管理器以及創(chuàng)建moodboards。

InVision的功能列表似乎永無止境：用戶可從Sketch或Photoshop導(dǎo)入設(shè)計文件，動畫設(shè)計資源，鏈接頁面以模擬現(xiàn)實生活中的網(wǎng)站，并在移動設(shè)備上預(yù)覽原型，還有版本控制，無限的免費用戶測試以及與Slack，Dropbox，Box等應(yīng)用程序的集成等。

9.Adobe Comp

最近發(fā)布的iPad Pro告訴我們，許多廣告素材正在使用平板電腦開發(fā)項目。Adobe Comp提供了將自然繪圖手勢轉(zhuǎn)換為生產(chǎn)就緒圖形所需的工具。

使用Adobe Comp，可以創(chuàng)建與Photoshop，Illustrator和InDesign無縫集成的打印，Web和移動布局。Comp可與Adobe Stock和Typekit一起使用，從而提供圖像，圖形和數(shù)百種字體，可以在設(shè)計原型時輕松整合。

Adobe Comp提供了開發(fā)和設(shè)計原型的新方法，并且由于其用戶友好的設(shè)計，實際上沒有學(xué)習(xí)障礙。

10.Principle

Principle由OS X的前蘋果工程師構(gòu)建，Principle具有可將原型導(dǎo)出到視頻或動畫GIF的功能，可以在Dribbble，Twitter或任何地方共享！

Principle僅適用于Mac，如果你使用過Sketch，則原理界面將會非常熟悉。雖然Principle不包括協(xié)作工具，但這種缺點可能會被其離線功能所掩蓋。

結(jié)論

這十大原型設(shè)計工具的功能都很強大，你可以結(jié)合團隊的特點和興趣選擇最適合的工具。