如何让UI设计稿生成代码、标注、切图
1 前言
在没有使用“自动生成标注、切图及代码”之前，互联网产品开发需要设计师将设计稿进行切图，并要手动标记大量的标注，工作量琐碎且繁杂。如果多个项目并行，设计图的数量会非常之多，设计师标记标注和做切图会非常耗时，研发也要按设计稿效果逐行手写样式代码一样非常耗时，而且设计师和研发还需耗费大量的时间与研发沟通。
2 传统技术方案具有以下缺点：
标注不够准确。传统的技术方案遇到页面的特殊元素，会出现无法显示标注信息的问题。传统的技术方案是采用整体解析设计稿的方式，无差别的提取设计稿信息，遇到错误和畸形图层也会进行解析，那么标注的精确度就会受到影响。 代码提示不够准确，且不可维护。传统的css代码生成方式，是通过解析设计稿生成json, 然后采用最简单的直译json来生成布局代码，此时元素的位置信息，都是采用相对定位的方式，这种定位布局，在实际开发中很难被开发者维护，且位置信息容易出错。 切图过大，浪费网络带宽，且容易导致访问过慢，影响用户体验。传统的切图方式，主要是直接导出图层的方式，但图层往往总会因为设计师的失误，其中会包含有冗余的不透明信息，虽然本身对图片的效果没有影响，但是导出的切图往往会很大，有可能本身几KB的图片最终导出变成了几MB。
3 本方案主要解决和优化了以下问题
解决了标注不准确的问题。尝试采用布局算法，对设计稿文件信息进行初步的提取、清洗、干预，来提升标注的准确性。 提升了代码生成的准确度，并且降低了维护成本。采用元素层级算法、坐标转化算法，提升了代码的准确度。 优化了切图的效率、增加切图自动压缩功能：自动解析设计图中的图片，使用者可以自主选择要下载的切图，再也不需要设计师手动切图了，同时在下载切图时，可自动进行无损压缩。 提高编码的效率：可以自动生成代码，减少多端适配的开发成本。
4 设计图自动标注方案
将设计师制作的设计图上传至我们的标注服务，后台服务将上传的设计稿进行解压并自动切图，并将解压后的文件信息通过算法处理为标注信息，再将标注信息还原为可视化的H5页面。研发工程师可以在后台上实时预览设计稿的标注，并随时下载切图。
设计稿解析的越完善，分类的越详细，在代码分析上就越准确。经过图层的重构、分类、组合等流程，最终保证了整体布局的合理性，同时也保证了标注的准确性。
5 提取图层信息
设计师上传设计稿之后，会提取设计图中的图层信息，以获取有图层元素的位置、大小、形状和颜色等信息。
使用jszip这个库将设计稿中的图层信息提取出来，并将矢量数据转换为json格式。下图展示的就是从设计稿中提取文件的数据结构。
6 预处理信息
将获取的信息进行预处理、筛选和过滤，将样式映射为css 代码，并且将图片资源导出并上传至服务器。
6.1 做预处理映射css代码
筛选无用信息：在第一步中提取并获得的json 数据中有可能包含许多无用信息，且映射关系混乱的数据，因此需要将数据进行一层过滤，使json 数据更加的简洁。 css 映射：经过精细化处理后的数据与传统的css 并不一样，需要通过寻找对应关系将数据翻译映射为 css代码。 元素布局问题：这个步骤是最为复杂的，因为布局是存在逻辑关系的，如果只是简单的还原设计稿，不考虑元素父级与子级的关系，不使用flex 布局，全部使用绝对定位布局，那产生的代码将是不符合研发需求的，也是难以维护的。我们要确保生成的代码是能被研发工程师持续的使用和维护的。
6.2 判断元素间的布局——坐标转化算法
首先设计稿的坐标体系，是以窗口左上角为起始坐标的，即（x:0,y:0）,那么从中我们可以发现，如果坐标x,y存在交集，那么他们之间就可能是父子关系，如果存在并集那么可能是同级关系。那么对这些存在的关联进行归类，可以用代码遍历进行筛选。根据坐标轴x、y的差值，判定是在同一行或者同一列，使用flex 布局进行约束。
7 做标注
标注功能的实现大致分为四步：
拿到目标页面的json数据 将json数据渲染成页面骨架 在选中页面元素（文本、图片或其它容器）时获取该文本位置和尺寸信息，高亮该文本框，移开鼠标，标识其宽高信息 在第3步前提下，在目标页面移动鼠标，通过元素的相对位置和尺寸信息，画出相应的标注信息，包括间距、对齐辅助线、参考辅助线等
以上就是标注功能的概览，下面展开说明实现细节
第一步：获取目标页面json数据
通过以上步骤将图层数据处理成json文件并存储在数据库。该json文件包含了目标页面所需要的全部信息，包括容器、图片、文本等元素，这些元素都依赖一些共同的属性，比如尺寸（size）、位置（posititon），同时又各自有着自己特殊的属性，比如：
图片：依赖资源链接（src） 文本：依赖字体样式，如字体大小（fontSize）、颜色（color）、字粗（fontWeight）等。
第二步：将json数据渲染成页面骨架
在研发过程中，对视觉稿的依赖度很高。基于json数据渲染出的页面还原度虽然很高，但相比原始图片还是有细微差别的。为了保证更好的开发体验，这里做了如下优化处理：
根据json数据里的元素类型，封装成不同的组件，每个组件都拥有完整的样式信息，如下图是一个文本组件的数据。核心属性有：
type：组件类型 position：组件位置和尺寸 style：文本的字体样式 将组件拼接成页面骨架并渲染，该过程需要根据json 数据的属性特征，按需渲染组件，过程类似于拼图，最终将组件组装为一个完整的骨架图。骨架图是生成辅助线的基础，将页面所有的元素用线条表达出来，如下图所有的方块都代表一个页面元素的布局。
第三步：标注页面真实还原
该过程将设计稿的渲染图作为背景图，将骨架屏蒙在渲染图上，视觉上你看到的将是和设计图1：1 的效果。因为渲染图上方有骨架图，当鼠标选中对应的元素的时候，等同于选中了骨架图，实际选中的是该骨架图对应的组件，由于组件本身包含了全部的样式信息，包括位置和宽高，那么很容易就能给出相应的标注信息。
第四步：添加标注辅助线
当用户选中设计稿元素时，会高亮显示辅助线，并会自动把间距、高度、宽度等相关信息显示出来，具体实现方案如下：
首先选中参考元素，如下图中的actived 移动鼠标到目标元素上，如下图的hover 根据两个元素的相对位置，按需画出上下左右间距，如下图，hover元素在actived左上角，此时要定位到hover相对actived的位置，需要计算出右间距和下间距，标出间距对应的辅助线，至此一种场景的标注便完成了。 基于第3步，完成剩余35种场景的标注，总计36种场景。
开发的标注效果如下：
8 总结
以上是如何实现设计稿标注、切图以及代码的核心技术步骤。包含如何提取设计稿、如何做css代码映射、如何实现标注页面等。
自动生成标注、切图及代码生成技术是一种旨在提高企业产品研发效率，优化设计到开发流程，加速研发进度，以及辅助前端开发人员探索前端智能化道路的技术。
作者介绍
yuhui，现任信也科技移动应用前端研发专家；CC，现任信也科技移动前端研发资深专家
招聘信息
Java、大数据、前端、测试等各种技术岗位热招中，欢迎扫码了解~