sketch功能背后：我们如何将智能布局超越符号（第 1 部分）
我们刚刚发布了智能布局的重大更新，使其远远超出了符号的范围。这一最新更新建立在早期更新的基础上，使智能布局更加可靠和可预测，并对智能分发进行了相关增强。
这是一个很长时间的制作过程，在这个由三部分组成的系列中，项目团队将深入研究这些更新，从他们面临的挑战到导致我们今天的工作。
我们于 2019 年底在 Sketch 中引入了基于符号和库的智能布局，目的是使符号更加灵活：
借助智能布局，您可以告别手动调整符号大小以适应其覆盖，或在同一设计中构建多个符号，只是为了适应同一组件的不同尺寸。现在，Sketch 可以处理所有这些。
只需为符号源设置布局属性，每当您在其实例之一中编辑覆盖时，它就会自动调整大小。更好的是，当符号按照您设置的方向增长时，智能布局会保持符号中图层之间的填充和间距。
前提很简单，但目标却雄心勃勃。推出后，我们看到许多客户采用智能布局，并将其作为他们工作的基本组成部分。随着时间的推移，我们成功地进行了一些改进，同时将注意力集中在其他强烈要求的功能上。
最近，我们决定回到智能布局并向前迈出一大步。我们知道这不是一项微不足道的工作（事实并非如此！），但它非常重要且必要。
为了理解我们遇到的困难，我们必须退后一步，了解基础知识。到底什么是智能布局？它实际上是如何运作的？让我们来分解一下。
智能布局是什么，不是什么
让我们首先了解智能布局到底是什么。它基于三个关键原则：
最少的设置。它只要求设计师做一件事：这个设计是如何布局的？有两种方向可供选择 - 水平或垂直 - 每个方向都有三种锚定布局的位置选择 - 分别为左/中/右或上/中/下。这些选择设置布局的轴和方向属性。
自由形式排列。设计人员不限于特定类型的布局。层可以按照设计者想要的任何方式放置和间隔：堆叠布置、并排布置、完全或部分重叠、或者同时混合其中的一些或全部，并且它们之间的间距任意。
一个单一的系统。它同时处理托管布局系统的两个关键任务。首先，图层必须适应其中包含的图层：例如按钮，其最简单的形式是由矩形包围的文本图层。其次，图层必须适应相邻图层：将两个文本块垂直放置，其中底部文本块必须随着顶部文本块的增长而向下移动。
为了更好地理解这一点，将智能布局与严格面向堆栈的布局系统进行比较可能会有所帮助。对于这些，层通常必须排列在单行或单列中（通常具有严格均匀的间距，无一例外），并且必须由其他层包含系统进行补充，因为重叠是不可能的（具有显式填充的可样式容器）。
我们设计了智能布局，因此它可以适应但不限于基于堆栈的布局。
智能布局的实际工作原理
与任何其他托管系统一样，智能布局的工作是通过以尊重用户先前选择和意图的方式操作其他层来响应给定层的更改。
为此，智能布局考虑三个输入：
设计师选择的布局。它的轴线和方向是什么？
所做的改变。这些层是否增大、缩小或消失？
设计的当前状态。哪些其他图层位于更改区域中或与更改区域相邻，它们与更改图层的空间关系是什么？
虽然前两个输入非常简单，但后者可能极其复杂。
自由形式的排列和低明确的设置特征使智能布局独一无二，也使其开发具有独特的挑战性。我们必须在其直接上下文中评估更改的层和其他层之间的空间关系，以从其设计中推断出设计师的隐含意图。（冷知识：Inferred Layout 是 Smart Layout 的原始开发名称）。
参考图层和其他图层之间的空间关系，以及对每个图层采取的操作。
在进行此评估时，我们必须考虑：
沿着布局轴，每个未更改的层和已更改的层之间有六种可能的空间关系：它可能位于其前缘之前、与其前缘重叠、围绕它、被它包围、与其后缘重叠或在其后缘之后。
三个调整大小约束的七种可能组合（固定大小、固定前缘和固定后缘）应用于沿布局轴的每个未更改的图层。
这些一起代表了已更改层的层次结构级别中每个未更改层的给定层更改的 42 种可能组合。另外，智能布局以递归方式工作——对嵌套层的更改会导致层次结构的更改，因为组会适应其内容的大小。
虽然此评估可能非常复杂，但任何场景中的任何更改都会导致未更改的图层仅产生三种后果之一：移动它、增大或缩小它，或者不执行任何操作。
此外，如果所做的更改是某个层消失了，我们还需要考虑如何处理与该层相邻的空间。我们将在下一篇文章中更详细地讨论这一点。
最后，我们必须考虑沿布局轴的方向。智能布局实际上与方向无关，水平布局始终从左到右工作，垂直布局始终从上到下工作。如果使用每个轴的其他两个方向之一，它只需将应用了智能布局的每个元素偏移总更改量的一半或全部来进行补偿。但是，对于沿布局轴和某些布局方向重叠的图层的更改，我们也会仔细调整各个图层的位置。
我们在智能布局方面面临的挑战
当我们寻求改进智能布局时，我们面临三个主要挑战。
智能布局的结果可能会出乎意料且不一致。简单的情况很好，但它能够处理任何层排列，这意味着存在无限数量的可能场景，因此它更有可能无法推断出最预期的结果。最终，它低于我们的标准，它需要变得更加智能和可靠。
智能布局不适用于符号之外的组。这是迄今为止我们最需要的功能之一，它引导人们创建符号只是为了利用智能布局 - 它有自己的一套权衡。
堆栈布局系统的流行造成了预期的不匹配。鉴于这些系统的受欢迎程度，人们很自然地期望称为“智能布局”的关键托管布局功能将成为我们对堆栈布局系统的实现。即使不是，当它用于堆栈排列时，我们也需要更好地适应这种期望。
除此之外，我们还有一些加重因素。
智能布局能够处理任何层排列，这也意味着对其逻辑的更改可能存在风险，因为在孤立地查看任何给定场景时，很难完全自信地预测更改可能产生的全部后果。
自从几年前推出并流行以来，智能布局一直存在于文档中，特别是在库中，这些库分布在工作区中的许多文档中，有时甚至在工作区之外。这种庞大的使用基础意味着我们所做的任何回归性改变都可能产生巨大的影响，并且对许多人来说具有高度的破坏性。
这是一项艰巨的挑战，因此是时候组建团队并制定计划了。
前方的路
虽然智能布局表面上看起来很简单，但我们现在已经看到了幕后的复杂性。考虑到这一点，我们知道在整个工作过程中我们需要一支始终如一的团队，他们都可以熟悉该系统并获得专业知识。我们召集了两名全职工程师、一名质量检查人员、一名产品经理和一名设计师，为该项目以及其他正在进行的项目提供支持。
我们的最终目标是将智能布局引入群组，并特别考虑其在基于堆栈的布局中的使用，但我们不可能一夜之间实现这一目标。我们制定了一项计划，使我们能够逐步实现这一目标，同时在此过程中进行一些必要的改进：
首先，我们将使智能布局更加可靠，但仍然仅限于符号。在我们改进其核心逻辑之前，将智能布局引入到群体中是完全不可接受的。我们知道这样做只会在更多场景下暴露其缺陷，这理所当然会让用户感到沮丧。另外，更广泛的安装基础只会让我们在未来更难改进它。
与此同时，我们还会改进我们的堆叠功能。这些功能（整洁和智能分布）已经存在了一段时间，我们知道一旦智能布局出现在组中，它们就会发挥作用，因为它们自然有助于制作和操作均匀间隔的堆栈。
之后，我们会将智能布局引入群组。这本身就足够了，因为组没有符号所具有的限制，允许设计者自由调整大小或删除其任何图层，或完全插入新图层。
我们的工作已经完成，我们知道这将是一段漫长的旅程，但却是一段重要的旅程。
