AI 复制：让复制粘贴有所不同

当我们在思考问题“如何让 AI 融入并简化设计师的界面绘制”时，很自然的，会想先搞明白“一组用户界面是如何被一步一步绘制出来的”。

我们观察了组里 3 位设计师伙伴的工作过程，记录了他们绘图过程中使用的所有功能及其操作方式。可以用下图概括：

复制&粘贴——最高频的用户行为之一

界面设计中，复制粘贴的使用频率很高。

为了产品体验的一致性，用户界面里“重复”无处不在。重复可以是一条分割线、一个颜色、一种投影效果、一组文本样式、一种布局关系、一类设计风格。重复的也可以一个按钮、列表中的一行、一张卡片、一个弹窗。

复制粘贴一个相似内容再进行一番调整，比重新绘制更加便捷。因此复制粘贴使用频率高，是极为合理的现象。

复制粘贴 + AI = ？

核心问题：AI 在复制粘贴的场景中可以做些什么？

让我们再次回到用户的实际操作中。这次我们聚焦复制粘贴场景，将复制粘贴的内容分类，并将前后操作都纳入考量。

我们发现重复的部分往往相似但又有略有差异，而复制粘贴之后通常需要在副本上做一些调整来完成差异。或许，这份“调整工作”可以由 AI 代劳。

调整是个技术活。

有些调整是为了模拟真实界面、或为了向研发示意不同的内容可能带来的布局变化。

例如：

• 案例 A：消息列表中重复的行，对应操作：
  • 复制一行；
  • 更换图文内容；
  • 调整行与行之间的布局关系。
• 案例 B：双瀑布流中重复的内容卡片对应操作：
  • 复制一个内容卡片；
  • 更换图文内容；
  • 调整卡片之间的布局关系。

这类调整一般需要设计师找到一些同类图片、撰写一些相似的文本，再将其替换至副本。这个操作说来简单，但找图、写文案实际是繁琐的，而 AI 恰好有能力完成这份简单但繁琐的工作。

从想法到落地，那些解决了或还未解决的问题

布局看似一致，实际大有不同

将图文内容替换入副本，看似简单，实际涉及了对布局的理解与适配。

如果直接将内容替换到副本，可能会面临下面的问题：

这类问题通常来自于对文本的替换，文本的长度变化可能带来如下变数：

• 文本需要如何对齐？左对齐、居中对齐，还是右对齐？
• 若文本处于一个有底色或有边框的容器内，比如按钮，容器是否要同步变化大小？
• 文本之后的内容，是否要同步改变位置？

当然，如果用户输入的内容从内到外都有可以应对文本内容变化的自动布局，以上的问题都迎刃而解。但我们不能假设用户都有使用自动布局的习惯，或是在开始 AI 复制前，会做一套的预处理工作。

AI 复制需要有能力应对不同的输入，需要理解用户的布局，做出尽可能正确的调整。

为了解决这个问题，在进行替换内容时，我们会调用 Motiff 妙多的另一 AI 功能——AI 布局。通过 AI 布局计算出替换内容后所有图层的位置与尺寸，并将计算结果应用于 AI 复制的副本，将正确的布局呈现给用户。

图文搭配，或许早有安排

大部分情况下，我们对 AI 生成的内容要求不高，只需要它类别正确，内容在一定范围变化即可。比如：生成的都是中文地址、相同格式的日期、11 位的手机号等等。

但有时，我们会希望一组输入的几项不同内容保持一定的关联性，比如这样：

这种内容搭配的知识不完全属于通识，在不做额外的输入下，AI 不能很好地处理这个场景。

但这些内容对使用功能的当事人来讲可能非常熟悉。因为它们往往在历史设计稿中被反复使用，可能是早已出现过的，设计师曾经手动搭配过的内容组合。

为了这类场景，AI 复制不仅学习了历史设计稿的图文内容，还学习了内容之间的“固定搭配”，让复制结果更贴合用户的业务场景。

AI 的学习速度 VS 设计师的创造速度

在搜索领域有一个课题：如何改善搜索索引的更新速度？

搜索时，查找的不是全量的真实内容，而是索引。真实内容每分每秒都在发生变化，索引在追赶着真实内容的更新，但无法避免时间差。

这个问题对于搜索引擎这种需要检索海量数据的工具尤其明显。对于高重要性的网站，索引的更新可能在几分钟到几小时之内；而对于更新不频繁或相对不那么重要的网站，更新可能会延后几天甚至几周。

AI 复制功能也面临类似的问题。

AI 要学会你的历史设计稿，需要经历一个过程：

• 识别出设计稿中的重复部分；
• 理解它们的对应关系和组合关系；
• 建立索引等。

设计师每天都在持续地创造新的内容，AI 当然也在持续学习，但速度没有想象中那样实时。

UI 设计与搜索不同，搜索引擎索引的延迟或许很难被用户感知。但 AI 复制学习速度慢了，在部分情景下会影响功能的使用。

设想一个场景：设计师新绘制了一个课程页的列表视图，并导入了一些新的图片。随后继续绘制这个页面的网格视图。网格视图实际可以使用与列表视图一致的图文内容。但由于索引创建的滞后性，无法在此场景使用 AI 复制召唤出这些新创建的图文内容。

为了提高学习速度，“AI 复制索引”的结构经历了数次改版。从每个用户对应独立的索引，到同样的内容共享索引。从定时的无差别更新，到文件粒度的更新，再到容器粒度的更新……

经过几次改版，我们很大程度地降低了“AI 学习”的成本，提高了“AI 学习”的速度。

目前的时效性大致如下：

• 对于新纳入 AI 学习范围的文件，比如导入的文件，会在几分钟内生成索引。
• 对于范围内已有文件的更新，AI 将在 24 小时之内将更新迭代入索引——根据更新的并发量级，实际更新时间可能有所波动。

但这不能满足我们刚刚设想的场景。我们还需继续观察用户对“索引”更新的实际需求，进行持续的优化。

未来未知，求索不止

从想法到落地，我们遇到了不少问题。被解决的只是一小部分，更多的问题也许尚未被发现，也或许受限于时间、技术、成本、对场景的理解等等，暂时未能落地相应的解决方案。比如：

• 上文探讨过的学习速度问题；
• 图片的生成问题——目前 AI 复制只能召唤过往设计稿中使用过的图片，无法生成新的或引入外部的图片；
• 假设复制时输入多个内容，如何在几秒内快速判断如何划分内容？每个分块间是否是重复的模块？若重复是否有关联？生成的模块是否要有延续性？
• ……

面临的挑战不少，但研究和尝试的脚步不会停止。当我们找到了解决方案，会尽快上线新版本的 AI 复制。