摹客
產(chǎn)品
下載
Sketch是一款基于Mac的矢量繪圖應(yīng)用。面對(duì)著功能復(fù)雜繁瑣的photoshop，Sketch相比較而言身輕如燕。最近也掀起了用Sketch設(shè)計(jì)產(chǎn)品原型的熱潮，因?yàn)橛盟鼇?lái)畫(huà)設(shè)計(jì)稿簡(jiǎn)直輕而易舉，相比于Axure它有更豐富的組件庫(kù)和更全面的尺寸控制，讓我們的原型圖更逼真，更有利于交流和前期的展示。
作為目前產(chǎn)品原型設(shè)計(jì)中的利器，Sketch特別適合移動(dòng)APP和響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)開(kāi)發(fā)。下面我們就來(lái)看看Sketch的一些入門(mén)指南以及如何利用Mockplus的插件實(shí)現(xiàn)交互效果。
在安裝好Sketch點(diǎn)擊金燦燦的鉆石icon前，我們首先得明確一個(gè)概念：Sketch是基于矢量的繪圖軟件，沒(méi)有傳統(tǒng)的畫(huà)布的概念，整個(gè)空白區(qū)域都可進(jìn)行創(chuàng)作， 但實(shí)際上我們也需要一個(gè)“畫(huà)框”設(shè)計(jì)限定我們的設(shè)計(jì)，在skech中這個(gè)東西叫做artboard。我們可以將一個(gè)app界面看做一個(gè)artboard，然后在同一界面中對(duì)比和查看或者串聯(lián)所有交互過(guò)程。然后我們可以將這些artboard分別導(dǎo)出為pdf或者分為一個(gè)個(gè)的圖片文件，方便產(chǎn)品經(jīng)理或開(kāi)發(fā)者查看。
具體的操作的話，在界面左上角點(diǎn)擊insert，彈出菜單中選擇Artboard，鼠標(biāo)變?yōu)槭?，即可自由拖?dòng)，右側(cè)的屬性面板還可以精準(zhǔn)設(shè)置大??；此外在選擇Artboard后，右側(cè)欄也會(huì)提供一些常見(jiàn)設(shè)備的默認(rèn)尺寸，單擊選擇合適的即可。
Sketch自帶了豐富的素材庫(kù)，包括安卓或者iOS系統(tǒng)中的原生控件，我們可以直接將需要的部分拖到artboard即可，這樣一來(lái)節(jié)約出大量的時(shí)間，使我們可以將騰出來(lái)的時(shí)間用于更加核心的產(chǎn)品設(shè)計(jì)思考上。
點(diǎn)擊菜單欄中的file-New from Template，會(huì)出現(xiàn)五種最常見(jiàn)的平臺(tái)或設(shè)計(jì)風(fēng)格的模板，打開(kāi)后即可選擇想要的組件。有個(gè)小技巧：artboard默認(rèn)選擇iPhone6或7的尺寸，這樣在iOS應(yīng)用圖標(biāo)中的尺寸就無(wú)須調(diào)整，直接拖拽即可。
如果想要快速地復(fù)用組件的話，也可以將組件或模塊轉(zhuǎn)變?yōu)镾ymbol，性質(zhì)跟Mockplus中的母版類(lèi)似，從而方便我們?cè)诙鄠€(gè)頁(yè)面中復(fù)用某組內(nèi)容。選中需要的組件點(diǎn)擊create symbol即可。
字體和圖層也跟組件一樣存在著不斷復(fù)用的需求，在一份設(shè)計(jì)稿中，單獨(dú)對(duì)每個(gè)元素調(diào)整會(huì)比較繁瑣，Sketch中的“文本樣式”就能解決這個(gè)問(wèn)題，類(lèi)似于Mockplus中格式刷的功能。可以根據(jù)需要，整理一套自己常用的樣式規(guī)范，將成共享的樣式文本，在需要的地方直接復(fù)用即可，不僅能提高效率，還能保證整體的美觀性。
可拓展性也是Sketch最大的特色之一。Sketch開(kāi)放了第三方插件接口，設(shè)計(jì)師可以在幾百種的插件中輕松找到適合自己工作方式的插件，一切為了設(shè)計(jì)師更方便和有效率的進(jìn)行工作。
不過(guò)，需要明確的一點(diǎn)是，Sketch產(chǎn)出的是靜態(tài)的視覺(jué)稿，沒(méi)有動(dòng)態(tài)交互效果，也無(wú)法進(jìn)行團(tuán)隊(duì)協(xié)作和標(biāo)注；而交互正是一個(gè)原型的靈魂，是展示原型邏輯和思維最直觀的方式。結(jié)合Mockplus就可以輕松將Sketch中完成的設(shè)計(jì)稿轉(zhuǎn)變?yōu)榭山换サ脑?，只需要在Sketch中安裝Mockplus的插件。在Mockplus 3.2版本中支持將Sktech的設(shè)計(jì)文檔導(dǎo)出為Mockplus的mp項(xiàng)目文件，這樣你就可以發(fā)布為云項(xiàng)目，輕松地利用8種預(yù)覽方式演示自己的原型項(xiàng)目；也可以升級(jí)為團(tuán)隊(duì)項(xiàng)目，從而和小伙伴們一起進(jìn)行協(xié)作和批注。
此外，Mockplus 3.2版本還支持即時(shí)生成流程圖和腦圖設(shè)計(jì)模式，配合Sketch使用會(huì)讓你的原型設(shè)計(jì)事半功倍！點(diǎn)擊這里了解3.2版本的更多功能：Mockplus 3.2前瞻，五大特色功能讓你驚喜！
最后，為大家總結(jié)了一些關(guān)于Sktech的模板和學(xué)習(xí)資源，相信可以讓你快速上手Sketch，并且結(jié)合Mockplus打造漂亮的產(chǎn)品原型！
優(yōu)秀的模板資源
Sketch學(xué)習(xí)資源
摹客協(xié)作
摹客RP
摹客DT
摹客超級(jí)版