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

2017-09-04 18:43:07 閱讀 235213 本文來源：摩客專訪

分享至：

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

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

一、如何使用Sketch做原型？

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

1. 設(shè)計模板

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

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

2. 組件復(fù)用

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

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

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

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

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

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

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

2. 支持發(fā)布為Mockplus團(tuán)隊項目

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

3. 可插入新Sketch頁面

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

4.更多誠意滿滿功能

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