AI 布局：在自由与结构化设计间灵动自如

灵动自如的梦想

自动布局的超级粉丝

我一直是 Figma 自动布局功能的超级粉丝。

在自动布局出现之前，调整大小其实是一个繁琐的重复性工作。比如当你设计一个包含了两个按钮的对话框时，如果其中一个按钮的文案长度发生了变化，那么你需要先手动调整按钮的大小使其保持按钮与文案的边距不变，然后将另一个按钮向相同方向移动一定的距离，才能保持按钮间的间距一致。

这真的很麻烦，但却是产品设计师日常工作里最常重复的操作之一。更崩溃的是当设计内容已经基本确定时，一个小小的改动可能需要手动调整很多内容，而你别无选择。

所以，当第一次了解到自动布局，看到按钮可以跟随内容变化时，我真的很兴奋，永远感谢 Figma 为设计师们打开了“结构化”新世界的大门。

但自动布局也有不顺手的时候。

随着在工作中不断地使用自动布局，很多设计师逐渐变成了“自动布局极客”，任何内容都选择优先用自动布局，让设计内容中叠满了自动布局。这给大家带来了一些烦恼：

• 当某个调整需要破坏目前的自动布局结构时，只能逐层手动解除。自动布局此时成了灵活调整的阻碍。

• 当同一个设计稿需要不同人来协作时，由于大家在自动布局构建方式上的区别，往往需要逐层查看图层的自动布局属性，才能在这个设计文件的基础上开始工作。或者，你只能选择将其他人的自动布局全部解除……

直到有一天，当我看到 Sho Kuwamoto 在 Schema 2021 分享“Free-form Design（自由式设计）和 Structured Design（结构化设计）”时，豁然开朗。原来传统方式的自由移动是“自由式设计”，而自动布局是对图层做了“结构化设计”的标记，代表以后这个容器的调整会按照结构化的规则调整。两种方式根据需要灵活的使用，才是正确的工作方式，而不能因为自动布局调整起来方便，无论什么内容都倾向于优先使用自动布局。

但一个疑问浮现在我的脑海中，设计师确实可以对图层选择是否添加自动布局（即对图层进行“自由式”和“结构化”分类），但似乎“自由式”和“结构化”并不是完全由图层内容决定，反而是和即将进行的调整更密切相关。

比如当设计师正在尝试多种卡片的方案，需要自由地拖放内容进行调整时，这张卡片就应该是“自由式”的。但如果设计师想要做一些结构化的调整，比如调整卡片中某些内容的间距、边距，那么这张卡片就应该是“结构化”的。

我突然明白，设计师想要的可能是：“根据自己所需要做的调整，灵动自如地在自由式设计和结构化设计中切换”。

在我们决定出发前

于是，做一个“灵活切换‘自由式设计’和‘结构化设计’的开关”就被我们放在了一个优先级更高的位置上。

我们有一个初步的设想：如果你可以进入一个“临时结构化调整”模式，让所有的编辑行为都变成“结构化调整”，你可以在这里快速的调整间距、边距，移动顺序，移入移出，让父图层跟随子图层大小变化而变化。完成这些调整后，你退出这个模式，一切又变回了“自由式设计”，你可以随意 Drag & Drop 他们。这听上去是不是很酷？

但摆在我们面前的问题是，如果想灵活切换“自由式设计”和“结构化设计”，那么需要有一个自动生成自动布局的能力，使我们能够自动的前往“结构化设计”的世界。

虽然布局复杂，但实际也可以被抽象为元素之间的对齐、间距边距数值等规律。学习准确的、被抽象出来的规律，是 AI 可以做到的。

因此我们决定将 AI 引入“布局”，让 AI 认识大千世界的布局形式从而学习结构化布局的规律。当 AI 学习过足够多的页面，认识足够多的布局后，就可以对图层做出结构化的操作，这个行为由 AI 来完成，和由设计师花费大量时间和精力来完成，并没有太多不同。AI 可以成为连接“自由式设计”和“结构化设计”的桥梁。

这便是我们创造“AI 布局”功能的开端。

创造 AI 布局

通过 Figma 在 Config 2022 的分享，Designing Auto Layout V4 - Joel Miller, Oscar Nilsson (Config 2022)，我对 Figma 用户在自动布局这个功能上的使用情况有了更多了解：

• 在 Figma 中，长期使用自动布局的用户仅占 20%（Config 2022 的数据，现在可能变高）；
• 自动布局的门槛较高，以至于很多设计师难以理解复杂的布局结构，尤其是其他人创建的自动布局，所以很多设计师完全移除自动布局，只为了做简单的修改。

因此，我们敲定了两种目标用户的画像和希望 AI 布局帮助他们解决的问题：

• 非自动布局的用户：对自动布局的属性、规则不甚了解。希望能够通过 AI 布局，带给他们更智能的“结构化设计”，提升他们的效率；
• 自动布局用户：了解自动布局的属性、规则。当他需要对一部分事先没有使用自动布局的内容做临时地结构化调整时，能够通过 AI 布局让他一键完成调整而不用重新设置自动布局。

如何确定生效范围

在构建 AI 布局 - 临时结构化调整前，我们首先需要确定的是它的生效范围。

一开始我们的直觉是对选中的对象生效，这样对用户来说是更可控、体验更佳的。我们制作了一个对选中内容生效的原型，但实际体验中，我们发现这个选择其实存在一些问题，比如当我们想调整如下页面中的第一个模块卡片的间距边距时。

• 对于自动布局用户来说，由于他明白自动布局的规则，所以他很容易做出下图的行为，选中第一张卡片模块及其会影响到的其他图层。进入临时结构化调整模式后，完成它想要完成的操作；

• 但到非自动布局用户这里，这一切就变得不那么清晰了，非自动布局用户的直觉往往是选中那个想要调整的内容，当对卡片进行调整时，会发现卡片下方的内容并没有保持原本的间距向下移动，反而开始遮挡下方的内容——这个调整仍然在按照非自动布局的方式运作。所以，随着这种场景的反复出现，大家会更倾向于选中整个设计稿来进入临时结构化调整的模式，不再自行选择生效的范围。

因此，我们最终决定选择当用户进入临时结构化调整时，会由 AI 根据用户所选内容识别出应该生效的“整页设计内容”，都进入结构化调整。这样，对于非自动布局用户不再需要理解自动布局的互相影响的规则，对于自动布局用户，只要 AI 结果正确，一样可以完成用户预期的调整。

AI 布局的能力

临时结构化调整：

我们通过 AI 自动创建自动布局，并且按照“整页设计稿”的生效范围，搭建了这样的“AI 布局 - 临时结构化调整”，它可以帮你快速完成间距、移入移出等快速调整，而不用你从头创建自动布局。

当你完成“结构化”的调整后，你只需要退出“AI 布局 - 临时结构化调整”，就可以回到自由式的设计中，不被原有结构所限制。在“自由式”和“结构化”的设计中，灵动自如。

智能创建自动布局：

当我们有了“自动创建自动布局”的能力时，似乎也可以提供一个快速由 AI 创建自动布局的能力，来让用户从草稿到可复用内容的转换变得更加丝滑，这就是“智能创建自动布局”功能。

现在，你只需选中想要添加自动布局的父图层，点击“智能添加自动布局”，AI 会帮你完成自动布局的创建和其中容器的新增。

很高兴有机会能给自动布局用户提供这个礼物，希望你们会喜欢它。

典型使用场景

在和不同用户灰度测试的过程中，我们逐渐找到了最佳的实践方式：

• 对于非自动布局用户来说，当你遇到需要进行快速完成间距、移入移出等上述“结构化调整”的操作时，可以通过“临时结构化调整”，在 AI 的辅助下快速完成这些工作，代替之前逐步调整的操作。
• 对于自动布局用户，我希望 AI 布局能帮你从“一切内容优先使用自动布局”中脱离出来。
  • 对于组件、重复的内容、结构稳定的模块，你需要对它们创建自动布局规则时，你可以使用“智能添加自动布局”丝滑地完成这个过程。
  • 而对后续可能会发生改变的内容，你仍可以维持“自由式设计”的状态，如果后续有结构化调整的需要，就通过“临时结构化调整”快速完成。

在看不见的地方，我们还做了很多

AI 的挑战

让 AI 创建布局看似简单，实际上依赖 AI 对设计稿结构的理解。但设计师在设计过程中往往不会特别注意图层结构的“规整”，导致在最初的尝试中，AI 难以完成“设计稿的结构化”。

为了解决这个问题，我们主要利用了两方面的信息来帮助 AI ：

• 设计稿中图层和组、容器的重叠、包含、对齐关系；
• 设计稿的容器关系、容器与组的相似性、容器之中的内容。

通过这些辅助信息，AI 识别设计稿结构的准确率有了大幅提升。

但在面对已经结构化的设计稿时，当某部分的内容发生变化，它的相关图层应该如何响应、对齐关系如何维系又成了 AI 新的课题。

于是我们收集足够多的布局数据，来完成模型的训练和评测，逐渐达到我们预期中的效果。

产品上的微调

在“AI 布局—临时结构化调整”上，我们有一个核心的原则是“用户使用 AI 布局前的内容和使用 AI 布局后的内容需要看上去完全一致”，也就是说虽然图层被添加了自动布局，但添加自动布局的过程并不会改变图层原本的间距、对齐关系以及视觉上的效果。

因此，我们首先需要解决的事情是，对于更习惯使用“矩形+组”搭建设计内容的非容器用户，我们需要 AI 布局具备将“矩形+组”转化为容器的能力。这里的规则大部分和创建自动布局时的规则相似，如下图。

但设计的世界并没有这么简单，一些情况下各种属性的叠加会导致设计内容发生剧烈变化。比如当你想要对一个带有效果的“矩形+组”进行转换时，如果你将他变为容器，那么原本矩形的效果会对新容器内的所有图层生效。

再比如，如果矩形图层不透明度非 100%，那么在转换后容器的不透明度会被丢失。

所以我们选择了其他方式创建自动布局——将矩形设置为绝对位置，并且将它的约束设置为缩放、缩放，让其能够永远跟随容器的大小变化而变化，然后将其他图层构建出自动布局的响应式规则，来保证整个内容的样式一致性。达到像下图的效果：

当“临时结构化调整”完成后，退出这个模式，所有的内容又会变回进入这个模式前的状态，保证你仍可以顺手地完成设计工作。

接下来，我们还面临一个问题，如果设计师在设计稿中的某些内容上刻意做了 1px 或者 2px 的不对齐，那么在使用 AI 布局时，设计师可能并不希望因为自动布局的对齐规则，导致刻意设置的元素被强行对齐。

所以我们在这里增加了很多临时的容器，来让原本不对齐的内容在新容器的包围下保持自动布局规则的对齐，且能够随着内容的改变而变化大小。

当我们完成了以上打磨，很高兴我们遵循了“用户使用 AI 布局前的内容和使用 AI 布局后的内容需要看上去完全一致”的原则，并且迫不及待想要在正式环境中使用它。

AI 布局的未来

当你纵览设计工具的功能集时，你会发现所有帮你设计“结构化”内容的功能都有一个“更自由式”的版本。比如你可以用样式来提前管理颜色，但如果你不想提前结构化管理这些内容，你也可以通过“选中的颜色”来保持“自由式设计”的状态下快速更改某些颜色。你可以用自动布局来提前管理设计内容，但你如果不想结构化管理这些图层，你也可以通过“智能排列”来做到某些快速的调整。

但“结构化”设计内容是需要付出精力的，需要提前准备，它确实能够让我们后续的工作效率更高，但不可否认我们前期的准备也流下了不少外人难以察觉的汗水。

我经常可以看到一类观点：自动布局太好用了，让我的某些操作效率更高了。我也经常可以看到另一类观点：自动布局让我的工作陷入了无数个弹性盒子里，从此被限定在横向和纵向的规则中。

我们不希望变成后者这样，我们想能够保护设计师的灵感和尝试的空间，而不是在一个个“结构化”的弹性盒子中，束缚的创意和想象空间。我们希望能够通过 AI 的能力，来让你保持自由的状态下也能享受结构化的便利，以及在确定需要结构化的时候也能由 AI 来帮你提升效率。

AI 布局是 Motiff 在“自由与结构化设计间灵动自如”的初次尝试，我们会继续尝试更多。