9款原型設計工具與Sketch的強強組合，輕鬆構建交互原型！

原型設計的發展歷史經歷了紙上原型、靜態線框設計、到如今的可交互式原型。做爲設計過程當中最初始的階段，設計師們對原型設計的要求也愈來愈高。所以，現在的原型設計工具格局也發生了很大的變化。

Sketch對於現代設計師而言，已經成了不可或缺的設計工具之一。各家原型設計工具也在悄悄的發生一些改變，迎合設計師們的需求，紛紛開發出了針對sketch原型的插件。既有傳統的桌面端原型工具，也有基於雲平臺的工具。雖然沒有任何一條標準規定你必須使用哪個工具，然而如何能在衆多的sketch+原型工具的組合中找到最適合本身的工做流程，提升工做效率，也是一件耗時的工做。

因此最近摹客的小夥伴們精心的爲你們整理出了一個Sketch+原型工具的合集，但願能幫助各位優秀的設計師朋友們找到適合本身的工具組合，提升工做效率。

1. Sketch

長久以來，Sketch 在可交互方面一直爲人所詬病。官方彷佛更但願將這些功能留給第三方開發者作插件，本身安靜的作個小而美的繪圖軟件。而今年更新的Sketch版本中，它也能夠支持在Sketch內部進行輕量級的原型設計了。這對於廣大Sketch粉絲來說無疑是個好消息。

原型交互方式：

Sketch中的原型設計依賴於畫板（Artboards ）和熱區（ Hotspot ）連接實現頁面間的跳轉，實現動態交互原型（相似於原型設計軟件Mockplus中的拖拽式連接點 ）。然而不得不吐槽的一點是連接線加的太多會讓你眼花繚亂。

官方教程：www.sketchapp.com/docs/protot…

預覽方式：

1） Sketch支持在軟件內部預覽（相似於Mockplus中F5本地預覽）。

2） Sketch Mirror內實時預覽（ USB 鏈接或同局域網內預覽操做）。

3） Sketch Cloud 內實時預覽（登陸 Sketch Cloud 後可將項目文件上傳至官方雲端，實如今線多人預覽，並可進行討論。）

缺陷：

連接線過多會致使體驗很差。

連接過渡效果有限。

Sketch相關資源：2018年不可錯過的19款Sketch線框圖套件

2. Mockplus + Sketch

Mockplus是更快更簡單的原型設計工具。自發布以來深受國內外用戶喜好，適合軟件團隊、我的在軟件開發的設計階段使用。簡單快速的交互功能，可以很好地表達設計，幫助設計師「關注設計，而非工具」。隨着愈來愈多設計師對協做功能的需求，他們也推出了適合多人協做的團隊版和企業版，爲更多的軟件開發/設計團隊提升了工做效率。

原型交互方式：

1） 下載Mockplus Sketch插件：www.mockplus.cn/download

2） 在Mockplus中拖拽組件後面的連接點，實現組件與組件，組件與頁面，以及組件自己狀態的交互效果。一拖一放，3秒快速交互。

官方教程：

Mockplus原型交互：doc.mockplus.cn/?p=4098

預覽方式：

Mockplus提供8種預覽方式，包括軟件內部F5本地預覽、在線發佈爲HTML網頁微信小程序（搜索Mockplus小程序）、手機客戶端（MKplayer）掃描二維碼等方式。

【來啦！彩蛋君】Mockplus我的版免費贈送福利！限時限量！

Mockplus對接iDoc了，將原型接入產品工做流，增長了原型標註、評論、對比設計稿、全貌呈現等功能，誠邀體驗！贈送Mockplus我的版！數量有限，先到先得！

專屬激活碼：Mock2019；

激活數量：限量150個；

有效期：2019年9月30日

激活地址：www.mockplus.cn/user/upgrad… （登陸/註冊後輸入激活碼便可）

Plus，發佈Mockplus原型到iDoc，還有更多大禮等你拿！

3. 摹客 iDoc

在實現交互快、設計快、演示快、上手快的敏捷開發（Agile Development）的大趨勢後，摹客團隊在今年9月份推出了摹客iDoc,朝着更高效的產品協做設計平臺方向發展。與Sketch的結合，使其在原生Mockplus原型設計和摹客 iDoc中實現高保真原型設計都很是高效、便捷。

原型交互方式：

在摹客iDoc中，按住鼠標在設計稿上繪製一個矩形的熱區，再鬆開鼠標經過左側項目樹選擇熱區跳轉的目標頁面，便可完成交互跳轉連接的設置。對設置好的交互連接還能夠設置跳轉動畫，有9種動畫樣式能夠選擇，默認沒有動畫。還可經過下拉框或直接輸入數值修改動畫執行時長。

官方教程：摹客iDoc原型交互：doc.mockplus.cn/?p=4517

預覽方式：

摹客iDoc中，點擊頂部導航欄右側播放按鈕，便可演示交互原型。手機項目也可生成二維碼用手機掃描查看。

4. InVision Craft + Sketch

製做高保真原型時，大多須要從Photoshop和Sketch上傳內容。那你確定會碰到一個問題，就是須要填充不少真實的圖片到界面裏。這個過程很是浪費時間，有沒有能節省時間的辦法呢？固然是有的，那就是Craft。

Craft是InVision出的一個插件，功能強大。它不僅能夠輸出視覺規範(比較偏向StyleGuid)，還有些很酷的功能例如複製並排列物件，定義間距，文本/圖片自動填充，重複元素自動填充等等。經過將這個插件安裝到Sketch，你將體驗到Sketch和InVision之間工做的連續性。經過將設計和原型製做流程結合在一塊兒，就能夠快速的輸出高保真原型。

原型交互方式：

從官網的介紹能夠了解到，InVision的原型設計方式也是經過添加連接的方式。界面元素中添加連接到畫板，設置過渡動畫並添加微交互，將靜態畫面轉換爲交互原型。

官方教程：www.youtube.com/watch?v=1H7…

預覽方式：

軟件內部播放按鈕預覽。

5. Flinto + Sketch

使用Flinto能夠建立一些小的交互和動畫，實現多屏App的總體流動（Comprehensive Flows）。使用它的Transition Designer，能夠很是快速的建立跳轉和轉場動做。對於新手而言，直觀明瞭，當用習慣了後就感受特別順手，菜單、工具和選項都變成最小化。用它徹底能夠設計出使人印象深入的原型，避免陷入特色過多的境地，分散用戶注意力。

原型交互方式：。

Flinto能夠快速實現交互設計，與Sketch無縫對接，而且經過插件就能夠把素材直接導入到Flinto中，添加連接和過渡效果或者添加自動跳轉。經過上傳圖片，添加熱點配合相應的交互動做快速的生成原型，方便客戶經過網頁或者手機端進行觀看。

官方教程：www.youtube.com/watch?v=afG…

預覽方式：

1） 點擊軟件內部播放按鈕

2） 下載iOS手機端App預覽（手機、電腦處於同一局域網）

6. Principle + Sketch

Principle和Flinto有不少類似的地方。做爲一款原型設計工具，Principle的設計方式別具一格。它更多地關注於轉換製做的時間軸線路以及Sketch屏幕間的交互。對於不一樣習慣的設計師來講，有的人喜歡這種設計方法，而有的人就更喜歡使用像Flinto中的Transition Designer或者Framer中的Auto-Code（自動編程）。

原型交互方式：

使用Principle能夠方便地爲多屏App製做流動，或者就專一於微交互，這兩種任務它均可以勝任。與本文介紹的其它工具相比，Principle缺乏一點潤色。做爲一款不同凡響的原型設計工具，它的原型設計方式也略微特殊。

1） 下載Sketch插件，導入素材

2） 創建過渡和交互動做

3） 用延遲和曲線來打磨動畫

4） 添加滾動/分頁/拖拽

官方教程：principleux.com/principle-c…

預覽方式：

1） 軟件本地預覽

2） 下載Principle Mirror手機預覽

缺陷：

1）畫圖不方便，因此建議你們在Skecth中作好圖，再導入到Principle中

2）不能在當前頁中作動畫。

3）在Principle中的素材不能自由調整大小，只能用左側面板的scale選項進行寬、高調整。

7. Axure + Sketch

衆所周知，Axure是一款老牌的設計軟件。做爲專業的原型設計工具，它能快速、高效的建立原型。而輸入高保真原型，則須要把視覺設計師在Sketch中製做好的矢量素材，例如圖標、控件、按鈕等導入到Axure中提升交互設計的效率。

原型交互方式：

先安裝好Sketch插件AxureRP.sketchplugin,選中Sketch的素材，點擊菜單的Plugins-AxureRP-Copy Selection。對於通常的交互，在Axure中能夠經過彈窗來逐個篩選設置，到屬性面板上去篩選目標頁面（頁面多的時候就有點煩了）。稍微複雜的交互，則須要條件生成器來實現。Axure在交互設置中，能夠添加條件判斷，但須要用戶有必定的編程常識，不然掌握起來有至關難度。尤爲是初次使用的時候。

官方教程：www.axure.com/support

預覽方式：

本地發佈預覽

8. Marvel + Sketch

Marvel是一款免費的原型設計Web 應用，能夠進行網頁設計和移動端的UI設計。它根據你設計好的 PSD 或 Sketch 文檔，也就是說你的視覺稿無需轉換格式就可使用，固然線稿圖（.jpg or .png）也能夠，導入後進行後續的交互設計。

原型交互方式：

先將畫板經過Sketch插件同步到Marvel，框選界面元素，經過熱點（HotSpot）鏈接目標畫板並設置頁面的轉場方式和操做手勢。不像連線的方式那麼直觀，因此容易形成邏輯混亂。

官方教程：marvelapp.com/features/pr…

預覽方式：

1） 直接在web頁面中進行可交互的原型展現。

2） 生成URL經過郵件分享。

9. Framer + Sketch

與其餘幾款原型設計工具不一樣，Framer 多是最特別的一款原型工具，由於它要求設計師具有代碼能力。而它製做出來的原型也最接近真實效果。它支持調用系統鍵盤，輸入真實的文本，而後做爲數據被使用；它支持對音頻、視頻進行真實的控制與監聽；Framer 的強大來自於它對 HTML、CSS 以及 Javascript 的無縫支持，單是音頻和視頻，就有數十種屬性和事件能夠拿來用。

原型交互方式：

Framer X中原型設計變得更加直觀，只需點擊幾下便可建立基本級別的交互。將畫板從sketch中複製粘貼到Framer中,使用「連接」工具添加推送和疊加等過渡，或使用多向手勢建立嵌套滾動視圖。

官方教程：www.youtube.com/watch?v=foS…

預覽方式：

1） 本地預覽

2） iOS/Android手機鏡像預覽

總結：

以上就是一些比較常見的Sketch原型設計工具組合。固然還有不少咱們並無列舉出來的工具，例如Pixate 和UXPin，固然了還有Facebook的Origami Studio。如開頭所說，並沒一項規定限制你必須使用哪種工具，只要是適合本身的使用習慣，適合本身的語言環境，適合團隊的工做節奏，在不一樣的原型設計工具中切換使用也是常有的事。

不論是使用Sketch的原型設計功能仍是使用Sketch+原型設計工具組合的方式，只要能幫助本身提升工做效率，設計出滿意的現代原型就是很好的組合。找到適合本身工做流程的原型工具，而後就開始工做吧！