相见恨晚!6个实用技巧帮你提升Sketch使用效率 - 优设网 - UISDC

相见恨晚!6个实用技巧帮你提升Sketch使用效率

2015/03/03 12613评论区

saving-time-in-sketch-1

@BeForWeb :我自己是一名自由交互设计师,很早就开始使用Sketch了,它已然成为我设计工作流程当中不可或缺的组成部分。我很愿意与各位分享自己的一些经验,例如本文当中介绍的6个技巧,就可以帮你有效提升Sketch的使用效率。

如何优雅地使用Windows ?>>>《用虚拟机体验Sketch!为设计师准备的MAC OSX安装指南》

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

一、自动等距复制元素

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

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

01-sketch-3-tips-ui-ux-app-design.gif

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

二、图层排序

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

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

  1. 打开Sketch Toolbox工具
  2. 搜索“Sketch Mate”
  3. 点击Install

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

02-sketch-3-tips-ui-ux-app-design.gif

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

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

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

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

  1. 打开Sketch Toolbox工具
  2. 搜索“Renameit”
  3. 点击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同理。

03-sketch-3-tips-ui-ux-app-design.gif

四、动态按钮

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

  1. 打开Sketch Toolbox工具
  2. 搜索“Dynamic Button”
  3. 点击Install

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

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

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

04-sketch-3-tips-ui-ux-app-design.gif

五、Symbols的嵌套

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

要将Symbol A嵌入Symbol B:

  1. 选中Symbol A,在右侧检查器中将其设置为“No Symbol”,使其恢复为普通的组或对象
  2. 在左侧图层列表中,将A移入Symbol B
  3. 保持A的选中状态,在右侧检查器中重新将其设置为原来的“Symbol A”

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

05-sketch-3-tips-ui-ux-app-design.gif

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

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

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

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

06-sketch-3-tips-ui-ux-app-design.gif

静电的Sketch教程合集持续更新中:

  1. 《SKETCH设计教室!从零开始学APP设计利器SKETCH(一)》
  2. 《SKETCH设计教室!从零开始学APP设计利器SKETCH(二)》
  3. 《SKETCH设计教室!带你了解超好用的SKETCH插件》
  4. 《想要一稿过不加班?SKETCH绝配神器MIRROR抢先体验》

静电的Xcode教程合集持续更新中:

  1. 《搞定一像素不求人!为设计师量身打造的XCODE教程(1)》
  2. 《搞定一像素不求人!为设计师量身打造的XCODE教程(2)》
  3. 《零代码搞定交互动画!为设计师量身打造的XCODE教程(3)》
  4. 《搞定Tab bar交互!为设计师量身打造的XCODE教程(4)》

原文地址:medium
译文地址:beforweb
译者:@BeForWeb

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量91万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/saving-time-in-sketch

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里