6个实用技巧提升Sketch使用效率

Sketch 3 - Bohemian Coding带给我们的这款优秀的设计工具,在速度及灵活性等方面的表现都是其竞争对手难以匹敌的。

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

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

1.自动等距复制元素

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

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

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

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

2.图层排序

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

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

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

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

donghua5

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

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

3.图层与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

4.动态按钮

复制一个现有的按钮并设置不同的按钮标题,这是一种重复性强同时需要精确操作的工作,因为我们要做的不仅是复制,而且需要根据不同的标题长度来调整按钮的宽度。著名的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

5.Symbols的嵌套

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

要将Symbol A嵌入Symbol B:

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

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

donghua6

6.使artboard根据内容自动调整尺寸

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

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

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

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

本文来自Be For Web
译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker,现就职于腾讯ISUX(上海)

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/9828/

(0)
TinadminTinadmin
上一篇 2015-09-29
下一篇 2015-10-08

相关推荐

  • 如何使用Sketch3创建APP原型

    自从Fireworks逐渐衰落之后, 我一直在找其他好用的app和网站设计工具。后来我发现,只需用Sketch再加上其他一些简单的工具,就能构成一条非常不错的设计生产线。 在这篇文章中,我将谈谈我是如何利用Sketch搭配Flin…

    2015-06-29
  • UE网出品:Sketch从入门到精通[免费精品课程] | 阿西UED&Smiler

    Sketch从入门到精通  讲师:阿西UED Smiler 参加时间:2015年6月24日 17:40 最后更新:2015年6月24日 17:40 适用人群: UI设计师、美工、视觉设计师、 对UI有兴趣的人。 简介 Sketch从入门到精通是由www.iamue.com …

    2015-06-25
  • UserFlows一款能在Sketch画板生成流程图的插件

    UserFlows是一款能在Sketch中从画板生成流程图的插件。 定义链接 要定义两个画板之间的链接 - 选择一个图层和目标画板,然后运行定义链接命令(Cmd Shift K)。 添加条件逻辑 通过插件创建和管理条件,轻松显示条件…

    2016-12-08
  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29
  • Sketch汉化插件-SketchI18N最新版本

    安装使用 下载安装包,并解压,在安装包找到SketchI18N.sketchplugin 双击 SketchI18N.sketchplugin 完成安装 重启 Sketch 自动汉化后完成汉化 如果第三步没成功,试试 在 Sketch 中按快捷键 control command + x …

    2018-03-19
  • sktch打造knob开关icon 附sketch破解下载!

    小编:今天带来的是由小乔分享的knob拟物小教程,对于想学习sketch小伙伴们或者已经在用的同学们 练习起来都是不错的选择,当然没有mac用photoshop也是可以能设计出来的哟,快来开动你们的脑筋和动手能力吧!(附sk…

    2015-12-23
  • Sketch从入门到精通-Sketch3 复制旋转功能的运用

    复制旋转功能是一个算是很特别很好玩的一个功能,当你需要对一个图形重复旋转的时候,如果手动调一定会有偏差,这个时候就需要复制旋转功能来实现,在菜单栏中进入图层 — 路径 ­­— 复制旋转 (Layer > Paths >…

    2015-08-03
  • Sketch从入门到精通-Sketch3 插件的运用

    插件往往是最提高工作效率的,用过Sketch的人,都被Sketch强大的插件所折服,因为真的是太好用了。而且,Sketch还有个专门整合了插件的一个下载器,叫Sketch Toolbox的Mac应用,下载和安装Sketch的利器。 直接在里…

    2015-08-28
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • 网络和辅助线的使用- Sketch从入门到精通

    设计师一般在作图的时候都离不开网格和辅助线,以前在PS或AI里的时候辅助线你必须手动去调整辅助线的位置,有的时候也难免会有误差或者半像素的偏离。但在Sketch 3里面,辅助线极大的避免了失误,并且提高了效率。 …

    2015-07-13