ui界面自动生成标注html,UI自动标注神器--标记狮导出自动标注教程

一. 导出本地包资源

1.1 适用条件

适合没有开通私有云服务的用户使用，通过第三方传输软件发送和接收导出的标注包zip文件。

1.2 设置切图

在Adobe XD 中标记需要生成的切图，导出标注包后，在设计图详情页，开发就可以一键下载多倍数切图文件。

1.3 选择“导出本地文件”

用xd打开您需要导出标注的设计稿，在标记狮中选择导出本地文件，您需要进一步选择您需要导出的图片规格以及导出的包支持的范围，主要目的是为了不影响开发使用的情况下，减少导出的包大小。

◆ 选择导出图片规格：

分三个平台：iOS、android、web

比如您的开发日常只需要使用2x的切图，您就只需要勾选相应的2x规格就可以了，这样导出的包资源会相对较小，开发也能在包内下载2x的切图。

如果您的开发需要选择到所有规格的图片，您就全选规格就可以了。

◆ 选择导出包支持范围：

我们提供了完整版(默认)和精简版两种方式，那么这个选项"完整版"和"精简版"有什么差别呢?

完整版比精简版多了在导出的压缩包中增加了切图资源的base64编码资源,这使得完整版的包资源会比精简版的包资源大一倍.

为什么要增加这个切图资源的base64编码资源呢,

标记狮在本地HTML中提供了下载切图的功能,但因为浏览器的安全策略,使得在访问本地html文件时限制了JavaScript发起请求的行为,该限制影响了标记狮为您批量下载切图的功能,

增加base64编码资源能兼容浏览器安全策略使您在本地直接打开导出的html时能够下载/批量下载/重命名切图,保障您能使用下载切图这个功能.如下图:

而精简版的导出包中则不含base64资源的相关目录,所以它会比完整版在解压前后节省50%的空间,所以我们建议您在有条件的情况下选择精简版导出,那么您该在什么场景下使用精简版选项呢?

您的局域网中存在HTTP服务器;

您想统一管理,不打算直接将zip传递给其它人使用;

您打算将导出的标注包解压到HTTP服务器下,直接使用http网址在内部网络分享,而不是直接通过传递ZIP包的方式分享标注;

若您对标记包的使用场景符合上述场景,那么您可以选择精简版资源包,它将为您的HTTP服务器节省存储空间.

软件会记录您上一次的选择，所以如果您没有更改意向就无需修改。

◆ 选择导出内容

选择好导出的画板或全部画板，点击开始导出按钮，即可导出本地标注包。

二. 提交资源至私有云

1.1 适用条件

购买了标记狮私有云服务的用户

1.2 设置切图

在Adobe XD 中标记需要生成的切图，导出标注包后，在设计图详情页，开发就可以一键下载多倍数切图文件；

1.3 选择“提交到私有云”

用xd打开您需要导出标注的设计稿，在标记狮中选择提交到私有云，在完成提交前需要选择几项：

◆ 选择导出图片规格：

分三个平台：iOS、android、web

比如您的开发日常只需要使用2x的切图，您就只需要勾选相应的2x规格就可以了，这样导到服务器的包资源会相对较小，也不会影响开发也能在包内下载2x的切图。

如果您的开发需要选择到所有规格的图片，您就全选规格就可以了。

◆ 选择提交的私有云：

选择您的文件要提交的私有云。

◆ 选择要提交到的文件夹：

私有云支持创建无限层级的文件夹，有便于团队内管理设计资源，您可以将现有的文件提交到已建立的文件夹，或新建一个文件夹。

软件会记录您上一次的选择，所以如果您没有更改意向就无需修改。

◆ 选择导出内容

选择好导出的画板或全部画板，点击开始导出按钮，即可上传标注资源图到私有云。