功能背后的故事：如何将智能布局扩展到符号之外（第一部分）

我们刚刚发布了 智能布局的重大更新，将其扩展到符号的范围之外。此最新更新建立在 早期更新 的基础上，该更新使智能布局更加可靠和可预测，并对智能分布进行了相关的增强。

这项更新历时已久，在本系列文章的三部分中，项目团队将深入探讨这些更新，从他们面临的挑战到最终实现成果的过程。

我们在 2019 年底 将智能布局引入 Sketch，建立在符号和库的基础上，旨在使符号更加灵活。

有了智能布局，您就可以告别手动调整符号大小以适应其覆盖或在同一设计中构建多个符号以适应相同组件的不同尺寸的操作。现在，Sketch 可以处理所有这些操作。

只需为您的符号源设置布局属性，它就会在您编辑其实例之一中的覆盖时自动调整大小。更好的是，智能布局在符号沿设置方向增长时，会保持符号中图层之间的填充和间距。

前提很简单，但目标却很宏大。发布后不久，我们就看到许多客户采用了智能布局，并将其作为工作的重要组成部分。随着时间的推移，我们在专注于其他急需的功能的同时，也对智能布局进行了一些改进。

最近，我们决定重新关注智能布局，并将其向前推进一大步。我们知道这不会是一项简单的任务（事实也并非如此！），但这项工作非常重要且必要。

为了理解我们遇到的困难，我们必须退一步，了解基础知识。毕竟，什么是智能布局？它究竟是如何工作的？让我们来分解一下。

智能布局是什么——以及它不是什么

让我们首先了解智能布局的实际含义。它基于三个关键原则

1. 最少的设置。 它只要求设计师回答一个问题：这个设计是如何布局的？可以选择两种方向——水平或垂直——每种方向都有三种锚定布局的选择——分别为左/中/右或上/中/下。这些选择设置了布局的轴线和方向属性。
2. 自由形式的排列。 设计师不受特定类型布局的限制。图层可以以任何设计师想要的方式放置和间距：以堆叠的形式排列、并排排列、完全或部分重叠，或同时混合使用其中一些或所有这些，并在它们之间设置任意数量的间距。
3. 一个单一系统。 它同时处理托管布局系统的两个关键任务。首先，图层必须适应其包含的图层：例如按钮，它在最简单的形式中是由一个矩形包围的文本图层。其次，图层必须适应相邻图层：以两个垂直排列的文本块为例，当上面的文本块增长时，下面的文本块必须向下移动。

为了更好地理解这一点，将智能布局与严格面向堆栈的布局系统进行比较可能会有所帮助。对于这些系统，图层通常必须以单行或单列排列（通常具有严格的均匀间距，没有例外），并且必须辅以其他系统来进行图层包含，因为重叠是不可能的（具有显式填充的可样式容器）。

我们设计的智能布局可以适应基于堆栈的布局，但并不局限于此。

智能布局的实际工作原理

智能布局的工作，与任何其他托管系统一样，都是通过以尊重用户先前选择和意图的方式操纵其他图层来响应对给定图层的更改。

为此，智能布局考虑了三个输入

1. 设计师选择的布局。 它的轴线和方向是什么？
2. 所做的更改。 图层是增大还是缩小，或者消失了？
3. 设计的当前状态。 哪些其他图层位于更改区域内或相邻，以及它们与更改图层的空间关系是什么？

虽然前两个输入非常简单，但后者可能极其复杂。

使智能布局独一无二的自由形式排列和低显式设置特性也使其开发变得独具挑战性。我们必须评估更改图层与其直接上下文中的其他图层之间的空间关系，以从其设计中推断出设计师的隐含意图。（有趣的事实：推断布局是智能布局最初的开发名称）。

在进行此评估时，我们必须考虑

• 每个未更改图层与沿布局轴线的更改图层之间的六种可能的空间关系：它可能在其前缘之前、与其前缘重叠、包围它、被它包围、与其后缘重叠或在其后缘之后。
• 沿布局轴线应用于每个未更改图层的三个调整大小约束（固定大小、固定前缘和固定后缘）的七种可能组合。

总而言之，对于更改图层层次结构级别中的每个未更改图层，这代表了给定图层更改的 42 种可能组合。此外，智能布局递归工作——对嵌套图层的更改会导致层次结构向上发生更改，因为组会根据其内容的大小进行调整。

虽然此评估可能相当复杂，但任何场景中的任何更改只会导致未更改图层的三个结果之一：移动它、增大或缩小它，或不执行任何操作。

此外，如果所做的更改是图层消失了，我们还需要考虑对该图层相邻的空间执行什么操作。我们将在下一篇文章中更详细地介绍这一点。

最后，我们必须考虑沿布局轴线的方向。智能布局实际上与方向无关，始终对水平布局从左到右工作，对垂直布局从上到下工作。如果使用每个轴线其他两个方向中的一个，它只需通过将应用了智能布局的每个元素偏移总更改量的一半或全部来进行补偿。但是，对于沿布局轴线重叠的图层的更改以及某些布局方向，我们也会仔细调整各个图层的位置。

我们面临的智能布局挑战

在寻求改进智能布局时，我们面临着三个主要挑战。

1. 智能布局的结果可能出乎意料且不一致。简单的案例没问题，但它能够处理任何图层排列意味着存在无限种可能的情况，从而导致它可能无法推断出最预期结果的可能性更大。最终，它没有达到我们的标准，需要变得更加智能和可靠。
2. 智能布局无法用于符号之外的图层组。这是迄今为止我们收到的最多功能请求之一，它导致人们仅仅为了利用智能布局而创建符号——但这会带来自身的一系列权衡。
3. 堆叠布局系统的普及造成了预期不符。鉴于这些系统的普及程度，人们自然会期望一个名为“智能布局”的关键管理布局功能是我们对堆叠布局系统的实现。即使它并非如此，当它用于堆叠排列时，我们也需要更好地适应这种预期。

除此之外，我们还遇到了一些加剧因素。

• 智能布局能够处理任何图层排列，也意味着对其逻辑的更改可能存在风险，因为在孤立地查看任何给定场景时，很难完全确信地预测更改的全部后果。
• 由于它在几年前推出并流行起来，智能布局在文档中无处不在，尤其是在库中，这些库分发到工作区中的许多文档中，有时甚至超出工作区范围。如此庞大的用户基础意味着我们做出的任何回归性更改都可能产生巨大影响，并对许多人造成高度干扰。

这是一个巨大的挑战，因此是时候组建一个团队并制定计划了。

未来的道路

虽然智能布局表面上看起来很简单，但我们现在已经看到它背后存在相当多的复杂性。考虑到这一点，我们知道我们需要一个贯穿整个过程始终如一的团队，他们都可以熟悉并掌握该系统的专业知识。我们组建了两名全职工程师，加上一名 QA、一名 PM 和一名设计师，他们在进行其他持续项目的同时也支持该项目。

我们的最终目标是将智能布局应用于图层组，并特别考虑它在基于堆叠的布局中的使用，但我们无法一蹴而就。我们制定了一个计划，让我们能够逐步实现这一目标，同时在此过程中带来一些必要的增强功能。

• 首先，我们将使智能布局更可靠，但仍限于符号。在改进其核心逻辑之前，将智能布局应用于图层组是不可接受的。我们知道这样做只会暴露其在更多场景中的缺陷，这会让用户感到沮丧。此外，更广泛的安装基础只会使我们将来更难改进它。
• 同时，我们也将改进我们的堆叠功能。这些功能——整齐排列和智能分布——已经存在一段时间了，我们知道一旦智能布局应用于图层组，它们将发挥作用，因为它们自然有助于创建和操作等距堆叠。
• 在此之后，我们将智能布局应用于图层组。这本身就需要付出足够的努力，因为图层组不像符号那样有局限性，设计人员可以自由地调整或删除其任何图层，或者完全插入新的图层。

我们肩负着重任，并且知道这将是一段漫长的旅程，但这是一段重要的旅程。

在本系列的下一篇文章中，我们将描述我们如何使智能布局更可靠，在第三篇文章中，我们将总结这段旅程，并回顾最终将其应用于图层组所需的步骤。

要持续关注本系列，请留意博客，或关注我们的X或Mastodon获取更新。