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

在 2023 年 11 月，我们发布了智能布局的重大升级，在本系列中，我们将回顾幕后，了解我们是如何实现它的。在第一篇文章中，团队为这项工作奠定了基础。在第二篇文章中，他们描述了修复问题和提高可靠性和可预测性的过程。在本期最后一篇中，他们将解释他们如何赋予智能布局超越符号的新生命。

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

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

1. 它们不限制人们可以在其中编辑的内容。
2. 它们缺乏符号源提供的永久参考点。

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

最重要的是，我们知道我们还必须考虑智能分布，并为智能布局整体引入一些急需的质量提升更新。但首先让我们更详细地了解这两个具有挑战性的特征。

让我们首先探讨这些领域各自提出的挑战。

探索挑战

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

对于符号中的智能布局，只有两个主要操作会导致设计师可以采取的布局更改

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

由于在符号之外的编辑没有这些限制，我们必须考虑图层可能发生变化的所有其他方式，这些变化需要重新排列布局，这些变化分为三个熟悉的区域

1. 调整图层大小 - 直接调整图层大小或其上级组之一的大小，或间接调整图层大小，通过更改各个文本或线条大小属性等。
2. 添加新图层 - 通过插入全新的图层，使用 ⌘D 或 ⌥-拖动复制现有图层，或者从剪贴板粘贴复制或剪切的图层。
3. 删除图层 - 通过常规的删除或剪切方法。

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

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

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

但存在一个额外的困难：与符号中的智能布局相比，没有“源”，没有原始状态可以查看或从中获取测量值。一旦有人更改组的子图层，原始状态就会消失。没有像符号源这样的原始副本。

这种困难是导致某些细微行为不一致的主要原因。因此，像隐藏子图层这样的操作不会影响布局，因为恢复相邻子图层布局的信息丢失了（一旦通过隐藏删除了相邻空间中最小的空间，并且布局已更改，就无法找回该信息）。

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

响应操作

在我们确定了挑战之后，我们开始着手解决设计师可能对图层进行的三个方面的更改：调整大小、删除和插入。让我们详细了解这些方面。

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

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

但是，对于组中的智能布局，有更多的触发器

• 您可以直接调整图层大小，可以通过在画布上拖动、在检查器中设置特定值或在大小检查器中拖动W或H符号
• 您可以间接调整图层大小（例如，通过更改文本内容或文本属性，包括通过检查器）
• 您可以调整符号实例的大小以适合
• 您可以将符号实例替换为另一个实例。

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

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

后一种选择的主要问题在于，未更改图层与沿布局轴更改的图层之间的空间关系可能会发生变化，从而导致拖动时的行为发生变化。先前不受更改图层影响的图层也可能会突然调整大小——这太不可预测了，所以我们放弃了它。

以下动画展示了两种方法之间的区别

删除图层时会发生什么？

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

任何重叠的（具体来说：在布局方向上重叠尾边缘）未更改的兄弟图层都将因删除的图层的宽度而缩短。如果未更改的图层重叠两个边缘，这是可取的，但如果重叠的图层沿布局轴较小，则可能会弄乱布局。

在开发过程中，这种因看似无害的删除而导致布局混乱的风险，促使我们引入了暂停智能布局的选项。有了这个选项，设计师可以选择删除一个图层而不影响布局，然后在之后恢复智能布局（稍后会详细介绍）。虽然这解决了问题，但我们希望使其更智能，而不是依赖暂停作为完全的解决方法。

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

插入图层时会发生什么？

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

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

我们提供三个可能的插入位置：两个图层之间，接触前一个图层或接触下一个图层（沿布局方向）。虽然接触位置只会插入图层而没有额外的空间，但中间位置也会添加一些空间，因此在插入图层后，它将被放置时左右（或上下）相同的空间所包围。在任何情况下，如果需要，都可以轻松地自由调整该图层的位置。

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

完善体验

当我们开始让内部版本中的组和画板内部的内容正常工作时，我们很快意识到我们需要通过以下三个主要方式来完善智能布局体验

• 设置——轻松启用、禁用和设置方向，而不会中断您的流程。
• 暂停——使您可以在组或画板内部进行更改时，临时停止布局的重新排列。
• 堆栈——包括对类似堆栈布局（均匀间隔的图层行或列）的特殊调整，即使智能布局不严格限于它们。

让我们更详细地探讨一下这些方面。

加速设置

使用智能布局设置组有三个步骤

1. 选择一些图层
2. 将这些图层分组
3. 为组选择水平或垂直布局，然后（可选）更改其方向。

作为单独的操作，这些感觉像是一件苦差事，打断了设计流程。我们希望将它们压缩成感觉像是一个快速的动作，并避免将人们发送到检查器中。

我们首先解决了第三步，很自然地转向了键盘快捷键。但是，有六个选择（2 个轴 × 3 个方向）加上禁用布局的选项，这与标准的键盘快捷键相悖。

我们四处寻找具有类似选择且具有快捷方式的其他操作，对齐是一个很好的平行例子。对于对齐，我们使用 ⌃⌘ 后面跟着 ↑ ↓ ← → H 或 V。我们喜欢使用这些键的自然感觉，但希望避免必须为快捷方式“基础”使用一些修饰符的组合，人们只需记住而没有明显的助记符。

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

• 首先，按下并释放 ⌘L（L 代表 Layout）
• 然后，按 ↑ ↓ ← → H 或 V 以设置布局方向
  • 或者通过再次按 L 来禁用布局（因为您的手指已经在那儿了）。

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

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

最后，我们认为我们设法将这三个不同的步骤压缩成感觉易于记忆且使用快速的东西：选择您的图层，按 ⌘L，然后选择一个方向，继续。

允许暂停

托管布局系统既是福音也是祸害。一方面，它们在自动化事物方面非常有用，因此布局保持您预期的状态。另一方面，该自动化有时会在您不希望它发生时介入，并无意中引起一些多米诺骨牌效应。

对于智能布局而言尤其如此，因为它会对在任何深度进行的更改做出反应，并且因为它适应任何布局安排，从而邀请设计师摆脱均匀结构的布局。

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

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

使用智能分布

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

我们长期以来都有一个智能分布功能，正是为了让处理堆栈布局更容易。它可以帮助设计师调整均匀间隔的选择或一组图层的所有图层之间的间距，并且还可以轻松地重新排序这些图层。此外，我们的整理功能只需单击一下即可创建一个均匀的堆栈排列，并可以选择轻松更改间距。

即使我们什么都不做，如果具有智能布局的组将其图层布置为均匀的堆栈，我们的智能分布功能也将可用。我们也知道用户不一定能够区分这两个功能，他们也不应该这样做——它应该只是工作。因此，我们寻求改进当这两个功能自然发生时，它们如何协同工作。

首先，我们使布局堆栈更容易。以前，如果您想使用特定的水平或垂直间距值均匀地间隔图层，您必须先按整理，然后调整值。我们使您可以直接输入一个值，从而节省了额外的点击。

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

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

发布更新

就像我们在努力使智能布局更可靠时所采用的发布策略一样，我们尽快将组中的智能布局作为实验性功能发布。即使它不完美，它也使设计师有机会在使用和提供宝贵的反馈，因为我们继续构建公共版本。

再次，正如我们在之前的文章中提到的，我们要非常感谢我们社区论坛中的优秀成员，他们在群组中的智能布局作为实验性功能提供期间，与我们分享了他们的经验。 这些反馈帮助我们塑造了最终版本，并在整个过程中为我们的决策提供了宝贵的直觉判断。

总的来说，在我们的实验性功能发布几个月后，我们发布了群组中的智能布局的最终版本。 在那段时间里，我们处理了反馈，修复了错误，并进行了非常重要的润色。 希望这三篇博文能让你很好地了解我们为什么花时间把事情做好。 而且，我们希望您在实践中喜欢它！