瞭解原型設計的工具

原型設計的工具備哪些

交互原型設計工具（僅限頁面交互）

這一類工具主要是創建頁面之間的交互。其自己不能進行組件的製做和設計，須要從其它地方（例如：PS，本地）導入設計圖，對已有的設計圖建立熱點，進行交互設計。

Invision - 一款很好的製做原型交互演示的工具。你能夠從本地、Dropbox、Google Drive和Box上傳圖片。使用拖拽快速建立熱點。它的分享、協做、評論功能也很方便。

Chianco- 一款輕量級的交互原型設計工具。拖一拖鼠標， 快速建立交互；內置多種轉場和觸發效果，點一點就可使用；掃一掃，直接在手機上預覽效果，也能夠導出HTML，分享給同事。

Marvel - 一款簡單易用的原型工具。只需幾回簡單的點擊，就能將靜態的設計圖連接起來，變成可點擊的原型圖。

Flinto for Mac - 一款Mac端的交互原型設計工具。支持一鍵將 Sketch設計稿導入， 添加熱點配合相應的交互動做生成原型經過網頁或者手機端展現給客戶觀看。

Atomic - 能夠用來快速設計交互和動畫的原型工具，不管是手機原型仍是桌面端原型，都是不錯的選擇。

 

手機原型工具

這類工具內置了製做手機原型的組件，能夠建立和編輯組件。設計時，能夠選擇不一樣的手機模型。在手機預覽很方便。

Proto.io - 用Proto.io作手機原型是一個比較好的選擇。有默認手機的組件庫，拖出來進行簡單的屬性設置就能夠用了。也支持交互設計，支持的觸發和動做比較豐富。

Mockplus - Mockplus提供了大量的手機組件和圖標，可以快速上手進行設計。設計前能夠選擇不一樣尺寸的手機模型，能夠經過多種方式在手機上進行預覽：發佈項目，而後在手機瀏覽器中查看、手機端輸入原型碼、掃描二維碼。設計手機原型十分快捷。

Fluid - Fluid 是一款在線原型設計工具，比較適合移動App原型的製做，包括iOS，Android以及穿戴設備。

Pixate - 用Pixate能夠實現複雜的交互和動畫，它也只能用於手機端原型的製做。

Justinmind - 能夠自制高保真手機原型。支持複雜的交互、動畫和手勢。同時也是須要投入較高學習成本的工具。

 

網頁原型工具

這類工具比較適合網頁原型的製做。

Axure - 功能全面的原型設計工具，能夠實現複雜的交互，須要投入較多的學習時間。

Webflow - 一款能夠生成代碼的原型設計工具，適合網頁原型的製做，中等學校難度。

Webydo - 能夠自制高保真網頁原型的工具，不過學習難度也很高。

Indigo Studio - 這款工具便可以讓你導入設計圖進行交互設計，也提供了組件設計的功能。

Protoshare - 中等學習難度的在線原型設計工具，可用於設計具備交互效果的網頁原型。

 

靜態原型

這些工具總體來講操做比較簡單，功能也比較簡單，只能用於設計靜態原型。

Fluid - Fluid是一款簡單的在線原型設計工具，不能設計交互，可用於靜態原型的設計。

Balsamiq Mockups - 手繪風格的原型設計軟件，操做簡單，初學者能夠嘗試用來設計靜態網頁原型。

Mockflow - 一款比較簡單的靜態原型製做工具。

 

動態原型工具（組件和頁面交互）

Axure - 老牌原型工具，可以實現複雜的交互。

Mockplus - 新興的原型設計工具，Mockplus封裝了經常使用的交互組件，實現了交互的可視化。不管是頁面交互仍是組件的交互均可以經過拖拽的方式完成。支持團隊協做和在線審閱。

UXPin - UXpin是一款在線原型設計工具，可用於製做網頁和手機原型。自帶了組件庫，拖出來就能夠進行基本的編輯，可實現簡單的交互效果。

Proto.io - 一款在線原型設計工具，支持組件的交互。

Framer - Framer是一款基於代碼的原型設計工具。若是你懂編程，那麼Framer能夠幫你實現複雜的動畫和交互。

HotGloo - 在線原型設計工具，可以實現經常使用的交互設計。

Origami - Facebook旗下的一款原型設計工具，能夠實現複雜的交互和動畫。

Principle - 一款只能用於Mac上的交互設計軟件。

Justinmind - 能夠自制高保真手機原型。支持複雜的交互、動畫和手勢。