Motiff 妙多大模型：懂 UI 设计的多模态大模型

要成为真正的 AI 时代设计工具，Motiff 妙多一直关注两件事：

首先，我们是否能借助 AI 能力，定义出创新的产品功能，来帮助设计师和设计团队；其次，AI 能力是否足够支撑产品真正有效。

大模型日新月异，具有更强的学习能力和更高的泛化能力，给许多 AI 应用带来了新的视野，Motiff 团队也不例外。纵观这一年，总结大模型对 AI 产品研发的影响，我们有两个感悟：

1. 1.“自然语言指令” 将成为产品的重要入口，并且可以完成复杂的生成式任务。比如：AI 生成设计稿；
2. 2.过往的 AI 技术要解决一个领域的问题，往往有较高的启动成本。大模型则可以以较低的成本（Zero/Few/Many Shot），快速孵化 AI 功能。

实际应用中，我们进行了不少调用通用大模型来解决产品问题的尝试。有一些尝试略有效果，但往往在涉及 UI 专业领域时，通用大模型存在局限性。 ”产品需要更多的能力，反过来驱动我们对技术的探究“，这可能是我们与其他做大模型研究的公司很不一样的地方。同时，我们也观察到日益成熟的技术，让很多领域训练出了效果不错的专业大模型，包括医疗、法律、教育等，这为我们去训练一个 UI 领域的大模型注入了更多信心。

伴随实践，我们也得以验证自研大模型的必要性。例如，在探索 AI 生成设计稿功能时， Motiff 团队借助领域模型只用了 200 条数据（200 Shot）就验证了技术方案的可行性，相比传统的 AI 功能探索模式，Motiff 多模态大模型显著降低了成本，使得产品创新验证更高效、思路更广泛。

在此，我们愿与大家分享 Motiff 妙多大模型在 UI 设计领域的创新进展。

发展进程中的多模态大模型

与传统模型相比， LLaVA（开源模型）和 GPT-4V/4o（闭源模型）等多模态大模型能够整合多种类型的数据（如文本、图像、视频等），并具备更全面的信息理解能力和更高的准确性。

多模态技术的快速发展得益于学术界和工业界的共同努力。

最初，多模态技术的发展主要集中在如何增强模型的输入输出模式方面。在积累了一些成功经验之后，多模态技术逐渐向更垂直的领域拓展，如微软的医学大模型（LLaVA-Med）等。

下图展示了多模态大模型从 2022 年到 2024 年的快速发展历程。

尽管目前多模态大模型生态系统繁荣发展，并有一些经典开源模型（如 LLaVA）作为参考，但在多模态大模型领域化方面，成功经验仍较为有限，仍有许多待探索的方向。

以上，是我们自研 UI 多模态大模型的技术背景。

通用多模态大模型基座

在训练通用类多模态大模型时，我们通常会经历三个阶段：

第一阶段：独立预训练。

视觉模型和大语言模型各自的预训练，这两个方向发展时间更久一些且有一些很不错的参考资料，本篇博客不再过多展开。

第二阶段：对齐训练。

这是非常关键的一个步骤，主要的作用为了让预训练的视觉模型和大语言模型可以协同工作。

具体的训练方法是，冻结视觉模型和大语言模型的参数，只微调连接器的参数。这一步相当于是训练了一个视觉模型和语言模型之间的“翻译器”，把“视觉语言”转成了自然语言。因为是训练“翻译器”，所以这一阶段的训练数据基本上都是“图片-文本对儿”，训练时图片作为输入，文本作为输出。

第三阶段：指令微调。

经过这个阶段，多模态大模型才能真正应用于具体任务。这一阶段的训练方法较为多样，比如：冻结视觉模型只训练连接器和语言模型，或者同时训练视觉模型、语言模型和连接器，亦或是为视觉模型设定较小的学习率等。此外，这一阶段的训练数据也非常多样，通常会收集各类任务数据，进行综合训练。

经过这些步骤，我们可以获得一个通用的多模态大模型。

多模态大模型的 UI 领域迁移

如果我们想从头开始训练一个专注于 UI 领域的多模态大模型，需要重新经历以上的三阶段训练（预训练、对齐训练、指令微调），并加入一定比例的 UI 领域数据。然而，这样做面临几个显著的挑战：

第一，领域特定的数据量远不及通用数据，可能无法满足训练多模态大模型的需求。

第二，从头开始进行训练不仅耗时，而且成本极高。例如，当前多模态模型中常用的视觉编码器（如 OpenCLIP）的训练需要数百亿的训练样本。此外，训练过程中的各类问题可能导致我们不得不重新调整和开始，进一步延长训练时间。

从更快赋能业务的角度来看，从头训练一个领域特定的模型并不是最佳选择。我们可以基于现有的通用多模态大模型进行调整和优化，以适应 UI 领域的需求。具体来说，可以从以下几个方面进行梳理和优化：

1. 1.视觉模型和语言模型本身是基于通用数据进行训练的，我们可以尝试对这些模型进行领域迁移。
2. 2.现有的连接器使用的是通用领域的数据进行对齐，我们可以考虑加入领域特定的数据进行优化。
3. 3.指令遵循微调阶段可以替换为专门针对 UI 领域任务的调优。

从经验来看，越靠后的训练阶段对模型在特定领域的表现提升越显著，因此我们的优化策略也是从后向前进行。目前，我们的领域迁移工作集中在后两个阶段，并未涉及第一个阶段。然而，单模态的领域迁移是否会对多模态模型的领域迁移产生重大影响，这也是一个非常有趣的研究课题，值得在我们未来的研究工作中深入探讨。

Motiff 妙多大模型训练路径

综上所述，Motiff 妙多大模型选择的是最经典的整合专家模型，也就是将一个预训练好的视觉模型（Visual Encoder）和一个预训练好的大语言模型（Large Language Model），通过一个模态转换器连接起来（Connector）。

如图所示，图片会依次送入视觉编码器（Vision Encoder）和视觉-语言连接器（Visual-Language Connector），处理成大语言模型能够接收的视觉单词（Vision Tokens），这些视觉单词和文本单词一起作为输入被送入大语言模型（Large Language Model），大语言模型综合理解、分析后输出文字回复。

UI 领域数据收集

现成的 UI 领域数据尤其是手机端的高质量数据，极为稀少。为了弥补这一缺口，我们采用多种方法，包括人工标注、伪标签生成、领域知识蒸馏等方式，收集了一批高质量的 UI 领域数据。这批数据主要分为三种类型：

第一种：UI 截图及其自然语言描述。

这种类型的数据是最常见的多模态训练数据，一般在对齐阶段和指令微调阶段都会用到。下图展示了一个自然场景的图文对示例。

与自然场景图像的描述任务不同，UI 截图包含更多的细节和功能推理需求。

通过一系列的提示工程（Prompt Engineering），我们得到了类似如下的描述。这些描述从上到下逐个模块介绍每张 UI 截图，包括布局方式、组件名称、关键 UI 元素和模块功能等。最后还会对整体页面的设计进行一个综合评价。

第二种：UI 截图及其结构化描述。

受 Meta 学者 2023年的一篇论文“LIMA: Less Is More for Alignment”影响，我们抛弃了“大力出奇迹”的做法，而是在训练 Motiff 妙多大模型的时候送入了一批高质量、专业知识密集的 UI 数据。这批数据可以做到精准的定位并理解 UI 界面上的每一个元素，使得 Motiff 妙多大模型可以做到：

1. 1.定位并识别 40 多种细粒度 UI 组件，比如： button, chips, tabs, search bar, navigation bar, tab bar, list, card 等等。
2. 2.定位并识别 UI 组件中的所有文字。
3. 3.定位 UI 界面中的每个 icon，并能描述出该 icon 在当前上下文中的含义和功能。
4. 4.定位 UI 界面中的图片，并能描述图片的内容。

第三种：UI 相关的任务数据

我们借鉴了通用领域成功的经验，收集和构造了丰富的 UI 界面相关的指令遵循数据，主要涵盖了UI 界面的描述、基于 UI 界面的问答、像素级界面元素定位、细粒度界面元素描述、UI 界面交互导览等功能。

在数据生成任务中，我们引入了多个专家模型，例如组件识别专家模型、图标识别专家模型、OCR 识别专家模型等。通过将这些专家模型生成的数据与我们的结构化描述结合，输入到看云大模型中，我们能够生成更贴近真实用户场景的高质量训练数据。

现有的 UI 领域大模型解决方案（如 Apple 的 Ferret UI 和 Google 的 ScreenAI）通常依赖于分类器生成图标描述，只对图标进行静态描述。相比之下，我们的方法通过将图标识别专家模型产生的结果和详细的结构化文本输入看云大模型，使得同一图标在不同的上下文中能够被描述为具有不同含义的文本。这种方法有助于增强描述的准确性和情境相关性。

如下图所示，上方是 ScreenAI 生成的数据，下方三个分别是我们的方法所生成的数据。

除上述提到的三种 UI 相关的数据之外，我们发现图表问答、文档问答、OCR 等任务也能提升 UI 界面的理解能力。

最后，为了保持通用能力，我们还加入了自然场景的图像描述，自然场景图片问答，纯文本通用指令等相关数据。

综上，我们共收集了千万级别的多模态训练数据，其中涵盖了市面上常见的 app 截图和大量的 web 截屏，给 Motiff 妙多大模型注入了大量 UI 专业知识。

Motiff 妙多 UI 大模型领域迁移训练

Motiff 妙多大模型在基座选择上特别注重了 UI 界面场景的独特需求。相比一般自然场景，UI界面包含了大量细粒度的元素，因此我们采用了支持高分辨率输入的视觉编码器。

这种高分辨率处理能力使得视觉编码器能够捕捉更多细节，显著提升了模型对UI界面复杂细节的感知能力，从而减少了低分辨率图像导致的模糊和误判风险。

通过这一系列优化，模型在处理 UI 界面时的准确性和细节处理能力得到了显著提升。

上文提到过，我们的领域迁移训练目前用在了两个阶段：

领域迁移第一阶段：对齐训练——视觉模型和大语言模型的对齐训练引入 UI 领域知识。

这一阶段我们引入了两类 UI 相关的数据，第一类是 UI 界面及其自然语言描述，第二类是 UI 界面及其结构化描述。前者类似自然场景图片的描述，后者则是 UI 界面独有的。同样的，为了训练的稳定性，这一阶段我们只训练了连接器，并没有训练视觉模型和大语言模型。

领域迁移第二阶段：领域继续预训练与指令微调——多模态任务端到端训练引入 UI 领域知识。

这一阶段我们训练了所有的任务数据，包括：通用领域的文本模态数据，通用领域的多模态数据以及UI领域的多模态数据。目的是在增强领域知识的同时保持通用能力。

Motiff 妙多大模型能力评测

我们对 Motiff 妙多大模型进行了系统全面的评测。评测包括与当前界面相关任务的最优结果（SOTA）进行对比，以确保模型的性能处于先进水平。我们在五个常用的 UI 界面场景中进行了深入测试，这五个场景分别为：

1. ScreenQA（界面问答）

ScreenQA [2] 是由 Google DeepMind 在2022年提出的一个用于屏幕理解的基准数据集。这个数据集旨在通过对屏幕截图的问答对来评估模型的理解能力。评测部分包括约 8419 个人工标注的问答对，这些问答对覆盖 3489 张来自 Rico数据集的截图。

作为目前最具代表性的数据集之一，ScreenQA 不仅提供了丰富的视觉信息，还涉及到用户界面中的各种元素和交互方式。

因此，通过在 ScreenQA 数据集上的评测，可以有效地检验模型在理解和回答界面相关问题方面的综合能力。

2. Screen2Words（界面描述与推断）

Screen2Words [3] 是由多伦多大学和 Google Research 的学者联合提出的一项专门针对移动 UI 界面设计的摘要任务。该任务的主要目的是评估模型对屏幕中重要内容和抽象功能的理解与描述能力。

数据集包含了多种应用场景下的屏幕截图，以及对应的文本描述，这些描述既包括界面的显性内容（如文字、图像），也涵盖界面的抽象功能（如按钮的用途，页面的主旨）。

通过对 Screen2Words 数据集的评测，可以深入了解模型在生成自然语言描述和推断界面功能方面的性能。

3. RefExp（像素级定位）

RefExp [4] 任务评估模型对界面组件的精确定位能力。该任务要求模型根据给定的指称描述，在屏幕上准确找到所指的组件。

评测数据集提供了移动 UI 界面截图以及对应的自然语言描述，这些描述指向了某个特定的界面元素（如按钮、图标、输入框等）。

模型需要在屏幕图像中识别并定位这些元素，这不仅考验了模型对自然语言的理解能力，还考察了其在像素级别进行视觉解析和精确定位的能力。

RefExp 任务在语音控制系统中有实际应用，例如智能助手可以根据用户的口头指令在屏幕上定位特定的按钮或选项。

4. Widget Captioning（部件描述）

Widget Captioning [5] 任务旨在评估模型生成自然语言描述的能力，具体来说是对界面中的各类组件进行描述。此任务要求模型输出对不同UI组件（如按钮、图标等）的简短而准确的描述。数据集包括了多种应用程序中常见的界面组件及其相应的描述文本，这些描述不仅需要精准地涵盖组件的视觉特征，还应反映其功能和用途。通过此任务，可以检验模型在理解和生成符合语义的自然语言描述方面的能力，尤其在屏幕阅读器和辅助技术中具有实际应用价值。

5. MoTIF-Automation（交互导览）

Mobile App Tasks with Iterative Feedback（MoTIF）数据集专门设计用于评估模型在移动应用中执行自然语言指令的能力。此任务不仅涉及对自然语言指令的理解，还需要模型能够在屏幕上进行相应的操作，如点击、输入、滑动等。这些操作会导致界面状态发生变化，进而考察模型的动态交互和反馈处理能力。

在详细介绍了各个评测数据集之后，接下来我们将展示 Motiff 妙多大模型在各个数据集上的评测结果。

从结果可以看出，在这五个 UI 相关指标上，通用大模型（GPT-4o）的能力明显弱于领域模型（Ferret-UI、ScreenAI 和 Motiff 妙多大模型）。此外，Motiff妙多大模型在这些指标上明显超越了 Apple 的 Ferret-UI 模型，整体能力逼近了 Google 的 ScreenAI 模型，在某些能力上甚至超越了 ScreenAI 模型。

具体表现如下：

1. MoTIF-Automation （交互导览）和 RefExp（像素级定位）

Motiff 妙多大模型在 MoTIF-Automation 和 RefExp 任务中的表现分别为 86.09 和 85.13，略低于 ScreenAI（Google Research）的 87.4 和 86.3，但依然表现出色，接近最优模型水平。

2. Screen2Words（界面描述与推断）

在 Screen2Words 任务中，Motiff 妙多大模型获得了 121.19 的 Cider Score，略好于 ScreenAI 的 120.8，表明其在屏幕内容转换为文字描述时表现优异。

3. ScreenQA Short（界面问答）

在 Screen QA Short 任务中，Motiff 妙多大模型的 F1 得分为 93.03，虽然低于 ScreenAI 的 94.6，但依然处于领先地位，展现了出色的问答能力。

4. Widget Captioning（部件描述）

在 Widget Captioning 任务中，Motiff 妙多大模型的 Cider Score 为161.77，高于 ScreenAI 的 156.4，显示其在生成 UI 组件描述性文本方面具有明显优势。

Motiff 妙多大模型在多个 UI 界面评测任务中表现卓越，甚至在某些方面超越了现有的顶级模型，其在实际应用中的表现也同样出色。该模型具备卓越的理解能力，这是实现所有高级功能的基础，能够精准地识别真实 UI 界面中的各个元素。

小结

Motiff 团队致力于成为“AI 产品的引领者”，而 UI 多模态大模型是实现这一目标的关键一步。

如今，借助 Motiff 妙多大模型，我们可以快速落地一些 AI 能力，配合产品上线获得真实用户反馈，进而推动大模型发展，如此良性循环以形成更加智能和高效的 AI 设计工具。

人类的创造从认知和理解开始，AI 时代的 UI 创作也将从大模型充分理解用户界面开始。

未来，Motiff 团队希望能借助这款大模型，让 AI 设计工具变得更加智能和高效，真正实现“设计师的创意无拘无束”。

参考文献

[1] Yin S, Fu C, Zhao S, et al. A survey on multimodal large language models[J]. arXiv preprint arXiv:2306.13549, 2023.

[2] Hsiao Y C, Zubach F, Wang M. Screenqa: Large-scale question-answer pairs over mobile app screenshots[J]. arXiv preprint arXiv:2209.08199, 2022.

[3] Wang B, Li G, Zhou X, et al. Screen2words: Automatic mobile UI summarization with multimodal learning[C]//The 34th Annual ACM Symposium on User Interface Software and Technology. 2021: 498-510.

[4] Bai C, Zang X, Xu Y, et al. Uibert: Learning generic multimodal representations for ui understanding[J]. arXiv preprint arXiv:2107.13731, 2021.

[5] Li Y, Li G, He L, et al. Widget captioning: Generating natural language description for mobile user interface elements[J]. arXiv preprint arXiv:2010.04295, 2020.

[6] Burns A, Arsan D, Agrawal S, et al. A dataset for interactive vision-language navigation with unknown command feasibility[C]//European Conference on Computer Vision. Cham: Springer Nature Switzerland, 2022: 312-328.

[7] Burns A, Arsan D, Agrawal S, et al. Mobile app tasks with iterative feedback (motif): Addressing task feasibility in interactive visual environments[J]. arXiv preprint arXiv:2104.08560, 2021.