十大頂級原型設計工具，趕緊收！消失
【IT168 評論】編代碼之前，原型設計工具可以幫助程序員解決設計問題，即便審美不
行也沒關係，這些工具都有著很棒的模板可供選擇。與客戶快速分享不同迭代的可能性可
以顯著加速設計過程，接下來這十大原型設計工具值得一試。
1. Origami Studio
Origami最初由Facebook開發，以幫助團隊建立和設計產品。現在可以免費使用，程
序員可注冊為蘋果開發人員，使用Quartz Composer下載並安裝Xcode以使Origami在Mac上
順利運行。
與其他原型工具相比，此工具需要更多安裝工作。一旦安裝完成，就可以立刻開始創
建設計概念，模擬滾動、滑動和頁面鏈接。Sketch和Photoshop的設計可以導入Origami，
並且項目圖層將被保留，可以根據需要進行鏈接，動畫或轉換。Origami不以移動設計為
中心：可以設計響應式網站，並模擬文本輸入，FaceTime相機和OS X拖放等功能。
隻需點擊一下即可導出原型組件(包括動畫)，Origami還提供了演示工具，使用戶可
以為設計添加自定義背景，全屏查看，並模擬不同的設備。然而，缺點是無法讓客戶或設
計團隊直接對項目或版本記錄評論。
2. Webflow
Webflow真正的發光點是，當原型設計完成後，點擊一個按鈕就可以轉換為生產就緒
的網站。
最近，Webflow引入了新功能：一個用於原型的CMS。Webflow的CMS完全可視化，允許
創建強大的動態網站而無需編寫代碼，另一個特別有用的功能是使用博客頁面原型概念創
建博客。
如果你是自由設計師，並且難以找到程序員將你的設計變現，Webflow可以幫你。你
可以設置用戶帳戶或指定管理員來管理內容，也可以在客戶端直觀進行更改，或者將原型
導出到代碼中，Webflow干淨的語義代碼可以節省程序員幾個小時的代碼清理時間。
ADVERTISEMENT
Webflow附帶可以拖放到原型中的網站模板和Web組件。Webflow響應自然，網站布局
將針對所有設備進行優化：桌面設備，移動設備和平板電腦。如果這還不夠，你還可以設
計適用於移動設備和所有現代瀏覽器的動畫。Webflow還具有內置擴展性，可以輕鬆地將
直播原型連接到Slack，MailChimp，Google Drive以及超過400種其他服務。
3. Proto.io
Proto.io自帶的網站和應用程序模板可讓你快速啟動項目，現成的模板內置了多種互
動功能，整個應用程序在網絡上運行，所以可以在任何平台上運行Proto.io。但其每個功
能似乎都創建了一個新窗口(用於構建和實時預覽項目)。如果希望將標簽數量保持在最低
限度，那麼這可能是一件令人煩惱的事。
Proto.io最近發布了一些插件，可以通過簡單的拖放整合Sketch和Photoshop設計。
當導入文件時，Proto.io將文件保留在適當位置，用戶不必浪費時間重新對齊。如果已經
導入Proto.io，也可以繼續在Sketch或Photoshop中進行更改，Proto.io原型將自動更新
，不必重複導出和導入。
4. Framer
Framer是最受歡迎的原型設計工具之一。它可以通過代碼對任何東西進行原型製作，
從而創造出新的突破性設計。但該工具學習困難，不過Framer編碼語言的文檔結構非常良
好，並有很多學習資料。
Framer的Mac應用程序是精心設計的，可在編寫代碼時提供實時預覽。使用Framer，
用戶不會受到其他應用程序拖放工具的限制。此外，由於Framer使用代碼來構建原型，所
以可將實時數據從Twitter和Parse等來源整合到原型中。
像其他工具一樣，Framer支持Sketch和Photoshop項目，並且還將保留設計圖層。與
大多數工具不同的是，Framer還可以導入After Effects文件。當你準備好分享原型時，
Framer可以生成與客戶端共享的URL。這些可共享網址可在移動設備上打開以進行實時預
覽，Framer還可以對VR進行原型設計。
5. Vectr
Vectr是免費的，無論是桌面還是網絡瀏覽器，原型都將保持同步，隨時都可使用並
始終可訪問到最新更改。
ADVERTISEMENT
Vectr原型可與URL共享，並集成到諸如Slack之類的應用程序進行強大的協作。目前
，Vectr功能並不豐富，該應用程序的路線圖已經發布，詳細列出了功能列表。包括：完
全脫機桌面應用程序，更多平台，內置版本控製，內置設計資源市場，協同編輯，內置反
饋和注釋工具等。
6.Atomic
Atomic擁有漂亮的用戶界面和直觀易用的動畫時間軸，Atomic是一個需要運行
Google Chrome瀏覽器的Web應用程序，此外，沒有可用的桌面應用程序。
如果使用After Effects進行原型動畫，你將感覺到Atomic的動畫時間軸有多棒。
Atomic很靈活，方便調整交互，隻需點擊播放按鈕就可查看更改和動畫。
其曆史選項允許用戶快退以查看曆史迭代，並從任何角度創建新版本。對於iOS設計
人員，Atomic推出了帶有iOS設計元素庫的套件，以實現快速原型設計。你也可以直接將
自定義CSS添加到Atomic中，也可以導出CSS，簡單地將其複製並粘貼到項目中。
7.Easee
Easee是最令人印象深刻的原型設計工具之一，當很多人認為該產品是Steven Fabre
的激情項目時，Easee卻給人留下了深刻的印象。Easee的目標是幫設計師為網絡構建漂亮
的動畫，而無需編寫代碼。
使用Easee，你可以從Sketch和Photoshop中拖放圖層並開始動畫製作。Easee可以在
應用程序中創建平滑動畫並導出到CSS，因此可以將它們導入到實際的Web項目中，還可以
在網上查看動畫實時預覽。
8.InVision
ADVERTISEMENT
InVision可以說是世界上最流行的原型設計工具。該團隊不斷添加新功能，幫助設計
人員更高效地進行原型設計。InVision的最大功能是其對項目反饋的管理，客戶和設計團
隊可以直接在原型上提供意見。
將項目狀態傳達給客戶和團隊是至關重要的，通過InVision的項目管理頁面，用戶可
以將設計組件組織到狀態工作流中。例如，如果將設計組件拖入“進行中”隊列，客戶或
團隊查看狀態時會立即知道正在進行的工作。
前不久，InVision發布了一個稱為Boards的功能，它可用作演示工具，項目資產管理
器以及創建moodboards。
InVision的功能列表似乎永無止境：用戶可從Sketch或Photoshop導入設計文件，動
畫設計資源，鏈接頁面以模擬現實生活中的網站，並在移動設備上預覽原型，還有版本控
製，無限的免費用戶測試以及與Slack，Dropbox，Box等應用程序的集成等。
9.Adobe Comp
最近發布的iPad Pro告訴我們，許多廣告素材正在使用平板電腦開發項目。Adobe
Comp提供了將自然繪圖手勢轉換為生產就緒圖形所需的工具。
使用Adobe Comp，可以創建與Photoshop，Illustrator和InDesign無縫集成的打印，
Web和移動布局。Comp可與Adobe Stock和Typekit一起使用，從而提供圖像，圖形和數百
種字體，可以在設計原型時輕鬆整合。
Adobe Comp提供了開發和設計原型的新方法，並且由於其用戶友好的設計，實際上沒
有學習障礙。
10.Principle
Principle由OS X的前蘋果工程師構建，Principle具有可將原型導出到視頻或動畫
GIF的功能，可以在Dribbble，Twitter或任何地方共享!
Principle僅適用於Mac，如果你使用過Sketch，則原理界面將會非常熟悉。雖然
Principle不包括協作工具，但這種缺點可能會被其離線功能所掩蓋。
結論
這十大原型設計工具的功能都很強大，你可以結合團隊的特點和興趣選擇最適合的工
具。
http://pcdailyon.com/20170424_593416.html
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.141.56.86
※ 文章網址: https://www.ptt.cc/bbs/ColorGuard/M.1496500624.A.F18.html