设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

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

2015-3-13 22:56| 发布者: joejoe0332| 查看: 1483| 评论: 0|原作者: Be For Web|来自: CSDN

摘要: Sketch 3,作为一款优秀的设计工具,大受设计人员的喜欢。来自比利时的交互设计师Lorenz VS发表了《Saving time in Sketch——A collection of 6 time saving design techniques》一文,分享了提升Sketch使用效率的6 ...

Sketch 3,作为一款优秀的设计工具,大受设计人员的喜欢。来自比利时的交互设计师Lorenz VS发表了《Saving time in Sketch——A collection of 6 time saving design techniques》一文,分享了提升Sketch使用效率的6个实用技巧。Be For Web对该文进行了翻译,译文如下:



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

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

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


1.自动等距复制元素

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

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

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


2.图层排序

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

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

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

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

选中所有需要排序的组,在菜单栏中点击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同理。



酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部