UI 自动标注背后的秘密：低成本实现标准组件识别
2024-01-25 05:56:20
现代软件开发中，UI 工程师普遍采用 UI 设计稿切图的方式，以实现产品界面的开发。这种模式带来了两个问题：一是设计师切图成本过高；二是设计稿存在不可复用的问题，重复劳动多。
针对此类问题，业界提出了 UI 设计稿自动化标注的解决方案。然而，早期的标注系统过于死板，无法标注复杂的设计稿，且系统构建成本极高，不利于实际应用。
本文将详细讲解 Bruno 方案中“Sketch 设计指引”所提到的 UI 设计稿组件自动识别和标注能力的实现过程，旨在以最低的成本实现标准组件的识别和标注能力，解决一线研发遇到的问题。
组件匹配算法
组件匹配算法是 UI 自动标注系统中的核心模块，其负责将设计稿中的元素匹配到标准组件。组件匹配算法可以分为两类：基于外观的算法和基于语义的算法。
1. 基于外观的算法
基于外观的算法通过比较元素的外观来进行匹配，例如，元素的大小、形状、颜色等。基于外观的算法实现简单，但准确率不高，容易受到设计稿风格和元素布局的影响。
2. 基于语义的算法
基于语义的算法通过比较元素的语义来进行匹配，例如，元素的名称、位置、作用等。基于语义的算法准确率高，但实现复杂，需要对设计稿进行大量的语义分析。
Bruno 方案的组件匹配算法
Bruno 方案的组件匹配算法结合了基于外观的算法和基于语义的算法，以达到较高的准确率和较低的实现复杂度。
Bruno 方案首先通过基于外观的算法进行粗略匹配，将设计稿中的元素与标准组件进行初步匹配。然后，通过基于语义的算法进行精细匹配，对粗略匹配的结果进行修正。
标注过程
UI 设计稿组件自动标注的流程如下：
- 设计稿预处理 ：对设计稿进行预处理，包括图像压缩、颜色转换等。
- 组件识别 ：通过组件匹配算法将设计稿中的元素匹配到标准组件。
- 组件标注 ：根据标准组件的定义对组件进行标注，包括组件的尺寸、位置、颜色等。
- 标注结果输出 ：将标注结果输出为 JSON 格式或其他格式。
Bruno 方案的标注系统
Bruno 方案的标注系统是一个开源的 UI 设计稿自动化标注系统，该系统采用 Bruno 方案的组件匹配算法，并提供了丰富的标注功能。Bruno 方案的标注系统可以帮助 UI 工程师快速、准确地完成 UI 设计稿的标注工作，提高开发效率。
结语
UI 设计稿自动化标注技术是一项新的技术，目前还处于发展初期。Bruno 方案的标注系统是目前比较成熟的 UI 设计稿自动化标注系统之一，该系统可以帮助 UI 工程师快速、准确地完成 UI 设计稿的标注工作，提高开发效率。随着技术的不断发展，UI 设计稿自动化标注技术将变得更加成熟，并将在软件开发领域发挥越来越重要的作用。
