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

在 2023 年 11 月，我们发布了对智能布局的重大升级，在本系列文章中，我们将了解幕后故事，了解我们是如何实现这一目标的。 在第一篇文章中，团队介绍了背景，并解释了我们如何计划我们的工作。 在这篇文章中，他们解释了他们如何解决问题并提高智能布局的可靠性和可预测性。

当我们制定计划将智能布局从符号中解放出来并使其随处可用时，我们知道我们必须使其……更智能。

长期以来，我们从客户那里听到（并且自己也经历过），对使用智能布局的符号进行更改可能会导致不应该移动的东西移动，或者相反。 更糟糕的是，它可能发生得不一致。

如果我们首先尝试使智能布局随处可用，然后再解决这些问题，我们只会扩大它们可能发生的范围，并将它们暴露给更多的人。 这也会使以后修复它们变得更加困难。

为问题创建一个更大的表面积，更多设计和人员受到它们的影响（以及我们所做的任何进一步的更改），将使期待智能布局改进的客户感到沮丧和失望。 这是我们无法接受的，即使这意味着将这些改进推迟更长时间。

识别问题

但这些问题到底是什么？ 我们有多少个不同的问题？ 它们什么时候发生的？ 是什么导致了它们？ 我们能否发现它们之下的任何共同根本原因？ 这需要一些侦探工作。

我们开始收集我们积累的许多问题，并逐一研究。 在每种情况下，我们都查看了客户的示例文档，并将其分解为最基本的内容，确定导致意外问题的因素和步骤。

我们作为一个更大的团队开始了这项工作； 来自我们支持团队的同事，以及我们的联合首席执行官（智能布局的原始首席开发人员）以及项目团队中的每个人。 这有助于我们在产品开发的每个角色中建立共享的语言和理解。 然后，我们作为一个较小的团队继续进行，处理了 50 多个问题，并按严重性和问题区域对它们进行了组织。

经过漫长而彻底的调查，我们发现了一些需要关注的问题领域

1. 不同方向之间的规则不一致。正如我们在第一篇文章中提到的，智能布局会查看图层如何沿布局方向重叠。 这样，具有从左到右布局的设计应该与具有从右到左布局的镜像版本完全相同。 然而，事实并非总是如此，这使得该功能的可靠性降低。
2. 沿同一轴的嵌套布局。设计人员可以将智能布局容器彼此嵌套，智能布局允许我们彼此自由地放置图层。 这导致了多个智能布局容器并排出现，但沿同一布局轴方向不同的情况。 在这些情况下，我们并不总是尊重这些不同的方向。
3. 删除图层时清理空间。从布局中删除图层提出了额外的挑战。 我们不仅要考虑图层本身占据的空间，还要考虑周围的空间，否则设计会留下过多的空间并且看起来不正确。 虽然确实发生了这种情况，但它并不完全符合预期。

除了这些关键领域之外，我们还有一些单独的问题，其中一些我们认为非常重要，需要单独修复。

设置安全网

智能布局已经存在三年多了，在大型团队使用的无数文档和库中找到了归宿。 将此与其自由形式的排列特性相结合，意味着我们不能仅仅开始进行更改——即使它们是为了更好。 造成大规模意外副作用的风险太高了。

为了确保我们向前迈出两步，不后退一步，我们编写了许多性能更高且更易于调试的单元测试。 这保证了我们不会无意中撤消任何当前正确的期望。 有了这些，当我们实施使智能布局更加一致、可预测和易于理解的更改时，我们可以保持一切与设计人员可能设置的方式兼容。

当我们修复每个单独的问题时，我们不仅将原始场景本身输入到测试套件中，还输入了用于不同布局方向的变体以及相关且略有不同的布局。 在项目结束时，我们最终为智能布局添加了 400 多个单元测试。

深入了解细节

有了我们的测试套件为更改提供安全网，我们开始逐个解决我们的关键问题领域。 我们从跨方向的一致行为问题和具有不同方向的嵌套布局开始。 这些是相辅相成的，这意味着我们可以稍后解决空间清理问题——这是一个更加孤立的问题。

问题领域 1：创建布局一致性，无论方向如何

智能布局的逻辑不是单独处理左/右或上/下，而是处理图层在任何给定布局方向上是超前还是滞后。 换句话说，您会期望从左到右的布局与具有从右到左的镜像版本的布局以相同的方式工作。

在从左到右的布局中，与正在更改的图层的左边缘（前沿）重叠的图层将保持原样。 如果它与正在更改的图层的右边缘（后沿）重叠，智能布局将调整其大小。 您会期望这对从右到左的布局是相反的，但事实并非如此。 在从右到左的布局中，我们始终根据某物是位于左侧/右侧来应用规则，而完全忽略布局方向是相反的。

这是我们需要权衡破坏现有文档中的布局与引入更一致和可预测的行为的领域之一。 我们选择了后者。 现在，我们始终调整与后沿重叠的图层的大小，并始终根据布局方向移动后沿之后的图层。

问题领域 2：改进沿布局轴重叠的图层的布局

我们关注的第二个领域是沿同一布局方向重叠多个图层的布局。 以前，使用智能布局，不可能在另一个水平布局中具有水平居中或从右到左的布局。 这是许多客户遇到的一个限制，它阻止了智能布局的各种可能性 - 我们知道我们想解决它。

看看下面的示例，了解我们的意思。 在此示例中，我们有一个包含列的表，其整体水平居中布局。 在右列中，我们有一个单元格，其布局从左到右。 这工作正常。 在中间列中，我们有一个单元格，其中数字的布局从右到左，在右列中，我们有一个单元格，其中评级的布局居中。

为了使这个示例正常工作，我们需要改进智能布局的逻辑，以计算和调整这些嵌套布局中各个图层的位置，不仅要使这样的嵌套布局成为可能，还要确保一切都最终达到您期望的位置。

问题区域 3a：消除隐藏图层之间的空间

我们需要解决的下一个问题区域是当您隐藏布局中的嵌套 Symbol 实例时会发生什么 —— 特别是，当我们这样做时，如何消除图层之间的空间。在我们之前的实现中，当您隐藏一个图层时，我们会使用该图层沿着布局方向后的空间来计算其他图层的位置和尺寸变化。这导致了两个问题

1. 当您隐藏沿布局轴的最后一个图层时，沿着布局方向没有可用的空间。并且如果 Symbol 内部的图层具有到 Symbol 边界的内边距，那么当您隐藏 Symbol 末尾的图层时，我们会清除它之后的任何空间，但这通常是您想要保留的内边距。
2. 隐藏堆叠式布局中的第一个和最后一个图层的行为不同，因此更改布局方向会导致不同的行为。这是不可取的。

在堆叠式布局中，每个图层之间都有间距，一种解决方案可能是删除要删除图层前面的空间。但是，当您删除两个或更多图层时，此方法会变得有问题。在这种情况下，您需要删除两个图层前面的空间，以保持间距一致。这种行为对用户来说不容易预测，尤其是在考虑到不同的布局方向时。

相反，我们尝试删除尺寸最小的空间。结果证明，这不仅非常容易实现，而且还具有保留剩余图层相对距离的非常有趣的副作用！作为奖励，这也保留了接近性格式塔原则。

下面的示例展示了这一点。这里我们有一个带有三个项目部分的工具栏。每个部分之间有很大的空间，而每个部分内的项目之间有较小的空间。在我们之前的迭代中，我们删除的空间可能在项目之间或项目之外（取决于您隐藏的项目），这将以不可预测的方式改变工具栏的外观。

现在，通过删除最小的相邻空间，隐藏工具栏组中的单个项目仍然可以保持分组完整，而删除组中的所有项目仍然可以保持相邻组的分隔。更好的是，无论布局方向如何，这种方法都具有可预测的行为！

问题区域 3b：隐藏图层时保留空间

我们对清理多余空间的新方法感到满意，但我们也收到了客户的反馈，他们的布局依赖于删除特定空间 —— 而不总是我们新设置删除的空间。处理此请求对智能布局的核心原则提出了挑战。

正如我们在第一篇文章中概述的那样，智能布局的核心原则是尽量减少设置，而是从设计师设置布局的方式推断意图。当需要额外的控件时，我们更喜欢人们已经知道的选项，例如固定到边缘和固定大小约束。这些已经可用于组中的任何图层，但也适用于智能布局的上下文中。

我们知道解决保留特定空间的问题的方法是找到某种方法来选择隐藏图层是否保留其空间。我们寻找了一个好的启发式方法来确定何时保留隐藏图层的空间，并寻找设计师可以用来设置此内容的现有选项，但没有一个对我们有效。最终，我们决定添加一个新的显式智能布局选项 —— 一个标记为“隐藏时保留空间”的复选框 —— 可用于 Symbol 实例中的 Symbol。

虽然我们相信拥有强大的原则来驱动我们的产品设计理念，但在这种理念开始施加限制时，保持非教条的方法并保持灵活性非常重要。

发布我们的改进

虽然我们改进和扩展的测试套件使我们确信我们没有以任何方式退步，但我们想确保我们的改进符合设计师的期望 —— 从我们自己的设计团队开始。

我们将每个领域的工作都放在我们的 nightly Sketch 构建中相应的特性标志后面，我们的设计师在他们的日常工作中使用这些构建。 通过这种方式，我们可以公开我们的更改并评估它们的影响。 当出现问题时，我们可以切换特性标志来轻松找到罪魁祸首区域 —— 并在我们修复它时为我们的设计师提供一个逃生舱。

即使有了所有这些安全网，智能布局与任何安排一起工作的能力意味着我们不可能考虑到我们的客户可能经历的惊人多样性场景。 我们知道我们希望将此更新尽快提供给尽可能多的人，但就像我们在内部所做的那样，我们希望为遇到问题的任何人提供逃生舱。

我们的第一个想法是仅在 Beta 版本 中发布这些更新，但我们的 Beta 版本需要选择加入。相反，我们向 Mac 应用程序的 v95 版本添加了一个新的实验性功能设置面板。这允许设计师试用正在进行中的功能，通过 社区论坛 分享他们的反馈，并在需要时关闭它们。我们在更好的智能布局可靠性功能选项下发布了我们的工作，并且知道可以随时轻松关闭它，因此默认情况下启用了它以获得最大的曝光率。

最终，对此更新的负面反馈很少，回归也很少，这正是我们所希望的。 现在，智能布局的基础处于更好的位置，我们终于可以着手进行此项目的最终和最受期待的阶段：将智能布局从 Symbols 中移除，并将其引入到 Groups 和 Artboards 中 —— 但那是下一篇文章的内容。

要跟上系列的步伐，请密切关注 博客 或在 X 或 Mastodon 上关注我们以获取更新。