UI那些事——标注篇

标你妹啊——标注那些事

   如何提高程序对界面的还原程度一直是一个让设计师头疼的问题，除了面对面之外，很多时候的沟通方式则是使用标注进行的；那么，如何提供一个清晰明了的标注也成为了每个设计师应具备的技能。

   本文会对介绍部分标注工具并对一些注意事项进行说明，没有耐心的同学请直接看最后一个工具。PS：由于本人脸上写着大大的穷字，所以本文不会涉及sketch及其一大堆十分炫酷实用方便的插件（zeplin什么的我完全不知道！）...不要吐槽我的排版！因为压根没排！

一.外置标注

 外置标注即为在设计图输出之后进行标注。

1.马克鳗(http://www.getmarkman.com/)：

   作为标注界成名极早、知名度极高的马克鳗，自从某次升（shou）级(fei)之后我就没用过了...一是因为有同类型的工具可替换，二是马克鳗仍然不能满足我们的需求。

以下为马克鳗免费版的界面（图中示例为微信界面）：

   马克鳗的功能非常简单，可以标注长宽、坐标、颜色喝文字标记；作为一个老款标注软件并没有什么特别值得介绍的。

2.像素大厨(http://www.fancynode.com.cn/pxcook/home)：

 

   因为出现时间比马克鳗晚，功能又相似，所以被一些人冠上了抄袭的帽子；不过我更倾向于认为是马克鳗的升级版——除了马克鳗原有功能的升级，还添加了更多的功能；下面是像素大厨的主界面：

功能上除了包含马克鳗免费版+收费版（保存编辑进度、导出无水印标注稿）所有功能外，还增加了单位换算、局部放大、切图等额外功能，而且还免费...马克鳗请你一路走好（手动再见）。

外置标注工具大同小异，在实现同等标注的情况下的确比手动标注快很多，但是缺点也很明显：

1.操作仍然复杂且重复率高，工作量甚大；

2.即便保存了标注文件，产品迭代也仍然需要重新标注；

3.程序员接受程度低。

所以使用外标注始终是一个低效的工作和沟通方式，仅作了解即可。

二.内置标注

   内置标注即以PS插件为媒介直接在PS当中进行标注。

1. Assistor PS(http://witstudio.net/en/assistor/download)：

   
   

Assistor PS作为外挂插件的功能并不止在标注上，还包含了建立参考线、单位转换、圆角转换和复制变换等功能；虽然本人一直很喜欢这款插件，不过随着PS的更新和其他插件的出现，Assistor PS的功能都可以用其他方式来实现，也就不那么突出了。

因为官网已挂，所以给出其他网站的一个链接，有兴趣的可以看下介绍：

http://www.uisdc.com/assistor-ps-introduction-1#

2.PARKER(http://www.cutterman.cn/v2/parker)：

   国产PS插件，Cutterman作者出品，主要功能可见上图；与Assistor PS有较多功能重叠，但细微处不及Assistor PS；例如生成的标注层并没有像Assistor PS一样集中在插件生成的组中，而是直接跟在被标注层的下面，这样要隐藏标注就变成了很麻烦的事。

内置标注对比外置标注的区别在于：

   1.功能更全，提供了一些外置标注没有的功能；

   2.操作简便，只需选中图层按相应功能键即可；

   3.最大缺点，标注会显著增加PSD体积。

   虽然功能性更强，使用更方便，但是内置标注仍然没有解决迭代效率低和程序员接受度低的问题。

三.标你妹啊

前面所说内容完全不重要！

前面所说内容完全不重要！

前面所说内容完全不重要！

重说三！

首先先附上标你妹啊的官网：http://www.biaonimeia.com/

然后是一个介绍链接：

http://www.shejidaren.com/biaonimeia-ui-biao-zhu-gong-ju.html

这是一个非常好的站，大家可以收藏一下；

以下引自博文：

“标你妹啊”具备以下特性：

• 标注元素宽高

   选中元素，即显示元素的宽度与高度。无需您在元素上下拖拽画出数据标注

• 标注元素间距

   选中元素，鼠标悬停到其他元素，即可获得之间的间距。

• 标注字体样式

   选择文字，字体颜色、大小、名称等信息一览无余。

• 获取颜色值

   想获取设计界面中某一颜色，只需吸管工具，轻松获取

• px单位自动转换dp/pt

   数据单位值随意转换，不再担心程序猿白眼以待

• 适配分辨率自动识别

   自动判断识别您设计的分辨率，自动适配设备分辨率单位值，2x、3x、4x通通搞定。

简而言之，我们只需要上传就能达到全部标注的效果，而程序猿同学只需点击你的分享就可以在浏览器中根据自己的需要来选择性的查看所需要的部分；

贴一个范例（还是用的微信）：http://dwz.cn/2c9RZW

使用时的一些注意事项（欢迎补充）：

1.图标请务必保证正方形：

   平常的图标直接放会是这种样子：

   但是这并不是我们所希望的样子，所以可以使用剪贴蒙版，贴在一个统一大小的背景上，这样选择的话就会只选中下面的背景图层；

   当然，这实际上也会涉及到切图的一些知识，不在讨论范围内；

2.像素级的控制自己的设计图，保证所有展现元素可选；例如，我使用阴影/描边来做分割线的话是完全选不中的：

   

请乖乖换成线条= =：

3.无法标注的区域请主动沟通，例如使用渐变以及百分比宽度的区域；

4.用Iphone尺寸进行设计时请和Android成员沟通（反之同理）。