功能幕后：我们如何将智能布局扩展到符号之外（第一部分）

我们刚刚发布了智能布局的重大更新，使其远远超出了符号的根基。 这个最新更新建立在之前的更新之上，该更新使智能布局更加可靠和可预测，以及对智能分布的相关增强。

这是经过长时间的努力才实现的，在本系列三部分中，项目团队将深入探讨这些更新，从他们面临的挑战到引导我们走向今天的工作。

我们在 Sketch 中2019 年底推出了智能布局，以符号和库为基础，旨在使符号更灵活

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

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

前提很简单，但目标雄心勃勃。 发布后，我们看到很多客户采用智能布局并使其成为他们工作的基本组成部分。 随着时间的推移，我们设法发布了一些改进，同时我们将注意力集中在其他需求量很大的功能上。

最近，我们决定回到智能布局并向前迈出一大步。 我们知道这不会是一件小事（事实也确实如此！），但它很重要且必要。

为了理解我们遇到的困难，我们必须退后一步并理解基础知识。 智能布局到底是什么？ 实际上它是如何工作的？ 让我们分解一下。

智能布局是什么，不是什么

让我们首先了解智能布局实际上是什么。 它基于三个关键原则

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

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

我们设计的智能布局可以容纳但不仅限于基于堆叠的布局。

智能布局实际上是如何工作的

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

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

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

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

自由形式排列和低显式设置特性使智能布局独一无二，同时也使其开发极具挑战性。 我们必须评估已更改图层与其直接上下文中的其他图层之间的空间关系，以便从其设计中推断出设计师的隐含意图。（小知识：推断布局是智能布局的原始开发名称）。

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

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

总之，这些代表了给定图层更改的 42 种可能的组合，适用于已更改图层层次结构级别中的每个未更改图层。 此外，智能布局以递归方式工作——对嵌套图层的更改会导致层次结构向上更改，因为组会适应其内容的大小。

虽然此评估可能非常复杂，但任何场景中的任何更改都只会导致未更改图层的三种后果之一：移动它、增长或缩小它，或者什么都不做。

此外，如果所做的更改是图层消失，我们还需要考虑如何处理该图层相邻的空间。 我们将在下一篇文章中更详细地介绍这一点。

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

我们面临的智能布局挑战

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

1. 智能布局的结果可能出乎意料且不一致。 简单的情况还可以，但它与任何图层排列配合使用的能力意味着存在无数种可能的场景，因此更有可能无法推断出最预期的结果。最终，它低于我们的标准，需要变得更加智能和可靠。
2. 智能布局不适用于符号之外的组。 这是我们最常被要求的功能之一，它导致人们创建符号只是为了利用智能布局——这带来了自身的一系列权衡。
3. 堆叠布局系统的普及造成了期望不匹配。 鉴于这些系统的普及，人们期望一个名为“智能布局”的关键托管布局功能是我们对堆叠布局系统的实现，这是很自然的。即使不是，我们也需要在堆叠排列中使用它时更好地满足这种期望。

除此之外，我们还有一些令人烦恼的因素。

• 智能布局与任何图层排列配合使用的能力也意味着对其逻辑的更改可能存在风险，因为很难完全有信心地预测更改的全部后果，尤其是在孤立地查看任何给定场景时。
• 由于智能布局已推出几年并广受欢迎，因此它始终存在于文档中，尤其是在库中，这些库分发到工作区内外的许多文档中。如此庞大的用户群意味着我们所做的任何倒退性更改都可能产生巨大的影响，并对许多人造成高度破坏。

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

未来的道路

虽然智能布局表面上看起来很简单，但我们现在已经看到幕后存在相当多的复杂性。考虑到这一点，我们知道我们需要一个贯穿整个过程的团队，他们都可以培养对该系统的熟悉程度和专业知识。我们组建了两个全职工程师，外加一名 QA、一名 PM 和一名设计师，他们在其他正在进行的项目之外提供支持。

我们的最终目标是将智能布局引入组，并特别考虑其在基于堆叠的布局中的使用，但我们无法一夜之间实现。我们制定了一项计划，使我们能够逐步朝着这个目标前进，同时带来一些必要的增强功能。

• 首先，我们将使智能布局更可靠，但仍然仅限于符号。 在我们改进其核心逻辑之前，将智能布局引入组是根本不可接受的。我们知道这样做只会暴露其在更多场景中的缺陷，这理所当然地会使使用者感到沮丧。此外，更广泛的安装基础只会使我们将来更难改进它。
• 与此同时，我们还将改进我们的堆叠功能。 这些功能——整理和智能分布——已经存在一段时间了，我们知道一旦智能布局进入组，它们将发挥作用，因为它们自然有助于制作和操作均匀间隔的堆栈。
• 在此之后，我们将把智能布局引入组。 这本身就足以成为一项努力，因为组没有符号的限制，允许设计人员自由调整大小或删除其任何图层，或者完全插入新的图层。

我们已经完成了我们的工作，我们知道这将是一段漫长的旅程，但这是一段重要的旅程。

在本系列的下一篇文章中，我们将介绍我们如何使智能布局更可靠，在第三篇文章中，我们将通过了解最终将其引入组所需要的一切来结束这段旅程。

要了解该系列，请密切关注博客或在X或Mastodon上关注我们以获取更新。