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

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

作為目前產品原型設計中的利器,Sketch特別適合移動APP和響應式網頁的設計開發。下面我們就來看看Sketch的一些入門指南以及如何利用Mockplus的插件實現交互效果。

 

一、 Artboard 

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

具體的操作的話,在界面左上角點擊insert,彈出菜單中選擇Artboard,鼠標變為十字,即可自由拖動,右側的屬性面板還可以精準設置大??;此外在選擇Artboard后,右側欄也會提供一些常見設備的默認尺寸,單擊選擇合適的即可。

 

二、組件

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

點擊菜單欄中的file-New from Template,會出現五種最常見的平臺或設計風格的模板,打開后即可選擇想要的組件。有個小技巧:artboard默認選擇iPhone6或7的尺寸,這樣在iOS應用圖標中的尺寸就無須調整,直接拖拽即可。

如果想要快速地復用組件的話,也可以將組件或??樽湮猄ymbol,性質跟Mockplus中的母版類似,從而方便我們在多個頁面中復用某組內容。選中需要的組件點擊create symbol即可。

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

 

三、可擴展性

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

不過,需要明確的一點是,Sketch產出的是靜態的視覺稿,沒有動態交互效果,也無法進行團隊協作和標注;而交互正是一個原型的靈魂,是展示原型邏輯和思維最直觀的方式。結合Mockplus就可以輕松將Sketch中完成的設計稿轉變為可交互的原型,只需要在Sketch中安裝Mockplus的插件。在Mockplus 3.2版本中支持將Sktech的設計文檔導出為Mockplus的mp項目文件,這樣你就可以發布為云項目,輕松地利用8種預覽方式演示自己的原型項目;也可以升級為團隊項目,從而和小伙伴們一起進行協作和批注。

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

最后,為大家總結了一些關于Sktech的模板和學習資源,相信可以讓你快速上手Sketch,并且結合Mockplus打造漂亮的產品原型!

 

優秀的模板資源

  1. sketchappsources.com 上千款免費Sketch

  2. sketch.zeef.com/patrick.loonstra Sketch 資源

  3. sketchrepo.com Sketch 模板

  4. freebiesbug.com/sketch-freebies Sketch 模板

  5. chapterthree.com/blog/wireframing-template-for-sketch 線框圖模板

  6. speckyboy.com/2013/04/22/free-ui-templates-for-sketch-app 免費UI kits

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

 

Sketch學習資源

  1. sketchtalk.io Sketch 用戶論壇

  2. sketchcasts.net 免費Sketch視頻教程

  3. Designcode.io/sketch Designcode專業Sketch教程

  4. sketch.land 實用 sketch資源

  5. bohemiancoding.com/sketch/learn Sketch廠商官方教程

  6. sketchapp.com/support/documentation Sketch官方使用指南

 

原文地址:

作者:

來源:學UI網

上一篇: PS制作顏料手繪字

下一篇: 清新的拾色器繪制【教程】

分享到: 更多
稳赚包平特一肖三期 彩票怎么倍投可以稳赚 时时彩选胆技巧稳赚 快3大小单双怎么买稳赚 一分快三怎么玩稳赚 时时彩双面盘网站 后二倍投方案 澳门赌法种类和玩法 飞艇软件计划 福利彩票www 2018炸金花棋牌游戏 11选5追号40期必中 肥大幸运飞艇计划软件 时时彩龙虎和口诀46 重庆时时彩APP安卓系统 重庆时时全天候计划