如何用Sketch製做精緻的交互原型？

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

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

1、如何使用Sketch作原型？

Sketch是在最近幾年火起來的，且逐漸成爲設計師、產品經理等互聯網從業人員的新寵。究其緣由仍是在於，它提供強大且全面的功能支持，讓產品設計有「顏」有「料」。

1. 設計模板

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

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

2. 組件複用

在Sketch自帶的模板（即組件形式）基礎上，能夠選擇建立一個新文件爲模板，而後根據具體狀況，將須要的控件進行復制使用。此外，還能夠選擇本身建立模板，同時靈活地進行維護，使用在不一樣的項目中。這點其實相似於Mockplus母版功能，能幫助在多個頁面和畫板中重複運用組件、模板內容。即拖即用，方便快捷。

3. 原型文件維護

須要注意的是，不管是Sketch的「組件」仍是「文本樣式」，它們都被保存在某一文件中，而不能在不一樣文件中共享。所以，須要以1個頁面呈現1個版本的原型內容，或者以1個畫板呈現1個功能點模塊點原型內容，這兩種方式來維護Sketch原型文件。

2、如何使用Sketch作交互和團隊協做？

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

1. Sketch直接導出MP文件

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

2. 支持發佈爲Mockplus團隊項目

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

3. 可插入新Sketch頁面

在Mockplus團隊項目中，可插入Sketch頁面。每一個畫板能夠做爲單獨的頁面，進行導入。

4.更多誠意滿滿功能

除此之外，Mockplus 還支持腦圖、頁面流程圖兩種設計模式，自由切換、即時生成。能夠快速完成項目的全部頁面架構，同時能直觀地看到每一個頁面多內容展現和功能流程，讓你的設計有邏輯、更流暢。同時，相似於Axure的中繼器的Repeater功能，能幫助快速製做重複的佈局，新增的定時器組件，能實現頁面自動切換，每一個頁面能自動編號，且根據須要進行單獨頁面的隱藏，都絕對是產品經理及設計師的一大福利。

3、寫在後面的話

毫無疑問，Sketch很是適用於製做視覺效果圖，但若是是帶有交互、支持團隊協做且能展現邏輯流程的原型項目，那你能夠試試Mockplus即將推出的Sketch三方插件工具，一鍵導出Sketch畫板、上傳到雲項目，精緻的交互原型即刻在手！