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

第一類特點：簡單快速。

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

操作難度：低。

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

使用這一類的工具有一點明顯的好處，就是可以把UI設計師做好的圖片直接匯入當做介面，比如InVision和Flinto Lite，它們可以直接匯入PS或AI的設計檔案。然而，它們是，也只能是UI設計師的互動演示利器，因為這三款工具並不支援設定元件以及元件互動。

Chainco：

InVision： 

第二類特點：靈活輕快。

代表工具：Mockplus、Proto.io 6、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：

以上就是熊先生最近探索總結出的十款原型設計工具的推薦。每個人對原型設計的理解不同，對各類知識的掌握程度也不一樣，還是希望大家能夠根據自身的具體情況，多加琢磨，相信這十款工具中一定有一款是適合你的！