如何实现在 UI 设计稿中自动化标注UI组件？

avatar

在 UI 标准化建设中，标准化团队会根据标准规范沉淀大量标准组件。由于组件众多，在标准组件落地使用过程中，一线研发同学普遍遇到无法准确判断 UI 设计稿中的布局 “是否为标准组件” ， “是哪个标准组件” 的问题，需要研发根据经验猜测，手动查找需要使用的组件，耗时耗力，影响了落地效果。
本文将详细讲解 Bruno 方案中 “Sketch 设计指引” 提到的 UI 设计稿组件自动识别和标注能力的实现过程，低成本实现标准组件的识别和标注能力，解决一线研发遇到的问题。

背景

随着业务快速发展，一般会在产研团队内部划分不同的业务模块，并交由不同的业务团队协同开发。随着业务的迭代，不同模块之间的 UI 交互差异日渐明显，最终会引发 UI 一致性问题。为了解决这个问题，我们通常会向团队内部业务线推广和落地一套标准规范（如图）。

image.png

但是在这个过程中，业务研发团队（如研发团队 A、B、C）需求开发中往往无法准确识别设计稿中的布局 “是否为规范的 UI 组件”、“是哪个组件”，影响了组件的落地效果。因此对于一线研发人员，自动识别和标注 UI 标准组件库的能力非常重要。

接下来，将从”如何在设计稿中自动识别组件“、”如何在设计稿中自动标注组件信息“以及”如何改进 Sketch 插件，实现组件自动识别并标注“三个方面详细介绍如何从设计稿中识别组件、自动标注组件信息。

一、如何自动识别组件?

说到自动识别组件，我们可能想到用肉眼“人工标注”这种方式。如果用交通工具来作比喻，那这种方式无异于“11路”步行，不仅费时费力，而且还容易“走错路”。

我们知道，对组件进行识别的本质是对 UI 页面元素特征的识别。目前业内有一些通过深度学习识别 UI 中元素的方法来实现组件的识别。不过这类方案实现门槛高，如果没有相关专业基础和合适数据集，识别准确率无法得到保证。

不过，深度学习方案已经为我们指引了方向。既然组件识别的核心是通过提取检测目标的特征，并对比识别，那么我们可以通过某种方式，将目标 UI 页面元素附加上组件特征，做到组件特征信息直接与目标 UI 页面元素关联，从而达到识别的能力，这里暂且称之为附加特征方案。

这里总结了两类方案特点，分别从识别方式、准确性、成本、适用范围的角度对两类方案进行了对比，如下：

方案对比

两类方案核心都以组件特征的方式进行识别。

深度学习方案，依赖识别算法的选择及数据集训练，因此算法是否合适以及数据集的好坏决定了识别的准确性，同时因为需要做很多前期工作如采集数据集，具有较高成本。不过方案适用范围广，可针对不同设计风格识别，具有普适性特点。

而附加特征方案跳过了特征识别的步骤，一步到位，直接将 UI 页面元素与组件关联并标注。因为组件特征信息直接与组件关联，所以几乎不存在识别错误的情况。同时，因为仅能识别特定组件集，不需要做额外的工作，实现难度和成本低。

二、如何在设计稿中自动标注组件信息？

设计师工作流程图

在讨论如何实现“设计稿中自动标注组件信息”之前，我们看下设计师一般工作流程（线下）：

  1. 设计师使用 Sketch 进行需求设计，并从设计端的 UI Kit 组件库中选取合适的组件组装 UI 页面并微调。产出需求设计稿；
  2. 设计师完成需求设计，通过 Sketch Measure 标注插件将设计稿文件导出为附加 UI 标注信息的标注稿文件；
  3. 开发拿到标注稿文件进行页面开发。

Sketch 文件结构示意图

而设计师使用 Sketch 软件设计时，设计稿以图层的形式展示设计效果。所以我们以此为切入点，提出了针对 Sketch 文件的“附加特征方案”，通过对标准库组件底部附加透明图层，并将图层命名为“组件代号”的方式，将标准组件与“组件特征”绑定，以此来实现组件的识别。

在工作流程中提到的 Sketch Measure 是一款 Sketch 软件的标注插件，可以标注出 Sketch 文件中 UI 元素的尺寸、间距、距离、文字属性、图层等信息，UI 设计师完全不用自己手写标注，大大提高双方的沟通效率。因此，当我们在组件底部增加了附加图层后，通过 Sketch Measure 导出给开发的标注稿，同时会将附加图层导出到标注稿中。此时，标注稿也就具有识别组件的能力了，如下图所示：

组件识别

同时，我们可以看到，经由 Sketch Measure 插件导出的标注稿中已携带 UI 的一些基本信息，比如宽高、颜色等。那么我们有没有办法对 Sketch Measure 插件二次改造，拓展其能力从而展示更丰富的组件信息呢？

当然是可以的，先看下对插件改造后导出的标注稿展示效果，稍后我会详细介绍改造步骤。

效果图

通过效果演示我们可以看到，使用改造后的 Sketch 插件导出的标注稿可以自动标记设计稿中的标准组件，选中标准组件时可高亮展示组件代号，并且在设计标注稿中选中组件时立即展示组件“示例代码”和“文档链接”，无需耗时查找，达到“开发即可见”。

所以，使用改造后的 Sketch Measure 插件可以提升组件识别的速度和准确率，从而能极大提升我们使用标准组件库的便捷度和精准度，同时也提升了标准库使用率，促进标准规范的落地。

接下来将详细给你介绍 Sketch 插件的改造步骤，实现上述能力。

三、如何改进 Sketch 插件，实现组件自动识别并标注？

我们来看 Sketch Measure 这个插件，它的工作原理简单来说是通过解析 .sketch 设计文件中的图层信息，并将其导出为静态 html 文件展示。所以我们可以通过改变 html 相关文件生成内容，达到增强提示的目的。

image.png

3.0 准备工作

首先，我们需要在 GitHub 下载 Sketch Measure 插件文件（在这里感谢 Sketch Measure 插件的作者 utom 开发出非常棒的工具，大大简化了研发的工作），这里以 Sketch Measure 2.7.7 版本为例，打开包内容。

Sketch Measure 插件包文件结构

通过对比标注稿 html 文件的内部代码片段（如下图）：

image.png  

找到其在 template.html 1570 行出现，该文件为标注稿的模板文件，

image.png  

接下来我们要修改的文件就是它。

image.png

对插件的改造主要包括四个部分：

  1. 创建标准组件信息库；
  2. 识别标注稿中标准库组件；
  3. 增加组件名称展示；
  4. 增加文档链接和模板代码.

下面我们一步一步来操作。

3.1 创建标准组件信息库

在开始实现设计稿组件标注能力之前，我们要规范标准组件信息，建立组件信息库，为后续组件标注做准备。你可以通过本地配置或远端动态下发来配置。

组件信息基础格式定义如下：

[
    {
        type: "component",
        group: "tab",
        componetName: "TabBarBadge",
        platform: "flutter",
        code: "Sample Code"
    },
    {
        type: "component",
        group: "tag",
        componetName: "SelectTagWidget",
        platform: "flutter",
        code: "Sample Code"
    },
    …
]

componetName 组件名称
platform 表示支持的平台
code 用于展示组件对应的示例代码

3.2 识别标注稿中标准库组件

通过 Chrome 调试，可以发现，当 HTML 中 UI 元素被选中时，class 字段会被更改为 selected。如下图所示:

image.png

这个时候你可以找到 template.html 中的相应实现：

image.png

我们将关键代码：

if(self.selectedIndex == index) {
    classNames.push('selected');
}

修改为如下所示，实现“打开标注稿时标准组件默认为选中”的效果：

if(self.selectedIndex == index) {
    classNames.push('selected');
} else {
    components.map(function(component){  
        if(layer.name != null && component == layer.name){
            classNames.push('selected');
        }
    });
}

这里你要注意一点， components 是标准组件名称集合，数据来源于 3.1中的组件信息。 我们通过对比 component 组件名与 layer.name 是否一致来判定是否选中，layer.name 就是“附加组件特征”方案中的图层名称，也就是组件特征信息，可用来识别组件标注稿中使用的组件。

3.3 增加组件名称展示

实现识别能力之后，接下来就要把组件名称展示出来了，怎么实现呢？

如下代码所示，我们在 layerHtml.push 方法中增加了 title 字段，用来临时保存图层的组件信息 (isComponent ? 'title=" ' + layer.name + '"' : "")：

layersHTML.push([
      '<div ' + (isComponent ? 'title=" ' + layer.name + '"' : "") 
      + '" id="layer-' + index + '" class="' + classNames.join(' ') 
      + '" data-index="' + index + '" percentage-width="' 
      + self.percentageSize(layer.rect.width, self.current.width) 
      + '" percentage-height="' + self.percentageSize(layer.rect.height, self.current.height) 
      + '" data-width="' + self.unitSize(layer.rect.width) 
      + '" data-height="' + self.unitSize(layer.rect.height) 
      + '" style="left: ' + x + 'px; top: ' + y + 'px; width: ' + width + 'px; height: ' + height + 'px;">',
      '<i class="tl"></i><i class="tr"></i><i class="bl"></i><i class="br"></i>',
      '<b class="et h"></b><b class="er v"></b><b class="eb h"></b><b class="el v"></b>',
  '</div>'
].join(''));

接下来，我们将 title 字段取出放入选中时展示的元素中 attr(title) ，如下代码所示，实现代码使组件名称的展示：

.distance.v div[data-height]:before,.selected:after{content:attr(data-height) attr(title);left:auto;right:0;top:50%;transform:translateX(calc(100%+3px)) translateY(-50%); width:max-content}

最后的效果就是这样的，当然也可以通过其他方式存储组件信息和展示：

image.png

3.4 展示文档链接和模板代码

现在我们实现了识别、标注和组件名称展示的能力，但是还缺少文档和模板代码的能力。同样的，我们可以在template.html模板文件中找到添加相应平台代码的入口，按照现有方式添加即可，这里就不再展开描述。

image.png

修改后代码如下：

image.png

最终效果如图所示：

效果图

通过上述四部分对 Sketch Measure 插件进行的修改，导出的标注稿已经具备自动标记标准组件的能力，且会在选中标准组件的时候展示组件名称以及示例代码。

同时，上述步骤为核心改造思路，还存在进一步优化的空间，如：组件标注信息的展示优化；组件数据（文档地址+代码示例）更新可通过网络方式动态更新；搭建 UI 物料平台。另外，为支持更高版本的 Sketch，基于 TypeScript 重新实现的 sketch-meaxure 也可通过同样方式改造。

总结

本文介绍了在 UI 一致性规范落地过程中研发侧的痛点，也就是无法准确判断设计稿中的布局“是否为规范后的 UI组件”和“是哪个组件”的问题，影响了标准规范的落地。为了让需求设计稿可以自动标注并展示组件信息，我们针对设计师广泛使用的 Sketch Measure插件进行了改造，并详细讲解了插件的改造步骤。

当然，不同技术团队在不同阶段面对这个问题的解决方案也是有差异的。之所以没有重新开发一款 Sketch 插件工具，而是针对现有插件二次开发，主要是因为：

  • 考虑投入产出比，从 0 开发一款新工具较耗时，且插件二次开发后已满足现有需要；
  • 插件改造，对设计同学来说是透明的，不影响原有使用习惯，新开发插件存在学习成本；
  • 插件改造成本低（仅需 1 人天即可改造完成），解决问题效果明显，适合快速落地、验证。

最后，希望这篇文章能够抛砖引玉，对解决 UI 一致性及规范落地问题提供思路。


引用：

  1. Bruno 官网: bruno.ke.com
  2. Bruno Github 地址: github.com/LianjiaTech…
  3. Sketch 官网: www.sketch.com/
  4. Sketch Measure: github.com/utom/sketch…
  5. Sketch Meaxure: github.com/qjebbs/sket…
avatar
文章
阅读
粉丝