Sketch是一款基于Mac的矢量繪圖應(yīng)用腥放。面對著功能復(fù)雜繁瑣的photoshop泛啸，Sketch相比較而言身輕如燕。最近也掀起了用Sketch設(shè)計(jì)產(chǎn)品原型的熱潮秃症，因?yàn)橛盟鼇懋嬙O(shè)計(jì)稿簡直輕而易舉候址，相比于Axure它有更豐富的組件庫和更全面的尺寸控制，讓我們的原型圖更逼真种柑，更有利于交流和前期的展示岗仑。
作為目前產(chǎn)品原型設(shè)計(jì)中的利器，Sketch特別適合移動APP和響應(yīng)式網(wǎng)頁的設(shè)計(jì)開發(fā)聚请。下面我們就來看看Sketch的一些入門指南以及如何利用Mockplus的插件實(shí)現(xiàn)交互效果荠雕。
一、 Artboard
在安裝好Sketch點(diǎn)擊金燦燦的鉆石icon前驶赏，我們首先得明確一個概念：Sketch是基于矢量的繪圖軟件炸卑，沒有傳統(tǒng)的畫布的概念，整個空白區(qū)域都可進(jìn)行創(chuàng)作煤傍， 但實(shí)際上我們也需要一個“畫框”設(shè)計(jì)限定我們的設(shè)計(jì)盖文，在skech中這個東西叫做artboard。我們可以將一個app界面看做一個artboard蚯姆，然后在同一界面中對比和查看或者串聯(lián)所有交互過程五续。然后我們可以將這些artboard分別導(dǎo)出為pdf或者分為一個個的圖片文件，方便產(chǎn)品經(jīng)理或開發(fā)者查看龄恋。
具體的操作的話疙驾，在界面左上角點(diǎn)擊insert，彈出菜單中選擇Artboard篙挽，鼠標(biāo)變?yōu)槭志Ｓ纯勺杂赏蟿幽餮ィ覀?cè)的屬性面板還可以精準(zhǔn)設(shè)置大邢晨ā；此外在選擇Artboard后偏竟，右側(cè)欄也會提供一些常見設(shè)備的默認(rèn)尺寸煮落，單擊選擇合適的即可。
二踊谋、組件
Sketch自帶了豐富的素材庫蝉仇，包括安卓或者iOS系統(tǒng)中的原生控件，我們可以直接將需要的部分拖到artboard即可，這樣一來節(jié)約出大量的時間轿衔，使我們可以將騰出來的時間用于更加核心的產(chǎn)品設(shè)計(jì)思考上沉迹。
點(diǎn)擊菜單欄中的file-New from Template，會出現(xiàn)五種最常見的平臺或設(shè)計(jì)風(fēng)格的模板害驹，打開后即可選擇想要的組件鞭呕。有個小技巧：artboard默認(rèn)選擇iPhone6或7的尺寸，這樣在iOS應(yīng)用圖標(biāo)中的尺寸就無須調(diào)整宛官，直接拖拽即可葫松。
如果想要快速地復(fù)用組件的話，也可以將組件或模塊轉(zhuǎn)變?yōu)镾ymbol底洗，性質(zhì)跟Mockplus中的母版類似腋么，從而方便我們在多個頁面中復(fù)用某組內(nèi)容。選中需要的組件點(diǎn)擊create symbol即可亥揖。
字體和圖層也跟組件一樣存在著不斷復(fù)用的需求珊擂，在一份設(shè)計(jì)稿中，單獨(dú)對每個元素調(diào)整會比較繁瑣徐块，Sketch中的“文本樣式”就能解決這個問題未玻，類似于Mockplus中格式刷的功能『兀可以根據(jù)需要扳剿，整理一套自己常用的樣式規(guī)范，將成共享的樣式文本昼激，在需要的地方直接復(fù)用即可庇绽，不僅能提高效率，還能保證整體的美觀性橙困。
三瞧掺、可擴(kuò)展性
可拓展性也是Sketch最大的特色之一。Sketch開放了第三方插件接口凡傅，設(shè)計(jì)師可以在幾百種的插件中輕松找到適合自己工作方式的插件辟狈，一切為了設(shè)計(jì)師更方便和有效率的進(jìn)行工作。
不過夏跷，需要明確的一點(diǎn)是哼转，Sketch產(chǎn)出的是靜態(tài)的視覺稿，沒有動態(tài)交互效果槽华，也無法進(jìn)行團(tuán)隊(duì)協(xié)作和標(biāo)注壹蔓；而交互正是一個原型的靈魂，是展示原型邏輯和思維最直觀的方式猫态。結(jié)合Mockplus就可以輕松將Sketch中完成的設(shè)計(jì)稿轉(zhuǎn)變?yōu)榭山换サ脑陀度兀恍枰赟ketch中安裝Mockplus的插件披摄。在Mockplus 3.2版本中支持將Sktech的設(shè)計(jì)文檔導(dǎo)出為Mockplus的mp項(xiàng)目文件，這樣你就可以發(fā)布為云項(xiàng)目勇凭，輕松地利用8種預(yù)覽方式演示自己的原型項(xiàng)目疚膊；也可以升級為團(tuán)隊(duì)項(xiàng)目，從而和小伙伴們一起進(jìn)行協(xié)作和批注虾标。
此外酿联，Mockplus 3.2版本還支持即時生成流程圖和腦圖設(shè)計(jì)模式，配合Sketch使用會讓你的原型設(shè)計(jì)事半功倍夺巩！點(diǎn)擊這里了解3.2版本的更多功能：
最后柳譬，為大家總結(jié)了一些關(guān)于Sktech的模板和學(xué)習(xí)資源喳张，相信可以讓你快速上手Sketch，并且結(jié)合Mockplus打造漂亮的產(chǎn)品原型美澳！
優(yōu)秀的模板資源
sketchappsources.com上千款免費(fèi)Sketch
sketch.zeef.com/patrick.loonstra Sketch 資源
sketchrepo.com Sketch 模板
freebiesbug.com/sketch-freebies Sketch 模板
chapterthree.com/blog/wireframing-template-for-sketch線框圖模板
speckyboy.com/2013/04/22/free-ui-templates-for-sketch-app 免費(fèi)UI kits
designsrazzi.com/2015/55-best-premium-free-sketch-templates Sketch模板
Sketch學(xué)習(xí)資源
sketchtalk.io Sketch 用戶論壇
sketchcasts.net免費(fèi)Sketch視頻教程
Designcode.io/sketch Designcode專業(yè)Sketch教程
sketch.land 實(shí)用 sketch資源
bohemiancoding.com/sketch/learnSketch廠商官方教程
sketchapp.com/support/documentationSketch官方使用指南
