logo
发布于 2024 年 6 月 5 日,妙多产品

AI 魔法框:框向未来

杨茗
杨茗
产品经理
明喆
明喆
产品副总裁

框一下,让 AI 来“猜你喜欢”?

我试着带你和我们一起走进我们构思 AI 魔法框的思维游戏中。

从意图到呈现,从 Input 到 Output

产品设计是软件工程中的一环,而软件工程最终都是将我们试图改变世界的意图,转换为一款面向用户的产品。产品设计师在设计的环节会涌现出无数的意图,他们不断行动,然后将试着用设计出的界面来表现意图。

过去设计工具的功能,也包括 Motiff 妙多中“AI 复制”“AI 布局”这样的功能其实都在明确达成一个目的,那便是“加速行动的执行”。我们称之为从“意图”到“行动”。

过去,在 Photoshop 中创建一个页面的行动并不容易,Sketch 的画板(Artboard)加速了这个行动。

过去,在 Sketch 中调整一个响应式的结构化布局并不容易,Figma 的自动布局加速了这个行动。Motiff 妙多的 AI 布局则进一步加速了这个行动。

将 100 步行动变成甚至仅需 1 步就完成,这是工具追求效率的终极目标,AI 也必然会起到关键作用。

而 AIGC 似乎增加了游戏的玩法。AI 直接生成内容 —— 对于 UI 领域,我们很直觉地期待让 AI 生成用户界面。而我认为,在从意图到行动的提升之路还亟待 AI 不断提升的同时,也开辟出了另一条道路:从意图到呈现。

而如果我们以一个更工程化的视角去看待这个命题时,这个问题的本质其实是:从 Input(输入)到 Output(输出)。

艺术伴随随机,而 UI 需要精确

我们先来看看 Output,即呈现的交付物。

UI 工作和我们所认知的艺术创作截然不同。艺术创作从不排斥随机性,甚至随机常常造就了艺术价值。而 UI 设计作为产品工程的一环,工程是基于用户和商业来精密设计的。它天然需要具备一个基础条件:精确。

例如,我们在使用 Midjourney 一类产品绘制图像时,我们往往还会期待 AI 超出我们意图给到的呈现。我们画一棵树,并不需要让 AI 精确它有几片树叶。

而在 UI 界面中,我们则需要相对精确地确认每一个元素,及其对应的功能摆放在什么位置,功能在对应位置产生的作用也是明确的。

而如何获取 Output 的“精确”?好像有两种途径:

  • 缩小 Output 的范围。Output 相对小一些,AI 可控制地会更为精准一些。
  • 增加 Input 的信息。告诉 AI 的信息越多,AI 对准确理解意图会更明确。

极限思维1:极大的 Input,极小的 Output

事实上,这样的例子无处不在。

例如你可以在 Motiff 妙多中画一个矩形。虽然这个行为看起来没那么复杂,那你确实输入了非常充分的信息。比如,可以输入:

  • 矩形在 x 轴、y 轴上对应的坐标
  • 矩形的宽和高
  • 矩形的描边:例如不是连续的,而是断点。
  • 矩形的颜色和描边的颜色:例如矩形可以是透明的,而描边则可以是一个渐变色。

而你需要的 Output 呢?它就是一个确定的矩形框。或者说,如果你将以上信息口述给 AI,AI 绝对可以精确地帮助你完成你的意图呈现。

极限思维2:极小的 Input,极大的 Output

这是一个怎样的例子?这样的例子在最近非常常见。

例如:仅仅描述一句话,让 AI 来生成一个完整的用户界面。

目前,已经有一些研究这个方向的应用发布了,它们的 Demo 看起来非常酷。(好像 Motiff 也有一个这么“看起来也酷”的 Demo,谁不喜欢摇滚乐呢?)

但回到现实,这个方式应该比较难在你的实际工作上为你助力很多。只要你迈出了“描述一句话”的第一步,你就会发现,你会试图不断补充你的 Input 描述,继续描述第二句话、第三句话、第四句直到一整段话……让 AI 更全面、更好地理解你的意图。

最后,为了那个更接近你意图的界面生成,你是否要考虑输入一整段话?

打破 Input 的局限性

抱歉,我们的这个叙述逻辑可能让你不知不觉的陷入了一个圈套:如果 AI 是你的合作伙伴,你需要变成一个话痨让他更理解你的意图。

如果你在和一个真实的合作伙伴讨论产品设计方案,你也会这样吗?会滔滔不觉地向他 Input 更多的文字来表达你的意图?我相信你不会的。

取而代之,你会迅速拿起一只马克笔,然后洋洋洒洒地在黑板上直接画出了一些流程图、线框稿,你会对着这些草稿,一边画,一边表达给合作伙伴关于你的意图。而这,就是直觉和本能下,最高效的 Input 方式。

在此,我们提出了一个假设:用户界面领域的 AIGC,Input 将不止是文本 Prompts,因为文本并不是这个领域原本最高效的输入方式。更好的方式应该是“图文并茂”。

最好的“图文并茂”:PRD?

这是一个自然的推演。既然我们假设“图文并茂”的输入可以提升 AI 生成用户界面的效率,那我们原本就有一个现成的最佳“图文并茂”:产品需求文档(PRD)。PRD 包含了丰富的图例和文字来说明表达产品设计的意图和目标。

那导入 PRD,让 AI 来生成 UI 呢?

这确实是我们在长期研究的方向之一。 Motiff 妙多实验室中的另一分支:AI 生成 UI 实际想达成的最终目标也是如此,我们不仅想让 AI 更好地学习 PRD,还希望在生成 UI 时能充分地应用已有的设计系统。

回到现实,距离实现这个“一步到位”的功能我们还有重重挑战,但这件事却也给了我们另一维度的启发。

一种新的交互:相遇在一个框

我们前文提到了两个关键问题:

  • Input 可以不只是文字。进一步,还可以“画一画”。
  • Output 出一个完整界面暂时很难。退一步,生成局部?

一个方向进一步,而另一个方向退一步,似乎恰好可以达到一种平衡。我们会发现进退最终会发生相遇,而这个相遇之点或许是一种新的解决方案,它可以是:一个框。

为什么是一个“框”?

因为“框”似乎能恰如其分地既兼顾 Input 的效率性和 Output 的技术可达性。

如果用户在 Motiff 妙多中画一个框,Input 至少可以包括:

  • 框相对的大小。
  • 框的位置,该位置周围的上下文信息。
  • 以及画框以后,还可以输入文字来补充。

而 Output,我们则可以可以聚焦在这个框中具体要表达什么信息,从而更可控的生成用户可能需要的内容。

体验 AI 魔法框

当下,如果你注册了 Motiff 妙多的账号,就可以直接在注册后的新手游乐场中体验 AI 魔法框这个功能,感受这种设计师和 AI 之间的全新交互方式。目前我们对这个功能的定义还是“实验室阶段”,我们相信在不久的将来,它能走出实验室,真正为设计师的工作场景提供价值。

我们也欢迎用户向我们持续反馈对这个功能的建议。