掌握对齐和分布示意图
Chinese (Simplified) (中文(简体)) translation by Rongrong Zhan (you can also view the original English article)
通过本教程,我们将学习到使用Sketch3完美地对齐和分布对象 我会使用一些简单的例子来完整地讲解操作—有些会令你大吃一惊!
1.在画板上对齐一个图层
这是对齐最简单的技能。
(选中图形后)对齐相关的操作按钮在右侧的操作面板顶端。 右边有六个操作按钮(水平方向的左对齐,居中和右对齐;垂直方向的顶部对齐,居中对齐,顶端对齐),可以对齐不同的层对象。不过如果你只选中了一个对象,它将以画板为基准进行对齐。 如下图所示:



如前所述,你也可以用这些按钮对齐多个对象。 但如果我们想对齐多个对象时该如何操作呢?
2 以画板为准对齐多个层
想以画板为准对齐多个对象,可以把这些对象看成单个的层组 这时,当你使用对齐按钮时,对组内对象的操作就和操作同一个对象是一样的。
然而,这种分组操作不一定能满足你的需求。 我会教你另一种办法。
选中你想对齐的层,然后按住alt键,再进行各种对齐操作。 效果如下图: 请注意:你需要把选中的层都放在画板里,否则操作会无效。
下例中,我选中了三个不同的层对象。



这种操作对层组也同样适用。也就是说你可以选中多个层组,按住alt键然后把层组跟画板对齐。
3.对齐特定的层
另一种场景:我想把所有的东西都对齐某个特定的对象。 首先,你要明白,缺省情况下,Sketch总是对齐所选中对象的最外沿。 被对齐的这个层就叫作“关键对象”
同样的,如果要把所有选中的对象顶端对齐,那么选中对象中位于最顶端的对象就是“关键对象”。 下面这个例子演示了我将三个对象先顶端、后右对齐(红色的方块就是我们的“关键对象”)



如果我们可以自行定义对齐的”关键对象“,一定会更棒,对吧。 办法就是:锁定你想作为”关键对象”的层,然后再选中其他所有的层。 (不过只有在层清单中,你才可以选中锁定的层,也就是说在画板中是无法直接选中被锁定的层的)
下面这个例子,蓝色的方块是锁定的,因此可以作为我们新的“关键对象"。 现在我们可以选中对象并再次执行左对齐操作。



多谢SketchTips,我才发现了这个非常顺手的操作技巧。 如果你使用Lucien Lee做的"Align to“插件,也可以实现相同的效果。
4 矢量点对象
小技巧:在"编辑"模式下,你也可以使用对齐按钮对齐多个矢量点 选中矢量对象,然后双击改变为编辑模式(你也可以点击主工具栏上面的”编辑“图标),然后选中所有你希望对齐的矢量点。



5. 分布多个层
如果仔细看下操作面板,或许你会注意到我到现在还没有用到最左边的两个对齐图标。 这两个按钮是用来水平或垂直分布层对象的。 我们可以平均分布选中的对象,方便之极! 比如我们选中了几个形状,然后想将他们水平分布。 使用水平分布按钮,或者通过”对齐“-》”分布“-》”水平“执行相同的操作。



最左边和最右边的对象会保持不变,不过中间的层会均匀分布在其中。 垂直分布操作和水平分布操作原理相同。
6. 用固定的间隔分布多个层
上面的操作很不错,但如果我希望层间隔都是固定的20px,又该怎么操作呢? 水平分布/垂直水平就没有办法了。
这种情况下,我们可以点击”网格“工具(Make Grid,可以在Arrange>Make Grid下找到),自定义需要水平或垂直分布的距离。 最初可能有些难以理解,所以还是举例说明吧。



此处我希望将四个不同的层对象彼此间都间隔20px 在Make Grid对话框中,我设定为行数为1(意思是所有的对象都在同一个水平位置上),列数为4(即每个对象为一列)。 然后将列间隔设为希望的20px。 如果我想垂直分布这些层,我只需要将列数设为1,行数设为4,然后行间隔改为20px就可以了。
如果你觉得上述办法用起来不太理想,建议你试试SketchDistributor插件。 这个插件也可以做到让层对象按指定的间隔进行分布。
到此结束。
希望本课程可以让你有所收获。 掌握Sketch对齐和分布工具将节省大量的时间。