技术文章

2023 年 11 月，我们对智能布局进行了重大升级，在本系列中，我们将深入了解如何实现这一目标。在第一篇文章中，团队设置了场景并解释了我们如何计划我们的工作。在这篇文章中，他们解释了如何解决问题并提高智能布局的可靠性和可预测性。

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

很长一段时间以来，我们从客户那里听到并亲身经历过，对具有智能布局的符号进行更改可能会导致某些东西在不应该移动的情况下移动，或者发生相反的情况。更糟糕的是，它可能会不一致地发生。

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

为问题创造更大的表面积，更多的设计和受其影响的人（以及我们所做的任何进一步的更改），会让那些期待智能布局改进的客户感到沮丧和失望。这对我们来说是不可接受的，即使这意味着将这些改进推迟一点时间。

确定问题

但这些问题到底是什么？我们有多少个不同的？它们是什么时候发生的？是什么造成了他们？我们能否发现这些问题背后存在共同的根本原因？这需要一些侦探工作。

我们开始收集我们积累的许多问题，并一一地倾注在它们上。在每种情况下，我们都会查看客户提供的样本文档，并将其分解为最基本的要素，找出导致意外问题的因素和步骤。

我们作为一个更大的团队开始了这项工作；与我们支持团队的同事、我们的联合首席执行官（Smart Layout 的原始首席开发人员）以及项目团队中的每个人一起。这帮助我们在产品开发中的每个角色中建立了共同的语言和理解。然后，我们继续以较小的小组形式解决 50 多个问题，并按严重性和问题领域进行组织。

经过长期彻底的调查后，我们发现了一些需要重点关注的问题领域：

1. 不同方向之间的规则不一致。正如我们在第一篇文章中提到的，智能布局着眼于层如何沿布局方向重叠。这样，从左到右布局的设计应该与从右到左布局的镜像版本完全相同。然而，情况并非总是如此，这使得该功能不太可靠。

2. 沿同一轴的嵌套布局。设计者可以将智能布局容器嵌套在彼此内部，并且智能布局允许我们自由地放置彼此相关的层。这会导致多个智能布局容器并排出现，但沿同一布局轴具有不同方向的情况。在这些情况下，我们并不总是尊重这些不同的方向。

3. 移除图层时清理空间。从布局中删除图层带来了额外的挑战。我们不仅要考虑图层本身所占用的空间，还要考虑其周围的空间，否则设计将留下过多的空间，看起来不正确。虽然这确实发生了，但与预期并不完全相符。

除了这些关键领域之外，我们还收集了一些单独的问题，其中一些我们认为足够重要，可以自行解决。

建立安全网

智能布局已经存在三年多了，在大型团队使用的无数文档和库中找到了自己的家。这与它的自由排列特性相结合，意味着我们不能开始做出改变——即使它们会变得更好。造成大规模意外副作用的风险太高了。

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

当我们解决每个单独的问题时，我们不仅将原始场景本身输入到测试套件中，而且还将不同布局方向的变体以及相关的和细微不同的布局输入到测试套件中。在项目结束时，我们对智能布局进行了 400 多个额外的单元测试。

深入细节

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

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

智能布局的逻辑并不单独处理左/右或上/下，而是处理任意给定布局方向上图层是否位于前面或后面。换句话说，您希望从左到右布局的工作方式与具有从右到左布局的镜像版本相同。

在从左到右的布局中，与要更改的图层的左边缘（前缘）重叠的图层将保持原样。如果它与正在更改的图层的右边缘（后边缘）重叠，智能布局将调整其大小。您可能认为这与从右到左的布局相反，但事实并非如此。在从右到左的布局中，我们总是根据某些东西是否在左/右来应用规则，并完全忽略布局方向是相反的。

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

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

我们的第二个重点领域是沿同一布局方向重叠多个层的布局。以前使用智能布局时，不可能在另一个水平布局中使用水平居中或从右到左的布局。这是许多客户遇到的一个限制，阻碍了智能布局的一系列可能性——我们知道我们想要解决它。

看看下面的例子就明白我们的意思了。在此示例中，我们有一个整体水平居中布局的列表。在右列中，我们有一个从左到右布局的单元格。这很好用。在中心列中，我们有一个具有从右到左布局的数字单元格，在右列中有一个具有居中布局的评级单元格。

使这个示例正常工作意味着我们必须改进智能布局的逻辑来计算和调整这些嵌套布局中各个图层的位置，不仅使这样的嵌套布局成为可能，而且还确保一切都按照您的预期结束。

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

我们要解决的下一个问题领域是当您在布局中隐藏嵌套的 Symbol 实例时会发生什么 - 具体来说，当您执行此操作时我们如何消除层之间的空间。在我们之前的实现中，当隐藏一个图层时，我们使用该图层之后沿布局方向的空间来计算其他图层的位置和尺寸变化。这导致了两个问题：

1. 当您沿着布局轴隐藏最后一层时，它后面沿着布局方向没有空间可以使用。如果符号内的图层对符号的边界进行了填充，那么当您隐藏符号尾部的图层时，我们会清除其后面的任何空间，但这通常是您想要保留的填充。

2. 在类似堆栈的布局中隐藏第一层和最后一层的行为是不同的，因此更改布局方向会导致不同的行为。这是不可取的。

在类似堆栈的布局中，每层之间都有间距，一种解决方案可能是删除要删除的层之前的空间。但是，当您删除两个或多个层时，这种方法就会出现问题。在这种情况下，您需要删除两层前面的空间，以保持间距一致。用户很难预测这种行为，尤其是在考虑不同的布局方向后。

相反，我们尝试删除尺寸最小的空间。事实证明，这不仅实现起来非常简单，而且还有一个非常有趣的副作用，即保留剩余层的相对距离！作为奖励，这也保留了格式塔邻近原则。

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

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

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

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

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

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

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

交付我们的改进

虽然我们改进和扩展的测试套件让我们相信我们不会以任何方式倒退，但我们希望确保我们的改进符合设计师的期望——从我们自己的设计团队开始。

我们在夜间 Sketch 构建中将每个区域的工作放在相应的功能标志后面，我们的设计师在日常工作中使用这些标志。这样，我们就可以公开我们的更改并评估其影响。当问题发生时，我们可以切换功能标志以轻松找到罪魁祸首区域，并在修复问题时为我们的设计师提供逃生舱口。

即使所有这些安全网都到位，Smart Layout 能够适应任何安排，这意味着我们无法考虑客户可能遇到的各种令人震惊的场景。我们知道我们希望让尽可能多的人获得此更新，但就像我们在内部所做的那样，我们希望为遇到问题的任何人提供逃生通道。

我们的第一个想法是仅在Beta 版本中提供这些更新，但我们的 Beta 版本需要努力才能选择加入。相反，我们在Mac 应用程序 v95中添加了新的实验功能设置面板。这使得设计人员可以尝试正在进行的功能，通过社区论坛分享他们的反馈，并在需要时将其关闭。我们在“更好的智能布局可靠性”功能选项下发布了我们的工作，并且知道它很容易随时关闭，因此默认启用它以获得最大曝光度。