本文列舉了20余款當前國內外比較火爆的原型設計工具。我把它們分為以下五類:
1. 交互原型設計工具(僅限頁面交互)
2. 手機原型工具
3. 網頁原型工具
4. 靜態原型工具
5. 動態原型工具(組件和頁面交互)
交互原型設計工具(僅限頁面交互)
這一類工具主要是建立頁面之間的交互。其本身不能進行組件的制作和設計,需要從其它地方(例如: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 - 可以自制高保真手機原型。支持復雜的交互、動畫和手勢。
這么多原型設計工具, 總有一款是你的菜。如有遺漏,歡迎補充。