设计师如何对⾃⼰的设计稿有效标注
⼀些刚开始做UI设计的设计师不知道怎么标注⾃⼰的设计稿，不知道开发同学都需要哪些尺⼨和信息，做⼀个简单介绍。
设计师如何对设计稿进⾏正确的标注
2016/07/20 ⼤⾬
对刚开始做UI设计的同学来说，什么是导航栏、⼯具栏、菜单栏、状态栏都要迷茫⼀段时间，好不容易明⽩谁是谁了就开始纠结我该⽤哪个尺⼨来设计啊是750*1334？还是375*667？还有Android⼿机，是720还是1080？听说碎⽚化很严重啊，我该怎么做？等这些零零碎碎的知识点都“记”牢了，也设计出了还不错的界⾯出来以后，你满满的成就感可能要被开发的同学给打击的稀碎。原因是你给了不规范的标注图，给了开发不规范的切图，你把开发的同学整的要疯了。
⽤sketch的同学可以飘过了，这篇⽂章写给坚持⽤ps的同学。
现在我们聊聊设计师该如何标注⾃⼰的设计稿给开发同学，才能够愉（BU）快（ZAI）的(MA)玩(NI)耍.
这是我以前的⼀个设计稿，以它为例讲⼀下标注。
好多UI会给出这样的标注。
这样的标注给到开发同学⼿⾥，咋⼀看好像没问题，开发没细看的情况下也不会说什么。但是，他真的开始写的就会崩溃了。
开发的同学为什么崩溃，我们来说⼀下。
⾸先，不管是iOS还是Android，在布局上都是相对布局。准守的也是从上到下、从左到右的原则。设计师给到开发⼿中的有标注图和各个icon。开发同学安装设计师给的标注图来写页⾯。我给的例⼦是720像素宽的Android界⾯，之所以不说页⾯的⾼是多少像素是因为尺⼨太多了。
能够看到我给的标注单位不是px⽽是dp（⾃⾏百度详解），dp的意思是与像素⽆关，是Android为解决碎⽚化问题提出的概念。程序会判断屏幕的分辨率来⾃动适配不同尺⼨的⼿机，当然、icon是要准备多套的。这张标注上的问题有哪些呢？
1)、没有总宽度
ps切图尺寸变小不管设计尺⼨是720（360dp），还是1080（540dp）都要明确标⽰出来。
2）、没有标出icon和图⽚的宽和⾼。
不是你会把icon切出来给开发，就感觉图⽚放到哪个位置就会完美显⽰。icon也是要适配不同屏幕的所以不管是icon还是⽂字都是有宽和⾼的。⼀定要标注出来。
3)、这个不是标注问题，是icon的规范问题。
你有没有发现如果所有的icon都是圆形的，那么你很容易把它们的宽⾼画的⼀样，但是项⽬中我们不会画⼀样的icon。这样我们就不能保证每⼀个icon的宽⾼都是⼀样的。这时候我们就要有⼀个热区的概念，给每⼀个icon都加⼀个⼀样宽⾼的外框，切图的时候是按照外框的宽⾼来切的，这样就保证了icon的统⼀，也增加了icon的点击⾯积（热区）。当然这样做你肯定要花费⼀些精⼒，但是会使你的设计更加可控，要知道你不加热区的情况下负责的开发同学也会加上的，这时候你的标注尺⼨就变得⽆效，你要花费更多精⼒去协调。⽽且、你⽤markman或像素⼤厨标注设计稿时，你怎么确定icon的边、⽂字的边。要知道，不同的字体占⽤的⾼度是不⼀样的，你要是知道⼀些CSS知识，你会发现不同字体的“padding”是不⼀样。
体的“padding”是不⼀样。
下⾯标出⼀个相对完善的标注图给⼤家
icon下⾯的灰⾊部分就是我说的热区（⽅便讲解才显⽰出来），也是我画图标的时候的⼀个参照。这
样icon 就会是⼀样的⼤⼩。包括图⽚的宽⾼也是，字体下⾯的灰⾊是字体所在的位置，这样的标注图给开发同学就会很好理解，即便是要你去交代⼀下，也会很明⽩的讲清楚，⼤⼤的提⾼了沟通效率，和⼯作效率。
为什么要这么⿇烦的整理icon
我画icon时会有意识的注意到宽⾼⽐例，所以感觉有热区和没热区的区别不⼤，但是看最后的搜索图标，是不是很明显的不⼀样。如果所有的icon或图标都没有⼀个规范的话，想想都知道开发按着你给的标注写出来的界⾯不会理想。所以，规范⾃⼰的设计习惯对整个开发都起到积极的作⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。