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

2 評(píng)論 59325 瀏覽 83 收藏 7 分鐘

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

對(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)入。

三、寫(xiě)在后面的話(huà)

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

 

作者:mo311

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

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

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

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

    回復(fù)