关于标注的那些事儿！

我之前做标注都是用大家说的标注神器Markman,确实给我带很多的方便，可是在标注很多元素比较多的界面时我自己的都感觉很是不好意思呀！整个界面都是Markman标志性的红色和各种标注元素，看起来很是费力，到把标注文件给到我们可爱的攻城师的时候，他们都呆了。这 这 这是怎么回事？顿时，我感觉他们像是被无数蚂蚁叮咬的感觉。然后无奈的跟我说了一句，大哥，我今天又要加班节奏呀！

上面的标注我做的也很细致所有元素都是有标注的，而且所有的标注都有知识性的箭头，但是，就是看起来很是费力，因为上面的元素太多了，根本看不过来。从我上面说的的例子，我想说其实标注在设计师眼中也应该当设计来做，在一个产品中也是设计的一部分，更是帮助设计稿高度还原的重要手段。

上面的标注我做的也很细致所有元素都是有标注的，而且所有的标注都有知识性的箭头，但是，就是看起来很是费力，因为上面的元素太多了，根本看不过来。从我上面说的的例子，我想说其实标注在设计师眼中也应该当设计来做，在一个产品中也是设计的一部分，更是帮助设计稿高度还原的重要手段。

可能大家会问，难道你们在设计之前都不讨论的吗？

我们肯定是经过讨论的，并且统一了意见，之所以会出现这样的问题，是因为我们高度依赖所谓的标注神器（Markman)在当时我们没有更好的办法去解决。所以我一直在做一些新的尝试，把相同界面归类，然后，只标注他们不同元素，这样来做就省去了之前那些繁琐又重复的标注元素。但是，之前的问题只是得到了缓解，没有从根本上去解决。而且还有一个重要问题被忽略了，我们在标注的时候还要考虑工程师在开发产品时的开发逻辑。他们在产品开发时首先是得先搭建整体的架构布局，分区分块的把内容分好，然后是完善界面各区域的内容，最后再进行视觉精细化的调整。

那既然我们工作和工程师是分不开的，那么我们是不是把他们的开发逻辑用到我们的标注图上，也分步骤分区分块进行分别标注？这样就符合他们的思维惯性，而且也会提高整个开发效率和降低二次沟通的成本。我们就先标注每个模块间的间距、标注模块与模块的间距、模块与设备屏幕间的间距(考虑适配问题可能好多间距都要采用百分比进行标注)然后再告诉他们字体和颜色值。

那我们就按照之前梳理的逻辑来制作标注图：

1.横向间距：我们横向标注元素的左右的外边间距、元素之间的间距和元素的实际横向宽度。（注意：还要考虑各种宽度的屏幕，所以有的地方要百分比标注）

2.纵向间距：标注元素的上下间距、行高和元素实际的纵向。

3.视觉样式：色值、字体、字号、透明度、圆角。

最终我们会给到前段工程师的效果图：

总结一下，我们上面做的是数字化过程，那我们把标注做好后，就像我之前说的把标注当成设计，还可以更进一步趋完善标注比如用颜色去区分标注的不同类型，提高标注本身的识别度。我自己的习惯是把数字用蓝色底色，间距用中性色绿色。其实更多的是要培养自己这样的思维去发现和解决日常的细节，提高自己的工作效率，也给伙伴带去福利，哈哈！愉悦别人，死磕自己！！不论是当下互联网思维，还是做人做事都是非常珍贵的品质！！