10款原型設計工具推薦

最近看到網上不少的文章在推薦一些與UI/UX設計相關的書籍和網站，熊先生想了想，決定寫一篇推薦原型設計工具的文章，和你們一塊兒分享一下。這一次我收集了10款工具，根據特色的不一樣，主要分爲如下三類：簡單快速、靈活輕快、功能全面。

第一類特色：簡單快速。

表明工具：Chainco、InVision、Flinto Lite。

操做難度：低。

就像Chainco的標語同樣，這一類工具是UI設計師的交互演示利器。三款工具都是在網頁端進行設計，雖然風格略有不一樣，但實質上是大同小異。交互的設置上多以建立熱區爲基礎，點擊熱區跳轉頁面爲主要功能，幾乎不須要任何學習成本，也沒有什麼操做難度。國內用戶可能對Chainco更熟悉一點，但Chainco尚未國外的版本，並且因爲具備協做功能等緣由，InVision顯現出更加優秀的一面，也贏得了更多國外用戶的青睞。

使用這一類的工具備一點明顯的好處，就是能夠把UI設計師作好的圖片直接導入當作界面，好比InVision和Flinto Lite，它們能夠直接導入PS或AI的設計文件。然而，它們是，也只能是UI設計師的交互演示利器，由於這三款工具並不支持設置組件以及組件交互。

Chainco：

InVision： 

第二類特色：靈活輕快。

表明工具：Mockplus、Proto.io 六、UXPin、Flinto for Mac。

操做難度：適中。

在第二類的四款工具都是進行交互設計的好幫手，它們的共同特色就是設計上相對的輕便快捷。好比Flinto for Mac，只須要根據層級移動組件位置，就能夠創造出對應的交互效果。同時，這些工具雖然看上去操做方式並非徹底一致，但它們都不約而同的採用了拖拽連接點來做爲基本的操做方式。這種操做中的高度可視化，使得設計的過程變得十分簡單有效。

Mockplus能夠說是在這四款工具中比較具備表明性的，相對於Proto.io 6這種由小組件組成容器，再由容器組合爲其餘組件的設計模式，Mockplus則是更多的直接提供高度封裝組件。做爲一個「懶人」，熊先生對這種化繁爲簡的方式甚是喜好。並且依靠着這種簡單的操做方式和程序自己自帶的超過2000枚的矢量圖標，你甚至能夠在徹底沒有網絡的狀況下仍然出色地完成原型設計。導出的演示包、HTML的離線包也會讓預覽變得不受網絡的限制。

Flinto for Mac：

Mockplus：

這一類工具的學習成本和操做難度相對於第一類確實是要高一些的，可是若是和下面的第三類比較，那你就會發現，第二類工具的學習成本，還真的是低得很啊。

第三類特色：功能全面。

表明工具：Axure RP、Justinmind、Framer JS。

操做難度：高。

原型設計想作到功能全面，那就不免會和代碼掛上鉤。這一類中，Axure應該是你們更爲熟悉的一個。也能夠說，Axure是原型設計工具中在設計難度和可用性上平衡把握的比較好的一個了。可是，即使如此，它的變量、判斷等等功能仍是難倒了許多交互設計師。

若是說Axure是在尋求平衡，那麼Framer JS則是在詮釋着到底什麼纔是用代碼「寫」原型。這纔是這一類中真正以代碼爲基礎的原型設計工具，只要可以寫出相應的代碼，它就能夠把你的想法統統變成現實。

這一類工具功能雖然相對全面，可是學習成本被大幅提高，尤爲是Framer JS，功能強大到使其餘工具可望不可即，但其學習成本也能夠說是「十年磨一劍」。因此，想要熟練運用這一類工具，最好仍是先掌握了足夠的知識，再來嘗試。

Framer JS：

以上就是熊先生最近探索總結出的十款原型設計工具的推薦。每一個人對原型設計的理解不一樣，對各種知識的掌握程度也不同，仍是但願你們可以根據自身的具體狀況，多加琢磨，相信這十款工具中必定有一款是適合你的！