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

2 評論 58918 瀏覽 83 收藏 7 分鐘

雖然Sketch更適合設(shè)計(jì)師使用,但是在最近幾年,越來越多的產(chǎn)品經(jīng)理使用Sketch代替Axure設(shè)計(jì)原型。出圖快、易操作、易上手是Axure的巨大優(yōu)勢,但是交互一直是Sketch的硬傷。在這篇文章,一起來看看作者如何解決。

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

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

一、如何使用Sketch做原型?

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

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

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

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

2. 組件復(fù)用

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

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

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

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

Sketch支持以畫板為單位進(jìn)行導(dǎo)出,但導(dǎo)出的設(shè)計(jì)多為圖片、PDF等格式,需要借助三方插件進(jìn)行后期的交互設(shè)置。而Mockplus最新推出的3.2版本,便能無縫對接從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中打開、編輯。多種交互設(shè)置方式(組件交互、頁鏈接、交互狀態(tài)),高度可視化的交互設(shè)計(jì),高度封裝的智能交互組件,交互命令一鍵自動還原等功能,絕對獨(dú)家所有、簡潔高效。

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

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

3. 可插入新Sketch頁面

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

三、寫在后面的話

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

 

作者:mo311

原文地址:http://www.cocoachina.com/design/20170824/20307.html

題圖來自 Unsplash ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 題文不符

    來自上海 回復(fù)
  2. windows咋辦

    回復(fù)