【功能说明文档】AI 布局

你是否有过以下经历:

  • 当想要尝试多种间距方案时,需要依次移动每个相关图层的位置。
  • 当要在页面中增加一个新的二级页入口,需要把「新增位置」以下的内容依次移动。

AI 布局是一个可以对设计内容进行「结构化调整」的工具。帮助你从此拜托琐碎冗杂的操作。

下面的内容将向你介绍如何使用 AI 布局。

开启 AI 布局

AI 布局是 Motiff 妙多提供的一种「一键进入结构化」的模式,你可以在「结构化」、「自由式」之间灵活切换,完成你想要的操作。

选中「移动端界面」的图层后,有三种方法可以进入 AI 布局:

  • 点击工具栏中的 '24_toolbar_AI-layout.svg'
  • 鼠标右键,选择「进入 AI 布局」。
  • 使用快捷键:Shift + M

AI 布局目前仅支持移动端界面,暂不支持其他端。

生效范围

选中图层开启「AI 布局」后,会对这个图层所在界面进行结构化处理。如下图,选中页面中的部分图层开启 AI 布局后,AI 布局对整个界面生效。

'生效范围.png'

图层面板

开启 AI 布局后,图层面板左侧会出现一条动态的彩色直线,代表 AI 布局生效的范围。

'图层面板.png'

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

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

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

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

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

AI 布局好用的场景

有哪些好用的「结构化」场景呢?

快速调节间距

当你需要调整间距时,很多时候逐个调整是比较繁琐的,来看看 AI 布局能为你做什么。

快速复制

你一定遇到过这个场景:

在页面中间复制新的内容时,需要调整被它影响的内容。

AI 布局可以让你快速复制内容,不在需要手动调整素有相关图层的位置。

调整顺序

你一定遇到过这种场景:

想要快速调整图层顺序,需要逐个移动修改顺序的图层。

AI 布局可以快速图层间的顺序,再也不需要「机械地移出换位置再放回」。

修改文字

当你想看一个多行的效果,或者想让一个文本旁的内容跟随文本变化,你也可以使用 AI 布局功能。

退出 AI 布局

当你完成「结构化」调整之后,你可以快速回到「自由式」设计,AI 创建的容器和组会自动解除,回到你原本设置的组和容器结构。

直接退出

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

你可以有三种方式直接退出 AI 布局模式:

  • 点击工具栏中的 '24_toolbar_AI-layout.svg'
  • 鼠标右键,选择「退出 AI 布局」。
  • 使用快捷键:Shift + M

退出并保存 AI 布局

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

你有两种方式可以退出并保存 AI 布局:

  • 点击工具栏中的 '24_toolbar_AI-layout.svg' 旁的 '12_control_arrow-down.svg' ,选择「退出并保存 AI 布局」。

  • 使用快捷键:

    • macOS:⌥ Option + ⇧Shift + M
    • Windows:Alt + Shift + M

什么时候应该保存?

如果是临时需要「结构化调整」,那么「AI 布局」是一个临时状态,调整完毕后可以直接退出。 如果认为这个页面的内容后续也应该长期是结构化的,这时你可以保存 AI 布局的结果。

一些小技巧

  • 如果你只保留其中的一部分图层,你可以在 AI 布局时将它单独复制出来。
  • 如果你是自动布局的熟练用户,AI 布局可以帮助你:
    • 智能创建自动布局,你可以适当的修改内容以符合你的要求。
    • 在修改一开始不会设置自动布局的图层时,更快地完成结构化的操作。比如如下例子。