6个实用技巧帮你提升SKETCH使用效率

   注意:本文当中的一些方法涉及到插件的使用。建议你首先安装 Sketch Toolbox,非常棒的插件管理工具;另外请确保你的Sketch版本为最新(目前为3.2.2)。

  一、自动等距复制元素

  按住alt并拖拽元素可以实现复制,这是我们比较熟悉的方式。但是对于大量重复性的复制任务,这种手动方式仍然过于耗时。

  我们时常遇到的一种比较典型的重复性需求,就是将某个元素复制多次并等距排列。对于这种典型任务,Sketch提供了非常便捷的实现方式。首先,我们仍需要通过“alt+拖拽”来复制一次,并参考动态显示的间距值将新元素放置到合适的位置,然后使用快捷方式“cmd+d”来重复复制,每次复制出的新元素与前一个元素之间的距离都是我们第一次手动拖拽复制时所设定的值。你只管按住cmd键然后持续按d键,直到复制出你所需要的数量。


  注意:如果你发现“cmd+d”并没能实现自动等距复制,那么请到Sketch的偏好设置当中,找到“Layers”下的“offset pasted & duplicated objects”并取消勾选即可。

  二、图层排序

  设想一下你正在设计类似Dropbox那样的应用,界面中需要一个文件列表,其中的文件默认按照上传日期排序,但是用户可以切换为按文件名字母排序。你很认真的在设计稿中为每个示例文件起了不同的名字,一切都不错;但是要演示按字母排序的文件列表时,你发现自己必须手动拖拽图层来重新排序。

  告别手动的烦恼吧,我们通过Sketch Mate插件来实现加速。

  打开Sketch Toolbox工具

  搜索“Sketch Mate”

  点击Install

  Sketch Mate当中集成了很多实用功能,我们现在需要使用到的排序只是其中之一。下面的演示当中,每个文件列表项对应着一个名为“File”的组。


  选中所有需要排序的组,在菜单栏中点击Plugin > Sketch Mate > Sort > Sort Layers,在弹出的对话框中选择“Text(A > Z)”。因为我们的示例当中每个组里包含多个文本对象,所以接下来还需要选择以哪些文本为标准进行排序。点击OK后,你的列表会瞬间完成重新排序。

  你也可以尝试其他几种排序方式。

  三、图层与artboard的批量重命名

  良好有序的图层与artboard结构是优秀设计稿的标志之一,自己开心,协作起来大家也开心。但是必须承认,在很多时候,以更加合理的标准对图层和artboard进行重命名是很枯燥且耗时的工作。还好有一款名为Renameit的插件可以拯救我们于水火。

  打开Sketch Toolbox工具

  搜索“Renameit”

  点击Install

  在Sketch里选中你想要重命名的图层或artboard(至少选中两个),按“ctrl+cmd+r”,唤出Renameit的对话框,输入“前缀+参数”。其中前缀是我们所需的有特定含义的单词,例如“icon”。参数分为三类:

  %N:数字。例如,在对话框中输入“icon %N”,点击OK,所选图层或artboard会被重命名为“icon 1”、“icon 2”、“icon 3”等等。

  %W:宽度。例如,在对话框中输入“icon %W”,点击OK,所选图层或artboard会被重命名为“icon 24”、“icon 36”、“icon 48”等等,其中的宽度值是自动获取的该对象的实际宽度。

  %H:高度。与%W同理。


  四、动态按钮

  复制一个现有的按钮并设置不同的按钮标题,这是一种重复性强同时需要精确操作的工作,因为我们要做的不仅是复制,而且需要根据不同的标题长度来调整按钮的宽度。著名的Dynamic Button插件就是为了解决这个问题而生的。到目前为止,这也是我个人最喜欢的插件。

  打开Sketch Toolbox工具

  搜索“Dynamic Button”

  点击Install

  首先,我们需要通过DB插件来创建初始按钮。新建一个文本对象,输入我们所需的按钮标题。选中该文本对象,按“cmd+j”,你会发现文本和一个自动生成的背景形状一起被打包到了名为“Flex Button”的组里,而且文本图层被自动重命名为“0:0:0:0”。这4个数字代表着文本对象距离矩形背景的上、右、下、左边缘的距离。

  例如,根据实际需求,我们要将上、下两个值设置为12,将左、右两个值设置为20,那么你可以将文本图层重新命名为“12:20:12:20”,然后选中文本对象,按“cmd+j”,这时按钮背景的尺寸会自动根据我们所设置的规格进行调整。

  接下来,无论是修改这个按钮当中的标题文案,还是复制一个新的按钮并修改标题,只要再次选中其中的文本对象并点击“cmd+j”,按钮背景的尺寸都会自动根据新文案的尺寸进行调整了。


  五、Symbols的嵌套

  目前,Sketch尚未“正式”支持symbols的嵌套,但我们可以通过一些技巧来实现,只是建议你在使用时小心一些。

  要将Symbol A嵌入Symbol B:

  选中Symbol A,在右侧检查器中将其设置为“No Symbol”,使其恢复为普通的组或对象

  在左侧图层列表中,将A移入Symbol B

  保持A的选中状态,在右侧检查器中重新将其设置为原来的“Symbol A”

  对我个人来说,这种方法在编辑带有弹出层的界面时非常有用。我可以将初始界面整体创建为一个父级symbol,其中包含有对应着各种控件的子级symbol,然后将整个artboard复制,并设计浮层或弹框的样式。如果初始界面当中某些元素需要发生变化,那么含有浮层的artboard便会自动更新,无需手动移开浮层再做重复劳动。


  六、使artboard根据内容自动调整尺寸

  Sketch中的artboard体系可以帮我们站在全局角度总览设计方案,这是它有别于其他竞品的一个重要特性。想起以前用PS的状况,感觉像是噩梦。

  设想你需要时常在artboard中添加或移除内容 – 如果artboard能自动调整尺寸,这该有多好?我们前面介绍过的Sketch Mate又能帮上忙了,确保你已经安装好。

  例如当前artboard当中的实际内容已经超过了artboard自身尺寸,你无法看到列表当中的更多条目。按“ctrl+shift+a”,artboard便可以精确的根据现有内容的实际高度来重新调整自身尺寸了,就这么简单。

时间: 2024-09-02 07:43:38

6个实用技巧帮你提升SKETCH使用效率的相关文章

3个小技巧帮你提升用户体验

  1)用户只看最终结果 2)表达清楚态度缘由 3)关注真实数据结果,发现用户情感落差.今天阿里的鸿影同学结合自身的工作经历,总结了3个用户体验设计工作中应该注意的问题,附上谷歌和淘宝的应对方法,文章不长,值得一看! 不知道身为「用户体验设计师(UX Designer)」的诸位是否也有过和我一样的困惑:初入行时兴冲冲觉得自己就是那个为一切产品用户体验问题负责的「真命天子」,积极主动去搜集反馈访谈用户,可当真正卷起袖子打算为解决这些「体验问题」大干一场的时候,却发现有些无从下手. 随便拉几个用户角

快速提升网站用户体验实用技巧

中介交易 SEO诊断 淘宝客 云主机 技术大厅 倾力打造用户体验,这是企业搜索引擎营销成功的不二法门.我们做SEM,无非是追求可观地投资回报率,但是ROI并不等于广告的高曝光.高点击,关键还是在于网站的成单转化率.如何提高网站转化率?用户体验将是你不容忽视地核心环节.今天,小拼就如何快速提升网站用户体验5个实用技巧,也是小拼致力于研究与学习SEM的经验之谈,希望对你能有所帮助. 你的网页打开速度够快吗? 网页响应速度,是影响用户体验的最直接因素.小拼认为,只有"秒杀"级别的网页打开速度

2345好压解压文件的几个实用技巧

  相信很多网友都非常熟悉2345好压的文件压缩跟压缩包解压功能,那您知道可以使用2345好压在文件压缩的过程中的一些使用技巧吗?比如说:一个大的压缩包内有很多文件,只需要解压其中的几个文件夹的时候,该怎么操作呢?一起来看看今天小编为大家整理的2345好压解压文件的几个实用技巧! 一:如何设置所有的压缩包都解压到指定目录: 电脑上的压缩包多如牛毛,每个压缩包解压后都会产生一个文件夹,何不让将这些压缩包都统一解压到一个目录下呢?其实这很容易,只要你打开好压主程序--工具--设置--"压缩标签栏&q

百度百科帐号升级三个实用技巧

百度百科对网站优化的好处不必多说,相信大家都知道.但是在百科里添加链接的难度,大家更是深有体会,太难了! 怎样有效的在百科里添加网站的链接?一个高等级的百科帐号,是你加链接通过率大幅提升的根本.下面介绍自己升级百度百科帐号的三个实用技巧,用这三个技巧,就能很快的升到百科四级帐号,并可加入核心用户,轻松的给自己网站加链接啦. 技巧一.巧做任务 百度百科任务有成长任务.活动任务.我们把帐号申请下来,马上就去接成长任务.三级以前,你基本只围绕完成任务来做就行啦.完成任务后,有丰厚的经验值奖励哦. 任务

Windows XP的23招实用技巧

往往我们经常使用碎片整理使windows运行的更快.但现在市场上出售的7200转硬盘,在寻道和传输两方面做了改进,有很多型号还附带有一个8m缓存,而且winxp使用的ntfs文件系统比fat系统更有效率.因此,碎片整理对提升电脑性能的作用已经非常有限.下面给出能够大幅提升电脑性能,让winxp运行更快捷 .更可靠的23招实用技巧,希望对您有所帮助 : 1)在系统中安装ultra-133硬盘加速扩充卡或带有8m缓存的ata硬盘,可以有效减少系统的启动时间. 2)把内存增加到512m以上. 3)确定

帮你提升jQuery的性能 的七件事

 这篇文章主要介绍了做好七件事帮你提升jQuery的性能的相关资料,需要的朋友可以参考下 1. Append Outside of Loops   凡是触及到DOM都是有代价的.如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行.当在循环当中附加元素就会产生一个常见的问题.    代码如下: $.each( myArray, function( i, item ) {     var newListItem = "<li>" + item +

120个PHOTOSHOP技巧帮你加速设计(后60个)

Photoshop 工具使用技巧       120个PHOTOSHOP技巧帮你加速设计(前60个) 61. 快速调用笔刷 快速打开笔刷面板的快捷键是F5. 62. 混合火焰效果 A: 复制火焰 打开一个人物肖像图片和一个普通的火焰图片,使用移动工具,使用自动选择图层,并且显示变换控件.将火焰图片拖放到肖像图片上,模式选择混合模式. B: 位置和扭曲 单击边款,改变火焰的图层,调整大小,旋转,定位.在调整状态下,鼠标右键点击调出菜单,选择"扭曲",调整火焰姿态.使用快捷键Cmd/Ctr

Mac预览功能实用技巧大全

  Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具,接下来Pc6苹果小编给大家详细介绍一下Mac预览功能实用技巧. 目前的 Mac 预览程式可以支持 TIFF. PNG. JPEG. GIF. BMP. PDF 等主要文件格式的浏览与编辑,而单纯预览上也可以支持像是 Photoshop 等专业图像处理软件. Office 等专业文书处理软件所产生的特殊文

《众妙之门——网站UI设计之道(修订版)》一1.3 制作有效用户界面的实用技巧

1.3 制作有效用户界面的实用技巧 我们已经讨论过什么是用户界面,用户界面应该具备什么样的特点,以及我们可以使用的构建用户界面的工具,现在让我们看一些可以应用在你的网络应用或网站上的实用技术. 1.3.1 使用空白来构建联系 空白指在各种内容元素之间的空白区域,比如标题.正文和按钮.当在不同元素间建立联系时,空白是一个非常重要的工具.通过缩小元素之间的空白,能够把一些相关的项目组成一组.增加这些分组之间的空白能够更加强调这些分组与其他内容之间的联系.使用空白,我们可以分组相关的控件,也可以构建页