文章插圖
文章插圖
對于現代設計師而言，Sketch已經成了不可或缺的設計工具之一 。各家原型設計工具也在悄悄的發生一些改變，迎合設計師們的需求，紛紛開發出了針對sketch原型的插件 。既有傳統的桌面端原型工具，也有基于云平臺的工具 。雖然沒有任何一條標準規定你必須使用哪一個工具，然而如何能在眾多的sketch+原型工具的組合中找到最適合自己的工作流程，提高工作效率，也是一件耗時的工作 。
所以最近摹客的小伙伴們精心的為大家整理出了一個Sketch+原型工具的合集，希望能幫助各位優秀的設計師朋友們找到適合自己的工具組合，提高工作效率 。
Sketch

文章插圖

文章插圖
長久以來，Sketch 在可交互方面一直為人所詬病 。官方似乎更希望將這些功能留給第三方開發者做插件，自己安靜的做個小而美的繪圖軟件 。而今年更新的Sketch版本中，它也可以支持在Sketch內部進行輕量級的原型設計了 。這對于廣大Sketch粉絲來講無疑是個好消息 。
原型交互方式：
Sketch中的原型設計依賴于畫板（Artboards ）和熱區（ Hotspot ）鏈接實現頁面間的跳轉，實現動態交互原型（類似于原型設計軟件Mockplus中的拖拽式鏈接點 ） 。然而不得不吐槽的一點是鏈接線加的太多會讓你眼花繚亂 。
預覽方式：
1） Sketch支持在軟件內部預覽（類似于Mockplus中F5本地預覽） 。
2） Sketch Mirror內實時預覽（ USB 連接或同局域網內預覽操作） 。
3） Sketch Cloud 內實時預覽（登錄 Sketch Cloud 后可將項目文件上傳至官方云端，實現在線多人預覽，并可進行討論 。）
缺點：
鏈接線過多會導致體驗不好 。
鏈接過渡效果有限 。
Sketch相關資源：不可錯過的19款Sketch線框圖套件
1. Mockplus + Sketch

文章插圖

文章插圖
Mockplus是更快更簡單的原型設計工具 。自發布以來深受國內外用戶喜愛，適合軟件團隊、個人在軟件開發的設計階段使用 。簡單快速的交互功能，能夠很好地表達設計，幫助設計師「關注設計，而非工具」 。隨著越來越多設計師對協作功能的需求，他們也推出了適合多人協作的團隊版和企業版，為更多的軟件開發/設計團隊提高了工作效率 。
原型交互方式：
1） 下載Mockplus Sketch插件
2） 在Mockplus中拖拽組件后面的鏈接點，實現組件與組件，組件與頁面，以及組件本身狀態的交互效果 。一拖一放，3秒快速交互 。
預覽方式：
Mockplus提供8種預覽方式，包括軟件內部F5本地預覽、在線發布為HTML網頁微信小程序（搜索Mockplus小程序）、手機客戶端（MKplayer）掃描二維碼等方式 。
2. 摹客iDoc + Sketch

文章插圖

文章插圖
在實現交互快、設計快、演示快、上手快的敏捷開發（Agile Development）的大趨勢后，摹客團隊在今年9月份推出了摹客iDoc,朝著更高效的產品協作設計平臺方向發展 。與Sketch的結合，使其在原生Mockplus原型設計和摹客 iDoc中實現高保真原型設計都非常高效、便捷 。
原型交互方式：
在摹客iDoc中，按住鼠標在設計稿上繪制一個矩形的熱區，再松開鼠標通過左側項目樹選擇熱區跳轉的目標頁面，即可完成交互跳轉鏈接的設置 。對設置好的交互鏈接還可以設置跳轉動畫，有9種動畫樣式可以選擇，默認沒有動畫 。還可通過下拉框或直接輸入數值修改動畫執行時長 。
預覽方式：
摹客iDoc中，點擊頂部導航欄右側播放按鈕，即可演示交互原型 。手機項目也可生成二維碼用手機掃描查看 。
3. InVision Craft + Sketch

文章插圖

文章插圖
制作高保真原型時，大多需要從Photoshop和Sketch上傳內容 。那你肯定會碰到一個問題，就是需要填充很多真實的圖片到界面里 。這個過程非常浪費時間，有沒有能節省時間的辦法呢？當然是有的，那就是Craft 。
Craft是InVision出的一個插件，功能強大 。它不只可以輸出視覺規范(比較偏向StyleGuid)，還有些很酷的功能例如復制并排列物件，定義間距，文本/圖片自動填充，重復元素自動填充等等 。通過將這個插件安裝到Sketch，你將體驗到Sketch和InVision之間工作的連續性 。通過將設計和原型制作流程結合在一起，就可以快速的輸出高保真原型 。
原型交互方式：
從官網的介紹可以了解到，InVision的原型設計方式也是通過添加鏈接的方式 。界面元素中添加鏈接到畫板，設置過渡動畫并添加微交互，將靜態畫面轉換為交互原型 。
預覽方式：
軟件內部播放按鈕預覽 。
4. Flinto + Sketch

文章插圖

文章插圖
使用Flinto可以創建一些小的交互和動畫，實現多屏App的整體流動（Comprehensive Flows） 。使用它的Transition Designer，可以非?？焖俚膭摻ㄌD和轉場動作 。對于新手而言，直觀明了，當用習慣了后就感覺特別順手，菜單、工具和選項都變成最小化 。用它完全可以設計出令人印象深刻的原型，避免陷入特點過多的境地，分散用戶注意力 。
原型交互方式： 。
Flinto可以快速實現交互設計，與Sketch無縫對接，并且通過插件就可以把素材直接導入到Flinto中，添加鏈接和過渡效果或者添加自動跳轉 。通過上傳圖片，添加熱點配合相應的交互動作快速的生成原型，方便客戶通過網頁或者手機端進行觀看 。
預覽方式：
1） 點擊軟件內部播放按鈕
2） 下載iOS手機端App預覽（手機、電腦處于同一局域網）
5. Principle + Sketch

文章插圖

文章插圖
Principle和Flinto有很多相似的地方 。作為一款原型設計工具，Principle的設計方式別具一格 。它更多地關注于轉換制作的時間軸線路以及Sketch屏幕間的交互 。對于不同習慣的設計師來說，有的人喜歡這種設計方法，而有的人就更喜歡使用像Flinto中的Transition Designer或者Framer中的Auto-Code（自動編程） 。
原型交互方式：
使用Principle可以方便地為多屏App制作流動，或者就專注于微交互，這兩種任務它都可以勝任 。與本文介紹的其它工具相比，Principle缺少一點潤色 。作為一款與眾不同的原型設計工具，它的原型設計方式也略微特殊 。
1） 下載Sketch插件，導入素材
2） 建立過渡和交互動作
3） 用延遲和曲線來打磨動畫
4） 添加滾動/分頁/拖拽
預覽方式：
1） 軟件本地預覽
2） 下載Principle Mirror手機預覽
缺點：
1）畫圖不方便，所以建議大家在Skecth中做好圖，再導入到Principle中
2）不能在當前頁中做動畫 。
3）在Principle中的素材不能自由調整大小，只能用左側面板的scale選項進行寬、高調整 。
6. Axure + Sketch

文章插圖

文章插圖
眾所周知，Axure是一款老牌的設計軟件 。作為專業的原型設計工具，它能快速、高效的創建原型 。而輸入高保真原型，則需要把視覺設計師在Sketch中制作好的矢量素材，例如圖標、控件、按鈕等導入到Axure中提高交互設計的效率 。
原型交互方式：
先安裝好Sketch插件AxureRP.sketchplugin,選中Sketch的素材，點擊菜單的Plugins-AxureRP-Copy Selection 。對于一般的交互，在Axure中可以通過彈窗來逐個篩選設置，到屬性面板上去篩選目標頁面（頁面多的時候就有點煩了） 。稍微復雜的交互，則需要條件生成器來實現 。Axure在交互設置中，可以添加條件判斷，但需要用戶有一定的編程常識，否則掌握起來有相當難度 。尤其是初次使用的時候 。
預覽方式：
本地發布預覽
7. Marvel + Sketch

文章插圖

文章插圖
Marvel是一款免費的原型設計Web 應用，可以進行網頁設計和移動端的UI設計 。它根據你設計好的 PSD 或 Sketch 文檔，也就是說你的視覺稿無需轉換格式就可以使用，當然線稿圖（.jpg or .png）也可以，導入后進行后續的交互設計 。
原型交互方式：
先將畫板通過Sketch插件同步到Marvel，框選界面元素，通過熱點（HotSpot）連接目標畫板并設置頁面的轉場方式和操作手勢 。不像連線的方式那么直觀，所以容易造成邏輯混亂 。
預覽方式：
1） 直接在web頁面中進行可交互的原型展示 。
2） 生成URL通過郵件分享 。
8. Framer + Sketch【推薦這8款實用軟件 產品原型圖用什么軟件畫】

文章插圖

文章插圖
與其他幾款原型設計工具不同，Framer 可能是最特別的一款原型工具，因為它要求設計師具備代碼能力 。而它制作出來的原型也最接近真實效果 。它支持調用系統鍵盤，輸入真實的文本，然后作為數據被使用；它支持對音頻、視頻進行真實的控制與監聽；Framer 的強大來自于它對 HTML、CSS 以及 Javascript 的無縫支持，單是音頻和視頻，就有數十種屬性和事件可以拿來用 。
原型交互方式：
Framer X中原型設計變得更加直觀，只需點擊幾下即可創建基本級別的交互 。將畫板從sketch中復制粘貼到Framer中,使用“鏈接”工具添加推送和疊加等過渡，或使用多向手勢創建嵌套滾動視圖 。
預覽方式：
1） 本地預覽
2） iOS/Android手機鏡像預覽
總結以上就是一些比較常見的Sketch原型設計工具組合 。當然還有很多我們并沒有列舉出來的工具，例如Pixate 和UXPin，當然了還有Facebook的Origami Studio 。如開頭所說，并沒一項規定限制你必須使用哪一種工具，只要是適合自己的使用習慣，適合自己的語言環境，適合團隊的工作節奏，在不同的原型設計工具中切換使用也是常有的事 。
不管是使用Sketch的原型設計功能還是使用Sketch+原型設計工具組合的方式，只要能幫助自己提高工作效率，設計出滿意的現代原型就是很好的組合 。找到適合自己工作流程的原型工具，然后就開始工作吧！

• 斗魚女流姐COS孫尚香引發差評 網友感嘆都這么擠了可是還是沒溝
• 蟲草的吃法，這8種吃法簡單又養生
• 和綠色搭配的顏色有哪些，這樣搭配高級感滿滿
• 國產手機排行榜2013前十名,目前國產智能手機的性能排行是哪些？求大神推薦手機品牌和型號，要最新的？
• 免費分享這2種解決方法 為什么steam打不開庫存
• 家里樓梯下不宜擺放這幾物
• 這些地方，不能亂貼便簽
• 家里風水擺設禁忌 別踏入這些雷區
• SLG這個賽道依然熱鬧，靠怎樣的玩法創新才能留住玩家？
• 夏洛特這個英雄馬上就要迎來一款新皮膚了