一篇关于素描的文章,一种实用技能。我先学会的。
草图3-波西米亚编码给我们带来了这个优秀的设计工具,在速度和灵活性上是竞争对手无法比拟的。
我(英文原作者)是一名自由交互设计师,很早就开始使用Sketch,它已经成为我设计工作流程中不可或缺的一部分。我愿意和大家分享我的一些经验,比如本文介绍的六个技巧,可以帮助你有效提高素描的效率。
注意:本文中的一些方法涉及到插件的使用。建议你先安装Sketch Toolbox,一个很棒的插件管理工具;也请确保你的草图版本是最新的(目前是3.2.2)。
1.自动等距复制元素
按住alt拖动元素可以实现复制,这是我们比较熟悉的方式。但是对于大量重复的复制任务,这种手动方式还是太费时。
我们经常会遇到一个典型的重复需求,就是把一个元素复制几次,等间隔排列。对于这个典型的任务,Sketch提供了一个非常方便的实现方式。首先我们还是需要通过“alt拖动”复制一次,并参照动态显示的间距值将新的元素放到合适的位置,然后使用快捷键“cmd d”反复复制。每次复制的新元素与前一个元素之间的距离就是我们第一次手动拖动复制时设置的值。只要按住cmd键,并保持按下D键,直到你复制尽可能多的需要。
注意:如果发现“cmd d”无法实现自动等距复制,请到Sketch的首选项,在“图层”下找到“偏移粘贴复制对象”并取消勾选。
00-1010假设你正在设计一个类似Dropbox的应用。界面需要一个文件列表,默认情况下文件按上传日期排序,但用户可以切换到按文件名的字母顺序排序。你已经在设计稿里仔细的给每个样本文件命名了,一切都很好;但是为了演示按字母顺序排列的文件列表,您发现自己不得不手动拖放层来重新排序它们。
告别手动的麻烦,我们通过Sketch Mate插件加速。
打开草图工具箱工具,搜索“草图匹配”,然后单击安装草图匹配。SketchMate中集成了很多实用的功能,我们现在需要使用的排序只是其中之一。在下面的演示中,每个文件列表项对应一个名为“File”的组。
选择所有要排序的组,点击菜单栏中的插件Sketch Mate Sort Sort Layers,在弹出的对话框中选择“Text(A Z)”。因为我们示例中的每个组都包含多个文本对象,所以我们需要选择根据哪个文本进行排序。单击“确定”后,您的列表将立即重新排序。
您还可以尝试其他几种排序方法。
2.图层排序
良好有序的层次和画板结构是优秀设计稿的标志之一。你对自己满意,大家对你的合作也满意。但是,必须承认,在很多情况下,用更合理的标准来重命名图层和画板是枯燥和耗时的。幸运的是,有一个叫Renameit的插件可以拯救我们于水火之中。
打开Sketch工具箱工具搜索“Renameit”,点击安装,在Sketch中选择要重命名的图层或画板(至少选择两个),按“ctrl cmd r”,调出Renameit的对话框,输入“前缀参数”。其中前缀是我们需要的具有特定含义的词,例如“图标”。参数分为三类:
%N:号码。例如,在对话框中输入“图标%N ”,然后单击“确定”。所选图层或画板将被重命名为“图标1”、“图标2”、“图标3”等。%W:宽度。例如,在对话框中输入“icon %W”,单击确定,所选图层或画板将被重命名为“icon 24”、“icon 36”、“icon 48”等,其中宽度值是自动获得的对象的实际宽度。%H:高度。与% w相同
00-1010复制现有按钮并设置不同的按钮标题。这是一种重复性的工作,需要精准的操作,因为我们要做的不仅仅是复制,还要根据不同的标题长度来调整按钮的宽度。著名的动态按钮插件就是为了解决这个问题而诞生的。到目前为止,这也是我个人最喜欢的。
的插件。
打开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”,按钮背景的尺寸都会自动根据新文案的尺寸进行调整了。
5.Symbols的嵌套
目前,Sketch尚未“正式”支持symbols的嵌套,但我们可以通过一些技巧来实现,只是建议你在使用时小心一些。
要将Symbol A嵌入Symbol B:
选中Symbol A,在右侧检查器中将其设置为“No Symbol”,使其恢复为普通的组或对象在左侧图层列表中,将A移入Symbol B保持A的选中状态,在右侧检查器中重新将其设置为原来的“Symbol A”
对我个人来说,这种方法在编辑带有弹出层的界面时非常有用。我可以将初始界面整体创建为一个父级symbol,其中包含有对应着各种控件的子级symbol,然后将整个artboard复制,并设计浮层或弹框的样式。如果初始界面当中某些元素需要发生变化,那么含有浮层的artboard便会自动更新,无需手动移开浮层再做重复劳动。
6.使artboard根据内容自动调整尺寸
Sketch中的artboard体系可以帮我们站在全局角度总览设计方案,这是它有别于其他竞品的一个重要特性。想起以前用PS的状况,感觉像是噩梦。
设想你需要时常在artboard中添加或移除内容 – 如果artboard能自动调整尺寸,这该有多好?我们前面介绍过的Sketch Mate又能帮上忙了,确保你已经安装好。
例如当前artboard当中的实际内容已经超过了artboard自身尺寸,你无法看到列表当中的更多条目。按“ctrl+shift+a”,artboard便可以精确的根据现有内容的实际高度来重新调整自身尺寸了,就这么简单。