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

對(duì)很多做設(shè)計(jì)或產(chǎn)品的小伙伴們來(lái)說(shuō)，Sketch應(yīng)該不會(huì)陌生。它是一款由Bohemian Coding團(tuán)隊(duì)一手打造的矢量繪圖應(yīng)用軟件，最初發(fā)布于2010年，后在2012年榮獲Apple公司ADA設(shè)計(jì)獎(jiǎng)項(xiàng)。從產(chǎn)品開(kāi)發(fā)及功能側(cè)重點(diǎn)來(lái)講，很多人會(huì)認(rèn)為Sketch是專(zhuān)為UI設(shè)計(jì)師打造、擅長(zhǎng)也只能用于UI設(shè)計(jì)，比如：圖形拼接、文字渲染、樣式鏈接等等。

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

一、如何使用Sketch做原型？

Sketch是在最近幾年火起來(lái)的，且逐漸成為設(shè)計(jì)師、產(chǎn)品經(jīng)理等互聯(lián)網(wǎng)從業(yè)人員的新寵。究其原因還是在于，它提供強(qiáng)大且全面的功能支持，讓產(chǎn)品設(shè)計(jì)有“顏”有“料”。

1. 設(shè)計(jì)模板

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

除Sketch外，其它工具還提供有關(guān)于“社交”、“購(gòu)物”、“新聞閱讀”等不同應(yīng)用分類(lèi)的完整項(xiàng)目模板，其中Mockplus還支持將模板頁(yè)面直接拖用軟件，進(jìn)行設(shè)計(jì)。

2. 組件復(fù)用

在Sketch自帶的模板（即組件形式）基礎(chǔ)上，可以選擇創(chuàng)建一個(gè)新文件為模板，然后根據(jù)具體情況，將需要的控件進(jìn)行復(fù)制使用。此外，還可以選擇自己創(chuàng)建模板，同時(shí)靈活地進(jìn)行維護(hù)，使用在不同的項(xiàng)目中。這點(diǎn)其實(shí)類(lèi)似于Mockplus母版功能，能幫助在多個(gè)頁(yè)面和畫(huà)板中重復(fù)運(yùn)用組件、模板內(nèi)容。即拖即用，方便快捷。

3. 原型文件維護(hù)

需要注意的是，無(wú)論是Sketch的“組件”還是“文本樣式”，它們都被保存在某一文件中，而不能在不同文件中共享。因此，需要以1個(gè)頁(yè)面呈現(xiàn)1個(gè)版本的原型內(nèi)容，或者以1個(gè)畫(huà)板呈現(xiàn)1個(gè)功能點(diǎn)模塊點(diǎn)原型內(nèi)容，這兩種方式來(lái)維護(hù)Sketch原型文件。

二、如何使用Sketch做交互和團(tuán)隊(duì)協(xié)作？

Sketch支持以畫(huà)板為單位進(jìn)行導(dǎo)出，但導(dǎo)出的設(shè)計(jì)多為圖片、PDF等格式，需要借助三方插件進(jìn)行后期的交互設(shè)置。而Mockplus最新推出的3.2版本，便能無(wú)縫對(duì)接從Sketch導(dǎo)出的文件，在交互、團(tuán)隊(duì)協(xié)作及邏輯展示等方面加油助力。

1. Sketch直接導(dǎo)出MP文件

Mockplus支持將Sketch的設(shè)計(jì)文檔，導(dǎo)出為Mockplus的MP項(xiàng)目文件。導(dǎo)出后，可直接在Mockplus中打開(kāi)、編輯。多種交互設(shè)置方式（組件交互、頁(yè)鏈接、交互狀態(tài)），高度可視化的交互設(shè)計(jì)，高度封裝的智能交互組件，交互命令一鍵自動(dòng)還原等功能，絕對(duì)獨(dú)家所有、簡(jiǎn)潔高效。

2. 支持發(fā)布為Mockplus團(tuán)隊(duì)項(xiàng)目

同時(shí)，Mockplus支持將Sketch的文檔發(fā)布為Mockplus的云項(xiàng)目，支持多人協(xié)作、實(shí)時(shí)審閱，提升開(kāi)發(fā)團(tuán)隊(duì)的生產(chǎn)力，大大降低溝通交流成本。其中，可以在原型頁(yè)面上發(fā)表評(píng)論，同時(shí)使用箭頭、文字、矩形、畫(huà)筆等多種工具在頁(yè)面的任意位置進(jìn)行標(biāo)注、說(shuō)明，交流很明白。

3. 可插入新Sketch頁(yè)面

在Mockplus團(tuán)隊(duì)項(xiàng)目中，可插入Sketch頁(yè)面。每個(gè)畫(huà)板可以作為單獨(dú)的頁(yè)面，進(jìn)行導(dǎo)入。

4.更多誠(chéng)意滿(mǎn)滿(mǎn)功能

除此以外，Mockplus 還支持腦圖、頁(yè)面流程圖兩種設(shè)計(jì)模式，自由切換、即時(shí)生成。可以快速完成項(xiàng)目的所有頁(yè)面架構(gòu)，同時(shí)能直觀地看到每個(gè)頁(yè)面多內(nèi)容展示和功能流程，讓你的設(shè)計(jì)有邏輯、更流暢。同時(shí)，類(lèi)似于Axure的中繼器的Repeater功能，能幫助快速制作重復(fù)的布局，新增的定時(shí)器組件，能實(shí)現(xiàn)頁(yè)面自動(dòng)切換，每個(gè)頁(yè)面能自動(dòng)編號(hào)，且根據(jù)需要進(jìn)行單獨(dú)頁(yè)面的隱藏，都絕對(duì)是產(chǎn)品經(jīng)理及設(shè)計(jì)師的一大福利。

毫無(wú)疑問(wèn)，Sketch非常適用于制作視覺(jué)效果圖，但如果是帶有交互、支持團(tuán)隊(duì)協(xié)作且能展示邏輯流程的原型項(xiàng)目，那你可以試試Mockplus即將推出的Sketch三方插件工具，一鍵導(dǎo)出Sketch畫(huà)板、上傳到云項(xiàng)目，精致的交互原型即刻在手！