UI那些事——标注篇2

        自从换上mac+sketch之后，用得十分欢乐不思蜀，早已不知标注为何物；本篇文章主要是对mac上两个常用标注工具进行对比（填坑），供君选择；可下载本文发布时最新mac上的两个插件安装包，win下的sketch因为比较大所以还是得从官网下。

一.简介

        即便设计软件从PS换到Sketch，标注也一样是设计师的一大痛点；所以Sketch自然而然的也出现了很多标注插件；其中Zeplin（后文简称ZE）和Sketch Measure（后文简称SM）以其简便的操作、完善的功能再加上不断地迭代从众多产品中脱颖而出，成为了主流（在此为Marketch点一盏灯）。

        这两个插件上手几乎零成本，没有用过的可以看下下面两个官方链接，或者看完功能对比之后再进行选择，可以节约一点时间。

zeplin：https://zeplin.io/

sketch measure：http://sketch.im/plugins/1?from=ad

二.对比

1.基本信息：

        a)ZE支持WIN/MAC下的sketch/PS，SM都只支持MAC下sketch使用；所以说，如果只有WIN的话那只能选Zeplin了（当然，还有标你妹）。

        b)ZE的免费用户只能新建一个项目，所以并不是那么方便；本来有考虑成为付费用户，但是价格方面有点不那么贴近吾等平(贫)民的样子…即便是最便宜的包年套餐，每月也要近120人民币，还只能建3个项目；所以，我乖乖申请了好几个账号，反正是项目邀请制，多点几下邀请就行了；或者通过项目内的标签功能进行分类。

        而SM开源项目，完全免费，感谢制作者（utom，灰常厉害，为表谢意在写本文的时候支付宝了50请作者喝咖啡）！

        c)工作模式：ZE需要网络连接，可在线更新；但是网络需求也可能成为ZE的硬伤；如果网络有问题，或是公司考虑网上共享的安全性，那就直接等于给ZE判了死刑；

网不好的时候很尴尬

        SM不需要网络，从源文件中打包HTML文件后本地直接打开，安全，但更新/同步略麻烦；

2.  功能；

        a)    标注功能：

        ZE和SM都有全自动标注功能，这也是我们使用得最多的功能；

        SM多了一个手动着重标记；这个功能还是很方便的，比如某个页面布局是基于固定像素，但是某个元素我想使用百分比，这时候着可以着重标注出来；此功能可以单独标注出所有自动标注所包含的属性，但是不建议过多使用，一是全是重点等于没有重点，二是标注太多和手动标注就没区别了…请好好偷懒！ 

        

        备注功能ZE和SM都有，只是使用方式和形式不大一样； ZE是在上传之后进行，因为可以进行回复，其功能也比较类似于“讨论”；备注物不属于sketch内容，可保持源文件的纯洁。

        SM则需要先在sketch文件中新增一个文字图层，点击按钮之后自动生成；SM的手动标注和备注功能和老式的标注软件一样，会增加源文件的图层和体积，算是个小缺点；

     图片来自官网

        b)切图功能：        

        首先，两者都必须要在sketch打了切图标记之后才能进行切图。

        ZE能看到当前画板的所有切图，可以选择单独或者打包输出，格式方面可以输出PNG\PDF，但是不管你切图标记打的是几倍图，输出图都必须包含全部1、2、3倍图，即便有时候我们并不需要所有切图；

        

        SM把当前文档中所有画板的切图都放到切图面板中，如果可以批量输出就是很好的功能；但是现在的情况是，即无法批量输出，又无法输出非当前画板内容——点击非当前画板的切图会给出提示“切图不在当前画板”；EXO？！给我看到又不给我用，点击之后既不跳转画板又不提示是在哪个画板，十分具有挫败感…当画板多了之后，这个面板也会显得比较臃肿，建议后面的版本只显示当前画板切图就可以了； 然后是SM只能输出你所标记的倍数图；例如某一切图标记了2倍，那就只能输出2倍，要输出3倍则要在标记时加上三倍。其实我想的是…做一个标记，输出倍数可以后面再选那多好啊（作为一个免费用户，就是这么矫情。）

        c)guideline：

        guideline在产品设计、实现和维护当中都扮演着重要角色，让我们的行为有章可循，节省大量时间；

        举个例子，在做UIkit的时候我们可以先确定一个通用颜色库（如下图所示），确定所有用到的颜色的名字和用途；完成之后和开发人员沟通，让他们使用同样的方法定义一套颜色（例如前端的class）；那么之后我们如果需要换风格或者换项目，只需要将名字当中对应的颜色值修改掉，就可以打到控制全局的效果；字体样式亦同理。

        ZE和SM都支持部分guideline的功能，主要是颜色管理、字体样式、属性代码输出；现在来对比一下；

        ZE：在上传之后，点击图层可以在右侧看到相应信息——样式名称ariticle_paragraph、颜色C1；

        点击styleguide可以看到文件信息；如果我们保持良好的命名习惯和样式管理，那么只要简单修改颜色名称之后显示如下图所示；代码输出支持swift和objective-c；

        SM的颜色设置需要在源文件中完成，浏览器只负责显示；颜色面板在浏览器左边，点击具体图层可在右边看到属性，同样可以看到样式名称和颜色名，属性输出支持css；颜色面板美中不足的地方，一是无法复制（不要说弄开发者模式…），二是切换颜色代码模式必须先找到一个矢量图层或文字图层，然后点击颜色块来进行切换； 作为颜色总面板来说，便利性不足。

     ZE和SM样式部分的主体功能一致，略有区别；比如ZE的文本可以显示对齐方式，复制文本内容方便，而SM可以显示字间距，复制文本没有ZE方便（这里倒是可以借鉴一下Marketch，点击文本自动复制，并弹出小窗提示用户）。

        这两个都是很棒的工具，只能说更偏爱哪个，而不能说哪个更好；希望各位设计师能从标注中解放出来，可以更专注于设计本身；最后，本篇完，按照现在工具的便利性来说，估计比较长的时间里不用再更新标注的东西了。