大家好，我是No.2，从事UI已经接近5年了，今天给大家分享一些关于标注的技巧。

标注是UI提供给程序员必不可少的东西，程序员按照标注文件实现UI界面的搭建。

一般在APP被实现出来后，设计师还要进行走查验收，会发现实现出来的界面跟设计稿总有出入。但是检查代码却发现，程序员是按照标注的数值写的，那原因是什么？我们一起来探讨。

标注的工具

在讲原因之前，先来讲讲怎么标注。现在标注已经非常简单了，有很多的辅助工具可以使用。

我推荐 “蓝湖” ，大家可以去搜这个名字就能找到。只要上传设计源文件，标注就自动生成，非常方便。具体使用方法也很简单，大家到蓝湖的官网看一下即可，在此我就不多做描述了。

文本上下间隙

说回问题所在，为什么明明根据标注来做了，实现后的效果还是与设计稿不同？

因为程序员在输入文本时，他们的文本框（Lable）并不是完全紧贴文字的，而我们习惯的标注方式以及插件提供的标注方式，都是紧贴文字标注的。

如图。（为方便新人阅读，单位统一使用PX。实际标注中，iOS用PT，Android用DP）

所以往往实现出来的时候，间距都会比较宽。为了解决这个问题，我跟程序员进行了多次沟通，并且通过反复实验。

得出了在实现时，不同字体大小对应的文本框高度。iOS跟Android的文本框高度也不同，如图：

也就是说，我们在标注的时候，把文本框给做出来。再去进行标注，可以最大限度让实际实现的无限接近于设计稿。

可能有人会有疑问：

这样做是否有意义，看上去相差并不多，实现效果并不会特别差？这样是否增加了UI的工作量？降低了效率？

首先解答第1个问题，对于一些文本较少的页面，相差是不多，如果页面文本有3-5处？整体页面偏差可能就达到10-20px了。

如果文本更多，偏差就会积累起来，对于实现效果的影响也是比较大的。

第2个问题，画文本框固然会增加工作量。但是相对于先走查，然后调整，然后再走查验收。两个工作量对比起来，画文本框的时间实在微不足道。

当然，这只是我自己的总结一个方法，如果大家有更好的方法，欢迎指导，也希望可以一起交流，共同成长。

如果对你有所帮助，关注一下，点个赞呗。