跳过导航
Cover image featuring a calculator on top of a coral background.
学习设计

如何在 Sketch Inspector 中使用数学运算

使用数学在几秒钟内调整大小、重新对齐并创建复杂的形状,让 Sketch 来处理计算

在 Sketch 中,您可以使用数学运算以不同的方式操纵设计属性。无论您是简单地调整图层大小,还是想要使用 pi 创建径向图,本指南都将帮助您掌握数学设计。

开始使用基本函数

Sketch Inspector 中的任何数值字段都支持数学计算 - 从图层大小到画布对齐。要将数值字段转换为数学表达式,只需添加一个基本的数学运算符:+-/*^。还有一些其他的运算符可以执行特定的函数,我们将在本文后面进行探讨

  • 百分比运算符:%(仅适用于某些字段)
  • 对齐调整大小快捷方式:LRTBCM
  • 舍入函数:round()
  • 数学常数:pi (π)

计算器 101

在我们深入了解您可以使用这些计算实际做什么之前,让我们先了解一下计算器的行为方式。像任何标准计算器一样,Sketch 的数学运算遵循 PEMDAS 规则。括号 () 始终先计算,并且可以嵌套 (() + () - () ...) 以进行特定的排序。在此之后,Sketch 将计算您的指数运算符 ^,然后是标准乘法 * 和除法 /,再进行加法 + 和减法 -

计算器自动将任何数字四舍五入到小数点后两位。

调整大小和重新对齐

数学运算的主要用例将是操纵设计中的不同 Sketch 元素。想要将您的图标精确地向右移动 4px?使您的画板精确地放大 2 倍?不再需要猜测、紧张的鼠标移动或心算。您只需要一些简单的数学运算

将您的图层水平移动(目前定位在 100px)50 px

在 Inspector 中,将图层的 X 字段更改为 100+50。这将自动将值设置为 150

创建一个新的文本样式,该样式比您的正文文本 (20pt) 大 50%

在文本图层的 Inspector 中,将文本大小字段更改为 20*1.5。这将自动将值设置为 30

使用高级函数进一步

现在我们已经掌握了基础知识,让我们来看看您还可以使用您的计算做什么。正如我们之前提到的,还有其他的例外情况和特定的函数可以帮助您使用数学运算做更多的事情。并且将它们结合在一起会创造更多的机会。

根据父图层使用 % 调整图层

百分号 % 是 Sketch 中更强大的运算符之一。与其他运算符不同,它根据直接父容器(换句话说,它所在的画板或组)的百分比来更改属性。

您可以使用 % 使您的图层成为父级宽度的特定百分比。因此,如果您希望您的导航栏是画板的完整宽度,只需在您的宽度字段中键入 100%,即可完成。您还可以将此与其他一些计算结合起来,以获得更精确的定位

要在容器(375px 宽度)的中间水平对齐图层的中心(100px 宽度)

在 X 字段中:50%-100/2 将自动将值设置为 138

使用对齐快捷方式更智能地调整大小

当您在 Sketch 中调整元素大小时,默认情况下它始终会将左上角的点作为锚点并相应地调整大小。因此,例如,如果您将 10px 添加到正方形的高度,Sketch 将自动将它们添加到底部。但是,您可以添加快捷方式,让您控制此行为并更有效率地工作。

可用的对齐选项是

  • L 从左侧调整大小(默认)[仅限宽度字段]
  • R 从右侧调整大小 [仅限宽度字段]
  • T 从顶部调整大小(默认)[仅限高度字段]
  • B 从底部调整大小 [仅限高度字段]
  • CM 从中心或中间调整大小(您可以互换使用这些)

您可以将这些快捷方式中的任何一个添加到您的值或计算的末尾,以告诉 Sketch 从哪里开始调整大小。

例如,要调整形状的大小为 200px 宽,同时保持您的右对齐

宽度字段:200R 将自动将形状的宽度设置为 200,但保持图层的右边缘不变。

要从中心调整形状(335px 宽)的大小,使其为容器 (375px) 的 50%

宽度字段:50%c50%M 将自动将形状的宽度设置为 188 并保持与中心的对齐。

使用 round() 轻松舍入计算

大多数设计师都希望尽可能保持设计的干净。round() 函数会自动将您的值四舍五入到最接近的整数。这对于任何可能导致不希望的小数值(会将您的图层超出像素范围)的计算都很有用。

例如,要在宽度和高度(均为 100px)中基于黄金比例乘数 (1.618) 生成序列中的下一个形状

首先,复制对象。然后,在其宽度和高度字段中输入 round(100*1.618)。这将把计算的实际结果 (161.8) 向上舍入到最接近的整个像素 — 162

如果您想为您的设计创建自然风格的缩放,这将特别有用。您甚至可以发挥创意,通过操作文本字段和创建新的文本样式来生成自己的排版比例。

利用 pi 的强大功能

pi 是数学常数 π 的快捷方式。您可能还记得,如果您想知道圆的周长,您需要将它的直径乘以 pi。在 Sketch 中使用 pi 的一个很好的用例是制作径向进度条 — 类似于 Apple Watch 上的 Activity 环。

来自 LearnSketch.com 的 Joseph 向我们展示了如何通过结合到目前为止我们所学到的知识来制作完美的径向条

着色和阴影

调整大小和移动并不是使用数学运算来操纵元素的唯一方法。Sketch 的颜色选择器也支持数学计算,因此您可以更改颜色、alpha 或不透明度。

您可以使用此方法的一个很好的例子是按不同程度的精确亮度缩放相似的对象。因此,在颜色选择器中,您可以选择 HSL 作为您的颜色管理设置。然后转到亮度字段并根据需要进行修改。

例如,如果您的颜色在其亮度字段中设置为 42,您可以用 20% 的增量创建颜色的更亮和更暗的阴影

复制默认颜色并重命名。然后将“亮度”字段设置为 42*0.8,这将创建一个亮度为 34 的新颜色。

对于更深的增量

复制默认颜色并重命名。然后将“亮度”字段设置为 42*1.2,这将创建一个亮度为 50 的新颜色。

颜色选择器字段不允许任何小数值,因此所有数字都会自动四舍五入到最接近的整数。

通过批量操作控制多个元素

为什么要满足于仅更改一个元素?将最好的留在最后,您可以使用 Sketch 中多选的元素执行批量操作。如果您想在保持所选元素的原始偏移量的情况下移动、调整大小或更改任何内容,这将非常有用。

您需要做的就是选择要更改的元素,并在它们的字段中执行相同的数学公式。主要区别在于,由于多个对象可能具有不同的值,因此某些字段可能会显示值 Multi。不用担心——您仍然可以在这些字段中执行操作。让我们看一些例子

要将所有选定的画板向左移动 120px,请选择所有要移动的画板。

在 X 字段中:-120 会自动将所有画板向左移动 120px

要将图层的高度增加 10px,请选择所有要调整大小的图层。

在高度字段中:+10 会自动将每个图层的高度增加 10px,超过其原始大小


在这篇文章中,我们仅介绍了数学运算符可能实现的功能的冰山一角。您是否使用数学创造了一些令人惊叹的东西?使用标签 #MadeWithSketch 在社交媒体上与我们分享——我们很乐意分享它。

您可能还喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都会让您在几分钟内完成设置并准备好完成您的最佳作品。

免费开始
免费开始