开发是否能高质、高效的将设计稿变为最终产品,很大程度取决于设计师的标注工作是否做的细致。使用Adobe XD进行设计,它自带的功能就能一键生成标注链接,常用的蓝湖、PxCook、摹客、Zeplin也都支持Adobe XD。
目前几乎所有的标注工具主要功能都相同:一键生成、自动切图、代码片段生成等,但是,如果你想选择一款免费、支持离线、不用ke学上网也无需让开发安装任何软件的,「标记狮(MarkLion)」可能是目前唯一的选择。
使用「标记狮(MarkLion)」最终可以将设计稿生成一个具有自动标注和切图功能的网页压缩包,解压之后直接双击文件夹中的index.html文件就可以通过默认浏览器打开,左侧可切换画板或图层,画板有缩略图预览,点击画板区域中的任意元素可在右侧查看所选择的元素的标注信息,相关信息在右侧点击可直接复制到剪贴板。
「标记狮(MarkLion)」支持macOS和Windows,官方网址为www.marklion.net,需要同时安装独立客户端和插件,从官网下载客户端安装包安装之后打开无需登录,首次打开客户端点击“安装XD插件”按钮可快速安装相应的插件。
同时安装标记狮客户端和插件之后,在Adobe XD中打开设计文件,标记狮客户端即可看到相应数据,可以仅导出在Adobe XD中所选择的画板,也可以导出已打开文件的全部画板。
在下一步中可以选择图片规格(Web/Android/iOS)、导出包支持范围和重新选择要导出的画板,导出包支持范围分为“完整版功能(默认)”和“精简版(需要部署到HTTP服务,资源包体积缩小一半)”两种,二者区别可点击后方的问号图标查看开发者提供的详细说明。
点击开始导出选择一个要保存在的文件夹,即开始执行导出操作,该操作无需任何网络,可离线导出,“导出包支持范围”选择“完整版功能(默认)”导出的文件也是可以通过浏览器直接查看,无需任何网络。
如果需要使用自动切图功能,需要在Adobe XD中对需要切图的图层添加导出标记,已添加导出标记的图层在网页中可以看到,「标记狮(MarkLion)」可以单独切图,也支持批量切图,还可以修改切图的名称。
另外,根据「标记狮(MarkLion)」官网描述,开发者在之后的版本中也会提供私有云部署功能。