如何用Sketch制作精致的交互原型？

　　雖然Sketch更適合設計師使用，但是在最近幾年，越來越多的產品經理使用Sketch代替Axure設計原型。出圖快、易操作、易上手是Axure的巨大優勢，但是交互一直是Sketch的硬傷。在這篇文章，一起來看看作者如何解決。

　　

　　對很多做設計或產品的小伙伴們來說，Sketch應該不會陌生。它是一款由Bohemian Coding團隊一手打造的矢量繪圖應用軟件，最初發布于2010年，后在2012年榮獲Apple公司ADA設計獎項。從產品開發及功能側重點來講，很多人會認為Sketch是專為UI設計師打造、擅長也只能用于UI設計，比如：圖形拼接、文字渲染、樣式鏈接等等。

　　毫無疑問，像Sketch、Photoshop、Illustrator這類矢量繪圖工具，是進行網頁、圖標以及界面設計的最好方式。不同的是，Sketch也可以用于制作精致的交互原型，雖然相對于其它原型設計工具來講會有不足，但也不乏亮點之處。下面將具體介紹Sketch原型制作，其中包括小編重點推薦的一些功能，幫助你更好、更快地完成原型設計。

　　一、如何使用Sketch做原型?

　　Sketch是在最近幾年火起來的，且逐漸成為設計師、產品經理等互聯網從業人員的新寵。究其原因還是在于，它提供強大且全面的功能支持，讓產品設計有“顏”有“料”。

　　1. 設計模板

　　Sketch自帶有超過2000套模板，其中包括網頁、iOS、線框圖、原型等項目的現成模板，可以免費下載和使用，省去了從網上各種非正規渠道找資源的麻煩。每個模板中包含了各類常用的控件，如ios中的狀態欄、導航欄、鍵盤等，省事而且精致。如果對這些控件的制作過程進行拆解，也能給我們提供更多的設計靈感和思路。

　　除Sketch外，其它工具還提供有關于“社交”、“購物”、“新聞閱讀”等不同應用分類的完整項目模板，其中Mockplus還支持將模板頁面直接拖用軟件，進行設計。

　　

　　2. 組件復用

　　在Sketch自帶的模板(即組件形式)基礎上，可以選擇創建一個新文件為模板，然后根據具體情況，將需要的控件進行復制使用。此外，還可以選擇自己創建模板，同時靈活地進行維護，使用在不同的項目中。這點其實類似于Mockplus母版功能，能幫助在多個頁面和畫板中重復運用組件、模板內容。即拖即用，方便快捷。

　　3. 原型文件維護

　　需要注意的是，無論是Sketch的“組件”還是“文本樣式”，它們都被保存在某一文件中，而不能在不同文件中共享。因此，需要以1個頁面呈現1個版本的原型內容，或者以1個畫板呈現1個功能點模塊點原型內容，這兩種方式來維護Sketch原型文件。

　　二、如何使用Sketch做交互和團隊協作?

　　Sketch支持以畫板為單位進行導出，但導出的設計多為圖片、PDF等格式，需要借助三方插件進行后期的交互設置。而Mockplus最新推出的3.2版本，便能無縫對接從Sketch導出的文件，在交互、團隊協作及邏輯展示等方面加油助力。

　　1. Sketch直接導出MP文件

　　Mockplus支持將Sketch的設計文檔，導出為Mockplus的MP項目文件。導出后，可直接在Mockplus中打開、編輯。多種交互設置方式(組件交互、頁鏈接、交互狀態)，高度可視化的交互設計，高度封裝的智能交互組件，交互命令一鍵自動還原等功能，絕對獨家所有、簡潔高效。

　　

　　2. 支持發布為Mockplus團隊項目

　　同時，Mockplus支持將Sketch的文檔發布為Mockplus的云項目，支持多人協作、實時審閱，提升開發團隊的生產力，大大降低溝通交流成本。其中，可以在原型頁面上發表評論，同時使用箭頭、文字、矩形、畫筆等多種工具在頁面的任意位置進行標注、說明，交流很明白。

　　3. 可插入新Sketch頁面

　　在Mockplus團隊項目中，可插入Sketch頁面。每個畫板可以作為單獨的頁面，進行導入。

　　三、寫在后面的話

　　毫無疑問，Sketch非常適用于制作視覺效果圖，但如果是帶有交互、支持團隊協作且能展示邏輯流程的原型項目，那你可以試試Mockplus即將推出的Sketch三方插件工具，一鍵導出Sketch畫板、上傳到云項目，精致的交互原型即刻在手!

　　作者：mo311