技术文章

2023 年 11 月，我们 对智能布局进行了重大升级 ，在本系列中，我们将在幕后了解我们是如何实现这一目标的。 在第一篇文章中，团队为这项工作设置了场景。在第二部分中，他们描述了解决问题以及提高可靠性和可预测性的过程。在最后一部分中，他们解释了如何赋予智能布局超越符号的新生命。

在使智能布局变得更加可靠之后，我们就开始朝着我们的最终目标努力：将其从符号中解放出来，并将其引入组和画板中。

这并不像看起来那么容易：我们不能简单地让智能布局的所有内容在符号之外工作，就像在符号内部一样，只需轻按一下开关即可。这是由于组和画板的两个特征使它们与符号不同：

1. 它们不会对人们可以在其中编辑的内容施加任何限制。

2. 它们缺乏符号源提供的永久参考点。

这些方面构成了我们在这个项目中面临的大部分挑战的基础。

除此之外，我们知道我们还必须考虑智能分发，并对整个智能布局引入一些急需的生活质量更新。但让我们首先更详细地研究这两个具有挑战性的特征。

让我们首先探讨每个领域所面临的挑战。

探索挑战

挑战 1：符号之外的创作自由

对于符号中的智能布局，设计人员只能采取两个主要操作来导致布局更改：

• 间接调整图层大小（由于文本覆盖或交换嵌套符号）

• 隐藏和取消隐藏嵌套符号

由于在符号之外进行编辑没有这些限制，我们必须考虑图层可能更改的所有其他方式，这些方式需要布局回流，这些方式分为三个熟悉的领域：

1. 调整图层大小 - 通过调整图层或其祖先组之一的大小直接调整图层大小，或者通过更改单个文本或线条大小属性等间接调整图层大小。

2. 添加新图层 - 通过插入全新图层、使用 ⌘D或⌥拖动复制现有图层，或者粘贴从剪贴板复制或剪切的图层。

3. 删除图层——通过常规的删除或剪切方法。

挑战 2：在没有来源的情况下保持一致

我们的基本目标之一是使智能布局的整体体验一致且可预测，无论您是否在符号、组或画板中使用它。

特别是，当我们将智能布局应用于组时，一项基本的智能布局原则应该仍然有效：只有大小的变化才会影响布局，而不会改变位置。

但还有一个额外的困难：与符号中的智能布局相比，没有“源”，没有原始状态可供查看或进行测量。一旦有人对组的子图层进行更改，原始状态就会消失。没有像符号源那样的原始副本。

这种困难是行为上一些微妙的不一致的主要原因。所以，像隐藏子层这样的操作不会影响布局，因为缺少恢复相邻子层布局的信息（一旦通过隐藏删除了最小的相邻空间并改变了布局，就没有恢复相邻子层布局的信息了。获取该信息的方法）。

为了记录行为并确保未来的更改不会破坏它，我们现有的大多数单元测试都有一个与组相关的对应项，因此与智能布局相关的单元测试总数几乎增加了一倍。

响应行动

确定挑战后，我们开始解决设计师可能对图层进行的三个更改领域：调整大小、删除和插入。让我们详细看看其中的每一个。

调整图层大小时会发生什么？

符号中的智能布局有一个触发器：更改覆盖会导致图层大小发生变化（在这种情况下，让我们通过覆盖忽略隐藏和取消隐藏嵌套符号）。

然而，对于分组中的智能布局，还有更多触发器：

• 您可以直接调整图层大小，方法是在画布上拖动、在检查器中设置特定值，或者在大小检查器中拖动W或H符号

• 您可以间接调整图层大小（例如通过更改文本内容或文本属性，包括通过检查器）

• 您可以调整符号实例的大小以适应

• 您可以将 Symbol 实例替换为另一个实例。

因此，在发生任何更改之前，我们需要在更多地方拍摄快照。智能布局已经适用于符号内的组，因此对于检查器，我们“仅”需要为常规组显示相同的智能布局控件。

通过在画布或检查器控件上拖动来调整大小，带来了额外的挑战：我们需要决定何时在更改之前拍摄快照。我们有两个选择：在拖动开始之前拍摄单个快照（并将所有更改视为相对于该快照的更改）或将每个拖动步骤视为单个更改。

后一个选项的主要问题是未更改的图层和已更改的图层之间沿布局轴的空间关系可能会发生变化，从而导致拖动时的行为发生变化。之前不受更改图层影响的图层也可能会突然调整大小 - 这太不可预测了，因此我们丢弃了它。

以下动画显示了两种方法之间的差异：

删除图层时会发生什么？

使用智能布局删除组的子图层与隐藏嵌套的符号实例非常相似。因此，我们采取了相同的行为，包括删除最小的相邻间距。

任何重叠（特别是：在布局方向上重叠后缘）未更改的同级层将缩短已删除层的宽度。虽然如果未更改的层与两个边缘重叠，则这是理想的，但如果重叠层沿布局轴较小，则可能会弄乱布局。

在开发过程中，这种看似无害的删除会弄乱布局的危险导致我们引入了一个暂停智能布局的选项。这样，设计人员可以选择删除图层而不影响布局，然后恢复智能布局（稍后详细介绍）。虽然这解决了问题，但我们希望让事情变得更智能，而不是依赖暂停作为完整的解决方法。

最后，我们决定让已删除的图层仅影响未更改的图层（如果未更改的图层沿布局轴完全包裹已删除的图层）。部分重叠的图层不受影响。在下面的示例中，删除灰色背景图层不会将部分重叠的图层缩小为零 - 它们现在不受影响。

插入图层时会发生什么？

使用智能布局将新的子图层插入到组中类似于取消隐藏嵌套的 Symbol 实例，但有一个主要区别：我们没有关于新图层的确切位置以及其新同级图层需要移动多远的任何信息容纳它。

与隐藏嵌套的 Symbol 实例相比，删除总是会导致我们丢失信息（刚刚删除的较小间距有多大？）插入作为其对应项，无法从当前布局中获取该信息。只有一种方法可以解决这个问题：设计人员需要决定新的同级层应放置在何处以及如何放置。

我们提供了三种可能的插入位置：两层之间、接触上一层、或接触下一层（沿布局方向）。虽然触摸位置只是插入图层，没有额外的空间，但中间位置也增加了一些空间，所以插入图层后，它会被左右（或顶部和底部）所放入的相同空间包围， 分别）。无论如何，如果需要的话，可以很容易地自由地重新定位该层。

除了从组外部放入新图层之外，还可以通过复制或复制粘贴组内的现有子图层来插入图层。

完成体验

当我们开始在内部构建中让组和画板内部工作时，我们很快意识到我们希望通过三种主要方式完成智能布局体验：

• 设置 — 可以轻松启用、禁用和设置方向，而无需停止流程。

• 暂停 - 当您在组或画板内进行更改时，可以暂时停止布局重排。

• 堆栈 - 包括堆栈式布局（均匀间隔层的行或列）的特殊住宿，即使智能布局并不严格限于它们。

让我们更详细地解决每一个问题。

加快设置速度

使用智能布局设置组需要三个步骤：

1. 选择一些图层

2. 对这些图层进行分组

3. 为该组选择水平或垂直布局，然后（可选）更改其方向。

作为单独的操作，这些感觉就像是一件破坏设计流程的苦差事。我们希望将它们压缩成一种快速行动的方式，并避免在此过程中将人员发送给检查员。

我们从解决第三步开始，自然而然地转向键盘快捷键。但有六种选择（2 个轴 × 3 个方向）加上禁用布局的选项，违背了标准的键盘快捷键。

我们四处寻找具有类似选择且有捷径的其他操作，而对齐是一个很好的相似之处。为了对齐，我们使用⌃⌘后跟↑ ↓ ← → H或V。我们喜欢使用这些键的自然感觉，但希望避免使用某些修饰符组合来表示快捷方式“基本”，人们只需记住这些键而无需明显的助记符。

因此，我们决定首次在 Sketch 中使用所谓的“两阶段”快捷方式。

• 一、按下并释放⌘L（L代表Layout）

• 然后，按↑ ↓ ← → H或V设置布局方向

• 或者再次按下以禁用布局L（因为这就是您的手指已经所在的位置）。

我们发现这非常容易习惯：您只需要记住⌘L（足够简单），其余的就像对齐一样。另外，尽管是一个两阶段的快捷方式，但感觉就像一个单一的操作，涵盖了启用布局、更改轴/方向或完全禁用它。

最后，解决第二步：对图层进行分组。这要容易得多：如果您的选择中有未分组的图层，当您点击时，⌘L我们将为您方便地对这些图层进行分组。

最后，我们认为我们成功地将这三个不同的步骤压缩为易于记忆且易于使用的内容：选择图层，按⌘L，然后选择一个方向，然后继续。

允许暂停

托管布局系统可能是福也是祸。一方面，它们在自动化方面非常有用，因此布局可以保持您的预期。另一方面，自动化有时会在您不希望的时候出现，并无意中引起一些多米诺骨牌效应。

对于智能布局来说尤其如此，因为它会对任何深度的更改做出反应，并且因为它适应任何布局安排，从而促使设计人员摆脱均匀结构的布局。

在我们的内部构建中，我们的设计师很快发现自己有时也想这样做，却发现系统一直跟随他们，很难摆脱。我们尝试让禁用智能布局变得更容易，但这感觉不对，因为设计人员通常希望系统在完成特殊更改后重新启动。

因此，我们创建了一种暂停智能布局的方法：按下⌥⌘L它，它将停止适应您所做的任何更改。您可以再次按它来恢复，但一旦您清除选择，它就会自动恢复。因此，您可以准确地知道智能布局何时暂停，画布底部的 toast 会指示这一点，您也可以将其关闭以恢复它。

使用智能分发

正如我们在第一篇文章中指出的那样，尽管智能布局的关键原则之一是支持任何布局排列，但堆栈排列（均匀间隔的单文件行或层列）非常受欢迎 - 因此，我们希望更好地适应它们。

我们长期以来一直拥有智能分布功能，正是为了让堆栈布局的使用变得更加容易。它可以帮助设计人员调整均匀间隔的选择或图层组的所有图层之间的间距，并且还可以轻松地对这些图层进行重新排序。此外，我们的Tidy 功能只需单击一下即可创建均匀的堆叠排列，并提供轻松更改间距的选项。

即使我们什么都不做，如果具有智能布局的组将其图层布局为均匀堆栈，我们的智能分布功能也将可用。我们还知道用户不一定能够区分这两个功能，他们也不应该这样做——这一切都应该正常工作。因此，我们希望改进这两个功能自然出现时的协同工作方式。

首先，我们使布局堆栈变得更加容易。以前，如果您想使用特定的水平或垂直间距值均匀地分隔图层，则必须先按 Tidy，然后调整该值。我们这样做是为了让您可以直接输入一个值，从而节省您额外的点击次数。

其次，我们使重新排列堆栈和调整它们的间距变得更加容易。以前，如果您选择了组本身，则只能在均匀间隔的组中看到智能分布的画布上手柄。我们知道，这与智能布局一起使用会很烦人，您需要在堆栈中选择一个图层来调整其大小（并调整布局），然后调整其间距和/或在堆栈中重新排列它。现在，当您在均匀间隔的组中选择图层时，画布上的智能分布手柄也会出现，以及检查器中的水平和垂直间距值。

最后，我们确保智能布局能够保持物品整洁。在将图层添加到堆栈中时（无论是从外部复制还是放入图层），智能布局都会考虑堆栈的间距。此外，调整堆栈的间距会导致布局适应。

运送更新

就像我们在致力于使智能布局更加可靠时所采用的发布策略一样，我们尽快将智能布局作为实验性功能分组发布。即使它不完美，它也为设计师提供了使用和提供宝贵反馈的机会，因为我们继续朝着公开发布的方向发展。

正如我们在之前的文章中提到的，我们再次非常感谢社区论坛中的出色人员，他们在小组智能布局作为实验功能提供期间与我们分享了他们的经验。这些反馈帮助我们塑造了最终版本，并为我们一路上的决策提供了宝贵的直觉检查。

总而言之，在实验性功能发布几个月后，我们分组发布了智能布局的最终版本。在那段时间里，我们处理了反馈，修复了错误，并对其进行了一些非常重要的润色。希望这三篇博客文章能让您很好地了解为什么我们花时间把事情做好。此外，我们希望您在实践中享受它！