不能錯過的Sketch實用新技巧和資源集錦

Sketch是一款基于Mac的矢量繪圖應(yīng)用。面對著功能復(fù)雜繁瑣的photoshop,Sketch相比較而言身輕如燕。最近也掀起了用Sketch設(shè)計產(chǎn)品原型的熱潮,因為用它來畫設(shè)計稿簡直輕而易舉,相比于Axure它有更豐富的組件庫和更全面的尺寸控制,讓我們的原型圖更逼真,更有利于交流和前期的展示。

作為目前產(chǎn)品原型設(shè)計中的利器,Sketch特別適合移動APP和響應(yīng)式網(wǎng)頁的設(shè)計開發(fā)。下面我們就來看看Sketch的一些入門指南以及如何利用Mockplus的插件實現(xiàn)交互效果。

一、 Artboard

在安裝好Sketch點擊金燦燦的鉆石icon前,我們首先得明確一個概念:Sketch是基于矢量的繪圖軟件,沒有傳統(tǒng)的畫布的概念,整個空白區(qū)域都可進(jìn)行創(chuàng)作, 但實際上我們也需要一個“畫框”設(shè)計限定我們的設(shè)計,在skech中這個東西叫做artboard。我們可以將一個app界面看做一個artboard,然后在同一界面中對比和查看或者串聯(lián)所有交互過程。然后我們可以將這些artboard分別導(dǎo)出為pdf或者分為一個個的圖片文件,方便產(chǎn)品經(jīng)理或開發(fā)者查看。

具體的操作的話,在界面左上角點擊insert,彈出菜單中選擇Artboard,鼠標(biāo)變?yōu)槭?,即可自由拖動,右?cè)的屬性面板還可以精準(zhǔn)設(shè)置大?。淮送庠谶x擇Artboard后,右側(cè)欄也會提供一些常見設(shè)備的默認(rèn)尺寸,單擊選擇合適的即可。


二、組件

Sketch自帶了豐富的素材庫,包括安卓或者iOS系統(tǒng)中的原生控件,我們可以直接將需要的部分拖到artboard即可,這樣一來節(jié)約出大量的時間,使我們可以將騰出來的時間用于更加核心的產(chǎn)品設(shè)計思考上。

點擊菜單欄中的file-New from Template,會出現(xiàn)五種最常見的平臺或設(shè)計風(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)容。選中需要的組件點擊create symbol即可。

字體和圖層也跟組件一樣存在著不斷復(fù)用的需求,在一份設(shè)計稿中,單獨對每個元素調(diào)整會比較繁瑣,Sketch中的“文本樣式”就能解決這個問題,類似于Mockplus中格式刷的功能??梢愿鶕?jù)需要,整理一套自己常用的樣式規(guī)范,將成共享的樣式文本,在需要的地方直接復(fù)用即可,不僅能提高效率,還能保證整體的美觀性。

三、可擴(kuò)展性

可拓展性也是Sketch最大的特色之一。Sketch開放了第三方插件接口,設(shè)計師可以在幾百種的插件中輕松找到適合自己工作方式的插件,一切為了設(shè)計師更方便和有效率的進(jìn)行工作。

不過,需要明確的一點是,Sketch產(chǎn)出的是靜態(tài)的視覺稿,沒有動態(tài)交互效果,也無法進(jìn)行團(tuán)隊協(xié)作和標(biāo)注;而交互正是一個原型的靈魂,是展示原型邏輯和思維最直觀的方式。結(jié)合Mockplus就可以輕松將Sketch中完成的設(shè)計稿轉(zhuǎn)變?yōu)榭山换サ脑?,只需要在Sketch中安裝Mockplus的插件。在Mockplus 3.2版本中支持將Sktech的設(shè)計文檔導(dǎo)出為Mockplus的mp項目文件,這樣你就可以發(fā)布為云項目,輕松地利用8種預(yù)覽方式演示自己的原型項目;也可以升級為團(tuán)隊項目,從而和小伙伴們一起進(jìn)行協(xié)作和批注。



此外,Mockplus 3.2版本還支持即時生成流程圖和腦圖設(shè)計模式,配合Sketch使用會讓你的原型設(shè)計事半功倍!點擊這里了解3.2版本的更多功能:

Mockplus 3.2前瞻,五大特色功能讓你驚喜!

最后,為大家總結(jié)了一些關(guān)于Sktech的模板和學(xué)習(xí)資源,相信可以讓你快速上手Sketch,并且結(jié)合Mockplus打造漂亮的產(chǎn)品原型!


優(yōu)秀的模板資源

sketchappsources.com上千款免費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 免費UI kits

designsrazzi.com/2015/55-best-premium-free-sketch-templates Sketch模板

Sketch學(xué)習(xí)資源

sketchtalk.io Sketch 用戶論壇

sketchcasts.net免費Sketch視頻教程

Designcode.io/sketch Designcode專業(yè)Sketch教程

sketch.land 實用 sketch資源

bohemiancoding.com/sketch/learnSketch廠商官方教程

sketchapp.com/support/documentationSketch官方使用指南

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在之前的文章中,筆者為大家介紹了Sketch 的入門教程、實用技巧和資源集錦,相信大家對Sketch已經(jīng)有了初步的...
    huaer閱讀 7,371評論 1 8
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,765評論 25 709
  • 又是一個周末 不過現(xiàn)在的我已經(jīng)很享受和習(xí)慣獨處的生活了。 如果一定要概括一下24歲前的我,我想在大學(xué)之前我都是一...
    爽姐啊閱讀 422評論 0 0
  • 最初,你還只是個輪廓。 我不知道,造物主會賦予你怎樣的情緒。 原來,你在演繹我的情緒。 本來,你沒戴帽子。但是,小...
    穩(wěn)穩(wěn)的小妞閱讀 413評論 1 4
  • 昨天下午下了班,正收拾著東西準(zhǔn)備走,突然心頭一陣難受,不知為何莫名其妙的難受,眼淚馬上就要掉了出來,領(lǐng)導(dǎo)還在,實在...
    禍水紅顏閱讀 209評論 0 0

友情鏈接更多精彩內(nèi)容