logo
帮助文档/Motiff AI/AI 工具箱/AI 布局

AI 布局

AI 布局是一个可以对设计内容进行结构化调整的工具,你可以选择「临时结构化调整」或者「智能创建自动布局」。

当你使用「临时结构化调整」时,AI 会帮助你在调整图层时同步调整受影响的相关图层。例如文本变长时其余图层同步向下移动、快速调整列表的顺序。

当你使用「智能添加自动布局」时,AI 会帮助你对所选中的图层智能创建自动布局,不需要再手动逐层添加。

AI 布局 - 临时结构化调整

你可以使用「AI 布局-临时结构化调整」功能对任意移动端界面快速进行结构化调整。

选中「移动端」界面的图层后,有两种方法可以进入 AI 布局 - 临时结构化调整:

  • 点击工具栏中的 '24_Toolbar_AIseacted.svg' - 「AI 布局」-「临时结构化调整」。
  • 使用快捷键:⇧ Shift + S

AI 布局 - 临时结构化调整目前仅支持移动端界面,暂不支持其他端。

生效范围

选中图层开启「AI 布局 - 临时结构化调整」后,会对这个图层所在界面进行结构化处理。

如下图,选中页面中的部分图层开启临时结构化调整后,它会对整个界面生效。 '生效范围.png'

图层面板

开启「临时结构化调整」后,图层面板左侧会出现一条动态的彩色直线,代表 AI 布局生效的范围。 '图层面板.png'

AI 会根据图层的结构化关系,创建出新的容器或组,对图层进行结构化布局。

除了创建容器和组之外,AI 还会对已有的容器或组添加自动布局属性。

你可以在图层面板中通过缩略图找到 AI 影响的图层:

  • 'AI-vertical left.svg' :AI 添加了自动布局属性的容器。
  • 'AI-frame.svg' :AI 创建的容器。
  • 'AI-group.svg' :AI 创建的组。

AI 布局不会删除你创建的容器和组。

适用场景

结构化调整文本

在修改文本图层时,你需要对所有影响到的图层重新进行布局。「临时结构化调整」可以让你迅速完成这些调整。

调整间距

在调整间距时,你需要逐个图层调整间距。「临时结构化调整」可以让你迅速调整某些数值相同的间距。

调整两个图层的间距时,你需要选中这两个图层的父图层。这时,光标悬浮父图层时会出现间距手柄。你可以通过调整间距手柄的数值来调整间距,你也可以通过右边栏中的自动布局设置调整间距。

快速复制

在页面中复制新的内容时,你需要重新调整被影响图层位置。「临时结构化调整」可以让你快速复制内容,不再需要手动调整相关图层的位置。

调整顺序

在调整图层顺序时,你需要逐个选中并移动图层来修改图层顺序。「临时结构化调整」可以快速调整图层间的顺序,避免逐个移动的机械操作。

退出临时结构化调整

直接退出

直接退出 AI 布局,Motiff 妙多会将设计界面变回原本状态,同时 AI 临时创建的容器和组都会被解除。

你可以通过以下两种方式直接退出 AI 布局:

  • 点击容器旁边的 '16_Canvas_AILayout.svg' 选择「退出」。
  • 使用快捷键:⇧ Shift + S

退出并保存结果

退出并保存结果,Motiff 妙多会保留 AI 布局的结果,后续你可以继续使用这些布局过的内容。

你可以退出并保存结果:点击工具栏中的 '16_Canvas_AILayout.svg' 选择「退出并保存结果」。

如果是临时需要「结构化调整」,调整完毕后可以直接退出。

如果需要页面长期是结构化的,此时你可以保存 AI 布局的结果。

AI 布局 - 智能添加自动布局

「智能添加自动布局」可以让 AI 对图层直接创建自动布局。

比如当你经过尝试后确定了一种布局方案时,可以使用「智能添加自动布局」功能快速进行布局。告别过往从内向外逐层添加自动布局的繁琐过程。

选中图层后,你可以通过以下两种方式直接退出 AI 布局:

  • 点击工具栏中的 '24_Toolbar_AIseacted.svg' -「AI 布局」-「智能添加自动布局」。
  • 使用快捷键:⇧ Shift + ⌘ Command + S