【UI新人一看上手】做一份让程序员满意的标注是什么体验？

做UI设计最大的不同是我们的产出并不是直接可以展示出来，而是要通过开发实现的。而与开发对接最重要的一份资料就是标注图。在标注图上可以显示出我们并不是随意按照好看的标准把元素安排到画面上完事了，每一个构件都是经过思考的理性产出。甚至会变态的去追求数字上的美感，其实logo设计中栅格切圆不也是这样吗（误）~

工具

我们先要准备一个称手的工具

1.马克鳗markman 推荐，大家都推荐

2.PXcook

3.Parker 墙裂推荐，咦我应该去要广告费了

马克鳗什么都好，唯独字有点小，程序员GG都要放大了看，其实这都不算什么事。。。直到我发现了Parker。。

纯PS插件，出来的标注就是图层，随便改，太开心了~氮素好东西都是要钱的 (′◔‸◔`)不要打我马克鳗正式版现在也要钱了

其实什么工具都可以啦，PS里你自己写都行，最重要的是标注的思路对不？

步骤

标注最怕遗漏，新手尤其需要一遍一遍的检查，根据下面6条来标就不会遗漏了

1. 标文字

   

   文字需要标出字号大小和颜色，这里需要注意的是，IOS的字号是以PT为单位（这个PT不是PS里面那个默认的点，因为dpi不同请使用PX为单位设计）Android的字号是以SP为单位，换算方法为2PX=1PT=1SP(以上公式基于Android设计稿为720*1280），记住字号一定是偶数！！！

2. 标颜色

   

   所有你想得到的颜色都要标，用HEX颜色（就是前面井号后面6个数字那种）和RGB两种，除非你跟程序猿已有那种默契纯白纯黑系统默认之外，除了切图之外，全部都要标！啰嗦一句颜色不要乱用，看看规范里面的颜色，最好用6位色值比较规律的，程序猿纯手打一个多累啊你说是不是///

3. 标结构

   
   

   

   
   

   每一个元素，包括文字，图标，色块，各种框各种线，都需要标注出它的长宽、与旁边元素的左右上下间距、与屏幕边缘的距离（居中的话可以不标）

   

   
   

   
   

   

   如果你需要的触摸范围比实际尺寸大，或者对齐方式并不能一眼洞穿，需要告诉程序员以什么尺寸来居中的情况。请用蒙版的样式框出来并告知程序员应该做多大的触摸范围

   请一定记住，全部用偶数偶数偶数！！三遍！（变态如我还要用吉利一点的数字）

4. 标状态

   
   

   

   如果一个设计稿有多种不同的状态，需要分别标注出来，比如这里的阅读器有日间模式和夜间模式，两种模式又分为normal和pressed的状态，就会有4种不同的颜色，要清晰的让程序员知道你考虑到的每一种情况下的颜色~

5. 标交互效果

   

   
   

   一些需要说明的交互效果，能用文字描述的就用文字描述，不能的最好附以动画或者声情并茂的语言沟通 ( ･ิϖ･ิ).....

6. 特殊交代

   

   
   

   在规范里规定好的按钮样式直接写上代号即可，一方面方便了程序员不需要多次定义类似的按钮，更重要的是统一的视觉规范的遵守。

最后

我们的工作已经精益求精无可挑剔的时候，别忘了关心一下辛苦加班的程序猿同事们，也许你也会碰到上下调个1像素的时候，请带好一罐可乐拍TA桌子上，女生可卖萌发嗲男生可称兄道弟，多沟通一下前端实现的原理，设计时候征求下他们的意见怎样做他们会比较方便，相信设计狮和程序猿一定会成为好基友的！